トーク

概要

Flutter アプリケーションにおいて、ジェスチャー操作は重要な UI 要素です。基本的なタップやスワイプは広く実装されていますが、より複雑で洗練されたジェスチャー操作の活用はまだ十分ではありません。
複雑なジェスチャーの実装には、 GestureDetector の深い理解が必要です。また、多様なジェスチャーの種類、適切な制御方法、カスタムジェスチャーの作成など、高度なスキルが求められます。
本セッションでは、 GestureDetector の仕組みから、様々なジェスチャーの種類と実装方法、制御テクニック、オリジナルのジェスチャー作成までを包括的に解説します。実践的なコード例と共に、複雑なジェスチャーを使いこなすための知識とスキルを提供します。

1. GestureDetector の内部構造を理解
2. 利用可能なジェスチャーの種類と特徴
3. 複数のジェスチャーを組み合わせた高度な操作の実装
4. ジェスチャーの衝突を防ぐ制御テクニック
5. カスタムジェスチャーの設計と実装方法

想定視聴者

・より高度なユーザーインターフェースの実装に挑戦したい開発者
・独自のジェスチャー操作を実装したいと考えているアプリ開発者

概要

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

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

想定視聴者

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

概要

Dart の Class modifiers （クラス修飾子） は、2023年5月にリリースされた Dart 3 で大幅に機能が強化され、今では Dart/Flutter で開発するアプリのクラス設計において欠かせない存在となりました。

本セッションでは、Dart の Class modifiers の機能を簡単におさらいするとともに、実際のモデリングやクラス設計、実装においてどのように活用できるのかを紐解きます。Class modifiers の理解を深めることで、インターフェースを利用した抽象化、sealed class を利用したパターンマッチングなど、クリーンなコードを書くためのヒントを得られます。

また、Dart の機能・言語仕様にとどまらず、 Class modifiers を知り、活用することで Flutter アプリの開発にどのようなメリットが生じるのか、といった実践的な内容にも踏み込んで解説します。

想定視聴者

本セッションの想定視聴者は次のとおりです。

• Flutterアプリ開発者全般
• Class modifiers をどのようにクラス設計に活用できるのか、公式ドキュメント以外の実践例が知りたい
• Class modifiers を利用したクラス設計が、アプリ開発にどのようなメリットをもたらすのかを知りたい

概要

このセッションでは、Flutter公式が開発しているvideo_playerについて話します。
video_playerの構成や使える機能などの紹介はもちろん、動画という各ネイティブ独自の機能を呼び出すときに考えなければいけない難しい部分についての話を行います。
video_playerはシンプルな機能しか提供していません。
本セッションでは、そんなvideo_playerを拡張するためにはどのような実装が必要かを、基本的なHLSの説明を元にvideo_playerに追っかけ（タイムシフト）再生を追加する例を元に紹介します。

1. video_player
   1. 概要
   2. 全体構成
   3. 使える機能、使えない機能
2. video_playerのpigeonを使ったネイティブコード呼び出し
3. video_playerに機能追加を試して理解を深める
   1. AVPlayerとExoPlayerの仕様差異とその吸収の仕方
   2. ネイティブ機能を使うパッケージ開発の困難なところ
4. video_playerの直近の動きと今後

想定視聴者

・video_playerを使っている人
・Flutterの動画再生に興味がある人
・Flutterでネイティブコードの呼び出しを実装したことがある人、興味がある人

概要

Dartはシングルスレッドと呼ばれる仕組みで1つのIsolateの中でDartのコードを処理します。
基本的なユーザーがボタンを押したイベントやタイマーが発火したのようなイベントは先頭から順番に処理されます。
しかし、Futureの非同期のイベントがイベントループに入ったときや、microtaskがイベントループに入ったときは単純な処理ではなくなり、理解が難しいことが多々あります。
この理解を疎かにすることでバグになり不具合につながってしまうこともあります。

本セッションではDartのEvent Loopについておさらいをして、Flutterアプリ開発をする中で起こる様々なユースケースを元にDartがシングルスレッドでどのようにイベントを処理しているのかを深堀ります。

想定視聴者

・Dartのイベントループについて知りたい人
・最近Flutterを始めた人

概要

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

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

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

想定視聴者

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

概要

チーム開発において、効率的な開発環境はプロジェクトの成功に不可欠です。
本セッションでは、Flutter 開発における環境構築から CI/CD といった開発フロー全体における、具体的なノウハウとプラクティスを発表します。
チームメンバーが開発に集中できる環境を整え、生産性の向上を目指しましょう。

具体的には、以下のトピックを中心に解説します。

• SDK やツール管理: Flutter 開発に必要な SDK やツールの効率的な管理方法について解説します。
• マルチパッケージ (モノレポ) 管理: ローカルのマルチパッケージ管理やタスクランナーについて解説します。
• 静的解析: Dart コードに限定せずプロジェクト全体の Lint や Formatter について解説します。
• CI/CD (GitHub Actions): Issue Ops や GitHub Actions を活用した CI/CD パイプラインの構築や実行時間を抑えるノウハウについて解説します。

