埋め込みスクリプト作成の所感とこれからの需要
使うツールは下記で試してみた。特に目新しくもなくさっさと作成&検証したいと考えている
Svelte
Vite
目的
ShopifyやBaseなどのネットショップ作成が流行っている昨今、このプラットフォームだけでは足りないウィジェットを個人で作成したJSスクリプトタグで賄えるのではないかと感じたのが背景
作成したJSスクリプトタグをウィジェットと身立てて任意のhtmlの中に埋め込んでみる
プロジェクト作成
こちらのドキュメント通りで進めてみるnpm create vite@latest
キャプチャのように選択する
- svelte
- svelete-ts
動かしてみる
cd SampleJSwithSvelte
npm install
npm run dev
localhost:3000 でローカルで動いているのを確認する
例えば
Udemyでよく見かけるインフォーメーションバー
これに近しいのものを埋め込みできたらうれしい
実装コードは今回省かせていただき
Svelteの方でhtml / css を好みでコーディング
vite.config.js
このままプロジェクト作成したViteのデフォルト設定のままであると
css と sourceMap は別のファイルとしてビルド作成されるので
javascriptの中で完結(コンパイルされる)よう設定しておく
vite.config.js
export default defineConfig({
plugins: [
svelte({
emitCss: false,
}),
],
build: {
manifest: true,
rollupOptions: {
input: '/src/main.ts',
output: {
manualChunks: undefined
}
},
sourcemap: false
},
})
かつての筆者のスクラップを恐縮ながら参考
埋め込み
- ビルド
npm run build
画像などのアセットはあらかじめ microCMSなどで格納しておきURLから取得という感じもありである
const app = new App({
target: document.getElementById('app')
})
<div id="app"></div>
<script type="module" src="https://hogehoge.com/main.9bed8c83.js"></script>
紐付けるidが被らないようにしてSvelteの方と紐付けしておけば2行のスクリプトを埋め込めば
自作ウィジェットが簡単に使える
変動的流動的なデータは microCMS、firestore, Hasuraなどで格納しておきそれぞれのAPIから取得しウィジェットに反映するような仕様もあり。むしろその方が良いだろう
埋め込みスクリプトの需要
結論から確実に増えていくだろう。
個人でネットショップ、ブログを運営しているユーザーが増えていく中、プラットフォームだけでは完結しないスタイルのウィジェットへの要望がでてきて、その隙間の需要に応えていくというのも一つの生き残っていく(私=オワコンエンジニア)戦術でもある
埋め込みスクリプトからの何かプラスアルファがあれば一気に要望とそれに対する受注が可能になっていく感じはする
Author And Source
この問題について(埋め込みスクリプト作成の所感とこれからの需要), 我々は、より多くの情報をここで見つけました https://zenn.dev/kbk/articles/e0a21036b93660著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol