トーク

概要

このセッションでは、mixというスタイル設定システムをご紹介します。
mixは、シンプルかつ直感的にスタイルを作成、結合、適用できるシステムで、共通スタイルの管理運用がしやすくなります。
具体的には、mixを用いて簡単にスタイルを定義し、標準のFlutterスタイルシステムと比較しながら、その利便性を紹介します。

想定視聴者

• mixに興味がある方
• Style定義の新しいアプローチに興味がある方

概要

WebViewの実装は、多くのFlutterエンジニアが経験するものの、その詳細についてはあまり深く理解せずに使っていることが多いのではないでしょうか？

このトークでは、Flutterアプリ開発でよく利用される webview_flutter ライブラリについて解説を行います。
単なるWebの描画に留まらず、多様な処理をハンドリングすることで、WebViewでも高度な機能を実現できることを目指します。
自分自身が開発で直面した課題やハマりどころを中心にご紹介できればと思います。

このセッションでは以下の内容を想定しています。

• webview_flutter とは
• webview_flutter の解説
  • HTTPリクエストのハンドリング
  • デバッグ方法
  • 3.0から4.0へのアップデートの注意点
  • webview_flutterで実現できないこと
  • その他

想定視聴者

• webview_flutter の導入を検討している方
• webview_flutter を軽く使ったことがあるが、さらに理解を深めたい方

概要

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

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

想定視聴者

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

概要

最近携わったプロダクトで、 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を活用したテストコード生成などに興味がある方
• 現状テストを書く文化がないが、チーム内にテスト文化を浸透させたい方
• 開発効率を上げる具体的な例に興味がある方

概要

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

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

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

想定視聴者

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

概要

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

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

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

想定視聴者

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

概要

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

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

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

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

想定視聴者

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

概要

私たちのチームでは、アプリエンジニアがこの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を運用したい方

概要

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

想定視聴者

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

概要

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

想定視聴者

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

概要

Flutterは日進月歩でバグの修正や機能的な改善が続けられています。
私たちがアプリを開発する中で、「これはFlutterのバグなのか、それとも仕様なのか？」と惑わされることもあるでしょう。
しかし、実際にFlutterのissueについて読み、まとめられている方は少ないのではないでしょうか？
このLTでは、FlutterのHigh-priorityなissueに指定されている「P1ラベル」が付けられたものをまとめて紹介し、開発にどのように役立つか解説していきます。

想定視聴者

• Flutterのissueを把握したい人
• よりFlutterに根ざして開発したい人

概要

四半期ごとに行われるFlutterのアップデート。
日々の業務に追われてどんなアップデートがあったかお忘れの方も多いと思います。
そんな忙しい方に向けて、過去1年間のFlutterのアップデート内容を10分間にまとめます。

想定視聴者

Flutterの過去のアップデート内容を一通り復習したい方

概要

現在、生成AIを用いたアプリケーションが増加しています。最近では、既存のデータと連携して社内ドキュメントの検索など、業務効率化に利用されることが多くなっています。また、生成AIはデータ分析も可能であり、構造化データだけでなく、図表や画像といった非構造化データに対しても認識能力を持ち、分析が可能です。

私は写真を撮ることが趣味で、上達するために上手な人の写真をよく研究しています。しかし、自分の写真に対して客観的なアドバイスをもらえる機会が非常に少ないため、せっかく上手な人の写真を研究しても、自分の写真はどこかパッとしない感じがするものの、上手な人との違いや改善点が分からず、行き詰まることがよくあります。

そこで、生成AIの画像認識能力に注目し、写真教室の先生のようにフィードバックをしてくれるアプリのプロトタイプを、FlutterとVertex AI for Firebaseを用いて開発しました。本セッションでは、その作成過程について発表させていただきます。

想定視聴者

• 生成AIを使用したアプリケーションに興味がある方
• 写真撮影が好きな方

概要

アクセシビリティ対応は単に利便性を向上させるだけでなく、多様なユーザーがアプリケーションを使いやすくするための重要な要素となります。
Flutterの公式ドキュメントではアクセシビリティ対応のための一連の基準を提供し、開発者がアプリケーションをより使いやすく、アクセシブルなものにするためのガイドラインの「Accessibility release checklist」を提供しています。

本セッションではサンプルアプリである"Counter App"を「Accessibility release checklist」に倣いながら追加実装を行ったアプリのソースコードを用いて、Flutterにおけるアクセシビリティ対応について解説していきます。

想定視聴者

• Flutterにおけるアクセシビリティについて知りたい人
• Flutterについて最近開発を始めた人