トーク

Flutter on the WebがStableになってから３年経ち、さまざまな変化が加えられてきました。
今年はHTML renderer廃止に関するドキュメントが公開され、今後CanvasとWasmのrendererが主力になっていきます
Wasmサポートによって良くなること、できなくなることをHTML,Canvas rendererと実際に動作を比較していきます。

このセッションでは、以下の内容についてお話しします：

1. Wasmとは一体何なのか
2. Flutter on the WebのWasmサポートで何が変わったのか
3. Wasmサポートで、できるようになること、できなくなることをHTML,Canvasとの比較
4. Flutter on the Webの今後

想定視聴者
Flutter on the WebのWasmサポートで何が変わるか興味がある方

概要

リリースしたアプリのクラッシュ事例を追うべく、Crashlyticsなどのサービスを眺めていると、身に覚えのないスタックトレースを見た経験はありませんか？ Flutter では release buildの場合には、コードが難読化されバイナリに含まれます。
FlutterはAndroid・iOSをはじめとして多くのプラットフォームで動作させる事ができるフレームワークです。Flutterはどのようにして、多くのプラットフォームをサポートする難読化を実現しているのでしょうか？

このセッションは、大きく2つの要素から構成されます。
1つ目は、難読化されたコードに直面したときのトラブルシューティングに焦点を当てたものです。例えば、難読化されたスタックトレースを読む方法や、flutter symbolize の仕組みやオプションについて紹介します。
2つ目は、Flutter の難読化そのものがどのようにして行われるかについて焦点を当てます。Flutterが難読化を行うステップと各プラットフォームでの実例を紹介しつつどのような難読化が行われるかについて紹介します。

想定視聴者

• 難読化に関連したトラブルシューティングについて知りたい人
• 難読化そのものについて理解を深めたい人
• Flutter 特有のマルチプラットフォームでの難読化について知りたい人

本セッションでは、Flutterアプリの「Code Push」（即時コードアップデート）を実現するShorebirdについて深掘りします。Shorebirdを使用することで、FlutterアプリのDartコード部分の更新を、ストア審査なしでエンドユーザーのデバイスに即座に配信できます。

ただし、以下の重要な点に注意が必要です：

• 初回リリースや大幅な変更時は従来通りの審査が必要
• 更新できるのはDartコードのみ（ネイティブコードは不可）
• 各アプリストアの規約遵守が必須

このセッションでは、以下の点に焦点を当てます：

• Shorebirdの基本概念と仕組み
• Code Pushの使用方法（ライブデモ含む）
• CI/CDとの統合
• 料金体系
• Shorebirdの利点と課題
• 実プロジェクトでの経験に基づく知見と教訓
• アプリストア規約との整合性と法的考慮事項

想定視聴者：

• 即時アップデートに関心のある開発者
• Shorebirdを検討中の方
• 実践的な使用例を知りたい方

複数プロジェクトでのShorebird導入・運用経験を基に、実践的な洞察と具体的なアドバイスを提供します。理論と実践の両面から、Shorebirdの効果的かつ適切な活用方法をお伝えします。技術的側面だけでなく、法的な観点からも安全な利用指針を示します。

概要

Dart や Flutter ではいままで、ビルド時に追加の処理を行う手段がありませんでした。
しかし最近、 Native Assets と呼ばれる新機能が追加され、ビルド時に追加の処理を行うことが可能になりました。
本LTでは、 Native Assets とはそもそもどんな機能なのか、どのように活用できるのかをお話しします。

想定視聴者

Dart/Flutter でアプリやパッケージ開発をする方全般
特に、FFIを用いた開発をしている方

概要

SliverAppBarはスクロールに応じて大きさが変化したり、スクロールを中断時に出現したりするAppBarのWidgetです。
ちょっとリッチなスクロールを実装する際に利用するこのWidget、
どうしてこのような動きが実現できるのでしょうか？
SliverAppBarを題材に、FlutterのSliverの中身を深掘りして解説します。
また、Flutter 3.24で追加されたPinnedHeaderSliver、SliverResizingHeaderについても、中身を解説します。

具体的には以下の内容について解説します。

