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

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

Daichi
September 06, 2019

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

Daichi

September 06, 2019
Tweet

More Decks by Daichi

Other Decks in Programming

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. ご静聴ありがとうございました