想定視聴者

• チームの開発環境を改善し、開発効率を高めたい Flutter 開発者
• 新しい Flutter プロジェクトを立ち上げ、効率的な開発基盤を構築したい方

概要

デザインシステムの文脈の元、
Flutterでデザイン再現度を上げるにはどうすべきか以下のような内容を話します。
※ デザインツールはFigmaを前提としています。

・ チームでのデザインシステムへの取り組みの紹介
・ デザイナーの巻き込んでいくか
・ 実際のFlutterでのデザインの再現方法
・ プログラムしやすいデザインとして、デザイナーに何を連携して何をデザインシステムとしてまとめたか紹介

想定視聴者

・ デザインの再現度を高めたい方。
　・ Figmaを見てFlutterで実装する際のTipsを知りたい方。
・ 「デザインシステム」・デザイナーと実装しやすいデザインについて協議を進めていきたい方。

概要

「ダウンロードしておいたファイル（端末に保存したファイル）を利用してアプリを動作させる方法」について設計・Tips・注意点を紹介します。
※ 実際に業務で利用した知見が含まれます。

現状含んでいない内容
オフラインで実行した処理（ポイント付与など）を、オンラインに繋げた際に連携する方法。
※ 実績がないため、用意できたとしても調査した結果のみとなります。

想定視聴者

・ オフラインを前提としたアプリを検討したことがあり、Flutterアプリを動作させる方法についてヒントが欲しい方。
・ 端末内にファイル保存をする仕様を検討されている方。

概要

Awarefyでは、MaestroによるE2Eテスト環境を構築し、運用しています。そして、実行にかかるコストを削減するため、Maestroが用意しているCIサービスであるMaestro Cloudを使わず、GitHub Actionsからself-hosted runnersで実行することに成功しました。
Maestroを用いたE2Eテストの実装から、self-hosted runnersで実行するためのハウツーについて話します。

想定視聴者

• E2Eテストを導入したい方
• Maestroの導入に興味がある方
• Maestroをself-hosted runnersで実行したい方

概要

社内向けのOpenID Connect (OIDC)クライアントライブラリ 開発した経験を共有します。
株式会社GENDA が提供するGENDA ID (グループ横断の ID プラットフォーム)に対応するため、FlutterアプリからOIDCのRelying Partyとして機能するPublic Clientライブラリの開発プロセス、直面した課題、そしてその解決策について詳しく説明します。

主なトピック

1. OIDCの基礎
2. Dartでのライブラリ開発における挑戦と学び
   • iOSアプリエンジニアの視点からみたDartとFlutterの特徴
   • ライブラリ開発特有の考慮点と実装テクニック
3. プライベートリポジトリを活用した社内向けライブラリのベストプラクティス
4. OIDCクライアント実装に必要な周辺技術の解説

想定視聴者

• Flutterアプリ向けのライブラリ開発をやってみたい方
• Flutterアプリ開発に慣れていない方
• OpenID Connect (OIDC)という言葉を知っているだけで詳しくない方

聴衆が得られる知見

• Dartでのライブラリ開発のベストプラクティスと落とし穴
• 企業内でのプライベートパッケージ管理と配布のテクニック
• OIDC実装における共通の課題と解決策

概要

最近携わったプロダクトで、 Private Git Repositoryで管理しているFlutterプロジェクトを別のFlutterプロジェクトでパッケージとして参照する対応を行いました。
そこでハマったことを具体的な例を交えながら、解決策を踏まえて紹介できればと思います。

• 最新の情報を取得できない問題
• 画像などのアセット情報が読み込めない
• Private Git Repositoryを参照するので、考慮しなければ当然CI環境やDependabotなどは壊れる

想定視聴者

• Private Git Repositoryをパッケージとして使用する予定の方
• Private Git Repositoryをパッケージとして使用する際に、ハマった具体的な内容を知りたい方

概要

「ユニットテストを導入したいけど、どのように書いたら良いのかわからない」
「テストは書いているけど、もっと楽に書けるようにしたい」
と課題に感じたことはありませんか？

かくいう私もその一人で、同じ課題を持っていましたが、
生成AIを活用してテストコードを自動出力させることで、ユニットテストの実装コスト削減を行いました。

本トークでは、この取り組みや結果について紹介します。
・テストコードのルール策定について
　チームで運用するにあたり、ルール決めをする必要があります。
　ここではどのようなことを考えてルールを決めていったのか、実際使っているテストコードルールを用いて紹介します。
・生成AIによる出力精度を高めるための工夫
　実際に使用しているプロンプトの構成を用いて紹介します。
・開発プロセスへの組み込みと実際の運用について
　開発フローに自然と組み込めるように、GitHub Actionsを用いたPR上での出力など、実運用するための取り組みについて紹介します。
・GitHub Copilot との使い分けについて
・ユニットテスト以外での生成AIの応用事例
　コード生成以外にもレビューなどの活用事例について紹介します。

