Vue.jsでChrome拡張機能をつくった話 / Created a Chrome extension in Vue.js

本スライドは「第25回ゆるはち.it: Vue.js / Nuxt.jsについてゆるく話す」の登壇用資料です。
https://yuruhachi-it.connpass.com/event/194356/

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. 公開
    

    View Slide

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

    View Slide

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

    View Slide