実はクックパッドでもFlutter使ってるんですよ〜 - DroidKaigi2022 AfterParty

© 2022 Cookpad Inc. 2022/10/19 実はクックパッドでもFlutter使ってるんですよ〜  @hagi (これで呼んで) またの名を
@soprog_ (Twitter) またの名を @souta0104 (GitHub)

© 2022 Cookpad Inc. 2 ハギー  @hagi, (Twitter)@soprog_, (GitHub)@souta0104  
  22卒  買物プロダクト開発部エンジニア     Android, Flutterを触ります。  コーヒーが好き 

© 2022 Cookpad Inc. 3 • クックパッドでのFlutter採用事例の紹介   • どのような意図があり採用したのか
  • 実際の開発中の所感  • 今、Flutterの採用を振り返ると  触れること 

© 2022 Cookpad Inc. 5 Flutter  単一のコードベースからモバイル, デスクトップ, ウェブ, 組み込みアプリケーションを構築できるフ
レームワーク    • Googleが開発していて、Dartで記述する   • 宣言的UI  • https://flutter.dev/  

© 2022 Cookpad Inc. 2022/10/19 実はクックパッドでもFlutter使ってるんですよ〜  @hagi (これで呼んで) またの名を
@soprog_ (Twitter) またの名を @souta0104 (GitHub)

© 2022 Cookpad Inc. 14 クックパッドマート  生鮮食品を中心として扱っているECプラットフォーム  • コンビニエンスストア・ドラッグストア・駅・マ
ンションなどの様々な場所にユーザーの受け取り場所として専用の冷蔵庫が設置されており、ユーザーはアプリから注文を行い、専用の冷蔵庫から商品を受け取ることができる (自宅への配送も可能)  

© 2022 Cookpad Inc. 19 アプリの前提    • 事業者向けのアプリ  
◦ ラベルのデータをAPIを介してfetchする   ◦ iOS, Androidに提供されてるSDKを介して Bluetoothでプリンターと接続し、ラベルデータを送信する  • 特徴  ◦ iOS, Androidで展開したい   ◦ プラットフォーム固有のらしさのあるUIを必ず実現する必要はない   ◦ 複雑なロジックは存在しない    

• ネイティブで実装 or Flutter  ◦ 当初はネイティブでAndroid先行実装の予定   • 複雑な仕様はなく、特にUI上の表現がシンプルなためFlutterを用いるアイデアが出てきた  
◦ APIとの通信、DBへの保存というシンプルなアプリ構成     • Flutterの描画するUIの挙動が実用段階レベルなのを感じていた   • Flutter自体の開発も活発で頻繁にアップデートなども行われていて、Googleがフォーカスしているのを感じた  © 2022 Cookpad Inc. 20 Flutterという選択肢 

• Flutterで開発することを決めた    • 求める仕様とFlutterの旨味が重なった   ◦ 複雑ではないロジック  ◦ iOS,
Androidで共通のUI  ◦ モバイルエンジニアのリソースが少なくて済む(ECアプリなどもやることが無限)   • 個人で得た技術を業務で活かせればと思った   • (実は複雑なアプリじゃないし最悪ネイティブで書き直してもいいという話もしていた)   © 2022 Cookpad Inc. 21 Flutterを用いる意思決定 

• Flutterで開発することを決めた    • 求める仕様とFlutterの旨味が重なった   ◦ 複雑ではないロジック  ◦ iOS,
Androidで共通のUI  ◦ モバイルエンジニアのリソースが少なくて済む(ECアプリなどもやることが無限)   • 個人で得た技術を業務で活かせればと思った   • (実は複雑なアプリじゃないし最悪ネイティブで書き直してもいいという話もしていた)   [宣伝]積極的に新しい技術への取り組みが行えるいい環境[宣伝]   © 2022 Cookpad Inc. 22 Flutterを用いる意思決定 

• iOS, Androidで提供されているプリンターSDKとのつなぎ込み   • CI/CD  © 2022 Cookpad Inc.
24 ラベルプリンターアプリ開発の様子 

• AndroidでSDKの動作を確認するサンプル実装をし、その実装を流用してFlutterと繋げる戦略を取った  • 後にiOSでも実装  © 2022 Cookpad Inc. 25
iOS, Androidで提供されているプリンターSDKとのつなぎ込み     

