🥷

FlutterNinjas 2024 に参加してきました🥷✨

2024/06/17に公開

Flutter

Riverpod

conference

tech

こんにちは！

こんにちは！kuno です！
2024/6/13-14に docomo R&D OPEN LAB ODAIBA で開催された FlutterNinjas Tokyo 2024 に参加してきました！
https://flutterninjas.dev/
とっっっっても最高なイベントだったので，セッションの概要や感想を書いていきます💓

セッション

White labeling at scale using CI/CD

Speaker: Kevin Suhajda

codemagic の方による発表でした！ホワイトラベルのアプリを構築して公開する手順についての発表で，codemagic の公式サイトにもホワイトラベルの公開手順について載っています．

ホワイトラベル化とは，ある企業が独自で開発した製品やサービスを他の会社が自分のブランドとして販売できる権利のことです．（A社が開発したアプリを，B社が自社のロゴやデザインを追加してあたかもB社が開発したかのように提供することができるみたいな）

ホワイトラベル化により，同一のコードベースから複数のカスタマイズされたアプリケーションを作成することができますが，アプリの見た目（フォント・色・オーディオ・ビデオなど）や設定（json ファイルや env ファイル）を変更する必要があります．また顧客のアセットへのアクセス，git リポジトリへのクローン，API の使用，AppStore や GooglePlay などさまざまなストアへのプッシュ，テスターやその他関係者への内部配布する……などの行為が必要となります．

このようなホワイトラベル化を効率化するためには，CI/CD ワークフローの最適化が重要ですよね！
最適化のためにはビルド時間の短縮やキャッシュの活用や API の自動化などが必要です．そこで codemagic を使うとどんなワークフローになり，どんなメリットがあるのかの紹介でした！

サンプルのリポジトリも教えてくださいました🩵

自分は恥ずかしながらホワイトラベルという用語を知らなかったですが😂とても興味深い内容でした！

Rive Animations with Flutter

Speaker: Parth Joshi

Flutter でアニメーションをつける際に使えるツール Rive について・使い方の紹介でした！
Rive は非常に高速で，アニメーションの大部分は 50KB から 200KB の非常に小さなサイズになるそうです．また Rive アニメーションはどのプラットフォームにも制限されず，Web・Android・Flutter・iOS などで実行できます．
Rive のコミュニティは活発で，多くのアニメーションが無料で提供されているそうです👀
https://rive.app/community/files/

Rive アニメーションの作成は StateMachine を通じて行います．StateMachine ではアニメーションのロジックを定義したり複数の入力（Boolean，Number，Trigger）を渡したりすることができ，視覚的にアニメーション作成ができそうでめっちゃ良さげでした！🤖

発表と関係ないですが，Rive が lottie に喧嘩売ってる（？）ページもあります😂

休憩時間に，リストビューのアイテム1つ1つに Rive アニメーションを差し込んでもパフォーマンス的に大丈夫か相談しに行きました！描画範囲外の箇所ではアニメーションさせないようにしたり初期化は1回のみにするなどの工夫が必要だよねとお話ししました💬ありがとうございました！
Rive 使っていきたい🔥

Stop Treating Accessibility as an Afterthought: Concrete Steps to Build Inclusive Apps

Speaker: Manuela Sakura Rommel

アプリ開発におけるアクセシビリティの重要性と，その具体的な実装方法についての発表でした！
アクセシビリティは障害者だけでなく，すべての人にとって重要（例えば片手で買い物袋を持っているときにスマホを使う場合，片手しか使えないという一時的なアクセシビリティの問題が発生しますよね？など🛍️）であり，Flutter ではそのための機能やテスト方法が提供されているとのこと👀

Flutter 公式ドキュメントにも Accessibility release checklist があり，アプリのリリースを準備する際に考慮すべき事項の一部が書かれています．

アクセシビリティのための testWidgets も用意されていてすごいな〜と思いました．そもそもスクリーンリーダーのテストが書けることに驚き🫨

アクセシビリティ，ちゃんと意識していこうと思いました！❤️‍🩹

Automating Accessibility Adoption in Flutter with Gemini AI

Speaker: Akanksha Singh

アクセシビリティについての発表は2つ目！いかにアクセシビリティが大事かがわかりますね！
ただ多くの開発者は，ガイドラインの複雑さによるアクセシビリティのトレーニング不足や認識不足があり，アクセシビリティ対応が大変という問題に直面しています．またテストと検証の困難さや既存の大規模なコードベースへの統合の困難さもあります．
そこで Gemini AI を使用してアクセシビリティ対応を効率よくやっちゃおう❣️という発表でした！

