SPAでもデータをURLでシェアしたい / Kyoto.js 19

Kyoto.js 19 LT
https://kyotojs.connpass.com/event/282651/

Transcript

1. SPAでもデータをURLで
   シェアしたい
   Kyoto.js 19 @utgwkk (うたがわきき)
   

   View Slide

2. 自己紹介
   @utgwkk (うたがわきき)
   株式会社はてな
   Webアプリケーションエンジニア in 京都
   最近は主にGoを書いて暮らしています
   

   View Slide

3. イベント支出記録君
   https://sugarheart.utgw.net/event-expenses-tracker/
   同人イベントなどの支出を記録できるアプリケーション
   支出記録を手軽につけたいというモチベーションで実装
   豊富なシェア機能 (CSVエクスポート、TSVコピー、URLシェア)
   ここでデモ
   

   View Slide

4. 技術スタック
   Vite + TypeScript + React
   S3に静的ファイルを置いて配信
   極めてシンプル!!
   

   View Slide

5. 真のSPA
   真に1ページしかないアプリケーション
   react-routerなどのルーターがあるわけではない
   (真のSPAって呼ぶことあるのかな? ペライチ?)
   

   View Slide

6. 課題
   イベント支出記録を他の人にも簡単にシェアしたい
   URLを貼ったらシェア完了ということにしたい
   一切のデータストアを管理せずに済ませたい
   🔜 URLに全てのデータを載せてシェアする
   

   View Slide

7. データを眺める
   [{"price":100,"label":"","createdAt":1681602213424}, …]
   金額、備考、支出日時
   備考を用意したけど現時点でとくに使っていない (1敗)
   データ構造としては極めてシンプル
   

   View Slide

8. 素朴な発想
   [{"price":100,"label":"","createdAt":1681602213424}, …]
   URLのfragment (ハッシュ) 部分にデータを載せられそう
   JSONをbase64エンコードしたらいけるはず
   

   View Slide

9. 結果
   https://sugarheart.utgw.net/event-expenses-tracker/#W3sicHJpY2UiOjUwMCwibGFiZWwiOiIiLCJjcmVhdGVkQXQiOj
   E2ODE2MjM0OTU4MjB9LHsicHJpY2UiOjUwMCwibGFiZWwiOiIiLCJjcmVhdGVkQXQiOjE2ODE2MjMwOTYzODh9L
   HsicHJpY2UiOjYwMCwibGFiZWwiOiIiLCJjcmVhdGVkQXQiOjE2ODE2MjI4NjIwOTN9LHsicHJpY2UiOjUwMCwibGFiZ
   WwiOiIiLCJjcmVhdGVkQXQiOjE2ODE2MjI1NzI4NzB9LHsicHJpY2UiOjUwMCwibGFiZWwiOiIiLCJjcmVhdGVkQXQiO
   jE2ODE2MTg2OTIyMjN9LHsicHJpY2UiOjEwMDAsImxhYmVsIjoiIiwiY3JlYXRlZEF0IjoxNjgxNjE4NTI4MTk0fSx7InBya
   WNlIjo1MDAsImxhYmVsIjoiIiwiY3JlYXRlZEF0IjoxNjgxNjE4Mzk5MjU1fSx7InByaWNlIjo1MDAsImxhYmVsIjoiIiwiY3JlY
   XRlZEF0IjoxNjgxNjE4MjkxMTU1fSx7InByaWNlIjozMDAsImxhYmVsIjoiIiwiY3JlYXRlZEF0IjoxNjgxNjE4MTQxMDQ4fS
   x7InByaWNlIjo2MDAsImxhYmVsIjoiIiwiY3JlYXRlZEF0IjoxNjgxNjE3MTQ5NjcyfSx7InByaWNlIjoyNTAwLCJsYWJlbCI6
   IiIsImNyZWF0ZWRBdCI6MTY4MTYxNjk1MjIzN30seyJwcmljZSI6MTAwMCwibGFiZWwiOiIiLCJjcmVhdGVkQXQiOjE
   2ODE2MTY3MzkzNDd9LHsicHJpY2UiOjIwMDAsImxhYmVsIjoiIiwiY3JlYXRlZEF0IjoxNjgxNjE2Mjc3OTUxfSx7InByaW
   NlIjo1MDAsImxhYmVsIjoiIiwiY3JlYXRlZEF0IjoxNjgxNjE2MDQyOTM0fSx7InByaWNlIjo1MDAsImxhYmVsIjoiIiwiY3JlY
   XRlZEF0IjoxNjgxNjE1OTEyNjkxfV0=
   

   View Slide

