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

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

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

utagawa kiki

May 26, 2023
Tweet

More Decks by utagawa kiki

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide