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
   

   View Slide

2. 株式会社TAM フロントエンドエンジニア

   菅家 大地 / Daichi Kanke
   元デザイナーのフロントエンドエンジニア

   福島→宮城→東京→宮城(New!)

   v-sendai / 仙台フロントエンドUG / PWA Night 

   Vue.js / Nuxt.js / PWA / Monaca 

   daichi.kanke
   @kan_dai
   

   View Slide

3. ● 前回までのあらすじと今回作ったもの

   ● GASを使ったスクレイピング

   ● Vue.Draggableを使った新機能

   ● データ構造を見直した話
   アジェンダ
   

   View Slide

4. 前回までのあらすじ

   

   View Slide

5. v-sendai #01でも話したこれの続きです
   https://speakerdeck.com/kandai/nuxt-dot-jstofirebasede-2ri-jian-dewebapuriwozuo-tutahua
   

   View Slide

6. アラバキ2019のマイタイムテーブルの作成・共有ができるWebアプリ
   「タムテブ」をNuxt.jsとFirebaseを使って2日で作りました
   https://tamutebu-arabaki2019.firebaseapp.com/
   

   View Slide

7. タムテブ RISING SUNROCK FESTIVAL 2019
   https://tamutebu-rsr-2019.firebaseapp.com/
   今回作ったもの
   

   View Slide

8. GASを使ったスクレイピング

   

   View Slide

9. タイムテーブルの表示の仕組み
   ● ステージ・時間・アーティスト情報などをもったjsonを
   取得してタイムテーブルを表示している
   ● アラバキの時は手作業でjson作成
   ● 手作業はつらい
   ● そこでGAS！
   

   View Slide

10. GAS ?
    ● 正式には Googe Apps Script
    ● Googleドキュメントやスプレッドシートで動く
    スクリプト環境で
    ● ExcelのVBAのようなイメージ
    ● ほぼJavaScript
    

    View Slide

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

    View Slide

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

    View Slide

13. サイトのスクレイピングもできる
    一定のルールに沿ってHTMLが組まれていたのでいけそう
    

    View Slide

14. 指定したURLのHTMLを
    取得
    色々省略してますが雰囲気こんな感じ
    正規表現で頑張って該
    当箇所を絞り込んで取得
    していく
    スプレッドシートに書き込
    む
    

    View Slide

15. 結果
    あとはCSVに書き出し → jsonに変換すればOK
    

    View Slide

16. Vue.Draggableを使った新機能

    

    View Slide

17. ドラッグ&ドロップでのリスト並び替えをお手軽に実装できるライブラリ
    https://github.com/SortableJS/Vue.Draggable
    

    View Slide

18. script
    最小限これだけ
    template
    

    View Slide

19. ステージの並びを自分のわかりやすいようにカスタマイズできるように
    

    View Slide

20. タムテブはこんな感じ
    

    View Slide

21. ソートできない状態でもドラッグだけはできてしまう問題
    

    View Slide

22. タムテブはこんな感じ
    isSortModeが `true` に
    なった時にhandle用の
    classが付くように
    することで対応
    ↑
    ↑
    

    View Slide

23. データ構造を見直した話

    

    View Slide

24. 日付・ステージごとに別れて、その中にアー
    ティストの情報が入っている。
    選択しているかどうかの情報も一緒に持っ
    ている。
    LocalStorage・Firebaseにもそのまま保存
    している。
    前回のjsonの構造
    

    View Slide

25. 抱えていた問題
    ● 単純にデータ量が増える
    ● タイムテーブルに変更があった時に対応できない
    ○ すでに共有されているデータはそのまま
    ○ 上書きするとユーザーが選択している
    アーティスト情報も上書きされる
    

    View Slide

26. ● IDをつけて全てのアーティスト情報を
    フラットに管理
    ● ステージ情報や日付もアーティストの情報
    の中に持たせる
    今回のjsonの構造
    

    View Slide

27. 選択されているアーティストは配列にIDを保存する仕様に変更
    

    View Slide

28. 選択されているアーティストの情報
    配列にIDが含まれて
    いるかで状態を判別。
    配列にIDを
    追加 or 削除
    

    View Slide

29. ステージ毎に表示できるオブジェクトになるようにcomputedで処理
    

    View Slide

30. おまけ

    (苦労ポイント)

    

    View Slide

31. ツイートできなくて詰む
    (ドメインをfirebaseapp.comに変えて解決)
    

    View Slide

32. iOSでPWA → ブラウザ → PWAに戻ると真っ白になって復帰できないバグが発生
    Web Share APIに置き換えて解決
    

    View Slide

33. まとめ
    ● GAS便利
    ● Vue.Draggableすごい
    ● データ構造はよく考えよう
    ● 個人開発は自由にやれて楽しい&改善していく面白さ
    

    View Slide

34. ご静聴ありがとうございました
    

    View Slide