• SliverAppBar の動き
• Sliverとは
• Sliverの仕組み
• SliverAppBarの仕組み
• PinnedHeaderSliver、SliverResizingHeaderについて

Flutterでのスクロール画面でのエラーに対し、
CustomScrollView、Sliverの利用はよく採用される解決策です。
今回の発表を通してSliverへの理解を深めていただき、
開発力の向上の一助となればと思います。

想定視聴者

• Flutterでリッチなスクロール画面を実装したい方
• Flutterの内部実装に興味のある方
• Sliverの取り扱いに悩んでいる方

概要

ある日，チームメンバーから『普段使っている他のアプリと比べてな〜んか使い心地が悪い…😅💦』という声が上がりました．
アプリが数多く存在するこの時代，『なんか使い心地が悪い』とユーザはすぐ離れていってしまいます．これは大問題です．なんとかしなくては…！

具体的には，以下のような使い心地の悪さの声が上がりました．

• 動画再生するとアプリが重くなる
• リストをスクロールするとカクつく
• iPhone だと文字が細くて見にくかったり絵文字表示が小さく感じる
• 画像のトリミングが遅い
• etc…

そこで，このセッションでは以下のトピックについてお話しします．

• 使い心地に関するトラブルにどう対処したのかを5つ紹介🔥
• 既存ライブラリではちょっと物足りないときに改修する方法（パッチの当て方）🛠️

想定視聴者

• アプリをただ作るだけではなく使い心地を追求したい人
• Flutter であることを言い訳にクオリティを妥協したことがある人

概要

Dartでは、非同期処理と並行処理を効率的に行うためのキーコンポーネントとしてIsolateが提供されています。
特にFlutterアプリケーションのパフォーマンス向上やレスポンス性の向上において、Isolateの正しい理解と活用は非常に重要です。

このセッションでは、DartのIsolateの内部動作を深く掘り下げ、どのようにしてメモリを共有せずに並行処理を実現しているのかを解説します。また、実際のアプリケーション開発における典型的な使用例とベストプラクティスを紹介し、皆さんのコード品質を一段階上げる手助けをします。

このセッションの内容は以下の通りです：

• Isolateの基本概念とFutureとの違い
• DartにおけるIsolateの内部メカニズム
• メインIsolateとサブIsolate間の通信方法
• Isolateを使うべき箇所とそうでない箇所

想定視聴者：

• DartやFlutterでの非同期処理を深く理解したい方
• アプリケーションのパフォーマンスを最適化したいFlutter開発者
• Isolateの使い方に課題を感じている方
• 並行処理を活用し、スケーラブルなアプリケーションを作りたいエンジニア
• 実際のIsolateを理解した上で、活用したユースケース

概要

2025年8月にFirebase Dynamic Links（FDL）のサービスが終了することが発表され、多くのアプリ開発者がAdjust、AppsFlyer、Bitly、Branch、Kochavaなど代替ソリューションの選定を迫られています。

本セッションでは、実際のプロダクトで行ったFDLからAdjustへの移行作業を通じて、FDLの主要な機能をカバーしつつ、Adjustを用いたディープリンクの設定方法、ディープリンク機能の実装例、分析に不可欠なログの実装方法、およびパーソナライズされたユーザー体験を提供するための戦略とその制約を紹介します。

これにより、FDL終了後のアプリ開発において、どのようにスムーズな移行を実現し、必要な機能を維持するかについて、明確な指針を提供します。このセッションを通じて、ディープリンク技術がどのようにアプリの成長と成功を支えるかを理解し、実際の開発に役立つ知識を提供します。

想定視聴者

• FDLを利用したプロダクトを運用しており、代替の移行先を検討している方
• ユーザーエンゲージメントの向上やアプリの成長に関心があり、ディープリンク技術を活用したいと考えている方

概要

「フォーム」を取り扱うアプリの機能実装は、考慮すべき点が多岐に渡り、難易度が非常に高い部分です。

例えば、商品注文や申請作成の入力画面は、単純な入力画面とは性質が異なり、複雑な仕様の中でミスができない実装が求められます。
そこでは、高度なバリデーションや、複数ソースからの動的なデータ取得・更新など、「複雑なロジックをフロントで実装する必要がある」点で多くの課題が存在します。

