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.3k
「粗利を計算する」の難しさ / KPI Measurement in the real world
osa
1
1.3k
八百屋のCTOになったのでとりあえず店に立ってみた / Understand? Understand!
osa
3
1.6k
見せる、見える、見れる / Show, See, Seek.
osa
0
810
before action setter いる? / Good-bye "before action setter"
osa
3
8.8k
チームの語彙を育ててコミュニケーションできるチームをつくる / Build Vocabulary, Build Team
osa
10
7.1k
技術基礎研修「クックパッドを支える仕組み」 / Introduction to the Internet
osa
178
390k
すぐそこにある "異文化" コミュニケーション / Daily Intercultural Communication
osa
1
1.4k
oneshot task をいい感じにする / Introduce oneshot task generator
osa
0
1.4k
Other Decks in Programming
See All in Programming
KubeCon + CloudNativeCon NA 2024 Overviewat Kubernetes Meetup Tokyo #68 / amsy810_k8sjp68
masayaaoyama
0
250
MCP with Cloudflare Workers
yusukebe
2
220
採用事例の少ないSvelteを選んだ理由と それを正解にするためにやっていること
oekazuma
2
1k
Cloudflare MCP ServerでClaude Desktop からWeb APIを構築
kutakutat
1
550
クリエイティブコーディングとRuby学習 / Creative Coding and Learning Ruby
chobishiba
0
3.9k
선언형 UI에서의 상태관리
l2hyunwoo
0
160
アクターシステムに頼らずEvent Sourcingする方法について
j5ik2o
4
280
Итераторы в Go 1.23: зачем они нужны, как использовать, и насколько они быстрые?
lamodatech
0
780
Fibonacci Function Gallery - Part 1
philipschwarz
PRO
0
220
Semantic Kernelのネイティブプラグインで知識拡張をしてみる
tomokusaba
0
180
The Efficiency Paradox and How to Save Yourself and the World
hollycummins
1
440
Scalaから始めるOpenFeature入門 / Scalaわいわい勉強会 #4
arthur1
1
330
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
0
98
The Art of Programming - Codeland 2020
erikaheidi
53
13k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5k
Six Lessons from altMBA
skipperchong
27
3.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
810
Faster Mobile Websites
deanohume
305
30k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Code Reviewing Like a Champion
maltzj
520
39k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
5
450
Mobile First: as difficult as doing things right
swwweet
222
9k
Reflections from 52 weeks, 52 projects
jeffersonlam
347
20k
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