Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
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
15
8.5k
Dive into gomock / Go Conference 2024
utgwkk
14
4.1k
Goでリフレクションする、その前に / Kansai.go #1
utgwkk
5
1.1k
Go製Webアプリケーションのエラーとの向き合い方大全、あるいはやっぱりスタックトレース欲しいやん / Kyoto.go #50
utgwkk
7
2.5k
ありがとう、create-react-app
utgwkk
4
9k
mockgenによるモック生成を高速化するツール bulkmockgenのご紹介 / Kyoto.go #43
utgwkk
2
2.1k
prototype大全 / YAPC::Kyoto 2023
utgwkk
1
4.2k
なんでもPull Requestにする / Kichijoji.pm 31
utgwkk
3
6.2k
インプットとアウトプットのサイクルを回す暮らし / Kichijoji.pm 29
utgwkk
1
8.9k
Other Decks in Programming
See All in Programming
12年前の『型システム入門』翻訳の思い出話
mame
11
1.2k
CSC307 Lecture 12
javiergs
PRO
0
220
実用的かつリーズナブルな 「Azure × Gemini × LINE」~キャラクターBot 実装ライブデモ~
tomodo_ysys
1
170
Composing an API the *right* way (Droidcon Berlin 2024)
zsmb
1
450
유연한 Composable 설계
l2hyunwoo
0
380
企業向け生成AIアプリの 開発から得られた知見
takaakikakei
0
310
CSC307 Lecture 09
javiergs
PRO
1
500
Async Await: Mastering Python's Time-Bending Tricks - EuroPython2024
yanbo
1
290
最古の関数型言語「Lisp」ことはじめ / lisp_in_kamiyama
uhooi
1
190
Clean Architecture by TypeScript & NestJS
ryounasso
0
150
feature環境をGitHub ActionsとCloudFormationでいい感じに管理する
nealle
2
310
社内 LT 会を発足し、アウトプット文化を醸成させるために考えたこと・やったこと / Starting internal LT meetings and fostering an output culture
mackey0225
3
120
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
The Invisible Customer
myddelton
117
13k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
The Invisible Side of Design
smashingmag
294
50k
Imperfection Machines: The Place of Print at Facebook
scottboms
262
13k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
Being A Developer After 40
akosma
72
580k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
29k
Docker and Python
trallard
37
2.9k
Designing with Data
zakiwarfel
96
5k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
Fireside Chat
paigeccino
25
2.8k
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