Flutterの活用は、開発効率を上げる有効な手段の１つですが、単に導入するだけでは上記課題は解消しきれません。
本トークでは、複雑度が極めて高いフォーム開発を、宣言的かつ型安全に保つことで、効率的に実現する方法をご紹介します。

トピック

• Flutterでのフォーム画面開発
  • 実プロダクトの事例紹介
• 状態管理とバリデーションのアプローチ
  • 状態設計の手法
  • Riverpod, flutter_hooksの活用
  • フォーム要素間の相互依存関係の処理
  • 複数画面間でのデータ同期の実装
• ユーザー体験向上の工夫
  • エラー、アラートのフィードバック
  • 入力補助
  • 細かな操作感

想定視聴者

• フォーム開発の設計や実装に悩んだことがある方
• Flutterを使って効率的に複雑なフォームを実装したい方

概要

Flutter でのアニメーション実装は、簡易に実装できてアプリの魅力を向上させる重要な機能ですが、複雑なアニメーションや大規模なアプリケーションでは、パフォーマンスの問題に直面することがあります。
複雑なアニメーションを実装する際、フレームレートの低下やメモリ使用量の増加など、パフォーマンスの低下が課題となっています。また、アニメーションの最適化手法や、適切なタイミングでの RepaintBoundary の使用など、開発者が理解すべき点が多岐にわたります。
本セッションでは、 Flutter のアニメーションを深く理解し、パフォーマンスを向上させるための実践的な手法を紹介します。 Flow を活用した複雑なアニメーションの実装、アニメーションのパフォーマンス最適化テクニック、そしてレンダリングを最小限に抑えるための tips について詳しく解説します。

1. Flutter アニメーションの基本概念と内部実装を理解する
2. Flow を使用した高度なアニメーションの実装手法
3. アニメーションパフォーマンスの測定と分析
4. レンダリング最適化テクニック

想定視聴者

・ 複雑なアニメーションの実装に苦戦している開発者
・ アニメーションのパフォーマンス向上に興味がある開発者

概要

WINTICKETアプリは2021年からトランクベース開発をFeatureFlagを取り入れながら行ってきました。
大規模が故に常に10数個のFeatureFlagをコードベースに埋め込みながら新機能の開発を進めていますが、公開前の機能が見えてしまったり、リリース前のコードが実行されてしまうなどの問題がいくつかありました。

本セッションではFeatureFlag運用を3年ほどした経験から、WINTICKETアプリ開発での具体的な運用方法とどのように可用性を向上させたFeatureFlagの運用戦略をとっているかを紹介します。

・WINTICKETでどのようにFlutterでFeatureFlagを用いたトランクベース開発の運用をしているかの紹介
・その運用で実際に起きた不具合例の紹介
・そのような不具合がどのような原因で発生したのかの分析
・不具合を起こさないためのFeatureFlag運用戦略とその具体的な対応方法の紹介

想定視聴者

・FeatureFlagを用いたトランクベース開発をしている方
・FlutterアプリでFeatureFlagを用いたトランクベース開発を検討している方

概要

Mobile向けに開発したものをWebや他のDesktopプラットフォームで表示すると、「なんか違う？」と感じたことはありませんか？
本セッションでは、MobileとDesktopをワンソースで開発する中で遭遇した実際の事例を基に、Desktopプラットフォームでの開発時に特に注意が必要なポイントを詳しく解説します。

• MobileとDesktopプラットフォームの違いについての概要
• プロジェクトで遭遇した具体的な事例の紹介
• 注意が必要なWidgetと、それぞれの対応策
• プラットフォームごとの差分を考慮した開発手法の提案

想定視聴者

• MobileアプリをDesktopプラットフォームに展開しようと考えている方
• Desktopプラットフォームでの開発に興味がある方
• ワンソースでの複数プラットフォーム対応に挑戦している方
• Desktopプラットフォームの開発経験が少ない方

概要

