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.9k
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
自動で //nolint を挿入する取り組み / Gopher's Gathering
utgwkk
1
630
ゆるやかにgolangci-lintのルールを強くする / Kyoto.go #56
utgwkk
2
1.8k
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
21
14k
Dive into gomock / Go Conference 2024
utgwkk
14
6.9k
Goでリフレクションする、その前に / Kansai.go #1
utgwkk
4
3.2k
Go製Webアプリケーションのエラーとの向き合い方大全、あるいはやっぱりスタックトレース欲しいやん / Kyoto.go #50
utgwkk
7
4.1k
ありがとう、create-react-app
utgwkk
4
11k
mockgenによるモック生成を高速化するツール bulkmockgenのご紹介 / Kyoto.go #43
utgwkk
2
2.3k
prototype大全 / YAPC::Kyoto 2023
utgwkk
1
4.5k
Other Decks in Programming
See All in Programming
Improve my own Ruby
sisshiki1969
1
110
Optimizing JRuby 10
headius
0
590
Bedrock × Confluenceで簡単(?)社内RAG
iharuoru
1
120
最速Green Tea 🍵 Garbage Collector
kuro_kurorrr
1
120
In geheimer Mission: AI Agents entwickeln
joergneumann
0
110
The Missing Link in Angular’s Signal Story: Resource API and httpResource
manfredsteyer
PRO
0
140
「理解」を重視したAI活用開発
fast_doctor
0
300
読書シェア会 vol.4 『ダイナミックリチーミング 第2版』
kotaro666
0
110
データベースの技術選定を突き詰める ~複数事例から考える最適なデータベースの選び方~
nnaka2992
0
500
Lambda(Python)の リファクタリングが好きなんです
komakichi
5
270
監視 やばい
syossan27
12
10k
ドメイン駆動設計とXPで支える子どもの未来 / Domain-Driven Design and XP Supporting Children's Future
nrslib
0
250
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.2k
Why Our Code Smells
bkeepers
PRO
336
57k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Speed Design
sergeychernyshev
29
940
Done Done
chrislema
184
16k
Making the Leap to Tech Lead
cromwellryan
133
9.3k
Site-Speed That Sticks
csswizardry
6
540
A Tale of Four Properties
chriscoyier
159
23k
Music & Morning Musume
bryan
47
6.5k
Agile that works and the tools we love
rasmusluckow
329
21k
Side Projects
sachag
453
42k
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