Nuxt.jsとFirebaseでWebアプリを作った話 2nd

スライド内のリンク

前回のスライド
https://speakerdeck.com/kandai/nuxt-dot-jstofirebasede-2ri-jian-dewebapuriwozuo-tutahua

タムテブアラバキ2019
https://tamutebu-arabaki2019.firebaseapp.com/

タムテブRSR2019
https://tamutebu-rsr-2019.firebaseapp.com/

Slackの自分宛のDMをスプレッドシートに貯めていく
https://qiita.com/kan_dai/items/c0c548cbf716ad392fe7

スプレッドシートに書いた当番表の日付が来たらSlackに通知
https://www.tam-tam.co.jp/tipsnote/javascript/post8499.html

Vue Draggable
https://github.com/SortableJS/Vue.Draggable

Transcript

1. 2019.09.06　v-sendai meetup #3 Nuxt.jsとFirebaseで
 Webアプリを作った話 2nd
2. 株式会社TAM フロントエンドエンジニア
 菅家 大地 / Daichi Kanke 元デザイナーのフロントエンドエンジニア
 福島→宮城→東京→宮城(New!)
 v-sendai / 仙台フロントエンドUG / PWA Night 
 Vue.js / Nuxt.js / PWA / Monaca 
 daichi.kanke @kan_dai
3. • 前回までのあらすじと今回作ったもの
 • GASを使ったスクレイピング
 • Vue.Draggableを使った新機能
 • データ構造を見直した話 アジェンダ
4. 前回までのあらすじ

5. v-sendai #01でも話したこれの続きです https://speakerdeck.com/kandai/nuxt-dot-jstofirebasede-2ri-jian-dewebapuriwozuo-tutahua
6. アラバキ2019のマイタイムテーブルの作成・共有ができるWebアプリ 「タムテブ」をNuxt.jsとFirebaseを使って2日で作りました https://tamutebu-arabaki2019.firebaseapp.com/
7. タムテブ RISING SUNROCK FESTIVAL 2019 https://tamutebu-rsr-2019.firebaseapp.com/ 今回作ったもの
8. GASを使ったスクレイピング

9. タイムテーブルの表示の仕組み • ステージ・時間・アーティスト情報などをもったjsonを 取得してタイムテーブルを表示している • アラバキの時は手作業でjson作成 • 手作業はつらい • そこでGAS！
10. GAS ? • 正式には Googe Apps Script • Googleドキュメントやスプレッドシートで動く スクリプト環境で • ExcelのVBAのようなイメージ • ほぼJavaScript
11. Slackの自分宛のDMをスプレッドシートに貯めていく https://qiita.com/kan_dai/items/c0c548cbf716ad392fe7
12. スプレッドシートに書いた当番表の日付が来たらSlackに通知 https://www.tam-tam.co.jp/tipsnote/javascript/post8499.html
13. サイトのスクレイピングもできる 一定のルールに沿ってHTMLが組まれていたのでいけそう
14. 指定したURLのHTMLを 取得 色々省略してますが雰囲気こんな感じ 正規表現で頑張って該 当箇所を絞り込んで取得 していく スプレッドシートに書き込 む
15. 結果 あとはCSVに書き出し → jsonに変換すればOK
16. Vue.Draggableを使った新機能

17. ドラッグ&ドロップでのリスト並び替えをお手軽に実装できるライブラリ https://github.com/SortableJS/Vue.Draggable
18. script 最小限これだけ template
19. ステージの並びを自分のわかりやすいようにカスタマイズできるように
20. タムテブはこんな感じ
21. ソートできない状態でもドラッグだけはできてしまう問題
22. タムテブはこんな感じ isSortModeが `true` に なった時にhandle用の classが付くように することで対応 ↑ ↑
23. データ構造を見直した話

24. 日付・ステージごとに別れて、その中にアー ティストの情報が入っている。 選択しているかどうかの情報も一緒に持っ ている。 LocalStorage・Firebaseにもそのまま保存 している。 前回のjsonの構造
25. 抱えていた問題 • 単純にデータ量が増える • タイムテーブルに変更があった時に対応できない ◦ すでに共有されているデータはそのまま ◦ 上書きするとユーザーが選択している アーティスト情報も上書きされる
26. • IDをつけて全てのアーティスト情報を フラットに管理 • ステージ情報や日付もアーティストの情報 の中に持たせる 今回のjsonの構造
27. 選択されているアーティストは配列にIDを保存する仕様に変更
28. 選択されているアーティストの情報 配列にIDが含まれて いるかで状態を判別。 配列にIDを 追加 or 削除
29. ステージ毎に表示できるオブジェクトになるようにcomputedで処理
30. おまけ
 (苦労ポイント)

31. ツイートできなくて詰む (ドメインをfirebaseapp.comに変えて解決)
32. iOSでPWA → ブラウザ → PWAに戻ると真っ白になって復帰できないバグが発生 Web Share APIに置き換えて解決
33. まとめ • GAS便利 • Vue.Draggableすごい • データ構造はよく考えよう • 個人開発は自由にやれて楽しい&改善していく面白さ
34. ご静聴ありがとうございました