$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SPAでもデータをURLでシェアしたい / Kyoto.js 19
Search
utagawa kiki
May 26, 2023
Programming
2
1.8k
SPAでもデータをURLでシェアしたい / Kyoto.js 19
Kyoto.js 19 LT
https://kyotojs.connpass.com/event/282651/
utagawa kiki
May 26, 2023
Tweet
Share
More Decks by utagawa kiki
See All by utagawa kiki
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
21
13k
Dive into gomock / Go Conference 2024
utgwkk
14
5.3k
Goでリフレクションする、その前に / Kansai.go #1
utgwkk
5
2k
Go製Webアプリケーションのエラーとの向き合い方大全、あるいはやっぱりスタックトレース欲しいやん / Kyoto.go #50
utgwkk
7
3.3k
ありがとう、create-react-app
utgwkk
4
10k
mockgenによるモック生成を高速化するツール bulkmockgenのご紹介 / Kyoto.go #43
utgwkk
2
2.2k
prototype大全 / YAPC::Kyoto 2023
utgwkk
1
4.4k
なんでもPull Requestにする / Kichijoji.pm 31
utgwkk
3
6.3k
インプットとアウトプットのサイクルを回す暮らし / Kichijoji.pm 29
utgwkk
1
9k
Other Decks in Programming
See All in Programming
今からはじめるAndroidアプリ開発 2024 / DevFest 2024
star_zero
0
750
テストコード文化を0から作り、変化し続けた組織
kazatohiei
2
820
cmp.Or に感動した
otakakot
3
340
HTTP compression in PHP and Symfony apps
dunglas
2
1.4k
eBPF Deep Dive: Architecture and Safety Mechanisms
takehaya
12
1.2k
ソフトウェアの振る舞いに着目し 複雑な要件の開発に立ち向かう
rickyban
0
690
DevTools extensions で 独自の DevTool を開発する | FlutterKaigi 2024
kokiyoshida
0
440
似たもの同士のPerlとPHP
uzulla
1
110
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
0
3k
Seamless Flutter Native Integration: FFI & Pigeon - Dreamwalker (JaichangPark / 박제창) @FlutterKaigi2024
itsmedreamwalker
0
120
PaaSとSaaSの境目で信頼性と開発速度を両立する 〜TROCCO®︎のこれまでとこれから〜
gtnao
6
7k
イマのCSSでできる インタラクション最前線 + CSS最新情報
clockmaker
5
3.8k
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
48
2.2k
Done Done
chrislema
181
16k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
480
Gamification - CAS2011
davidbonilla
80
5.1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.2k
Being A Developer After 40
akosma
87
590k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
410
Speed Design
sergeychernyshev
25
650
Building a Scalable Design System with Sketch
lauravandoore
459
33k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
17
2.2k
Become a Pro
speakerdeck
PRO
25
5k
Transcript
SPAでもデータをURLで シェアしたい Kyoto.js 19 @utgwkk (うたがわきき)
自己紹介 @utgwkk (うたがわきき) 株式会社はてな Webアプリケーションエンジニア in 京都 最近は主にGoを書いて暮らしています
イベント支出記録君 https://sugarheart.utgw.net/event-expenses-tracker/ 同人イベントなどの支出を記録できるアプリケーション 支出記録を手軽につけたいというモチベーションで実装 豊富なシェア機能 (CSVエクスポート、TSVコピー、URLシェア) ここでデモ
技術スタック Vite + TypeScript + React S3に静的ファイルを置いて配信 極めてシンプル!!
真のSPA 真に1ページしかないアプリケーション react-routerなどのルーターがあるわけではない (真のSPAって呼ぶことあるのかな? ペライチ?)
課題 イベント支出記録を他の人にも簡単にシェアしたい URLを貼ったらシェア完了ということにしたい 一切のデータストアを管理せずに済ませたい 🔜 URLに全てのデータを載せてシェアする
データを眺める [{"price":100,"label":"","createdAt":1681602213424}, …] 金額、備考、支出日時 備考を用意したけど現時点でとくに使っていない (1敗) データ構造としては極めてシンプル
素朴な発想 [{"price":100,"label":"","createdAt":1681602213424}, …] URLのfragment (ハッシュ) 部分にデータを載せられそう JSONをbase64エンコードしたらいけるはず
結果 https://sugarheart.utgw.net/event-expenses-tracker/#W3sicHJpY2UiOjUwMCwibGFiZWwiOiIiLCJjcmVhdGVkQXQiOj E2ODE2MjM0OTU4MjB9LHsicHJpY2UiOjUwMCwibGFiZWwiOiIiLCJjcmVhdGVkQXQiOjE2ODE2MjMwOTYzODh9L HsicHJpY2UiOjYwMCwibGFiZWwiOiIiLCJjcmVhdGVkQXQiOjE2ODE2MjI4NjIwOTN9LHsicHJpY2UiOjUwMCwibGFiZ WwiOiIiLCJjcmVhdGVkQXQiOjE2ODE2MjI1NzI4NzB9LHsicHJpY2UiOjUwMCwibGFiZWwiOiIiLCJjcmVhdGVkQXQiO jE2ODE2MTg2OTIyMjN9LHsicHJpY2UiOjEwMDAsImxhYmVsIjoiIiwiY3JlYXRlZEF0IjoxNjgxNjE4NTI4MTk0fSx7InBya WNlIjo1MDAsImxhYmVsIjoiIiwiY3JlYXRlZEF0IjoxNjgxNjE4Mzk5MjU1fSx7InByaWNlIjo1MDAsImxhYmVsIjoiIiwiY3JlY XRlZEF0IjoxNjgxNjE4MjkxMTU1fSx7InByaWNlIjozMDAsImxhYmVsIjoiIiwiY3JlYXRlZEF0IjoxNjgxNjE4MTQxMDQ4fS x7InByaWNlIjo2MDAsImxhYmVsIjoiIiwiY3JlYXRlZEF0IjoxNjgxNjE3MTQ5NjcyfSx7InByaWNlIjoyNTAwLCJsYWJlbCI6 IiIsImNyZWF0ZWRBdCI6MTY4MTYxNjk1MjIzN30seyJwcmljZSI6MTAwMCwibGFiZWwiOiIiLCJjcmVhdGVkQXQiOjE
2ODE2MTY3MzkzNDd9LHsicHJpY2UiOjIwMDAsImxhYmVsIjoiIiwiY3JlYXRlZEF0IjoxNjgxNjE2Mjc3OTUxfSx7InByaW NlIjo1MDAsImxhYmVsIjoiIiwiY3JlYXRlZEF0IjoxNjgxNjE2MDQyOTM0fSx7InByaWNlIjo1MDAsImxhYmVsIjoiIiwiY3JlY XRlZEF0IjoxNjgxNjE1OTEyNjkxfV0=
https://sugarheart.utgw.net/event-expenses-tracker/#W3sicHJpY2UiOjUwMCwibGFiZWwiOiIiL CJjcmVhdGVkQXQiOjE2ODE2MjM0OTU4MjB9LHsicHJpY2UiOjUwMCwibGFiZWwiOiIiLCJjcm VhdGVkQXQiOjE2ODE2MjMwOTYzODh9LHsicHJpY2UiOjYwMCwibGFiZWwiOiIiLCJjcmVhdG VkQXQiOjE2ODE2MjI4NjIwOTN9LHsicHJpY2UiOjUwMCwibGFiZWwiOiIiLCJjcmVhdGVkQXQi OjE2ODE2MjI1NzI4NzB9LHsicHJpY2UiOjUwMCwibGFiZWwiOiIiLCJjcmVhdGVkQXQiOjE2OD E2MTg2OTIyMjN9LHsicHJpY2UiOjEwMDAsImxhYmVsIjoiIiwiY3JlYXRlZEF0IjoxNjgxNjE4NTI4 MTk0fSx7InByaWNlIjo1MDAsImxhYmVsIjoiIiwiY3JlYXRlZEF0IjoxNjgxNjE4Mzk5MjU1fSx7InBy aWNlIjo1MDAsImxhYmVsIjoiIiwiY3JlYXRlZEF0IjoxNjgxNjE4MjkxMTU1fSx7InByaWNlIjozMDAs ImxhYmVsIjoiIiwiY3JlYXRlZEF0IjoxNjgxNjE4MTQxMDQ4fSx7InByaWNlIjo2MDAsImxhYmVsIjoi IiwiY3JlYXRlZEF0IjoxNjgxNjE3MTQ5NjcyfSx7InByaWNlIjoyNTAwLCJsYWJlbCI6IiIsImNyZWF0
ZWRBdCI6MTY4MTYxNjk1MjIzN30seyJwcmljZSI6MTAwMCwibGFiZWwiOiIiLCJjcmVhdGVkQ XQiOjE2ODE2MTY3MzkzNDd9LHsicHJpY2UiOjIwMDAsImxhYmVsIjoiIiwiY3JlYXRlZEF0IjoxNj gxNjE2Mjc3OTUxfSx7InByaWNlIjo1MDAsImxhYmVsIjoiIiwiY3JlYXRlZEF0IjoxNjgxNjE2MDQyO TM0fSx7InByaWNlIjo1MDAsImxhYmVsIjoiIiwiY3JlYXRlZEF0IjoxNjgxNjE1OTEyNjkxfV0=
考察 JSONをそのままエンコードすると巨大すぎる [{"price":100,"label":"","createdAt":1681602213424}, …] 整数は整数としてエンコードできないか
MessagePack https://msgpack.org/ja.html
MessagePack 公式サイトより: MessagePackは、効率の良いバイナリ形式のオブジェクト・シリアライ ズ フォーマットです。
更にコンパクトにする工夫 オブジェクトをやめて配列 (タプル) にする タプルを平坦にする [{"price":100,"label":"","createdAt":1681602213424}, …] [100, "", 1681602213424,
…] 平坦にした上でMessagePack形式にエンコード + base64
before (再掲) https://sugarheart.utgw.net/event-expenses-tracker/#W3sicHJpY2UiOjUwMCwibGFiZWwiOiIiLCJjcmVhdGVkQXQiOj E2ODE2MjM0OTU4MjB9LHsicHJpY2UiOjUwMCwibGFiZWwiOiIiLCJjcmVhdGVkQXQiOjE2ODE2MjMwOTYzODh9L HsicHJpY2UiOjYwMCwibGFiZWwiOiIiLCJjcmVhdGVkQXQiOjE2ODE2MjI4NjIwOTN9LHsicHJpY2UiOjUwMCwibGFiZ WwiOiIiLCJjcmVhdGVkQXQiOjE2ODE2MjI1NzI4NzB9LHsicHJpY2UiOjUwMCwibGFiZWwiOiIiLCJjcmVhdGVkQXQiO jE2ODE2MTg2OTIyMjN9LHsicHJpY2UiOjEwMDAsImxhYmVsIjoiIiwiY3JlYXRlZEF0IjoxNjgxNjE4NTI4MTk0fSx7InBya WNlIjo1MDAsImxhYmVsIjoiIiwiY3JlYXRlZEF0IjoxNjgxNjE4Mzk5MjU1fSx7InByaWNlIjo1MDAsImxhYmVsIjoiIiwiY3JlY XRlZEF0IjoxNjgxNjE4MjkxMTU1fSx7InByaWNlIjozMDAsImxhYmVsIjoiIiwiY3JlYXRlZEF0IjoxNjgxNjE4MTQxMDQ4fS x7InByaWNlIjo2MDAsImxhYmVsIjoiIiwiY3JlYXRlZEF0IjoxNjgxNjE3MTQ5NjcyfSx7InByaWNlIjoyNTAwLCJsYWJlbCI6
IiIsImNyZWF0ZWRBdCI6MTY4MTYxNjk1MjIzN30seyJwcmljZSI6MTAwMCwibGFiZWwiOiIiLCJjcmVhdGVkQXQiOjE 2ODE2MTY3MzkzNDd9LHsicHJpY2UiOjIwMDAsImxhYmVsIjoiIiwiY3JlYXRlZEF0IjoxNjgxNjE2Mjc3OTUxfSx7InByaW NlIjo1MDAsImxhYmVsIjoiIiwiY3JlYXRlZEF0IjoxNjgxNjE2MDQyOTM0fSx7InByaWNlIjo1MDAsImxhYmVsIjoiIiwiY3JlY XRlZEF0IjoxNjgxNjE1OTEyNjkxfV0=
after https://sugarheart.utgw.net/event-expenses-tracker/#3AAtzwAAAYeIkjSMzQH0oM 8AAAGHiIwcRM0B9KDPAAABh4iIiQ3NAligzwAAAYeIhB9GzQH0oM8AAAGHiEjo f80B9KDPAAABh4hGZ8LNA+igzwAAAYeIRHAXzQH0oM8AAAGHiELJ080B9KD PAAABh4hAf3jNASygzwAAAYeIMV7ozQJYoM8AAAGHiC5brc0JxKDPAAABh4gr HBPNA+igzwAAAYeIJBG/zQfQoM8AAAGHiCB7ts0B9KDPAAABh4gefvPNAfSg
70%減!!
クールなURIは変わらない クールなURIは変わらないので最適化前のURLでもアクセス可能 これはクールなURIなのか???
まとめ・今後の展望 URLにデータを乗せて共有する手法についてご紹介 できるだけ短いURLにする手法についてご紹介 URLの長さの限界に到達する前に逃げ切りたい 支出時間-支出額 のグラフをプロットしたらおもしろいのでは??
2023/4/16 のイベントの支出額合計 12,000円 内訳: https://sugarheart.utgw.net/event-expenses-tracker/#3AAtzwAAAYeIkjSMzQH0oM 8AAAGHiIwcRM0B9KDPAAABh4iIiQ3NAligzwAAAYeIhB9GzQH0oM8AAAGHiEjo f80B9KDPAAABh4hGZ8LNA+igzwAAAYeIRHAXzQH0oM8AAAGHiELJ080B9KD PAAABh4hAf3jNASygzwAAAYeIMV7ozQJYoM8AAAGHiC5brc0JxKDPAAABh4gr HBPNA+igzwAAAYeIJBG/zQfQoM8AAAGHiCB7ts0B9KDPAAABh4gefvPNAfSg
参考 URLにデータを載せつつ、できるだけ短いURLにしたい - 私が歌川です ブックマークコメントもあわせてどうぞ Microsoft Learnにいいページがあります (@onk さんに教えてもらった) メッセージ
エンコードに関する考慮事項 - Azure Architecture Center | Microsoft Learn