実際に Gemini AI がコードの色のコントラストをチェックし，必要に応じてコードを修正してくれたりしていました！便利すぎる…！！！（VSCode の Gemini AI エクステンション使ってました）

やっぱデモがあると便利さをしっかり感じ取れて良いですね☺️

Workshop: Flutter for Android TV and Apple TV

Speaker: Sasha Denisov

Flutter は様々なプラットフォーム（iOS，Android，Web，デスクトップ，埋め込みシステム）をサポートしていますが，今回は特に TV プラットフォーム（Android TV，Apple TV，Tizen）への対応について説明と，実際にライブコーディングで Apple TV のアプリを動かしてみる発表でした！

flutter create で作ったプロジェクトには， androidフォルダーには Android プロジェクトがあり， ios フォルダーには iOS アプリケーション用に用意された xcode プロジェクトがありますが,Flutter 公式は TV 系の対応をしておらず， Apple TV 用のオペレーティングシステム用に用意された tvOS フォルダーがないため実行ができません．
そこで Flutter の Engine をカスタマイズして実行できるようにしたとのことでした！！😳

リポジトリとビルド済みエンジンも公開してくれてます！
https://github.com/DenisovAV/flutter_tv

実際にリモコンのポインタ追跡もしててすごかったです🎉

休憩時間に，「前 Flutter Engine を修正しビルドしたものを使って flutter run してみたのにうまく動かなくて😭」と相談をさせてもらいました…！見てもらったところ Xcode に差分が足りてなかったのでうまくビルドしたエンジンを使えてなかったぽいです．ありがとうございました！再トライしてみます！

My challenge to add Vision OS support in Flutter

Speaker: Aoi Umigishi
Slides: https://speakerdeck.com/umigishiaoi/my-challenge-to-add-vision-os-support-in-flutter

TV OS の次は Vision OS の発表だ〜🥽
現状 Flutter で作成した iOS/iPadOS アプリを Apple Vision Pro（Vision OS）上で実行することは可能ですが，アスペクト比が固定されているなどの制約があります．Flutter はウェブブラウザのようにアスペクト比を自由に変更できるレスポンシブアプリの作成に優れているため，このアス比固定の制約を取り除くことができれば Flutter は Vision OS アプリを作成するための非常に良いツールになるんじゃないかとのことでした．

Vision OS は他の OS と違い視線追跡などがあります．なので iOS/macOS との違いを意識しながら Vision OS 用の新しい埋め込みシステムを作成する必要があります．ちなみに Vision OS も Darwin という OS を基にして作成されているそうです👀

Flutter で Vision OS をサポートしようの issue がオープンしているので，自分も upvote しておきました🖐️

チャレンジしてみたい！自分には何ができるか？という深掘りはどんな分野にも共通で大事なことだと思うのですごく良い発表だなと思いました！💪

ところで Vision Pro 出てからもう1年経ったことに泣いちゃいそうです😀

Flutter Add-to-App: The Good, the Bad and the Ugly

Speaker: Marcin Chudy

Flutter を既存のネイティブアプリに追加する方法についての発表！
現状，企業には大規模なネイティブアプリが既に存在し，フラッターで0から書き直すのは難しいです．これが Flutter Add-to-App の登場する理由です．

Flutter Add-to-App は，既存のアプリに Flutter module や view を追加する方法です．これにより、0から書き直すのを避けながら Flutter の利点を活用できます！またネイティブと Flutter の共存が可能になります🎉

Flutter とネイティブ間の通信を行うツールとして MethodChannel がありますが，プラットフォーム間でのデータのやり取りが文字列で行われるため，型安全ではありません．
そこで pigeon というコード生成ライブラリを使えばプラットフォーム間の通信を型安全で行えるらしいです！！
https://pub.dev/packages/pigeon

また Patrol というテスト用のライブラリを使えばテストコードからネイティブ機能にアクセスできるので，許可ダイアログや通知，WebView の操作，デバイス設定の変更，Wi-Fi の切り替え…などさまざまな操作を実行できるらしいです…！すごすぎる………
https://pub.dev/packages/patrol

面白いライブラリ2つも知れて大満足すぎる〜〜

Riverpod 3.0, the preview

Speaker: Remi Rousselet

みんなお待ちかね，Riverpod の開発者 Remi さんの発表！！！！！！
Riverpod 3.0 では約 50 個のバグを治してパフォーマンス改善して約 90 個の冗長だった型を消し去ったらしいです！ありがたい！！🎉

