トーク

概要

チーム開発において、効率的な開発環境はプロジェクトの成功に不可欠です。
本セッションでは、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実装における共通の課題と解決策

概要

弊社ではネイティブアプリと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リプレイスに興味がある方
• 複数プラットフォームでのコード共有に挑戦している方
• リプレイスプロジェクトでの課題や知見について興味がある方

概要

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

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

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

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

想定視聴者

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

概要

位置情報と連動してポイントを獲得できる新機能を自社サービス内でリリースしました。
不正にポイントを得られないような様々な対策を行い、大きなイベントも無事乗り越えられました。

本セッションでは、Flutterアプリにおける位置情報やマップに関する実装のプラクティスとセキュリティ対策について紹介します

• デバイスやバイナリ、位置情報の整合性チェックと通信暗号化を用いた不正対策
  • それぞれの不正ポイントにおける対策方法の紹介
  • 実運用で起きた不正利用のケーススタディ
• Geolocatorのハマりどころと実運用時の課題解決
  • プラットフォーム、OSバージョンのパーミッションの仕様の差異をどう吸収するか
  • 位置情報取得の遅延との向き合い
• google_maps_flutterとflutter_map、mapbox_maps_flutterのSDK比較と使い分け基準のポイント
  • リッチなマーカーを実現するためのアプローチの差異
  • MapSDKごとの描画やデータ取得の方法によって起こる通信パフォーマンス差異

想定視聴者

• 位置情報やマップをFlutterアプリで使いたい方
• デバイスに関するセキュリティ対策に関心がある方
• ポイント機能を取り扱うサービスを運用している方

概要

アプリを運用していく上で、安定した品質とデリバリーはプロダクトに対するユーザーの満足度やチームの生産性にも影響します。
不具合を起こさずに施策や改善を提供することはできません。

本セッションではそういった不具合の中でも、パフォーマンスに対するトピックを掘り下げます。
開発環境で素早く問題に気づき、本番環境で素早く問題を検知する状態を目指すアプローチを紹介します

• アプリで計測可能なパフォーマンスに関するメトリクスについて
  • FrameTimingを使ったUIとRasterスレッドのパフォーマンス計測
  • shared_preferencesのI/O処理のパフォーマンス計測
  • Flutter Hooksのリビルドループのランタイムな検知システム
  • etc
• モニタリングツールを使ったアプリのアラート設定や実装のおすすめ
  • 例として、SentryやFirebase Performance Monitoringを用いた方法を紹介します
• 実際に発生したインシデントを用いた対策のケーススタディ

想定視聴者

• shared_preferencesパッケージで永続データを扱われている方
• リリース中のプロダクトのパフォーマンス状況を把握したい方

概要

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

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

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

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

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

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

想定視聴者

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

概要

モバイルアプリのリリースにおいて、一度リリースしたバイナリを完全に取り消すことができないという課題があります。
iOSとAndroidの両方で「段階リリース」を活用することで、リリースバイナリの浸透を調整し、リスクを管理することが可能です。
しかし、段階リリースはユーザーに価値を届けるまでに時間がかかることや、チーム内でのコミュニケーションコストの増加といったデメリットも伴います。
私のチームでは、リリースする機能の増加に対応するため、リリース頻度を週3回にする体制を構築しました。
このセッションでは、段階リリースを行いながら、24時間以内に公開率を100%にするか、公開を中断する体制の詳細を紹介します。

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

• 段階リリースの基本概念とそのメリット・デメリット
• 段階リリース中のモバイルアプリの品質を評価するための指標選定
• 指標を計測するための基盤について
• アプリの品質を可視化するために重要な「SLI/SLO」の概念とその適用方法
• 実際の運用上の課題と解決策、及びその所感

想定視聴者

• リリース戦略に悩んでいるエンジニアやプロジェクトマネージャー
• モバイルアプリの品質の可視化と管理に興味がある開発者

概要

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

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

想定視聴者

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

概要

本セッションではFlutter開発者の視点からGitHub Actionsの魅力と効果的な活用法を探ります。
GitHubに統合されたGitHub Actionsは、開発者が柔軟にワークフローを定義し、多様な開発タスクを効率化できる強力なCI/CDツールです。
Flutter開発者にとって、GitHub Actionsは開発サイクルを加速し、品質を向上させる強力な味方となり得ます。

このトークではテストやビルドなどの具体的なワークフローの紹介は最小限に留め、その代わりに以下のトピックを通じてFlutter開発におけるGithub Actionsの魅力を深掘りしたいと思います。

• GitHubとのシームレスな統合
• イベントベースの柔軟なワークフローのトリガー
• 料金体系に基づいたRunner（実行環境）の選択
• エコシステムに基づいたマーケットプレイスとコミュニティへの貢献
• Environmentを使った再利用可能なワークフローの作成
• セキュリティと認証

ここで得た知識が、ご自身のFlutterプロジェクトでのGitHub Actionsの活用や、CI/CDを導入するきっかけとなれば幸いです。

想定視聴者

• Flutter開発でのCI/CDに関心のある方
• GitHub Actionsの活用に興味のある方

概要

Flutter大学というFlutterエンジニア向けのサービスを４年間運営しています。このサービスは、Flutterで作られており、iOS、Android、webに対応しています。これまで日本向けに運用してきましたが、今年海外向けにリニューアルを図りました。このプロセスで、生成AI（GeminiやChatGPT)とslangパッケージを使って、大きなリソースをかけることなく、たった一人で日本語のサービスを英語圏にも対応させました。本セッションでは、ここで得た技術的知見やハマりどころなどを紹介します！海外展開を図ろうとしている皆さんの一助になれば幸いです。

想定視聴者

効率の良いローカリゼーションの実装に興味のある方
個人アプリを海外展開したいエンジニア

概要

本セッションでは、Material Design 3におけるAppBarのカスタマイズについて解説します。画面コンテンツのスクロール操作に連動したAppBarの動的な形状および背景の変化に焦点を当て、その実装手法や技術的なポイントを説明します。また、AppBarを透過させたり背景を変更することで、デザインにさらなる自由度を持たせ、視覚的に洗練されたUIを実現する方法なども取り上げます。これにより、アプリケーションのユーザー体験を向上させる具体的なアプローチを提案します。

想定視聴者

• UIに興味のある方
• M3に興味のある方

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

想定視聴者

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

概要

Flutter 3.24 から Flutter の iOS 側では CocoaPods に加えて Swift Package Manager のサポートが追加されました。
開発環境に Ruby の環境が必須ではなくなったり、 Swift Package Manager で新たに追加される機能等を利用可能になったりなど、さまざまな利点があります。

Flutter Plugin 開発は普通の package 開発に比べても手間のかかるもので、その課題はさまざまなところにあります。
このトークでは、Flutter Plugin 開発の従来の課題を示した上で、それが Swift Package Manager の登場でどのように変化していくのかを紹介します。

想定視聴者

・Flutter Plugin 開発に興味のある方
・Flutter でネイティブの機能を取り入れることに興味のある方