10. https://sugarheart.utgw.net/event-expenses-tracker/#W3sicHJpY2UiOjUwMCwibGFiZWwiOiIiL
    CJjcmVhdGVkQXQiOjE2ODE2MjM0OTU4MjB9LHsicHJpY2UiOjUwMCwibGFiZWwiOiIiLCJjcm
    VhdGVkQXQiOjE2ODE2MjMwOTYzODh9LHsicHJpY2UiOjYwMCwibGFiZWwiOiIiLCJjcmVhdG
    VkQXQiOjE2ODE2MjI4NjIwOTN9LHsicHJpY2UiOjUwMCwibGFiZWwiOiIiLCJjcmVhdGVkQXQi
    OjE2ODE2MjI1NzI4NzB9LHsicHJpY2UiOjUwMCwibGFiZWwiOiIiLCJjcmVhdGVkQXQiOjE2OD
    E2MTg2OTIyMjN9LHsicHJpY2UiOjEwMDAsImxhYmVsIjoiIiwiY3JlYXRlZEF0IjoxNjgxNjE4NTI4
    MTk0fSx7InByaWNlIjo1MDAsImxhYmVsIjoiIiwiY3JlYXRlZEF0IjoxNjgxNjE4Mzk5MjU1fSx7InBy
    aWNlIjo1MDAsImxhYmVsIjoiIiwiY3JlYXRlZEF0IjoxNjgxNjE4MjkxMTU1fSx7InByaWNlIjozMDAs
    ImxhYmVsIjoiIiwiY3JlYXRlZEF0IjoxNjgxNjE4MTQxMDQ4fSx7InByaWNlIjo2MDAsImxhYmVsIjoi
    IiwiY3JlYXRlZEF0IjoxNjgxNjE3MTQ5NjcyfSx7InByaWNlIjoyNTAwLCJsYWJlbCI6IiIsImNyZWF0
    ZWRBdCI6MTY4MTYxNjk1MjIzN30seyJwcmljZSI6MTAwMCwibGFiZWwiOiIiLCJjcmVhdGVkQ
    XQiOjE2ODE2MTY3MzkzNDd9LHsicHJpY2UiOjIwMDAsImxhYmVsIjoiIiwiY3JlYXRlZEF0IjoxNj
    gxNjE2Mjc3OTUxfSx7InByaWNlIjo1MDAsImxhYmVsIjoiIiwiY3JlYXRlZEF0IjoxNjgxNjE2MDQyO
    TM0fSx7InByaWNlIjo1MDAsImxhYmVsIjoiIiwiY3JlYXRlZEF0IjoxNjgxNjE1OTEyNjkxfV0=
    

    View Slide

11. 考察
    JSONをそのままエンコードすると巨大すぎる
    [{"price":100,"label":"","createdAt":1681602213424}, …]
    整数は整数としてエンコードできないか
    

    View Slide

12. MessagePack
    https://msgpack.org/ja.html
    

    View Slide

13. MessagePack
    公式サイトより: MessagePackは、効率の良いバイナリ形式のオブジェクト･シリアライ
    ズ フォーマットです。
    

    View Slide

14. 更にコンパクトにする工夫
    オブジェクトをやめて配列 (タプル) にする
    タプルを平坦にする
    [{"price":100,"label":"","createdAt":1681602213424}, …]
    [100, "", 1681602213424, …]
    平坦にした上でMessagePack形式にエンコード + base64
    

    View Slide