コード生成も早くなったりオフラインキャッシュ・リトライが組み込まれたりととにかく盛りだくさんでした…！
詳しくは heyhey さんがまとめてくださってたのでそちらをご覧ください📝感謝〜

とにかくワクワクする発表でした🎉🎉🎉早く使いたい〜〜！💕

休憩時間や1日目の終了後にガッツリ Riverpod の実装相談に乗ってもらいました😂それはまたどこかで記事にします．本当にありがとうございました！！！

Inside Flutter Text

Speaker: Kakeru Nakabachi
Slides: https://speakerdeck.com/b4tchkn/inside-flutter-text

Flutter を使ったアプリ開発では，どのアプリでも Text ウィジェットが多用されています．文中で複数のスタイルを適用したりリンクを押せるようにするために RichText ウィジェットを使うことも多いと思います．そんな Text の世界を見ていこ〜！って感じの発表でした！

Text ウィジェットは日本語だと iOS と Android で高さが違っていたり，Android だと日本語がちょっと下寄りの表示になってしまう問題があるとのことでめっちゃわかる…となりました😭

昔よく見た赤字に黄色下線の表示（TextStyle が設定されていない場合に出るやつ），定義はここに書かれてたんだ😂

内部実装を全部読んでいくのはとっても大変なので，ある箇所について詳しく深ぼっていくタイプの発表は助かりますね！

後から直接お話しして，日本語や絵文字の問題ちょいちょいあるよね〜ってなりました😭Contribute していきたいな…！🔥

Exploring Full-Stack Dart for Firebase Server-Side Development

Speaker: Kosuke Saigusa

Firebase を使えば，認証・データベース・通知機能などを簡単に構築できますが，サーバーサイドの実装は自分で書く必要があります．そこでサーバーサイドのコードも Dart で書くけばクライアントとサーバーのコードを共有できるので便利なんじゃない？！という発表でした！

GCP を使って1つのアプリを実装していて，実際にボタンを押したらプッシュ通知が飛んでくるデモを見れました🎉

Cloud Run で Dart が動く時代や…

ライブラリも公開されてます！すごすぎる！発表後にめっちゃモチベ湧いて自分も試しにやってみたくなりました✌️

Monitoring user experience of flutter apps with SLI/SLO

Spaker: Takuma Osada
Slides: https://speakerdeck.com/ostk0069/slowoyong-ite-flutterapuride-yuzati-yan-nopin-zhi-wojian-shi-suru

SLI/SLO を理解してユーザ体験を向上させ，より良いアプリを作ろう！の発表でした！
ユーザージャーニーは聞いたことあったけどクリティカルユーザージャーニー（CUJ）^[1]は初めて聞きました👀
実例をもとに，どこのフローをどう計測してどうアラートを投げるのかを説明してくれてとってもわかりやすかったし，自分たちも組み込もうと思いました…！
Flutter のライフサイクルだとアプリキルを検知できない（検知できたとしてもクラッシュによるキルだった場合ちゃんとログが送られるか怪しい）から，開始のイベントをローカルに保存しておいて完了したらイベントを消す，もしアプリキルされた場合は次回起動時に開始イベントが残っているのでアプリキルされたことが検知できるという方法はめっちゃ賢い…！

すっっごい知見ある発表で，資料ずっと見返していこうと思いました！🔥

時間の関係で発表から割愛されていた部分で，async/await を使わず asyncMap 使う理由が気になったので別途質問してみました👀
計測は順番が大事なので（開始イベントの前に完了イベントとかが来ちゃわないように） await で待つようにしたいが， UI 側で await 使いたくないのでイベントを asyncMap として持っておいて，渡ってきたイベントを見て開始から順番に実行されるようにしてるらしいです！なるほど！

ところで資料を英語と日本語両方用意してるのが死ぬほどありがたかったです😘

Implementing a RAG (Retrieval-Augmented Generation) System in Dart

Speaker: Park JaiChang

LLM の回答に対して RAG というアプローチを使用することで，より精度の高い回答を得ることができるという発表でした！
実際に kpop アイドルの wiki の pdf 読み込むことで，正しい回答を得ることができる！というデモを見せてくださいました！
実際に LangChain ライブラリを利用して RAG アプローチを dart で実装していました🦜️🔗
https://pub.dev/packages/langchain

LangChain，データ層からデータをロードしてベクトルストアへ格納し，その情報をもとに生成モデルから回答を生成するという全プロセスを管理していてすごいなと思いました．

