物理世界でモノを運ぶための仕組み / How to Distribute Items in Cookpad Mart

© 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 今日話すこと 

• 便の種類や目的に応じて、複数のラベルを使い分けている   ◦ 補助的なラベルなども合わせると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 

• 便の種類に対応する複数のアプリケーションを使い分けている   ◦ 便の種類によって、やること・作業者が全然違う   ◦ アプリケーションを小さくシンプルに保ちたい   ▪
ユーザーにとっても、開発者にとっても   ◦ ひとつのアプリケーションにすると、認可まわりとかが特に大変   • 技術スタックは作られた時代によっていくつかのパターンがある   ◦ サーバーサイドは一貫して 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 移行した結果 

• 物理世界は大変なことも多い   ◦ ラベルの印字面積は限られているし、一度印刷したラベルは書き換えられない   ◦ オペレーションには慣性があって、急には変えられないこともある   ◦
どんなに正確に計画を立てても、人間は間違える   • でも、そういった制約や特性を考慮しながらより良い仕組みを模索して、物理世界に影響を与えるのはめっちゃ楽しい！   ◦ コードだけではできないことができる   • 興味ある方、ぜひ声をかけてください！   ◦ この場でもインターネットでもどこでも   ◦ https://twitter.com/s_osa_ （右のQRコード）   © 2022 Cookpad Inc. 20 まとめ 

物理世界でモノを運ぶための仕組み / How to Distribute Items in Cookpad Mart

物理世界でモノを運ぶための仕組み / How to Distribute Items in Cookpad Mart

OSA Shunsuke

More Decks by OSA Shunsuke

Other Decks in Programming

Featured

Transcript

© 2022 Cookpad Inc. 物理世界でモノを運ぶための仕組み  2022-03-24 / Cookpad Tech Kitchen

• 長俊祐 / OSA Shunsuke   • 2020年6月から現職

• クックパッドマート流通の概要   • 流通を支える仕組み、使っている技術   ◦ ラベル  ◦ アプリケーション

クックパッドマート流通の概要  © 2022 Cookpad Inc. 4

© 2022 Cookpad Inc. 5 クックパッドマート流通のトポロジー  集荷横持ち転送ステーション配送宅配

流通を支えるラベル  © 2022 Cookpad Inc. 6

• 便の種類や目的に応じて、複数のラベルを使い分けている   ◦ 補助的なラベルなども合わせると10種類くらい   • 実装の詳しい話など   ◦

• 実はQRコードにちょっとした仕掛けがある   • 普通のQRコードリーダーアプリで読み込むと   ◦ 商品ページが開く  ◦ ユーザー向けの機能

• QRコードが表現しているのは単なる URL   ◦ 今回の場合 https://ckma.to/p/11b4?pb=CAISDgiF2bIBEgcIGhIDMTUz • この URL

• ラベルの面積は希少な資源 • 前半の https://ckma.to/p/11b4 部分 • URL 短縮サービスを立てている ◦

• 後半の pb=CAISDgiF2bIBEgcIGhIDMTUz 部分 • 素朴にやるとかなり長くなってしまう ◦ e.g. ?kind=order_item_label&order_item_id=12345678&shipping_depot_id=123&shipping_depot_address=1234… •

© 2022 Cookpad Inc. 12

流通を支えるアプリケーション  © 2022 Cookpad Inc. 13

• 便の種類に対応する複数のアプリケーションを使い分けている   ◦ 便の種類によって、やること・作業者が全然違う   ◦ アプリケーションを小さくシンプルに保ちたい   ▪

• 基本的な作業支援  ◦ 作業フローの提示  ◦ 必要な資材などの情報提供   ◦ 各種マニュアルの提供

• 少し前までは Web アプリではなく Android/iOS のネイティブアプリを中心に開発・運用していた   • 改善を高速に回すことが難しいと感じることが多くなった

• 使いやすさはどうか   ◦ さすがにネイティブアプリには劣るが、作業効率などを考慮しても許容範囲内   • QRコードの読み取りや作業報告写真のアップロードはできるか   ◦

• リリース頻度が増えた   ◦ 開発しやすくなったことにより、小さい改善を高速にリリースできるようになった   ◦ Web のデプロイは楽だなぁ

まとめ  © 2022 Cookpad Inc. 19

• 物理世界は大変なことも多い   ◦ ラベルの印字面積は限られているし、一度印刷したラベルは書き換えられない   ◦ オペレーションには慣性があって、急には変えられないこともある   ◦

© 2022 Cookpad Inc. 21