Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Sota Hagiwara

October 27, 2022
Tweet

More Decks by Sota Hagiwara

Other Decks in Programming

Transcript

  1. © 2022 Cookpad Inc. 2 ハギー
 @hagi, (Twitter)@soprog_, (GitHub)@souta0104 


    
 22卒
 買物プロダクト開発部 エンジニア 
 
 Android, Flutterを触ります。
 コーヒーが好き

  2. © 2022 Cookpad Inc. 3 • クックパッドでのFlutter採用事例の紹介 
 • どのような意図があり採用したのか

    
 • 実際の開発中の所感
 • 今、Flutterの採用を振り返ると
 触れること

  3. © 2022 Cookpad Inc. 5 Flutter
 単一のコードベースからモバイル, デスクトップ, ウェブ, 組み込みアプリケーションを構築できるフ

    レームワーク
 
 • Googleが開発していて、Dartで記述する 
 • 宣言的UI
 • https://flutter.dev/ 

  4. © 2022 Cookpad Inc. 14 クックパッドマート
 生鮮食品を中心として扱っているECプラット フォーム
 • コンビニエンスストア・ドラッグストア・駅・マ

    ンションなどの様々な場所にユーザーの受 け取り場所として専用の冷蔵庫が設置さ れており、ユーザーはアプリから注文を行 い、専用の冷蔵庫から商品を受け取ること ができる (自宅への配送も可能) 

  5. © 2022 Cookpad Inc. 19 アプリの前提
 
 • 事業者向けのアプリ 


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

  6. • ネイティブで実装 or Flutter
 ◦ 当初はネイティブでAndroid先行実装の予定 
 • 複雑な仕様はなく、特にUI上の表現がシンプルなためFlutterを用いるアイデアが出てきた 


    ◦ APIとの通信、DBへの保存というシンプルなアプリ構成 
 
 • Flutterの描画するUIの挙動が実用段階レベルなのを感じていた 
 • Flutter自体の開発も活発で頻繁にアップデートなども行われていて、Googleがフォーカスしてい るのを感じた
 © 2022 Cookpad Inc. 20 Flutterという選択肢

  7. • Flutterで開発することを決めた
 
 • 求める仕様とFlutterの旨味が重なった 
 ◦ 複雑ではないロジック
 ◦ iOS,

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

  8. • Flutterで開発することを決めた
 
 • 求める仕様とFlutterの旨味が重なった 
 ◦ 複雑ではないロジック
 ◦ iOS,

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

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

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

  11. 基本的にはiOS, Androidともにネイティブと変わらない 
 • flutterコマンドがipa, apk(aab)を吐いてくれる 
 ◦ 中で通常のiOS, Androidアプリケーションがビルドされている

    
 • これをfastlaneなども用いてアップロードしてあげたり.. 
 
 環境
 • Flutterコマンドを導入できる場所であればどこでも動く 
 • クックパッドでは...
 © 2022 Cookpad Inc. 29 アプリリリース周り

  12. 「いい選択だったのでは」
 • アプリエンジニアは一人で実装を行えた 
 • iOS版もAndroidのリリース後少ない工数で開発を行えた 
 • 実際に問題なく今日も運用されている 


    • 挙動などに不満や問題も上がっていない 
 →事業者向けアプリに採用したのはよかった 
 
 現状の課題点 (Flutterというよりはプロダクトの優先度の話ではある) 
 • Flutterが書けてこのアプリに知見のある人が自分しかいないので危うさはある。 
 ◦ ドキュメントの整備など
 • 十分なメンテナンスの時間を割けていない。 
 © 2022 Cookpad Inc. 32 Flutterの採用を今振り返ると

  13. 特に有効なユースケースを考えて、ネイティブ/Web/Flutter etc..を選択する 
 • 全解決の神ではもちろんない
 ◦ ネイティブ開発は滅ぶ!! とは私は思っていません 
 •

    Flutter向きそう
 ◦ 事業者向けのアプリ
 ◦ 高速なパフォーマンスを意識しないアプリ 
 ◦ ツール系の簡単なアプリ
 ◦ 新規事業とか新機能のプロトタイピング、MVPのアプリ 
 • ネイティブで書くのがいいかも
 ◦ プラットフォームそれぞれに準拠したUIやなめらかな操作感を求められるアプリ 
 ◦ 端末機能をフル活用したアプリ
 © 2022 Cookpad Inc. 34 今後のFlutterへの向き合い方(@hagiの所感)

  14. • アプリを作る際はFlutterをぜひ選択肢に入れてみて 
 ◦ マルチプラットフォームには夢がある。
 ◦ 特性を生かしていい感じにネイティブ・Flutter etc..を使い分ける 
 ◦

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