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

    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