調理場で使うタブレット専用アプリをどうつくったか -STORES モバイルオーダー実装の舞台裏-

調理場で使うタブレット専用アプリ  をどうつくったか -STORES   モバイルオーダー実装の舞台裏- Kenta Enomoto  

榎本健太  STORES ブランドアプリチーム  iOS エンジニア  enomot_  enomoto  自己紹介 

1. STORES モバイルオーダーとは  2. 私たちが直面した「制約」  3. 制約の中で下した判断  4. 開発の結果とタイムライン  5.
まとめ  アジェンダ 

STORES  モバイルオーダーとは 

注文から決済、受け取りまでを  スムーズにデジタル化するプロダクト  STORES モバイルオーダーとは  • モバイルオーダーサービスを簡単に導入できる仕組み  • 注文、決済、受け取りまでをスムーズに 

キッチンディスプレイとは  調理場で使われるタブレット専用アプリ  • 調理場でオーダー情報をリアルタイムに把握  • オーダーのステータスを変更し、お客さまに進捗を通知 

2. 私たちが直面  した「制約」 

制約  6 1. 調理場特有の要件  2. ビジネスのスピード感と、限られたリソースによる、事業上の制約 

制約①：調理場特有の要件  一般的なアプリとは異なる現場環境からの要求  • 一覧性  ◦ 一画面で必要な情報がすべてわかるUI  • 即時性  ◦ 新しい注文に「すぐ」気づくことができる通知やUI 
• 堅牢性 (端末)  ◦ 故障に強い端末（例：防水性）を選択可能であること 

実際に使われている現場 (iki Roastery & Eatery さま) 

実際に使われている現場の様子 (iki Roastery & Eatery さま) 

制約①：調理場特有の要件（再掲）  一般的なアプリとは異なる現場環境からの要求  • 一覧性  ◦ 一画面で必要な情報がすべてわかるUI  • 即時性  ◦ 新しい注文に「すぐ」気づくことができる通知やUI 
• 堅牢性 (端末)  ◦ 故障に強い端末（例：防水性）を選択可能であること 

制約②：事業上の制約  ビジネスのスピード感と、限られたリソースによる制約  • ゼロからの新規開発  • ビジネス要求に応えるための早期リリース  • Android版のリリースが必須  ◦
端末の選択肢のため  • 少人数チームと技術スタックの制限 

制約の中で下した判断 

制約の中でどのように判断をしたか  MUST/前提として満たす必要あり • Android版の提供 • 一画面で情報がわかる UI • 早期リリース •
エンジニアリソースの不足 • ゼロからの開発 WANT/妥協できる • ネイティブらしいリッチな UI ◦ 凝ったアニメーション ◦ 複雑で美しいデザイン • iOS版の早期リリース全てはトレードオフである 

制約への回答  1. Kotlin Multi Platform /  Compose Multi Platform という技術選定 
◦ Android 版の提供  ◦ 早期リリース  ◦ エンジニアリソースの不足  2. UI 設計による問題解決  ◦ 一画面で情報がわかるUI 

制約への回答①：技術選定  Kotlin Multiplatform / Compose Multiplatform  (KMP / CMP)  Shared
UI Compose Multiplatform Shared logic Kotlin Multiplatform

制約への回答①：技術選定  Kotlin Multiplatform / Compose Multiplatform を選定  • Android 版を先行リリース 
• iOS 版も要望が上がる可能性が高い  • 仮に iOS をネイティブで作り直しになっても、 KMP / CMP のコードは Android の資産として活かせる  • 業務アプリのため、プラットフォーム固有の UI の作り込みは少ない 

技術選定上の工夫  プロトタイピング  • リリース前の時点では CMP を用いた事例はまだ少なかった  • 実装に先駆けて2週間のプロトタイピングを実施  • マルチプラットフォーム環境での開発効率を検証 

KMP/CMP による実装の詳細を知りたい方へ  https://2025.droidkaigi.jp/timetable/944860/ 

制約への回答②：UI設計と工夫  • 1画面で情報がわかる UI の設計  • ボトムシート UI 

制約への回答②：UI設計と工夫  1画面で情報がわかる UI の設計 

制約への回答②：UI設計と工夫  ボトムシート UI 

開発の結果と  タイムライン 

Android 版の成果  Android 版  • 通常の Android ネイティブ開発に対して、1.3倍程度の工数でリリース  （KMP/CMP
のキャッチアップも含む）  • Jetpack Compose の知識があれば UI 実装で迷う部分は少ない 

iOS 版の成果  iOS 版  • 実装着手からおよそ 2 ヶ月でリリース  • Android
版と 90 %のコードを共有  • コードを共有できないだけモジュール分割と DI を用いて分離する手法を用いた 

開発タイムライン  プロダクト  構想  2024/03  Android版開発着手  2024/08  Android版リリース  2024/12 
2025/03  iOS版  リリース  制約の中での迅速なリリースを実現  技術選定/  設計 

得られたもの  採用した技術選定は、 STORES として  今後の資産としても活用できる基盤になった 

まとめ 

得られたもの  制約から最適解に辿り着く  • まず制約をすべて明らかにすること  • その中で最も重要なビジネス上の制約を特定し、遵守する  • 守るべきものを決めれば、最適な設計は自ずと浮かび上がる 

調理場で使うタブレット専用アプリをどうつくったか -STORES モバイルオーダー実装の...

調理場で使うタブレット専用アプリをどうつくったか -STORES モバイルオーダー実装の舞台裏-

Kenta Enomoto

More Decks by Kenta Enomoto

Other Decks in Technology

Featured

Transcript