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

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

utagawa kiki
May 26, 2023
Programming
1
570

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

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

utagawa kiki

May 26, 2023
Tweet

More Decks by utagawa kiki

See All by utagawa kiki
mockgenによるモック生成を高速化するツール bulkmockgenのご紹介 / Kyoto.go #43
utgwkk
1
530
prototype大全 / YAPC::Kyoto 2023
utgwkk
0
3k
なんでもPull Requestにする / Kichijoji.pm 31
utgwkk
2
5k
インプットとアウトプットのサイクルを回す暮らし / Kichijoji.pm 29
utgwkk
0
8.3k
prototypeとjust epic. と私 / YAPC::Japan::Online 2022
utgwkk
0
9.1k
GraphQLを使った共同開発の心構え 〜 フロントエンドの視点から / Hatena Engineer Seminar #18
utgwkk
0
8.5k
他言語ユーザから見たPerlのおもしろさ / YAPC::Nagoya::Tiny 2019
utgwkk
1
7.9k
VJに使えそうなコマンドたち、そしてjustifyのご紹介 / YAPC::Nagoya::Tiny 2019 LT
utgwkk
0
5.3k
画像自動保存・閲覧システム「救い」によってもたらされる効能; 死にゆくTwitter Streaming APIへの別れの言葉を添えて / Sukui as a Service
utgwkk
1
2.4k

Other Decks in Programming

See All in Programming
Migrating From Spring Boot 2 To Spring Boot 3 - What's Jakarta EE Got To Do with It?
ivargrimstad
0
250
RDRA, ICONIX, DDDの実践から得た学び
hsawaji
5
770
組織のコード品質を向上させる “レビューシステム”の取り組み
pospome
7
4.4k
タイミーiOSアプリへの Swift Concurrency 導入までの軌跡
_tanako
4
690
なぜ自社ではスクラムがうまくいかないのか アジャイルコーチと考える、スクラムのアンチパターン / Why Scrum doesn't work in my company?
daipresents
1
310
A JVM Threading Model for the containerized times
lhespanha
0
850
Static Hermes (React Native EU 2023 Announcement)
tmikov2023
0
3k
2023/09/23 「AIキャラクターの言動に深みを持たせる」
sr2mg4
1
530
Building Tebukuro with Hotwire and Rails
murajun1978
0
150
個人開発のiOSアプリでUI/UXを標準に寄せてみた / 20230919_orochi
uhooi
0
340
Chatwork プロダクト本部 紹介資料（エンジニア向け）
chatwork_hr
1
670
理解して導入するWebフレームワーク ~解決すべき課題に着目する~ / Understanding and implementing web frameworks ~focusing on the problems to be solved~
seike460
PRO
3
340

Featured

See All Featured
A Tale of Four Properties
chriscoyier
150
21k
Web Components: a chance to create the future
zenorocha
304
41k
The Illustrated Children's Guide to Kubernetes
chrisshort
26
45k
The Mythical Team-Month
searls
212
41k
Documentation Writing (for coders)
carmenintech
54
3.3k
[RailsConf 2023] Rails as a piece of cake
palkan
14
2.7k
How To Stay Up To Date on Web Technology
chriscoyier
780
250k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
15
1.6k
Into the Great Unknown - MozCon
thekraken
7
600
Embracing the Ebb and Flow
colly
77
3.8k
jQuery: Nuts, Bolts and Bling
dougneiner
57
6.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
239
1.2M

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