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
21
12k
Dive into gomock / Go Conference 2024
utgwkk
14
4.8k
Goでリフレクションする、その前に / Kansai.go #1
utgwkk
5
1.6k
Go製Webアプリケーションのエラーとの向き合い方大全、あるいはやっぱりスタックトレース欲しいやん / Kyoto.go #50
utgwkk
7
2.9k
ありがとう、create-react-app
utgwkk
4
9.9k
mockgenによるモック生成を高速化するツール bulkmockgenのご紹介 / Kyoto.go #43
utgwkk
2
2.2k
prototype大全 / YAPC::Kyoto 2023
utgwkk
1
4.3k
なんでもPull Requestにする / Kichijoji.pm 31
utgwkk
3
6.2k
インプットとアウトプットのサイクルを回す暮らし / Kichijoji.pm 29
utgwkk
1
9k
Other Decks in Programming
See All in Programming
.NET Aspireのクラウド対応検証: Azureと他環境での実践
ymd65536
1
650
自分だけの世界を創るクリエイティブコーディング / Creative Coding: Creating Your Own World
chobishiba
2
2k
ML-прайсинг_на_Lamoda__вошли_и_вышли__приключение_на_20_минут__Слава_Цыганков.pdf
lamodatech
0
380
データマイグレーションの成功戦略~サービスリニューアルで失敗しないための実践ガイド~
tkzwtks
8
840
Програмиране с Rust, ФМИ, 2024
nikolads
0
120
DevFest Android in Korea 2024 - 안드로이드의 문단속 : 앱을 지키는 암호화 이야기
mdb1217
1
170
急速に利用拡大を続ける飲食店向けサービスで 店内端末同士のローカル通信を追加設定なしで実現した話
whatasoda
0
140
Integrating AI in Your Enterprise Java Applications
ivargrimstad
0
760
モジュラモノリス、その前に / Modular monolith, before that
euglena1215
8
740
Why I Choose NetBeans for Jakarta EE
ivargrimstad
0
740
Hi, have you met Kotlin Multiplatform? | DevFest Vienna 2024
prof18
0
220
The future of development – Are our jobs getting harder or easier?
hollycummins
1
180
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
65
11k
Unsuck your backbone
ammeep
668
57k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
It's Worth the Effort
3n
183
27k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
31
1.7k
Building an army of robots
kneath
302
42k
A designer walks into a library…
pauljervisheath
202
24k
Building Applications with DynamoDB
mza
90
6k
Producing Creativity
orderedlist
PRO
341
39k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Navigating Team Friction
lara
183
14k
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