アプリケーションの機能やレイヤーをディレクトリで分けて表現することは普通に行うことだと思います。
このディレクトリの構成を機能単位やレイヤーでパッケージ化します。

パッケージ化すると機能ごとの依存度が減り、意図しない機能を実行する危険性を減らすことができます。
また、単一のパッケージのみテストを実行したり、依存度が少ないことで機能を切り離したりすることも比較的容易になります。

ただし、レイヤーでパッケージ化する場合はある程度入念な設計が必要になります。
例えば、 UI から直接通信処理を実行させたくないような場合、単純にパッケージを分割しているだけではファイルをインポートすることで簡単に処理を実行できてしまい、あまりその恩恵を受けることができません。
この恩恵を受けるための一つの手法として依存性逆転の原則があります。

ここでは、 Riverpod を利用した依存性逆転の原則の実装の説明と melos を利用した依存の解決方法、並列でテストを実行した際のカバレッジの算出など、開発の現場で行った実践的なお話をさせてもらいます。

想定視聴者

• これからサービスを立ち上げる方
• アプリケーションが大きくなって依存の整理に苦しんでいる方

概要

SLI/SLOはSREでよく使われる概念ですが、モバイルアプリ開発にはまだ馴染みが薄いかもしれません。
私たちのプロダクトでは障害発生率が高く、早期の検知と解消が求められていました。
そこで、SLI/SLOの概念をモバイルアプリに適用し、ユーザー体験の低下を即時に検知する仕組みを構築しました。

この仕組みにより、以下の指標をリアルタイムで監視し、即時に対応可能となりました：

• 失敗率：一定以上のユーザーが機能利用時にエラーが発生したケース
• キャンセル率：一定以上のユーザーが機能利用時に何らかの理由でキャンセルしたケース
• 中断率：一定以上のユーザーが機能利用時にアプリを強制終了したケース

現在、この監視システムは40以上の機能に適用されています。

このセッションでは以下の内容について詳しく解説します：

1. SLI/SLOの基本概念
2. 一般的なSLI/SLOとユーザー体験を検知するSLI/SLOの違い
3. ユーザー行動の計測方法
4. 計測基盤の構築：工夫と課題
   • 時系列データのログ計測
   • 高オブザーバビリティの実現オプション
5. アラート基盤の構築：工夫と課題
   • ノイズ最小化の方法
   • チームにアラートを定着させる方法

想定視聴者

• Flutterアプリ内でのDartを用いた計測基盤構築に興味がある方

概要

2024年に発表されたFigmaの新機能 フォーカスビュー、ステータス管理、etc... これらDev Modeの機能の概要を説明すると共に、ベストプラクティスを共有します。
Figma Dev Modeの活用がFlutterの開発体験をどれだけ向上されるかをご覧頂きます。

エンジニアとデザイナーが共同で発表するこのトークでは、デザインから実装までの一貫したワークフローをロールプレイング形式でお見せします。
エンジニアとデザイナーそれぞれの仕事の相互理解に繋がる内容で、一緒にご覧頂くことで組織のコラボレーションを強化することにも繋がるでしょう。

想定視聴者

• Flutterエンジニア
  デザイナと協業し、Widgetの実装等を行うFlutterエンジニア
• UI/UXデザイナー、
  デザインツールとしてFigmaを利用し、Flutter開発者との協業するデザイナー。
• プロダクトマネージャー
  デザインと開発のプロセスを効率化し、チームのアウトカムを向上させたいマネージャー

Impellerについて知っていますか？Skiaに代わる形で導入されたレンダリングエンジンでFlutter v3.7.0でiOSにおいてpreviewが始まり、v3.16.0ではAndroidでもpreviewが開始されました。
皆さん様々な印象があると思います。有効にしたら動作が速くなった、名前が強そう、シャドウ重くない？などなど...
とはいえ実際にSkiaからどのように変わり、なぜ速くなったのかを理解してる人はあまり多くないと思います。
FlutterはありがたいことにOSSでこの魔法のような技術がどう実現されているかを実際に読むことができます。
このトークではWidgetTreeから実際に描画されるまでを追いながらSkiaからImpellerでどのように改善されたかを解説していきます。

想定視聴者

• Flutterの内部を知りたい人
• Flutterに根ざして開発したい人

概要

皆さんが普段開発を行っているプロダクトにおける品質は、どのように保証していますか？QAエンジニアによる検証や、実装者が書くテストなど、さまざまな手法が存在すると思います。

Flutterのテストは一般的に次の3つの種類に分けられます。

• Unit Test
• Widget Test
• Integration Test

これらのテストはそれぞれ異なる役割を持ち、プロダクトの品質を高めるために重要です。特に、Unit TestやWidget Testに分類されるVRT（Visual Regression Testing）であるGolden Testを一度は耳にしたことがある方も多いのではないでしょうか？

しかし、それらのテストを有効かつ効率的に、そしてメンバーに納得感を持ってもらった状態で導入することは決して容易ではありません。

本セッションでは、以下のポイントについて議論します。

各種テストの役割とその効果的な導入方法
UI/UXを分けて考えてテストする方法
小さく始めるためのプラクティス

Flutterプロジェクトにおける品質保証とテスト効率のバランスを最適化するための具体的なアプローチを提供します。

想定視聴者

• テスト戦略について議論がしたい人
• テストを始めたい、またはすでに導入はできているがあまり効果を実感できていない人

概要

FlutterやiOSネイティブアプリ開発でも使われるSwiftUIなどの宣言的なUIは直感的で簡潔な書き方ができる一方、複雑なレイアウトを実装しようとした時に苦戦することがあります

そんな困った時に、活用できるのがCustomMultiChildLayoutです！
CustomMultiChildLayoutを使うことで、複数のWidgetを自由に配置することができます
そのため実際のプロダクトで凝ったレイアウトを追加したい、また個人開発で遊びで面白いレイアウトを作りたいと思った時に活用できます！

このトークではCustomMultiChildLayoutについて、以下のポイントを紹介します

1. CustomMultiChildLayoutの概要
2. 実装の活用例
3. SwiftUIなどの他のframeworkの仕組みとの比較

発表では社内のライブ配信アプリでの活用事例も含めたあんなものやこんなものをお見せします！（何が見れるかは発表をお楽しみに！）
この発表を通じて、皆さんがUIを実装する方法の選択肢を広げて、よりよいUI・UXを提供することの手助けができればと思います！

想定視聴者

1. CustomMultiChildLayoutを使ったことない人・知らない人
2. 標準Widgetだけでは実現が難しいUI実装にチャレンジしてみたい人

概要

あなたのプロジェクトのLint設定、今どうなっていますか？
このセッションではより良いLint設定にしていくための基本的な知識から実際の指定例までを解説します。

• FlutterにおけるLintの設定方法
• Lintのルール一覧
• 著名なLintパッケージ
• 最近追加されたLintルール
• おすすめのLint設定

想定視聴者

• FlutterのLintについてキャッチアップしたい方
• Lintの設定に悩んでいる方
• 最近のLintルールをキャッチアップできていない方

概要

​​令和6年（2024年）4月1日に「改正障害者差別解消法」が施行され、事業者による障害のある方への合理的配慮の提供が義務化されました。ECサイトにおいては誰もが安心してサービスを利用できるように、ウェブアクセシビリティの確保が求められています。

そんななか、私が所属する株式会社10Xで提供している小売チェーン向けECプラットフォームStailerでは視覚障害者の方により便利なネットスーパー・ネットドラッグストア利用体験を提供すべく、スクリーンリーダー（音声読み上げソフト）対応を実施しました。

スクリーンリーダーはFlutterがフレームワークとしてサポートするアクセシビリティ機能の一つでもあります。他にはフォントサイズやコントラストがサポートされています。

このセッションではFlutterが提供するスクリーンリーダーをサポートする機能について説明するとともに、実際にStailerがスクリーンリーダーに対応した際に困ったことやワークアラウンドの紹介、チームにスクリーンリーダー対応を広めるための活動などをお話します。

参考 https://product.10x.co.jp/entry/2024/07/01/124355

想定視聴者

• アクセシビリティ対応に興味がある方
• チームの実装方針を決めたり広めたりすることがある方