MethodChannelという仕組みで実現(Flutter側)   class BatteryState { // クライアント側とホスト側は、 MethodChannelのコンストラクタで渡されるチャネル名で接続される static const
_platform = MethodChannel('samples.flutter.dev/battery'); Future<void> _getBatteryLevel() async { try { // methodを呼び出す。method名をStringで指定してあげる。 final result = await _platform.invokeMethod<int>('getBatteryLevel'); } on PlatformException catch (e) { // Stringで指定したメソッドが未定義などを場合エラーが throwされる } } } © 2022 Cookpad Inc. 26 iOS, Androidで提供されているプリンターSDKとのつなぎ込み     

MethodChannelという仕組みで実現(Android側)   when (call.method) { // call.methodにFlutter側で引数に渡したメソッド名が入っている "getBatteryLevel" -> {
try { val batteryLevel = getBatteryLevel() result.success(batteryLevel) // 成功時は result.success } catch (throwable: Throwable) { result.error("1000", "Failed", null) // 失敗時は result.error } } else -> { result.notImplemented() // 未定義のメソッド名が入っていたときは result.notImplemented() } }  © 2022 Cookpad Inc. 27 iOS, Androidで提供されているプリンターSDKとのつなぎ込み     

基本的にはiOS, Androidともにネイティブと変わらない   • flutterコマンドがipa, apk(aab)を吐いてくれる   ◦ 中で通常のiOS, Androidアプリケーションがビルドされている
  • これをfastlaneなども用いてアップロードしてあげたり..     環境  • Flutterコマンドを導入できる場所であればどこでも動く   • クックパッドでは...  © 2022 Cookpad Inc. 29 アプリリリース周り 

「いい選択だったのでは」  • アプリエンジニアは一人で実装を行えた   • iOS版もAndroidのリリース後少ない工数で開発を行えた   • 実際に問題なく今日も運用されている  
• 挙動などに不満や問題も上がっていない   →事業者向けアプリに採用したのはよかった     現状の課題点 (Flutterというよりはプロダクトの優先度の話ではある)   • Flutterが書けてこのアプリに知見のある人が自分しかいないので危うさはある。   ◦ ドキュメントの整備など  • 十分なメンテナンスの時間を割けていない。   © 2022 Cookpad Inc. 32 Flutterの採用を今振り返ると 

特に有効なユースケースを考えて、ネイティブ/Web/Flutter etc..を選択する   • 全解決の神ではもちろんない  ◦ ネイティブ開発は滅ぶ!! とは私は思っていません   •
Flutter向きそう  ◦ 事業者向けのアプリ  ◦ 高速なパフォーマンスを意識しないアプリ   ◦ ツール系の簡単なアプリ  ◦ 新規事業とか新機能のプロトタイピング、MVPのアプリ   • ネイティブで書くのがいいかも  ◦ プラットフォームそれぞれに準拠したUIやなめらかな操作感を求められるアプリ   ◦ 端末機能をフル活用したアプリ  © 2022 Cookpad Inc. 34 今後のFlutterへの向き合い方(@hagiの所感) 

• アプリを作る際はFlutterをぜひ選択肢に入れてみて   ◦ マルチプラットフォームには夢がある。  ◦ 特性を生かしていい感じにネイティブ・Flutter etc..を使い分ける   ◦
「B向けハードウェアと通信するが複雑なデザインはないアプリを高速に展開する」ユースケースにクックパッドマートではFlutterを選択したが、現時点ではいい選択だったと思っている。  ◦ プラットフォーム固有APIもシンプルなものなので大きな障壁にはならない   • クックパッドでは課題解決へ向けて囚われず・縛られず技術を活用していける環境がある。そしてFlutterを利用しているアプリもある。   ◦ 物事を運ぶために適した技術はどれか？というような本質を考えた囚われない思想や、まだない技術への取り組みを積極的に行える縛られない環境がある   ◦ 強みを存分に活かせる環境とも言える   ◦ (個人的にはFlutterを用いた開発ももっと増えてほしい   © 2022 Cookpad Inc. 35 まとめ/今日覚えて・感じてほしいこと 

実はクックパッドでもFlutter使ってるんですよ〜 - DroidKaigi2022...

実はクックパッドでもFlutter使ってるんですよ〜 - DroidKaigi2022 AfterParty

More Decks by Sota Hagiwara

Other Decks in Programming

Featured

Transcript