エムスリーテックブログ

エムスリー(m3)のエンジニア・開発メンバーによる技術ブログです

Flutter Kaigi 2023でFlutterのライフサイクルについて発表してきた

11/10に国内最大のFlutterカンファレンスであるFlutter Kaigi 2023が開催されました 🎉 エムスリーはSilverスポンサーとして参加し、私 荒谷(@_a_akira)がMaster of Flutter lifecycleという発表してきたので参加レポートを、また立花と小林(@bakobox)がセッションレポートを書きたいと思います。

flutterkaigi.jp

ノベルティ

今回は、エムスリーとして「Flutter 完全に理解した」シールと「デバッグ時にでるレイアウトエラー」シールを配布させて頂きました。

シールだとどこにも貼られずに使われないこともしばしば...
普段からダジャレ[1] で鍛えたクリエイティビティで、どうしたら貼ってもらえるかを考えて捻り出された渾身のシールが完成しました。 Flutter開発をやったことがある方なら、一度は遭遇するであろうあのエラー表示。

SNS上や会場では、「めっちゃ欲しい!」「発想が天才」「完全に負けた」との声が多数あり、好評だったので大成功でした!!

ありがたいことにまだまだたくさんの声がありました。

裏話

さらにMaterial Design 3っぽくしてM3とかけようとしていたのですが、このシールだけで表現するのが難しくて角丸がそれっぽくなっているぐらいの裏設定があります。
次回に期待

セッション

発表内容

私荒谷がMaster of Flutter lifecycleという名前で発表をしました。
意図としては、AndroidやiOSでは基本となっているライフサイクルの概念がFlutterではEverything is a widgetになっていて、意識しなくても良くなっている反面、凝ったことをしようとすると少し扱いづらい課題を感じていたため、この内容で発表をしました。
さらに、丁度プロポーザル登録の時期に現時点(2023/11/14)でのマイナーバージョンの最新であるFlutter 3.13.xへのアップデートもあり、Flutterのライフサイクル自体に大きな変更が加わったのもタイミングが良かったです。

  • スライド

speakerdeck.com

photos.app.goo.gl

裏話

私は発表スライドを作る時にまずテーマ作成からして、テンションを上げて取り掛かるという形から入るスタイルで発表スライドを進めていくのですが、採択が決まって今回はどんなテーマにしようかなという頃に丁度M3 Macの発売があるとの噂を聞きつけ、私用PCを買い替えたかったタイミングなので これは使えるかもと思い「M3社員によるM3 MacでM3(Material Design 3)デザインで発表する」をテーマに準備してきました。話のつかみでウケがとれたので40万課金した甲斐がありましたw
ちなみにスライドのトップはFlutterのロゴを意識しています。

  • こだわりのナビゲーション

他にも色々小ネタがあるので動画形式の方を見てもらえると嬉しいです。

ライブラリ公開した

参加者の方からXでライブラリを公開して欲しいという、圧を受けたため公開しました。 本当に薄いライブラリになっているので、もし使いたいマニアックな方がいればどうぞ。

FlutterアプリのライフサイクルをWidgetsBindingObserverとNavigator Eventの両方をフックしているので、従来のAndroid, iOSであったようなライフサイクルイベントを一箇所で処理できるようになります。
本来はModalRouteが必要になりますが、Navigatorのnameでマッチングすることで、Contextに依らず利用可能になっています。

pub.dev

参加レポート

こんにちは、デジスマチームの立花です。 FlutterKaigi2023にオフライン参加してきましたのでその様子をお伝えします。

Flutterアプリにおけるテスト戦略の見直しと自動テストの導入

インシデントを減らすためにどのようにテスト戦略を作り、どう自動テストを作成していけばいいかについての発表でした。

テスト戦略の見直しのきっかけから、実際に自動テストを導入した結果どのような効果があったのかまで説明されているのが素晴らしかったです。

自動テストの目的についての考え方や、手動テストとの差別化、どの機能についてのテストを書くかの判断基準についてなど、より効果的な自動テストを行っていくにあたって非常に参考になりました。

speakerdeck.com

Dartのコード生成の仕組みと、コード自動生成のパッケージを自作する方法について

json_serializableやfreezed、openapi_generatorのようなパッケージで使われているコードの自動生成がどのような仕組みで行われているのかについての発表でした。

コード自動生成を支えるツールの紹介やコード自動生成のサンプルプログラムの解説がとても分かりやすく、 発表を一通り聞いた後は自分でもコード自動生成処理を自作できそう! と感じました。

www.slideshare.net

Flutterアプリのセキュリティ対策を考えてみる

Flutterアプリのセキュリティ対策についての発表でした。

セキュリティ対策を考えるためにはまず攻撃手段を知る必要があるということで、 よくある攻撃手法やその攻撃に対しての対策ができるライブラリなどが紹介されていました。

全ての攻撃を防ぐことは不可能に近いため、攻撃者のコストや発生時の被害、対策コストをそれぞれ比較しどんな攻撃にどこまで対策するかをまず考えることが重要だと改めて感じました。

speakerdeck.com

我々にはなぜRiverPodが必要なのか - InheritedWidget から始まる app state 管理手法の課題

Riverpodの動く仕組みや、Riverpodで解決できる問題についての発表でした。

StatefulWidgetやInheritedWidgetの状態管理の仕組みや、それらとRiverpodの違いについての説明が図を使って分かりやすく説明されており、 自分のRiverpodについての理解が曖昧だった部分に気づくことができました。

Riverpodにはアプリの状態管理のよくある問題に対しての課題に対してあらかじめ用意された解決策があり、 Riverpodを使う際にはその解決策への理解や、自分のアプリに合っているかの確認が重要と説明されていました。

docs.google.com

ここからはマルチデバイスチームの小林が書かせていただきます。

詳細!Flutterにおける課金実装

アプリでしか注文できないカレー「TOKYO MIX CURRY」の決済周りのお話でした。 ちなみに私は月2回の出社時によく利用させていただいてます。美味しいです!

通常のアプリと店舗に設置するセルフレジ用アプリの2つのお話があり、
通常のアプリの方ではiOSはネイティブ・AndroidはFlutterで実装していたところをFlutterに1本化するまでの過程、 セルフレジのアプリではICリーダー・レシートプリンタとの連携、前の人が途中で操作を止め離脱したときにトップに戻す工夫など興味深いお話を聞くことができました。

fortee.jp

Flutterで構築する漫画ビューア

漫画アプリのビューアをFlutterで作れるかどうかの技術検証のお話でした。

Edge to Edge対応や見開きページの実現、画像周りの扱いといった漫画アプリならではの細かい工夫を知ることができました。
まだ検証は完了していないとのことでしたが、このままFlutterでイケそうということだったのでリリースされるのが楽しみです。

speakerdeck.com

まとめ

最後に、Flutter Kaigiのスタッフの方々をはじめ発表者、参加者の皆さんお疲れ様でした!
初めてのFlutter Kaigiオフライン開催ということで、準備が大変だったと思いますが最高のカンファレンスでした!
ありがとうございました!!!

We're hiring !!!

エムスリーでは、Flutterも含めKotlin Multiplatformなどのクロスプラットフォーム開発やAndroid, iOSネイティブアプリの開発も行っています。
興味があればぜひこちらから応募お願いします!

jobs.m3.com


  1. Slackにダジャレのリアクションが流れるチャンネルが存在し、ほぼ毎日通知が来るくらいダジャレを発している人達がいる