🐈

埋め込みスクリプト作成の所感とこれからの需要

2022/04/29に公開約2,000字

使うツールは下記で試してみた。特に目新しくもなくさっさと作成&検証したいと考えている

Svelte

https://svelte.dev

Vite

https://ja.vitejs.dev

目的

ShopifyやBaseなどのネットショップ作成が流行っている昨今、このプラットフォームだけでは足りないウィジェットを個人で作成したJSスクリプトタグで賄えるのではないかと感じたのが背景

作成したJSスクリプトタグをウィジェットと身立てて任意のhtmlの中に埋め込んでみる

プロジェクト作成

https://ja.vitejs.dev/guide/#最初の-vite-プロジェクトを生成する
こちらのドキュメント通りで進めてみる
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
  },
})

かつての筆者のスクラップを恐縮ながら参考

https://zenn.dev/kbk/scraps/00e8fa5c25b703

埋め込み

  1. ビルド
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から取得しウィジェットに反映するような仕様もあり。むしろその方が良いだろう

埋め込みスクリプトの需要

結論から確実に増えていくだろう。

個人でネットショップ、ブログを運営しているユーザーが増えていく中、プラットフォームだけでは完結しないスタイルのウィジェットへの要望がでてきて、その隙間の需要に応えていくというのも一つの生き残っていく(私=オワコンエンジニア)戦術でもある

埋め込みスクリプトからの何かプラスアルファがあれば一気に要望とそれに対する受注が可能になっていく感じはする

Discussion

ログインするとコメントできます