Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Nuxt.jsとFirebaseで 2日間でWebアプリを作った話
Search
Daichi
May 13, 2019
Programming
1
610
Nuxt.jsとFirebaseで 2日間でWebアプリを作った話
2019年5月13日に行われたv-sendai #1で使用したスライドです。
Daichi
May 13, 2019
Tweet
Share
More Decks by Daichi
See All by Daichi
◯◯◯◯◯◯◯◯◯◯を使って簡単なゲームを作ってみた
kandai
0
4
Jamstackの実案件で躓いたことや工夫したこと
kandai
0
1.3k
OpenAPIを使ってAPIドキュメントとモックサーバーを良い感じにした話
kandai
3
3.3k
WordPressサイトをNuxt.js × microCMSのJAMstack構成にリニューアルした話
kandai
1
1.5k
ブラウザの新しいAPIで遊んでみる
kandai
1
1.3k
Gridsome × Headless CMSでJAMstackなWebサイトを作る
kandai
1
990
Media Session APIを使ってPWAの音楽プレイヤーを作る
kandai
0
460
CSS組版で技術書を作った話
kandai
0
360
Web技術だけで作るQRコードリーダー
kandai
2
2k
Other Decks in Programming
See All in Programming
レガシーな Android アプリのリアーキテクチャ戦略
oidy
1
170
のびしろを広げる巻き込まれ力:偶然を活かすキャリアの作り方/oso2024
takahashiikki
1
410
デプロイを任されたので、教わった通りにデプロイしたら障害になった件 ~俺のやらかしを越えてゆけ~
techouse
52
32k
CSC509 Lecture 08
javiergs
PRO
0
110
弊社の「意識チョット低いアーキテクチャ」10選
texmeijin
5
23k
Go言語でターミナルフレンドリーなAIコマンド、afaを作った/fukuokago20_afa
monochromegane
2
140
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
100
Googleのテストサイズを活用したテスト環境の構築
toms74209200
0
270
Kaigi on Rails 2024 - Rails APIモードのためのシンプルで効果的なCSRF対策 / kaigionrails-2024-csrf
corocn
5
3.4k
Nuxtベースの「WXT」でChrome拡張を作成する | Vue Fes 2024 ランチセッション
moshi1121
1
510
Kubernetes for Data Engineers: Building Scalable, Reliable Data Pipelines
sucitw
1
200
go.mod、DockerfileやCI設定に分散しがちなGoのバージョンをまとめて管理する / Go Connect #3
arthur1
10
2.4k
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
290
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
How to train your dragon (web standard)
notwaldorf
88
5.7k
A Tale of Four Properties
chriscoyier
156
23k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
The Pragmatic Product Professional
lauravandoore
31
6.3k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
13
1.9k
Docker and Python
trallard
40
3.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Making Projects Easy
brettharned
115
5.9k
The Invisible Side of Design
smashingmag
297
50k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Transcript
2019.05.13 v-sendai meetup #1 Nuxt.jsとFirebaseで 2日間でWebアプリを作った話
TAM.inc フロントエンドエンジニア 菅家 大地 / Daichi Kanke 自己紹介 •
福島→宮城(6年)→東京と埼玉(10年)→宮城(New!) • デザイナー(異業種)→Webデザイナー→エンジニア • 普段はWebサイトやWebアプリのフロント全般 • v-sendai発起人 • PWA Night / Monaca UG運営 • フロントエンド仙台一緒にやる人いませんか?
• 世界7箇所(6ヶ国)に拠点を持つデジタルエー ジェンシー • 「勝手に幸せになりなはれ」という文化 • 「組織」ではなく「個人」にフォーカスした働き方。 菅家は東京のチーム所属で仙台のenspaceさん を借りてリモートワーク中 •
技術ブログのTipsNote見たことあるかも? TAM?
• 何を作ったか • 使っている技術と仕組み紹介 • 苦労ポイント • 作ってどうだったか アジェンダ
何を作ったか
宮城県といえば?
None
アラバキ2019のマイタイムテーブルの作成・共有ができるWebアプリ「タムテブ」 https://tamutebu-arabaki2019.firebaseapp.com/
なんで作ったか • 周るステージをメモれると便利なのでは? • フェス好きはきっとわかってくれる マイタイムテーブルを作るという楽しみ • さらにそれを共有したいという人はいそう • 新しい技術を試す機会として
• ためてぼ天国が息をしていなかったので • 今回のネタがほしい
リリースまでの道のり • 4月上旬にこういうの作ろうと思う • 1週間前くらいにリリースしようと思う • 現実はそんなにうまくいかない • 実際はフェス前に突貫で制作 •
なんとか2日間で制作・リリースまでできた (NuxtとFirebaseの知識はある程度あった)
技術紹介
Firebase Hosting Cloud Firestore 構成 フロントエンド バックエンド Vue.js Nuxt PWA
Nuxt.js? • Vue.js アプリケーション開発のためのフレームワーク • Vue.jsのサーバーサイドレンダリング用のフレームワークとして、React.jsベー スのSSR用フレームワークであるNext.jsに触発されて開発 • Vue.jsのアプリケーション開発をしやすいディレクトリ構造や、 ファイル構造に沿って自動的にルーティングしてくれる機能など、
開発するうえで便利な機能がたくさん入っています
Firebase? • Googleが提供するmBaaS。mBaaSとはモバイルアプリ開発の バックエンド側のインフラを提供するサービス。 • DB・ホスティング・ストレージ・認証など、 アプリ開発に必要な機能が豊富に揃っている • jsでアクセスするのでフロントのエンジニアでも実装しやすい •
無料で始めることが可能
ページテンプレート タイムテーブル作成画面 pages/index.vue 共有タイムテーブル pages/s/_id.vue
json 2日分の ・ステージ ・出演者 の情報をjsonで作成して、アプリ ケーションに渡すようにする (json作成は手作業…) タイムテーブルの表示
v-forでステージ・出 演者情報をループさ せてHTMLを生成 選択されてる日で データ切り替え computed template タイムテーブルの表示
json 出演者情報に開始時間とステージ の出演時間を持たせる position:absolute で配置。 上記のデータを使い計算してスタイ ルを付与。スタイルのバインディング めっちゃ便利。 (1時間のマスは90pxで実装) 位置の計算
methods
select という要素の状 態をクリックで切り替え る select が true なら、 isSelected のクラスが
付与されるように methods template 選択状態にする
選択時にローカルスト レージを更新する ローカルストレージに データがなければ用意 していたjsonをajaxで 取得しにいく ローカルストレージに保存する(初期 + データに変更があった時) mounted
methods
共有機能 • 「タイムテーブルを共有(更新)」のボタン押下でローカル ストレージのjsonごとFirestoreに保存する (まるごと保存するという雑な実装…) • IDが発行されるので、URL + ID で固有のURL作成。
Nuxtで /pages/s/_id.vue というファイルを作るだけで ルーティングしてくれる!簡単! • SNSの共有機能は各SNSのシェア用のURLを生成
共有機能
こだわりの全体表示 jsで無理やりviewportの値を変 更することで実現
PWA化する PWAとは… • ホームスクリーンに追加することで ネイティブアプリのようなUIを実現できる • 高速に起動する • オフラインでも動作可能 •
プッシュ通知利用可能(現状はAndroidのみ)
Nuxt.js の PWAモジュールを使ってPWA化 • Nuxt.jsにはNuxt PWAというモジュールが用 意されていて、これを有効化するだけで良い感 じにPWA化してくれる • タムテブも有効化してアプリ名などの
設定をしただけです
苦労ポイント
アプリのネーミング • 検索すると既にいろんな場面で使われていたり するので、とりあえず思いついたら検索してみる • 横文字への憧れが邪魔をする • 開発で一番時間を使ったかもしれない • 時間があれば何案か考えて周囲の人に聞いてみたりしたかった
デザインやUI • 見た目はどこまでもこだわれるので時間がかかってしまう • VuetifyなどのUIフレームワーク使う? • 今回は要素が少ないので必要なさそう • フレームワークは意外と学習コストかかる •
今回は最低限の見た目を整えてリリース
機能をできるだけ絞った • 個人で色々考えてると夢が広がりがち • 実際、色々考えていたしこれはやりたいって機能もあった • 目標が高すぎると挫折もしやすい • どーせそんなに使われないし(笑) •
一番怖いのはリリースしないで終わる
作ってどうだったか
自分がめちゃくちゃ使った • はじめに思った通り(思った以上に)便利だった • 夜までやってるけど暗くなっても見れる • 今回は1グループでパンフレット1部だった • 仲間内でも好評。UIの改善要望まで出てきた •
自分がほしいものを作れるって楽しい
他の人にどれくらい使ってもらえたのか • GAで見ると100人弱 • 直接リプライくれたり、作っ て共有してくれてる人も少 しいた • 当たり前だけど、 使ってもらえると嬉しい
今回のまとめ(感想) • Nuxt.jsを使うと環境構築の手間が少なく開発を始めるのが簡単 • Firebaseも無料で始められて組み込みやすいのでおすすめ • 自分が使うものを作るのは楽しい。使われるとさらに嬉しい • 最後までやりきるために締め切りとプレッシャーがあると良い
宣伝 • 実践PWAという本を書いて、 技術書典6で販売しました • 電子版はBOOTH or KindleでPWAで検索 • 見本を持って来てるので読みたい人は
声かけてください
ご静聴ありがとうございました