そもそも dart で langchain 扱おうと思ったことがなくて（やっぱり python でしょって思っちゃってた），なかなか面白い発表だなと思いました👀

てか kpop アイドルみんなかわいい〜〜〜🩷まさかカンファレンスで推しが見れるとは🖤

Introducing flx: A New TUI DevTool for Flutter on the Terminal

Speaker: Takeshi Tsukamoto

ターミナル上で，ログを見るのはもちろんのこと，ネットワークリクエストやインスペクター，パフォーマンスモニターなどが見れちゃう CLI flx を作ってみたの紹介でした🎉
もちろん上記は devtool や VSCode などでも見れますが，flx では CLI としてキーボードから指を離さずに操作できるのが特徴！emacs や vim 派の方々が喜びそうです．
https://github.com/itome/flx

flx を作るに当たって使用したのが Flutter Daemon というツールらしいです．

Flutter Daemon を利用すると，JSON-RPC プロトコルを通じてクライアントと通信し，ホットリスタート/リロードやアプリの終了・開始等が行えるらしいです．

今後 AI を取り入れてログ解析をさせたりする予定らしいです．Copilot がコードを書き，出たエラーを AI
がログ解析して治してくれる時代になるのか…😀（楽しみ）

なんと〜〜…こんなツール作りました！！🎉みたいな発表，WWDC みたいでワクワクしました😂かっこいい〜

ちなみに休憩時間にインストールして使ってみました🚀
brew install itome/tap/flx をして Flutter プロジェクトのルートで flx ってコマンド打つだけで使えてめっちゃすごい…

（友達の手元で動かなくて質問しにいったら Flutter プロジェクトのルートに居なかったでした😂気をつけよ❣️ありがとうございました！）

Building SimCity 2000: Unleashing the Power of Flame Engine and Flutter

Speaker: Abdelrahman Eba

Flame Engine と Flutter を使ってアイソメトリック座標を使ったゲーム開発をしてみよう！の発表でした！
アイソメトリック座標とは，3D オブジェクトを 2D 平面に視覚的に表現するために使われますもので，数学的な変換を行うことで 2D のグリッドを 3D 風に見せることができるらしいです（添付写真みたいに 2D だけどタイルが奥行きあるように見える）．具体的には X と Y 座標を線形代数の行列を使って変換していくそうです．

ゲーム作成初心者すぎて，正直普通に Stack とか Column で描画するのと何が違うんだろうって思ってたんですけど，Flame Engine にはゲーム固有の機能（アニメーション，物理エンジンなど）があったりカメラコンポーネントが準備されてたりするんですね🥹

最後にこんなゲームができあがるらしいです🎉すごい〜〜
https://mgame-8c88b.web.app/

ずっと Flame 気になっていたのでさっそく触ってみようと思いました！🎮
http://opengameart.org にたくさん素材があるらしいのでゲーム作る際には覗いてみようと思います．

Building a Gemini AI-Powered Emoji Movie-Guessing Feature in a Production-Ready App with Flutter

Speaker: Renuka Kelkar

Gemini AI を利用してたくさんのアプリを作ってました！

プロンプトを変えるだけで左から右みたいに中身もデザインもごっそり違うアプリになってて面白かったです！
このようにプロンプトってとっても大事で，プロンプトには

ペルソナ : You are a Google Cloud program manager.
タスク : Draft an executive summary email to
コンテキスト : [persona] based on [details about relevant program docs].
フォーマット : Limit to bullet points.

をちゃんと指示するのが大事とのことでした．（右は例文です）

また AI を使う上ではハラスメントやヘイトスピーチなどに気をつけましょうとのことでした．

当たり前のことかもしれないですが，過信して使いまくってたら怖いのでちゃんと気をつけようと思いました！

最後に Firebase Extensions を使用して宿題生成アプリを実装するデモもありました！Firebase Extensions 使ったことないから使ってみよう👀

サンプルとして見せてくれてた絵文字のアプリが普通に面白くてやってみたかったです🦁👑

Dart Isolates: every frame counts for a Performant all

Speaker: Ethiel Adiassa

アプリのパフォーマンスについての発表！🔥パフォーマンスは

Energie : バッテリー消費
Speed : データ処理の速さ，スムーズさ
App size : アプリのサイズ
memory : メモリ消費

の 4 つのカテゴリーに分けることができます．今回の発表では Speed に焦点を当てるそうです．

