実はクックパッドでもFlutter使ってるんですよ〜 - DroidKaigi2022 AfterParty

Transcript

1. © 2022 Cookpad Inc. 2022/10/19 実はクックパッドでもFlutter使ってるんです よ〜
 @hagi (これで呼んで) またの名を @soprog_ (Twitter) またの名を @souta0104 (GitHub)
2. © 2022 Cookpad Inc. 2 ハギー
 @hagi, (Twitter)@soprog_, (GitHub)@souta0104 
 
 22卒
 買物プロダクト開発部 エンジニア 
 
 Android, Flutterを触ります。
 コーヒーが好き

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

4. © 2022 Cookpad Inc. 4 Flutter ご存知ですか！

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

6. © 2022 Cookpad Inc. 6 Flutter 触ったことありますか！

7. © 2022 Cookpad Inc. 7 Flutter プロダクトで使ってますか！

8. © 2022 Cookpad Inc. 8 Flutter とクックパッド

9. © 2022 Cookpad Inc. 9 Flutter とクックパッド

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

12. © 2022 Cookpad Inc. 12 クックパッドではどのようなユースケースでFlutterを使っているの？

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

15. © 2022 Cookpad Inc. 15 クックパッドマート

16. © 2022 Cookpad Inc. 16 クックパッドマート

17. © 2022 Cookpad Inc. 17 クックパッドマート

18. © 2022 Cookpad Inc. 18 Flutterを用いる意思決定

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

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

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

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

23. © 2022 Cookpad Inc. 23 ラベルプリンターアプリ 開発の様子

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

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

26. 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とのつなぎ込み
 
 

27. 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とのつなぎ込み
 
 

28. © 2022 Cookpad Inc. 28 iOS, Androidで提供されているプリンターSDKとのつなぎ込み
 
 

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

30. オフレコ
 © 2022 Cookpad Inc. 30 あと微妙に渋かった話

31. © 2022 Cookpad Inc. 31 Flutterの採用を今振り返ると

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

33. © 2022 Cookpad Inc. 33 今後のFlutterへの向き合い方(@hagiの所感)

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

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

36. Flutterを活用
 © 2022 Cookpad Inc. 36
37. © 2022 Cookpad Inc. 37