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
840
before action setter いる? / Good-bye "before action setter"
osa
3
9k
チームの語彙を育ててコミュニケーションできるチームをつくる / 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
MLOps Japan 勉強会 #52 - 特徴量を言語を越えて一貫して管理する, 『特徴量ドリブン』な MLOps の実現への試み
taniiicom
2
560
Doma で目指す ORM 最適解
nakamura_to
1
160
CRUD から CQRS へ ~ 分離が可能にする柔軟性
tkawae
0
220
RubyKaigi Hack Space in Tokyo & 函館最速 "予習" 会 / RubyKaigi Hack Space in Tokyo & The Fastest Briefing of RubyKaigi 2026 in Hakodate
moznion
1
120
Investigating Multithreaded PostgreSQL
macdice
0
150
JVM の仕組みを理解して PHP で実装してみよう
m3m0r7
PRO
1
240
バランスを見極めよう!実装の意味を明示するための型定義 TSKaigi 2025 Day2 (5/24)
whatasoda
2
770
OpenTelemetryで始めるベンダーフリーなobservability / Vendor-free observability starting with OpenTelemetry
seike460
PRO
0
160
コードに語らせよう――自己ドキュメント化が内包する楽しさについて / Let the Code Speak
nrslib
5
910
try-catchを使わないエラーハンドリング!? PHPでResult型の考え方を取り入れてみよう
kajitack
3
220
Blueskyのプラグインを作ってみた
hakkadaikon
1
270
ユーザーにサブドメインの ECサイトを提供したい (あるいは) 2026年函館で一番熱くなるかもしれない言語の話
uvb_76
0
170
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
25
2.8k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Side Projects
sachag
454
42k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
6
650
Become a Pro
speakerdeck
PRO
28
5.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
Raft: Consensus for Rubyists
vanstee
137
7k
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