本スライドは「第25回ゆるはち.it: Vue.js / Nuxt.jsについてゆるく話す」の登壇用資料です。 https://yuruhachi-it.connpass.com/event/194356/
Vue.jsでChrome拡張機能をつくった話第24回 ゆるはち.it登壇資料
View Slide
自己紹介長野県諏訪市出身フロントエンドエンジニアから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 の3種類Chrome拡張機能について今回は新規タブを置き換えたいので Override Pages を使用
・HTMLファイル、manifest.json、アプリアイコン(PNG) だけ・↑をzipで圧縮してストアにアップロードするだけで完了・今回はVue.jsでbuildしたものをzipで圧縮manifest.json zipのなかみ最小限のつくりかた
ストアに申請する_(:3」∠)_② 申請する① 5ドル払う ③ 寝て待つ
公開
・htmlを表示するだけならChrome拡張はカンタン・アプリ化することで「ツール」から「プロダクト」に今後は…・デザイナー向けツールとしての改良・レスポンシブ対応&PWA化してスマホでも使えるようにまとめ
ご清聴ありがとうございましたspott\spottで検索/