Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Nuxt.jsとFirebaseを 使って簡単にPWA開発をする

Daichi
May 26, 2019

Nuxt.jsとFirebaseを 使って簡単にPWA開発をする

2019年5月26日に行われたABC 2019 Springで使用したスライドです。

スライド内のリンク
Nuxt.js:https://nuxtjs.org/
PWA Night:https://pwanight.connpass.com/
タムテブ:https://tamutebu-arabaki2019.firebaseapp.com/
タップ10サイト: https://tap10s.web.app/
タップ10GitHub:https://github.com/KanDai/tap10

Daichi

May 26, 2019
Tweet

More Decks by Daichi

Other Decks in Technology

Transcript

  1. TAM.inc フロントエンドエンジニア 
 菅家 大地 / Daichi Kanke 自己紹介 •

    元デザイナーのフロントエンドエンジニア
 普段はWebサイトやWebアプリのフロント全般
 • 福島→宮城→東京と埼玉→宮城(New!)
 • v-sendai 運営メンバー
 • PWA Night 運営メンバー
 @kan_dai @kan_dai @kan_dai @KanDai
  2. • 4月にあったイベントのアプリとして作成
 • 気軽に開発してリリースができるので
 個人開発には嬉しい
 • Nuxt.js + Firebaseで作成
 •

    実装・リリースまで2日間
 フェスのマイタイムテーブル作成
 https://tamutebu-arabaki2019.firebaseapp.com/

  3. Manifest / Meta / Icon • PWAに必要なマニフェストファイルを自動生成 • metaもプロジェクト情報から自動で設定してくれる •

    大きめのアイコンを一つ用意するだけでサイズ違いのアイコンを作成 してくれる • 地味にめんどくさいこれらの作業も自動でやってくれる。 必要であれば「nuxt.config.js」で上書き可能
  4. // インストール ※nodeはインストールしている想定 // Progressive Web App (PWA) Supportを選択する $

    npx create-nuxt-app <project-name> // ディレクトリ移動 $ cd <project-name> // ローカルサーバーを起動 $ npm run dev