想定視聴者

・生成AIを活用したテストコード生成などに興味がある方
・現状テストを書く文化がないが、チーム内にテスト文化を浸透させたい方

概要

私が開発に携わっているプロダクトにFlutterが導入されてから2年が経ち、その中で開発の効率を上げるための取り組みが行われてきました。
今回はその中で効果があった5つのことについて、具体的な例を交えながら紹介できればと思います。

• 生成AIを活用したテストコードの生成・セルフレビュー
• 各モジュールクラスのテンプレート
• Makefileでの運用
• デバッグ機能
• その他

想定視聴者

• 生成AIを活用したテストコード生成などに興味がある方
• 現状テストを書く文化がないが、チーム内にテスト文化を浸透させたい方
• 開発効率を上げる具体的な例に興味がある方

概要

弊社ではネイティブアプリとWebアプリをFlutterでのフルリプレイスを進めていて、AndroidとWebをフルリプレイスすることができました。
Flutterで独自デザインを実現するためのカスタマイズには制限があり、どこまでできるのか頻繁にデザイナーとのやり取りが発生しました。

本セッションでは、Flutterのデザインカスタマイズの制限をどのように克服し、デザイナーとの調整をスムーズに進めたかを共有します。
特に、Widgetbookを活用することでデザイン調整の工数をどのように削減したか、実際の体験談を交えて紹介します。

想定視聴者

• デザイン調整に課題を感じているFlutterエンジニア
• デザイナーと頻繁にやり取りするエンジニア
• UI/UXデザインの効率化に関心のある開発者

概要

画像切り抜きパッケージ "crop_your_image" の公開から 3 年が経ちました。

LIKE 数は 500 に迫り、POPULARITY は 98%、リポジトリへの issue やプルリクは今でも定期的に作成され、画像切り抜きパッケージとして当初の想定の何倍も使われていると自画自賛しています。

このセッションでは、そんな crop_your_image パッケージの開発を振り返りながら、パッケージ開発の経緯や使いやすいパッケージを実現するためのアイデア、パッケージ開発から得られるスキルやノウハウなどを余すところなく共有しながら、パッケージ開発が普段のアプリ開発に対しても大きな糧になることを説明します。

想定視聴者

• パッケージ開発に興味のある方
• パッケージの使い方に悩まされたことがある方
• 「共通クラス」をもっと使いやすく作りたい方

概要

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

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

想定視聴者

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

概要

Studyplusは、多機能かつユーザー数の多い大規模なネイティブアプリです。弊社では、数年前からこのStudyplusのネイティブアプリと同様の機能を持つWebアプリをFlutterを使ってフルリプレイスするプロジェクトを進めてきました。
このセッションでは、ネイティブとWebをワンソースで開発するという他にないレアな事例を基に、リプレイスプロジェクトの進め方、直面した課題、そして得られた知見について詳しくお話しします。

• 大規模ネイティブアプリのFlutterリプレイス概要
• Webプラットフォームとのコード共通化の背景と目的
• リプレイスを進める上での課題と対処法
• プラットフォームごとの考慮点と具体的な実装アプローチ
• プロジェクトを通じて得られた知見

想定視聴者

• 大規模アプリケーションのFlutterリプレイスに興味がある方
• 複数プラットフォームでのコード共有に挑戦している方
• リプレイスプロジェクトでの課題や知見について興味がある方

概要

playbook-flutter は 1.0.0 がリリースされました。

Playbook はプロダクトで実装している widget の内容を表示するためのアプリケーションフレームワークを用意していたり、その widget のスクリーンショットをテスト時に撮ることを容易にしてくれる補助パッケージです。

1.0.0 のリリースに伴い、以前のバージョンから変わったことを中心に、設定ファイルの書き方や導入と実行まで、時間の許す限りお伝えします。

想定視聴者

• VRT に興味あるという方
• Widgetbook は使ってるよという方

概要

本発表では、FlutterプロジェクトにおいてAtomicデザインを採用し、デザインシステムのAtomsを基にUIコンポーネントを効率的かつ一貫性を持って実装する方法を詳細に解説します。

具体的には、BaseTextクラスやBody1Textクラスのカスタム実装を例に、テキストスタイルの統一と拡張性を両立させるためのアプローチを紹介します。これにより、デザインシステムの変更に迅速に対応し、コードの再利用性を高めるとともに、開発効率を大幅に向上させた実績を共有します。

また、実装例を通じて、デザインと開発の齟齬を防ぐためのベストプラクティスについても触れます。

想定視聴者

デザインシステムやAtomicデザインに関心があり、UIコンポーネントの効率的な実装方法を学びたい方。