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
物理世界でモノを運ぶための仕組み / How to Distribute Items in C...
Search
OSA Shunsuke
March 24, 2022
Programming
0
11k
物理世界でモノを運ぶための仕組み / How to Distribute Items in Cookpad Mart
Cookpad Tech Kitchen #26「数千万レコードをリアルタイムに捌く生鮮EC事業開発」の資料
https://cookpad.connpass.com/event/239885/
OSA Shunsuke
March 24, 2022
Tweet
Share
More Decks by OSA Shunsuke
See All by OSA Shunsuke
生鮮食品をユーザーに届ける流通の仕組みと技術 / Distribution in Cookpad Mart 2022
osa
1
3.2k
「粗利を計算する」の難しさ / KPI Measurement in the real world
osa
1
1.3k
八百屋のCTOになったのでとりあえず店に立ってみた / Understand? Understand!
osa
3
1.6k
見せる、見える、見れる / Show, See, Seek.
osa
0
800
before action setter いる? / Good-bye "before action setter"
osa
3
8.6k
チームの語彙を育ててコミュニケーションできるチームをつくる / Build Vocabulary, Build Team
osa
10
7.1k
技術基礎研修「クックパッドを支える仕組み」 / Introduction to the Internet
osa
179
390k
すぐそこにある "異文化" コミュニケーション / Daily Intercultural Communication
osa
1
1.4k
oneshot task をいい感じにする / Introduce oneshot task generator
osa
0
1.3k
Other Decks in Programming
See All in Programming
Amebaチョイス立ち上げの裏側 ~依存システムとの闘い~
daichi_igarashi
0
220
Scala におけるコンパイラエラーとの付き合い方
chencmd
1
150
長期運用プロダクトの開発速度を維持し続けるためのリファクタリング実践例
wataruss
8
2.5k
私の考える初学者がBlazorできるまでの学習方法
tomokusaba
1
240
最高の構文木の設計 2024年版
yui_knk
7
2.4k
ECMAScript仕様を読むのに必要な知識 - ダイジェスト版
syumai
4
2.5k
Swiftで高速フーリエ変換してオーディオビジュアライザーを作る / iOSDC Japan 2024 Day1 Track D
kyome22
2
460
これからの時代の新標準!SwiftTestingへの移行とトラブルシューティング
uetyo
0
440
プログラマのための音楽入門
cheebow
4
540
LangChainの現在とv0.3にむけて
os1ma
3
650
月間4.5億回再生を超える大規模サービス TVer iOSアプリのリアーキテクチャ戦略 - iOSDC2024
techtver
PRO
1
570
現代のVueとTypeScript - 型安全の活用術
minako__ph
4
3.1k
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
25
5k
Become a Pro
speakerdeck
PRO
22
4.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
47
2.7k
Visualization
eitanlees
142
15k
Scaling GitHub
holman
458
140k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
We Have a Design System, Now What?
morganepeng
48
7.1k
Gamification - CAS2011
davidbonilla
79
4.9k
Learning to Love Humans: Emotional Interface Design
aarron
270
40k
Ruby is Unlike a Banana
tanoku
96
10k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
190
16k
Practical Orchestrator
shlominoach
185
10k
Transcript
© 2022 Cookpad Inc. 物理世界でモノを運ぶための仕組み 2022-03-24 / Cookpad Tech Kitchen
#26
• 長 俊祐 / OSA Shunsuke • 2020年6月から現職
• いわゆるサーバーサイドエンジニア ◦ 普段書いてるのは Ruby, SQL, TypeScript あたり • クックパッドマートの流通をつくっています ◦ ドライバー向けアプリケーションの開発 ◦ ルート計算の開発 ◦ 流通構造の設計・検討 ◦ etc • 情報の世界だけで完結せず、現実世界と向き合う必要があるプロダクトが好き • アカウントなど ◦ Twitter: @s_osa_ ◦ GitHub: s-osa © 2022 Cookpad Inc. 2 自己紹介 このスライド
• クックパッドマート流通の概要 • 流通を支える仕組み、使っている技術 ◦ ラベル ◦ アプリケーション
© 2022 Cookpad Inc. 3 今日話すこと
クックパッドマート流通の概要 © 2022 Cookpad Inc. 4
© 2022 Cookpad Inc. 5 クックパッドマート流通のトポロジー 集荷 横持ち転送 ステーション配送 宅配
流通を支えるラベル © 2022 Cookpad Inc. 6
• 便の種類や目的に応じて、複数のラベルを使い分けている ◦ 補助的なラベルなども合わせると10種類くらい • 実装の詳しい話など ◦
過去にブログを書いたのでそちらもどうぞ ◦ 「クックパッドマートにおける宣言的ラベル生成」 https://techlife.cookpad.com/entry/2021/08/18/100000 © 2022 Cookpad Inc. 7 いろいろなラベル
• 実はQRコードにちょっとした仕掛けがある • 普通のQRコードリーダーアプリで読み込むと ◦ 商品ページが開く ◦ ユーザー向けの機能
• クックパッドマートの流通で使っているアプリで読み込むと ◦ 出荷先番地などの流通で使うデータを読み取れる ◦ このデータを使って、出荷先番地のチェックなどをおこなっている © 2022 Cookpad Inc. 8 商品ラベル
• QRコードが表現しているのは単なる URL ◦ 今回の場合 https://ckma.to/p/11b4?pb=CAISDgiF2bIBEgcIGhIDMTUz • この URL
にアクセスすると、商品ページにリダイレクトされる ◦ 前半の https://ckma.to/p/11b4 部分 ◦ 通常のQRコードリーダーはこの挙動 • 流通用のデータはクエリ部分に入っているので、流通アプリはクエリ部分を読み取る ◦ 後半の pb=CAISDgiF2bIBEgcIGhIDMTUz 部分 © 2022 Cookpad Inc. 9 2種類の挙動を示すQRコード
• ラベルの面積は希少な資源 • 前半の https://ckma.to/p/11b4 部分 • URL 短縮サービスを立てている ◦
https://cookpad-mart.com/products/48352 → https://ckma.to/p/11b4 • 短いホスト名 ◦ cookpad-mart.com → ckma.to • 単語の短縮 ◦ products → p • 商品 ID の Base36 化 ◦ 48352 → 11b4 • 裏側は S3 (x-amz-website-redirect-location) + CloudFront © 2022 Cookpad Inc. 10 QRコードを小さくする / Host & Path
• 後半の pb=CAISDgiF2bIBEgcIGhIDMTUz 部分 • 素朴にやるとかなり長くなってしまう ◦ e.g. ?kind=order_item_label&order_item_id=12345678&shipping_depot_id=123&shipping_depot_address=1234… •
Protocol Buffers でシリアライズしている ◦ gRPC とかで使われてるやつ ◦ 高効率なバイナリ形式 ▪ Protocol Buffers バイナリを生成後、文字列にするために URL-safe Base64 エンコードしている ◦ フィールド名がデータに含まれないのが大きい ▪ 圧倒的なデータサイズ減少 ▪ コードの可読性も損なわない ◦ 型もついてきてハッピー • 冒頭の文字列に概ね右の JSON のようなデータが入っている © 2022 Cookpad Inc. 11 QRコードを小さくする / Query
© 2022 Cookpad Inc. 12
流通を支えるアプリケーション © 2022 Cookpad Inc. 13
• 便の種類に対応する複数のアプリケーションを使い分けている ◦ 便の種類によって、やること・作業者が全然違う ◦ アプリケーションを小さくシンプルに保ちたい ▪
ユーザーにとっても、開発者にとっても ◦ ひとつのアプリケーションにすると、認可まわりとかが特に大変 • 技術スタックは作られた時代によっていくつかのパターンがある ◦ サーバーサイドは一貫して Rails • 最近は以下の構成に寄せている ◦ Next.js (React) ◦ TypeScript ◦ GraphQL (Apollo Client) ◦ MUI ◦ OpenID Connect (Azure AD) © 2022 Cookpad Inc. 14 いろいろなアプリケーション
• 基本的な作業支援 ◦ 作業フローの提示 ◦ 必要な資材などの情報提供 ◦ 各種マニュアルの提供
• ラベルの印刷 • 集荷・納品作業のチェック ◦ QRコードを読み取って照合 ◦ 集荷した商品の消し込み ◦ 作業ログの取得 • 納品先ステーションにある冷蔵庫の解錠QRコード表示 © 2022 Cookpad Inc. 15 機能
• 少し前までは Web アプリではなく Android/iOS のネイティブアプリを中心に開発・運用していた • 改善を高速に回すことが難しいと感じることが多くなった
◦ チーム内にモバイルエンジニアがいない ◦ モバイルエンジニアの仕事が常にあるわけではないという事情がある ▪ フロントエンドに大きい改修を入れたい時期がある一方で、バックエンドのロジック改善を粛々とやっている時期もある • アプリケーションの性質やチームの体制などを踏まえて Web に寄せることにした © 2022 Cookpad Inc. 16 ネイティブアプリから Web への移行
• 使いやすさはどうか ◦ さすがにネイティブアプリには劣るが、作業効率などを考慮しても許容範囲内 • QRコードの読み取りや作業報告写真のアップロードはできるか ◦
最近の Web は普通にカメラを使えるので大丈夫 ◦ QRコード読み取り時に音も鳴らせるし、Android ならバイブレーションも使えるので Haptic Feedback も可能(iOS……) • Push 通知はできるか ◦ できない、iOS (Safari) が対応していない ◦ ドライバーを Slack に招待する運用にして、メンションを飛ばすことで半ば強引に解決 • GPS は使えるか ◦ フォアグラウンドでなら使える、バックグラウンドは…… ◦ そもそもいる? • Flutter? ◦ 流通チーム内に書ける人がいないため、速が出せない ◦ コードベースは1つになるが、複数アプリストアへのリリースなどは引き続き残る ◦ 各 OS 向けのブリッジ実装が必要なケースもあり、結局そこがボトルネックになる可能性もある © 2022 Cookpad Inc. 17 検討したこと
• リリース頻度が増えた ◦ 開発しやすくなったことにより、小さい改善を高速にリリースできるようになった ◦ Web のデプロイは楽だなぁ
• アプリケーションの新規作成が楽になった ◦ 技術スタックが揃っているのは楽 ◦ 単純に Android/iOS の2つ作らなくて良いというのも気楽 • 基本的な開発は流通チームだけで完結するようになった ◦ 優先順位やリリース時期などを流通チーム内で決めて進められるようになった ◦ 背景やドメイン知識を踏まえた開発ができるようになった • 単純な「ネイティブアプリ vs. Web アプリ」という話ではないので注意 ◦ アプリケーションの性質や今のメンバー構成を踏まえた上での結果 ◦ ネイティブアプリのほうが優れている点も多数あるものの、今の自分たちがより価値を置くものを選んだ結果 © 2022 Cookpad Inc. 18 移行した結果
まとめ © 2022 Cookpad Inc. 19
• 物理世界は大変なことも多い ◦ ラベルの印字面積は限られているし、一度印刷したラベルは書き換えられない ◦ オペレーションには慣性があって、急には変えられないこともある ◦
どんなに正確に計画を立てても、人間は間違える • でも、そういった制約や特性を考慮しながらより良い仕組みを模索して、物理世界に影響を与えるのはめっちゃ楽しい! ◦ コードだけではできないことができる • 興味ある方、ぜひ声をかけてください! ◦ この場でもインターネットでもどこでも ◦ https://twitter.com/s_osa_ (右のQRコード) © 2022 Cookpad Inc. 20 まとめ
© 2022 Cookpad Inc. 21