トーク

概要

最近携わったプロダクトで、 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 パッケージの開発を振り返りながら、パッケージ開発の経緯や使いやすいパッケージを実現するためのアイデア、パッケージ開発から得られるスキルやノウハウなどを余すところなく共有しながら、パッケージ開発が普段のアプリ開発に対しても大きな糧になることを説明します。

想定視聴者

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

概要

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コンポーネントの効率的な実装方法を学びたい方。

概要

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

本セッションでは、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パッケージで永続データを扱われている方
• リリース中のプロダクトのパフォーマンス状況を把握したい方

概要

モバイルアプリのリリースにおいて、一度リリースしたバイナリを完全に取り消すことができないという課題があります。
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でやりたい人

開いているファイルの選択、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パッケージを使って、大きなリソースをかけることなく、たった一人で日本語のサービスを英語圏にも対応させました。本セッションでは、ここで得た技術的知見やハマりどころなどを紹介します！海外展開を図ろうとしている皆さんの一助になれば幸いです。

想定視聴者

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