11/10に国内最大のFlutterカンファレンスであるFlutter Kaigi 2023が開催されました 🎉 エムスリーはSilverスポンサーとして参加し、私 荒谷(@_a_akira)がMaster of Flutter lifecycleという発表してきたので参加レポートを、また立花と小林(@bakobox)がセッションレポートを書きたいと思います。
ノベルティ
今回は、エムスリーとして「Flutter 完全に理解した」シールと「デバッグ時にでるレイアウトエラー」シールを配布させて頂きました。
シールだとどこにも貼られずに使われないこともしばしば...
普段からダジャレ[1] で鍛えたクリエイティビティで、どうしたら貼ってもらえるかを考えて捻り出された渾身のシールが完成しました。
Flutter開発をやったことがある方なら、一度は遭遇するであろうあのエラー表示。
SNS上や会場では、「めっちゃ欲しい!」「発想が天才」「完全に負けた」との声が多数あり、好評だったので大成功でした!!
#FlutterKaigi
— Gadgelogger (@gadgelogger) 2023年11月10日
これは草 pic.twitter.com/pVWeYAqDHK
これマジで良すぎ #FlutterKaigi pic.twitter.com/3UIikW2ZiY
— kumamo_tone (@kumamo_tone) 2023年11月10日
センスしかない https://t.co/nV2bOrP8yH
— Notchy (@chnotchy) 2023年11月10日
ありがたいことにまだまだたくさんの声がありました。
裏話
さらにMaterial Design 3っぽくしてM3とかけようとしていたのですが、このシールだけで表現するのが難しくて角丸がそれっぽくなっているぐらいの裏設定があります。
次回に期待
セッション
発表内容
私荒谷がMaster of Flutter lifecycleという名前で発表をしました。
意図としては、AndroidやiOSでは基本となっているライフサイクルの概念がFlutterではEverything is a widgetになっていて、意識しなくても良くなっている反面、凝ったことをしようとすると少し扱いづらい課題を感じていたため、この内容で発表をしました。
さらに、丁度プロポーザル登録の時期に現時点(2023/11/14)でのマイナーバージョンの最新であるFlutter 3.13.xへのアップデートもあり、Flutterのライフサイクル自体に大きな変更が加わったのもタイミングが良かったです。
- スライド
- GIFがあるので動画形式でも公開しておきました
(発表の音声はありません。音声付きは後日Flutter KaigiのYouTubeチャンネルでご覧ください。)
裏話
私は発表スライドを作る時にまずテーマ作成からして、テンションを上げて取り掛かるという形から入るスタイルで発表スライドを進めていくのですが、採択が決まって今回はどんなテーマにしようかなという頃に丁度M3 Macの発売があるとの噂を聞きつけ、私用PCを買い替えたかったタイミングなので これは使えるかもと思い「M3社員によるM3 MacでM3(Material Design 3)デザインで発表する」をテーマに準備してきました。話のつかみでウケがとれたので40万課金した甲斐がありましたw
ちなみにスライドのトップはFlutterのロゴを意識しています。
- こだわりのナビゲーション
こだわりのMaterial Design風ナビゲーションアニメーション pic.twitter.com/foUO59YlVa
— AAkira (@_a_akira) 2023年11月10日
他にも色々小ネタがあるので動画形式の方を見てもらえると嬉しいです。
ライブラリ公開した
参加者の方からXでライブラリを公開して欲しいという、圧を受けたため公開しました。 本当に薄いライブラリになっているので、もし使いたいマニアックな方がいればどうぞ。
FlutterアプリのライフサイクルをWidgetsBindingObserverとNavigator Eventの両方をフックしているので、従来のAndroid, iOSであったようなライフサイクルイベントを一箇所で処理できるようになります。
本来はModalRouteが必要になりますが、Navigatorのnameでマッチングすることで、Contextに依らず利用可能になっています。
参加レポート
こんにちは、デジスマチームの立花です。 FlutterKaigi2023にオフライン参加してきましたのでその様子をお伝えします。
Flutterアプリにおけるテスト戦略の見直しと自動テストの導入
インシデントを減らすためにどのようにテスト戦略を作り、どう自動テストを作成していけばいいかについての発表でした。
テスト戦略の見直しのきっかけから、実際に自動テストを導入した結果どのような効果があったのかまで説明されているのが素晴らしかったです。
自動テストの目的についての考え方や、手動テストとの差別化、どの機能についてのテストを書くかの判断基準についてなど、より効果的な自動テストを行っていくにあたって非常に参考になりました。
Dartのコード生成の仕組みと、コード自動生成のパッケージを自作する方法について
json_serializableやfreezed、openapi_generatorのようなパッケージで使われているコードの自動生成がどのような仕組みで行われているのかについての発表でした。
コード自動生成を支えるツールの紹介やコード自動生成のサンプルプログラムの解説がとても分かりやすく、 発表を一通り聞いた後は自分でもコード自動生成処理を自作できそう! と感じました。
www.slideshare.net
Flutterアプリのセキュリティ対策を考えてみる
Flutterアプリのセキュリティ対策についての発表でした。
セキュリティ対策を考えるためにはまず攻撃手段を知る必要があるということで、 よくある攻撃手法やその攻撃に対しての対策ができるライブラリなどが紹介されていました。
全ての攻撃を防ぐことは不可能に近いため、攻撃者のコストや発生時の被害、対策コストをそれぞれ比較しどんな攻撃にどこまで対策するかをまず考えることが重要だと改めて感じました。
我々にはなぜRiverPodが必要なのか - InheritedWidget から始まる app state 管理手法の課題
Riverpodの動く仕組みや、Riverpodで解決できる問題についての発表でした。
StatefulWidgetやInheritedWidgetの状態管理の仕組みや、それらとRiverpodの違いについての説明が図を使って分かりやすく説明されており、 自分のRiverpodについての理解が曖昧だった部分に気づくことができました。
Riverpodにはアプリの状態管理のよくある問題に対しての課題に対してあらかじめ用意された解決策があり、 Riverpodを使う際にはその解決策への理解や、自分のアプリに合っているかの確認が重要と説明されていました。
ここからはマルチデバイスチームの小林が書かせていただきます。
詳細!Flutterにおける課金実装
アプリでしか注文できないカレー「TOKYO MIX CURRY」の決済周りのお話でした。 ちなみに私は月2回の出社時によく利用させていただいてます。美味しいです!
通常のアプリと店舗に設置するセルフレジ用アプリの2つのお話があり、
通常のアプリの方ではiOSはネイティブ・AndroidはFlutterで実装していたところをFlutterに1本化するまでの過程、
セルフレジのアプリではICリーダー・レシートプリンタとの連携、前の人が途中で操作を止め離脱したときにトップに戻す工夫など興味深いお話を聞くことができました。
Flutterで構築する漫画ビューア
漫画アプリのビューアをFlutterで作れるかどうかの技術検証のお話でした。
Edge to Edge対応や見開きページの実現、画像周りの扱いといった漫画アプリならではの細かい工夫を知ることができました。
まだ検証は完了していないとのことでしたが、このままFlutterでイケそうということだったのでリリースされるのが楽しみです。
まとめ
最後に、Flutter Kaigiのスタッフの方々をはじめ発表者、参加者の皆さんお疲れ様でした!
初めてのFlutter Kaigiオフライン開催ということで、準備が大変だったと思いますが最高のカンファレンスでした!
ありがとうございました!!!
We're hiring !!!
エムスリーでは、Flutterも含めKotlin Multiplatformなどのクロスプラットフォーム開発やAndroid, iOSネイティブアプリの開発も行っています。
興味があればぜひこちらから応募お願いします!
- Slackにダジャレのリアクションが流れるチャンネルが存在し、ほぼ毎日通知が来るくらいダジャレを発している人達がいる↩