トーク

概要

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

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

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

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

想定視聴者

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

概要

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

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

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

想定視聴者

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

概要

これまでWebアプリ開発を専門としてきた私が、突然モバイルアプリの社内開発、顧客案件の新規開発を任され、Flutterを用いて開発を行い無事プロダクトリリースまでたどり着いた経験を共有します。

Flutterについては全くの初心者だった私が、
・アーキテクチャの選定
・テスト戦略
・CI/CD戦略
・などなど
多岐にわたる課題にどう向き合い、解決していったのかを具体的にお話しします。

このセッションでは、Flutterが持つ使いやすさと開発効率の高さに驚いた点や、逆に苦戦した点についても率直にお伝えします。また、今後さらに挑戦したいことについても言及し、これからFlutter導入を検討している皆様にとって有益な情報を提供できればと思います。

Flutterの豊富なツールと参考情報のおかげで、非常に良い開発体験を得ることができ、最終的には「Flutterでの開発いいよね〜」という感覚を味わうに至りました。
このセッションで皆さんがFlutterでのプロダクト開発に対する興味を持ち、「Flutterいいよね〜」状態になる一助となれば幸いです。

想定視聴者

・これからFlutterでのプロダクト開発を行いたい方。
　※本セッションではモバイルアプリ開発を主とし、バックエンドAPI環境の構築については対象外といたします。

概要

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

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

• アプリで計測可能なパフォーマンスに関するメトリクスについて
  • 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」の概念とその適用方法
• 実際の運用上の課題と解決策、及びその所感

想定視聴者

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

概要

私たちのチームでは、アプリエンジニアがこの1年で5名から10名に増加しました。
この成長は嬉しいことですが、同時にコーディングルールやアーキテクチャの徹底に課題が生じています。
コードレビューやドキュメントだけでは限界があるため、lintルールを導入し、コード品質の維持と向上を図りました。

custom_lintの登場により、lintルールの作成とテストが容易になりました。
私たちのチームでは現在、15個の独自lintルールを運用しており、その数は増え続けています。

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

• custom_lintを用いたルール追加の方法とその難易度
• 採用しているアーキテクチャを保守するlintルールの紹介
• 細かいけれど重要なコーディングルールを反映したlintルールの紹介
• 実装予定または見送ったlintルールの紹介

想定視聴者

• custom_lintの使い方に悩んでいる方
• チーム開発におけるコード規約に課題を感じている方
• 長期的な視点でコード品質の向上を目指している方

概要

機械系エンジニアであった私はFlutterアプリ開発チームに入り、モブプログラミングで成長した話を共有します。

成長に導いたFlutter機能
・Widget Inspector
・Golden Test
・Hot Reload＆Hot Restart
をモブプログラミングで実際に使ってみた経験を語ります。

機械系エンジニアの視点から見たFlutterアプリエンジニアの世界を共有し、
他分野からFlutterを用いてアプリ開発を挑戦している人やFlutter初心者のために役に立てればと考えています。

想定視聴者

Flutter 初心者
プログラミングを始めようとする人
Flutterに乗り換えを検討してる人
アプリ開発をFlutterでやりたい人

概要

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

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

想定視聴者

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

開いているファイルの選択、Dartサーバーの再起動、実行対象のデバイスを変更、build_runnerの実行、検証用のアプリの作成…
その操作、瞬く間にキーボードで操作できます！
今すぐマウスは窓から投げ捨てて爆速で開発しましょう！
本セクションでは、VSCode(Cursor, Android Studio)のショートカットやカスタマイズの方法、便利なTipsなどを紹介します。

・便利なショートカットキー＆Tips
・ショートカットキーのカスタマイズのすすめ
・エディタの拡張機能を作る

想定視聴者

エディタの機能についてもっと理解を深めたい人

Flutter・ネイティブ問わずアプリにおいて画像を表示すること、特にネットワークを経由して画像を表示することは多くの場面で一般的です。
Flutter標準のWidgetであるImage.networkでも事足りる場面も多いですが、キャッシュを意識してcached_network_imageやextended_imageの採用をしている方も多いと思います。
またprecacheImageと組み合わせて表示する前に読み込んでおくことでキャッシュからスムーズに画像を表示することなどもできます。
しかしながら開発の中でキャッシュから取得してるのに画像が表示されるのが遅い事象に遭遇しました。
このLTではその対策と原因を解説したいと思います。

想定視聴者

• 大量の画像を表示したい人
• 画像をキャッシュからより早く表示したい人

概要

Web GUIはブラウザがあれば端末を問わずに情報や操作を提供できる便利な存在で、インターネットだけでなくローカルネットワークでもよく活用されています。センサーやロボットなども設定画面に利用していることが多いです。Flutter on the WebはWeb GUIをFlutterから作れるツールですが、完全にインターネットから遮断された環境で扱うには少し工夫が必要となってきます。本トークではFlutter on the Webの設定の違いごとの外部通信について実験を踏まえつつ解説、実際に完全オフラインで運用するためのテクニックについてお話します。

想定視聴者

Flutter on the Webで開発をしている方
Flutter on the Webの外部との通信について知りたい方
インターネットの使えない場所でFlutter on the Webを運用したい方

概要

本セッションでは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の活用に興味のある方

概要

Gemini API Developer Competitionに英単語帳のアプリを提出しました。今回、このハッカソンに提出するにあたって、Gemini APIの有効な使い方について沢山考え、知見となりましたので、紹介したいと思います。

想定視聴者

開発中のアプリで生成AIを使ってみたいが、使い所がわからない方

概要

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に根ざして開発したい人

概要

メタプログラミングは、コードの生成や操作を動的に行う強力な技術であり、Dart においてもその重要性が高まっています。
特に、dart macros の登場により、メタプログラミングのアプローチが進化しています。
本セッションでは、メタプログラミングの基本概念を改めて紹介し、Dart におけるメタデータ管理のための meta ライブラリの主要なアノテーションを紹介します。
さらに、dart macros の概要に触れ、meta ライブラリとの利用方法の違いを比較し、それぞれがどのようにコードの効率的な管理や生成に寄与するかを探ります。

想定視聴者

• メタプログラミング初心者
• メタプログラミングに興味関心がある方
• metaライブラリ / dart macrosに興味関心がある方

概要

皆さんが普段開発を行っているプロダクトにおける品質は、どのように保証していますか？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実装にチャレンジしてみたい人