Vue.jsで Chrome拡張機能を つくった話 第24回 ゆるはち.it 登壇資料

自己紹介 長野県諏訪市出身 フロントエンドエンジニアからUI/UXデザイナーに転向 自分の気づきを貯めて振り返るアプリ Stockr のデザイン あきねん（小澤 晶徳）

TOP さあ、デザインの旅へ。日々のデザイン業務で便利な「おすすめ スポット」をまとめています。 こんなchrome拡張機能をつくった話をします。

ブラウザに溜まるブックマーク… Notionに整理して運用していた 経緯 経緯 Webアプリ化してホームに設定すれば 毎回開くので便利なのでは？

① Figmaでデザイン せっかくなのでdribbbleっぽく（個人開発ならでは）

・各ページでコンポーネントはほぼ一緒 →html直書きより共通化させたほうが早い ・vue-routerでルーティング制御 ・SPA(Single Page Application)に ・CSSはStylusを使用（BEM） ② Vue.jsで実装 ▲共通化

ひとまず完成 TOP さあ、デザインの旅へ。日々のデザイン業務で便利な「おすすめ スポット」をまとめています。

ただ作っただけでは 誰にも使ってもらえない…。 しばらくして… Chrome拡張機能にすれば よいのでは？

・ブラウザ右上に表示する Browser actions ・アドレスバーに表示する Page actions ・ブラウザの画面を置き換える Override Pages の３種類 Chrome拡張機能について 今回は新規タブを置き換えたいので Override Pages を使用

・HTMLファイル、manifest.json、アプリアイコン(PNG) だけ ・↑をzipで圧縮してストアにアップロードするだけで完了 ・今回はVue.jsでbuildしたものをzipで圧縮 manifest.json zipのなかみ 最小限のつくりかた

ストアに申請する _(:3」∠)_ ② 申請する ① 5ドル払う ③ 寝て待つ

公開

・htmlを表示するだけならChrome拡張はカンタン ・アプリ化することで「ツール」から「プロダクト」に 今後は… ・デザイナー向けツールとしての改良 ・レスポンシブ対応＆PWA化してスマホでも使えるように まとめ

ご清聴ありがとうございました spott ＼spottで検索／