15. before (再掲)
    https://sugarheart.utgw.net/event-expenses-tracker/#W3sicHJpY2UiOjUwMCwibGFiZWwiOiIiLCJjcmVhdGVkQXQiOj
    E2ODE2MjM0OTU4MjB9LHsicHJpY2UiOjUwMCwibGFiZWwiOiIiLCJjcmVhdGVkQXQiOjE2ODE2MjMwOTYzODh9L
    HsicHJpY2UiOjYwMCwibGFiZWwiOiIiLCJjcmVhdGVkQXQiOjE2ODE2MjI4NjIwOTN9LHsicHJpY2UiOjUwMCwibGFiZ
    WwiOiIiLCJjcmVhdGVkQXQiOjE2ODE2MjI1NzI4NzB9LHsicHJpY2UiOjUwMCwibGFiZWwiOiIiLCJjcmVhdGVkQXQiO
    jE2ODE2MTg2OTIyMjN9LHsicHJpY2UiOjEwMDAsImxhYmVsIjoiIiwiY3JlYXRlZEF0IjoxNjgxNjE4NTI4MTk0fSx7InBya
    WNlIjo1MDAsImxhYmVsIjoiIiwiY3JlYXRlZEF0IjoxNjgxNjE4Mzk5MjU1fSx7InByaWNlIjo1MDAsImxhYmVsIjoiIiwiY3JlY
    XRlZEF0IjoxNjgxNjE4MjkxMTU1fSx7InByaWNlIjozMDAsImxhYmVsIjoiIiwiY3JlYXRlZEF0IjoxNjgxNjE4MTQxMDQ4fS
    x7InByaWNlIjo2MDAsImxhYmVsIjoiIiwiY3JlYXRlZEF0IjoxNjgxNjE3MTQ5NjcyfSx7InByaWNlIjoyNTAwLCJsYWJlbCI6
    IiIsImNyZWF0ZWRBdCI6MTY4MTYxNjk1MjIzN30seyJwcmljZSI6MTAwMCwibGFiZWwiOiIiLCJjcmVhdGVkQXQiOjE
    2ODE2MTY3MzkzNDd9LHsicHJpY2UiOjIwMDAsImxhYmVsIjoiIiwiY3JlYXRlZEF0IjoxNjgxNjE2Mjc3OTUxfSx7InByaW
    NlIjo1MDAsImxhYmVsIjoiIiwiY3JlYXRlZEF0IjoxNjgxNjE2MDQyOTM0fSx7InByaWNlIjo1MDAsImxhYmVsIjoiIiwiY3JlY
    XRlZEF0IjoxNjgxNjE1OTEyNjkxfV0=
    

    View Slide

16. after
    https://sugarheart.utgw.net/event-expenses-tracker/#3AAtzwAAAYeIkjSMzQH0oM
    8AAAGHiIwcRM0B9KDPAAABh4iIiQ3NAligzwAAAYeIhB9GzQH0oM8AAAGHiEjo
    f80B9KDPAAABh4hGZ8LNA+igzwAAAYeIRHAXzQH0oM8AAAGHiELJ080B9KD
    PAAABh4hAf3jNASygzwAAAYeIMV7ozQJYoM8AAAGHiC5brc0JxKDPAAABh4gr
    HBPNA+igzwAAAYeIJBG/zQfQoM8AAAGHiCB7ts0B9KDPAAABh4gefvPNAfSg
    

    View Slide

17. 70%減!!
    

    View Slide

18. クールなURIは変わらない
    クールなURIは変わらないので最適化前のURLでもアクセス可能
    これはクールなURIなのか???
    

    View Slide

19. まとめ・今後の展望
    URLにデータを乗せて共有する手法についてご紹介
    できるだけ短いURLにする手法についてご紹介
    URLの長さの限界に到達する前に逃げ切りたい
    支出時間-支出額 のグラフをプロットしたらおもしろいのでは??
    

    View Slide

20. 2023/4/16 のイベントの支出額合計
    12,000円
    内訳:
    https://sugarheart.utgw.net/event-expenses-tracker/#3AAtzwAAAYeIkjSMzQH0oM
    8AAAGHiIwcRM0B9KDPAAABh4iIiQ3NAligzwAAAYeIhB9GzQH0oM8AAAGHiEjo
    f80B9KDPAAABh4hGZ8LNA+igzwAAAYeIRHAXzQH0oM8AAAGHiELJ080B9KD
    PAAABh4hAf3jNASygzwAAAYeIMV7ozQJYoM8AAAGHiC5brc0JxKDPAAABh4gr
    HBPNA+igzwAAAYeIJBG/zQfQoM8AAAGHiCB7ts0B9KDPAAABh4gefvPNAfSg
    

    View Slide

21. 参考
    URLにデータを載せつつ、できるだけ短いURLにしたい - 私が歌川です
    ブックマークコメントもあわせてどうぞ
    Microsoft Learnにいいページがあります (@onk さんに教えてもらった)
    メッセージ エンコードに関する考慮事項 - Azure Architecture Center | Microsoft Learn
    

    View Slide