Slide 1
Slide 1 text
2019.05.26 ABC 2019 Spring
Nuxt.jsとFirebaseを使って
簡単にPWA開発をする
TAM.inc / PWA Night 菅家大地
Slide 2
Slide 2 text
TAM.inc フロントエンドエンジニア
菅家 大地 / Daichi Kanke
自己紹介
● 元デザイナーのフロントエンドエンジニア
普段はWebサイトやWebアプリのフロント全般
● 福島→宮城→東京と埼玉→宮城(New!)
● v-sendai 運営メンバー
● PWA Night 運営メンバー
@kan_dai
@kan_dai
@kan_dai
@KanDai
Slide 3
Slide 3 text
● PWAをテーマにした勉強会
● 2019年2月より毎月開催
● PWAを技術やビジネス面から捉
えてコミュニケーション
● エンジニアだけでなく、
PWAに興味がある方大歓迎！
PWA Night?
Slide 4
Slide 4 text
イメージキャラクターの
pwan(ぷわん)です
Slide 5
Slide 5 text
ちょっと似てる…？？
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
今日のテーマ
Nuxt.jsを使った簡単PWA構築
Slide 8
Slide 8 text
Nuxt.js?
Vue.js アプリケーション開発するうえで
便利な機能がたくさん入っているフレームワーク
Slide 9
Slide 9 text
実際に作ったもの紹介
Slide 10
Slide 10 text
● 社内向けを想定したアプリで技術書典のサン
プルアプリとして制作
● 社内の業務用アプリなどの場合は
デスクトップPWAが相性良いかも
● Nuxt.js + Firebaseで作成
● 実装期間は5日間程度
社内向け書籍管理アプリ
Slide 11
Slide 11 text
● 4月にあったイベントのアプリとして作成
● 気軽に開発してリリースができるので
個人開発には嬉しい
● Nuxt.js + Firebaseで作成
● 実装・リリースまで2日間
フェスのマイタイムテーブル作成
https://tamutebu-arabaki2019.firebaseapp.com/
Slide 12
Slide 12 text
とはいえPWAって色々めんどくさいのでは？
Slide 13
Slide 13 text
Nuxt.js の PWAモジュールで簡単にPWA化ができる
● Nuxt.jsにはNuxt PWAというモジュールが
用意されていて、これを有効化するだけで
良い感じにPWA化してくれる
● 紹介したアプリも有効化してアプリ名など
の設定をしただけです
Slide 14
Slide 14 text
Workbox
● 簡単な記述で最適なServiceWorkerのコードを生成してくれるGoogle
製のライブラリ
● オプションで色々と指定できますが特に設定しなくてもOK
● すごく雑に言うとNuxtで有効化しておくと、良い感じにキャッシュしてく
れる
Slide 15
Slide 15 text
Manifest / Meta / Icon
● PWAに必要なマニフェストファイルを自動生成
● metaもプロジェクト情報から自動で設定してくれる
● 大きめのアイコンを一つ用意するだけでサイズ違いのアイコンを作成
してくれる
● 地味にめんどくさいこれらの作業も自動でやってくれる。
必要であれば「nuxt.config.js」で上書き可能
Slide 16
Slide 16 text
OneSignal
● 無料で利用可能なプッシュ通知サービス
● OneSignalのサービスに登録し、PWA
Moduleと別途でonesignalのライブラリを追加
することで使用できるようになる
Slide 17
Slide 17 text
実際に試してみる
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
// インストール ※nodeはインストールしている想定
// Progressive Web App (PWA) Supportを選択する
$ npx create-nuxt-app
// ディレクトリ移動
$ cd
// ローカルサーバーを起動
$ npm run dev
Slide 20
Slide 20 text
/pages/index.vue
Slide 21
Slide 21 text
/pages/index.vue
Slide 22
Slide 22 text
/pages/index.vue
Slide 23
Slide 23 text
// ビルド
$ npm run build
// firebaseのプロジェクト作成 ※firebase toolsはインストールしている想定
$ firebase init
// firebaseにデプロイ
$ firebase deploy
Slide 24
Slide 24 text
完成
サイト https://tap10s.web.app/
GitHub https://github.com/KanDai/tap10
Slide 25
Slide 25 text
気軽にPWA楽しみましょう！
ご静聴ありがとうございました！