Frame rate とは，1秒の中で何回画像がキャプチャまたはレンダリングされるかの測定値であり，私たちの目が滑らかだな〜って思うのは少なくとも　12FPS　（動画1秒につき最低１２枚の画像で構成されている）が必要らしいです．それ以下だとラグや滑らかさの欠如が感じられるそうです．
同じことがモバイルアプリにも言え，フレームが 60FPS 以下でレンダリングされるとアプリはラグがあり，滑らかさが欠けていると感じられるそうです😨Flutter は 60FPS でフレームをレンダリングすることを目指しています．

Flutter はシングルスレッドであり，メインスレッドが UI の更新やウィジェットのレンダリングを担当しています．なので複雑な計算をメインスレッドで行ってしまうとアプリがレスポンスしにくくなり，バッテリー消費が増える可能性があります．
そこでアイソレートを使用することで，複雑な計算を別のプロセッサに委任し結果をメインスレッドに返すことができ，これによりメインスレッドの負荷を軽減しパフォーマンスを向上させることができるらしいです❤️‍🔥

実際にカードのイラストがくるくる回っているデモアプリでパフォーマンスを確認しました！カードをタップした際にメインスレッドで JSON ファイルを解析していたのをアイソレートに委任することで，パフォーマンスが実際向上していました🚀

めっちゃワクワクする発表でした〜❣️パフォーマンスまじで大事

Beyond Mobile: Powering Embedded Devices with Flutter

Speaker: Moritz Theis

残念ながらおやすみでした😭またどこかで聞きたい…！

Speaker: Tsuyoshi Chujo
Slides(?): https://github.com/chooyan-eng/flutter_ninjas_2024

WidgetTree のお話でした！🌳ウィジェットツリーの詳細を学ぶ理由は，Flutter の動作を正確に理解し，開発中に直面する問題を解決するためです．また適切な widget を選ぶことでアプリをより保守可能でテストしやすくすることができるという嬉しさもあるそうです．

今回の発表では widget と element の関係や BuildContext とは？という話から始まり，実際に『時計の色を変更する場合どういう方法が良いか？バケツリレー？テーマ指定？』『子孫の変更を反映するには？状態管理パッケージを使う？祖先を辿る？』という具体例を示してくれました⏰

久野は昔にちゅーやんさんの本を読んでいたのでわりとスラスラ聞けました☺️こちらめっちゃおすすめです．

ところでスライドに組み込まれた crop のデモがかっこよすぎた😂久野もどっかで Flutter アプリ使って発表してみようと思いました🔥

ブース

money forward

3つアプリあってどれが Flutter 製（もしくは一部 Flutter が組み込まれてる）でしょうってクイズをしました！
実際に iOS/Android 端末でアプリを触らせてもらえたから正解できたけど，全部 Android 端末オンリーだったらきっと正解できなかったと思います😂

codemagic

二日間，お昼休憩・セッション終わりの時間に全体でルーレットを回して，当たったら豪華景品がもらえるという太っ腹コーナーをしてくれました！
なんと1日目にTシャツを当てることができました💓めっちゃ面白くて欲しかったのでちょ〜嬉しいです✌️

あとはブースでピンバッチとステッカーをもらえました！かわいい〜手裏剣みたいな形で FlutterNinjas にぴったりでした🥷

終わりに

英語力無さすぎて不安でしたが，文字起こし&ChatGPT によってなんとかなりました😂（パネルディスカッションは後半ちょっと厳しかったです😭）
1対1で喋るなら身振り手振りやる気でなんとかなるけど，全体で質問したり，何人かで集まって会話する英語力が皆無なので来年までに頑張りたいと思いました…！🗣️

直接質問しに行ったら凄く丁寧に答えてくださったスピーカーさんたちや，パーティーでお話ししてくださったみなさんありがとうございました！🍻またどこかでお話ししてください！

最後に，カンファレンスを運営してくださった方々，本当にありがとうございました！！来年も楽しみにしています🌸🥷🩵

おまけ

Remi さんたちとアキバのメイドカフェ行きました🫶🙈💕

日本に来ている方々はぜひ日本を楽しんでいってください〜！🇯🇵

脚注

ユーザージャーニーとは、⼈々が⽬標を達成するために⾏う⼀連のタスクを指す。対して、CUJ とは、多くの⽬標を達成するために共通するタスクや、非常に重要な⽬標を達成するために⾏う⼀連の流れを指す。ECを例に挙げると『製品を探す、カートに商品を追加する、購入を完了する』あたりがCUJとして挙げられる可能性が⾼い。らしいです（スライド参照） ↩︎