Slide 1
Slide 1 text
2019.05.13 v-sendai meetup #1
Nuxt.jsとFirebaseで
2日間でWebアプリを作った話
Slide 2
Slide 2 text
TAM.inc フロントエンドエンジニア
菅家 大地 / Daichi Kanke
自己紹介
● 福島→宮城(6年)→東京と埼玉(10年)→宮城(New!)
● デザイナー(異業種)→Webデザイナー→エンジニア
● 普段はWebサイトやWebアプリのフロント全般
● v-sendai発起人
● PWA Night / Monaca UG運営
● フロントエンド仙台一緒にやる人いませんか？
Slide 3
Slide 3 text
● 世界7箇所(６ヶ国)に拠点を持つデジタルエー
ジェンシー
● 「勝手に幸せになりなはれ」という文化
● 「組織」ではなく「個人」にフォーカスした働き方。
菅家は東京のチーム所属で仙台のenspaceさん
を借りてリモートワーク中
● 技術ブログのTipsNote見たことあるかも？
TAM?
Slide 4
Slide 4 text
● 何を作ったか
● 使っている技術と仕組み紹介
● 苦労ポイント
● 作ってどうだったか
アジェンダ
Slide 5
Slide 5 text
何を作ったか
Slide 6
Slide 6 text
宮城県といえば？
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
アラバキ2019のマイタイムテーブルの作成・共有ができるWebアプリ「タムテブ」
https://tamutebu-arabaki2019.firebaseapp.com/
Slide 9
Slide 9 text
なんで作ったか
● 周るステージをメモれると便利なのでは？
● フェス好きはきっとわかってくれる
マイタイムテーブルを作るという楽しみ
● さらにそれを共有したいという人はいそう
● 新しい技術を試す機会として
● ためてぼ天国が息をしていなかったので
● 今回のネタがほしい
Slide 10
Slide 10 text
リリースまでの道のり
● 4月上旬にこういうの作ろうと思う
● 1週間前くらいにリリースしようと思う
● 現実はそんなにうまくいかない
● 実際はフェス前に突貫で制作
● なんとか2日間で制作・リリースまでできた
(NuxtとFirebaseの知識はある程度あった)
Slide 11
Slide 11 text
技術紹介
Slide 12
Slide 12 text
Firebase Hosting
Cloud Firestore
構成
フロントエンド
バックエンド
Vue.js
Nuxt PWA
Slide 13
Slide 13 text
Nuxt.js?
● Vue.js アプリケーション開発のためのフレームワーク
● Vue.jsのサーバーサイドレンダリング用のフレームワークとして、React.jsベー
スのSSR用フレームワークであるNext.jsに触発されて開発
● Vue.jsのアプリケーション開発をしやすいディレクトリ構造や、
ファイル構造に沿って自動的にルーティングしてくれる機能など、
開発するうえで便利な機能がたくさん入っています
Slide 14
Slide 14 text
Firebase?
● Googleが提供するmBaaS。mBaaSとはモバイルアプリ開発の
バックエンド側のインフラを提供するサービス。
● DB・ホスティング・ストレージ・認証など、
アプリ開発に必要な機能が豊富に揃っている
● jsでアクセスするのでフロントのエンジニアでも実装しやすい
● 無料で始めることが可能
Slide 15
Slide 15 text
ページテンプレート
タイムテーブル作成画面
pages/index.vue
共有タイムテーブル
pages/s/_id.vue
Slide 16
Slide 16 text
json 2日分の
・ステージ
・出演者
の情報をjsonで作成して、アプリ
ケーションに渡すようにする
(json作成は手作業…)
タイムテーブルの表示
Slide 17
Slide 17 text
v-forでステージ・出
演者情報をループさ
せてHTMLを生成
選択されてる日で
データ切り替え
computed
template
タイムテーブルの表示
Slide 18
Slide 18 text
json
出演者情報に開始時間とステージ
の出演時間を持たせる
position:absolute で配置。
上記のデータを使い計算してスタイ
ルを付与。スタイルのバインディング
めっちゃ便利。
(1時間のマスは90pxで実装)
位置の計算
methods
Slide 19
Slide 19 text
select という要素の状
態をクリックで切り替え
る
select が true なら、
isSelected のクラスが
付与されるように
methods
template
選択状態にする
Slide 20
Slide 20 text
選択時にローカルスト
レージを更新する
ローカルストレージに
データがなければ用意
していたjsonをajaxで
取得しにいく
ローカルストレージに保存する(初期 + データに変更があった時)
mounted
methods
Slide 21
Slide 21 text
共有機能
● 「タイムテーブルを共有(更新)」のボタン押下でローカル
ストレージのjsonごとFirestoreに保存する
(まるごと保存するという雑な実装…)
● IDが発行されるので、URL + ID で固有のURL作成。
Nuxtで /pages/s/_id.vue というファイルを作るだけで
ルーティングしてくれる！簡単！
● SNSの共有機能は各SNSのシェア用のURLを生成
Slide 22
Slide 22 text
共有機能
Slide 23
Slide 23 text
こだわりの全体表示
jsで無理やりviewportの値を変
更することで実現
Slide 24
Slide 24 text
PWA化する
PWAとは…
● ホームスクリーンに追加することで
ネイティブアプリのようなUIを実現できる
● 高速に起動する
● オフラインでも動作可能
● プッシュ通知利用可能(現状はAndroidのみ)
Slide 25
Slide 25 text
Nuxt.js の PWAモジュールを使ってPWA化
● Nuxt.jsにはNuxt PWAというモジュールが用
意されていて、これを有効化するだけで良い感
じにPWA化してくれる
● タムテブも有効化してアプリ名などの
設定をしただけです
Slide 26
Slide 26 text
苦労ポイント
Slide 27
Slide 27 text
アプリのネーミング
● 検索すると既にいろんな場面で使われていたり
するので、とりあえず思いついたら検索してみる
● 横文字への憧れが邪魔をする
● 開発で一番時間を使ったかもしれない
● 時間があれば何案か考えて周囲の人に聞いてみたりしたかった
Slide 28
Slide 28 text
デザインやUI
● 見た目はどこまでもこだわれるので時間がかかってしまう
● VuetifyなどのUIフレームワーク使う？
● 今回は要素が少ないので必要なさそう
● フレームワークは意外と学習コストかかる
● 今回は最低限の見た目を整えてリリース
Slide 29
Slide 29 text
機能をできるだけ絞った
● 個人で色々考えてると夢が広がりがち
● 実際、色々考えていたしこれはやりたいって機能もあった
● 目標が高すぎると挫折もしやすい
● どーせそんなに使われないし(笑)
● 一番怖いのはリリースしないで終わる
Slide 30
Slide 30 text
作ってどうだったか
Slide 31
Slide 31 text
自分がめちゃくちゃ使った
● はじめに思った通り(思った以上に)便利だった
● 夜までやってるけど暗くなっても見れる
● 今回は１グループでパンフレット1部だった
● 仲間内でも好評。UIの改善要望まで出てきた
● 自分がほしいものを作れるって楽しい
Slide 32
Slide 32 text
他の人にどれくらい使ってもらえたのか
● GAで見ると100人弱
● 直接リプライくれたり、作っ
て共有してくれてる人も少
しいた
● 当たり前だけど、
使ってもらえると嬉しい
Slide 33
Slide 33 text
今回のまとめ(感想)
● Nuxt.jsを使うと環境構築の手間が少なく開発を始めるのが簡単
● Firebaseも無料で始められて組み込みやすいのでおすすめ
● 自分が使うものを作るのは楽しい。使われるとさらに嬉しい
● 最後までやりきるために締め切りとプレッシャーがあると良い
Slide 34
Slide 34 text
宣伝
● 実践PWAという本を書いて、
技術書典6で販売しました
● 電子版はBOOTH or KindleでPWAで検索
● 見本を持って来てるので読みたい人は
声かけてください
Slide 35
Slide 35 text
ご静聴ありがとうございました