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.5k
「粗利を計算する」の難しさ / KPI Measurement in the real world
osa
1
1.3k
八百屋のCTOになったのでとりあえず店に立ってみた / Understand? Understand!
osa
3
1.7k
見せる、見える、見れる / Show, See, Seek.
osa
0
850
before action setter いる? / Good-bye "before action setter"
osa
3
9.1k
チームの語彙を育ててコミュニケーションできるチームをつくる / Build Vocabulary, Build Team
osa
10
7.2k
技術基礎研修「クックパッドを支える仕組み」 / Introduction to the Internet
osa
179
390k
すぐそこにある "異文化" コミュニケーション / Daily Intercultural Communication
osa
1
1.5k
oneshot task をいい感じにする / Introduce oneshot task generator
osa
0
1.5k
Other Decks in Programming
See All in Programming
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
ふつうの技術スタックでアート作品を作ってみる
akira888
1
900
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.4k
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
290
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
4k
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
2
120
PipeCDのプラグイン化で目指すところ
warashi
1
280
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
790
技術同人誌をMCP Serverにしてみた
74th
1
660
ニーリーにおけるプロダクトエンジニア
nealle
0
870
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
180
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
13
4.9k
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Fireside Chat
paigeccino
37
3.5k
Facilitating Awesome Meetings
lara
54
6.4k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Agile that works and the tools we love
rasmusluckow
329
21k
What's in a price? How to price your products and services
michaelherold
246
12k
Scaling GitHub
holman
460
140k
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