トーク

概要

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

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

想定視聴者

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

概要

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

想定視聴者

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

概要

あなたのプロジェクトのLint設定、今どうなっていますか？
このセッションではより良いLint設定にしていくための基本的な知識から実際の指定例までを解説します。

• FlutterにおけるLintの設定方法
• Lintのルール一覧
• 著名なLintパッケージ
• 最近追加されたLintルール
• おすすめのLint設定

想定視聴者

• FlutterのLintについてキャッチアップしたい方
• Lintの設定に悩んでいる方
• 最近のLintルールをキャッチアップできていない方

概要

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

想定視聴者

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

概要

Xcode 16へのアップデートに伴い、Swiftの言語バージョンがSwift 6になった今、Swiftに大きな変革のときが訪れています。
このセッションでは、そんなSwift 6へのアップデートに伴い、Pigeonで生成されたSwiftコードをどのようにSwift 6に向けて最適化していくのがいいかを解説します。

• Swift 6について
  • Swift Concurrencyの基礎知識
  • Strict Concurrencyによるデータ競合の回避方法
• Pigeonについて
  • Pigeonの利用方法
  • Pigeonで生成されるコードの具体例
  • Pigeonで生成されたコードを利用したSwift 6プログラミングの実例と解説

想定視聴者

FlutterエンジニアでSwift側のコードをよりSwiftyに実装したいエンジニア

概要

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

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

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

想定視聴者

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

概要

​​令和6年（2024年）4月1日に「改正障害者差別解消法」が施行され、事業者による障害のある方への合理的配慮の提供が義務化されました。ECサイトにおいては誰もが安心してサービスを利用できるように、ウェブアクセシビリティの確保が求められています。

そんななか、私が所属する株式会社10Xで提供している小売チェーン向けECプラットフォームStailerでは視覚障害者の方により便利なネットスーパー・ネットドラッグストア利用体験を提供すべく、スクリーンリーダー（音声読み上げソフト）対応を実施しました。

スクリーンリーダーはFlutterがフレームワークとしてサポートするアクセシビリティ機能の一つでもあります。他にはフォントサイズやコントラストがサポートされています。

このセッションではFlutterが提供するスクリーンリーダーをサポートする機能について説明するとともに、実際にStailerがスクリーンリーダーに対応した際に困ったことやワークアラウンドの紹介、チームにスクリーンリーダー対応を広めるための活動などをお話します。

参考 https://product.10x.co.jp/entry/2024/07/01/124355

想定視聴者

• アクセシビリティ対応に興味がある方
• チームの実装方針を決めたり広めたりすることがある方

概要

FlutterにはプラットフォームのViewを表示する方法は現状で2つ、Viewをなるべくそのまま表示するPlatformViewと、描画フレームをプラットフォームから渡して表示するTextureが挙げられます。
一般的な方法としてはPlatformViewで、公式ドキュメントにも記述がある上、PlatformViewを採用したpackageも多くあります。一方で、Textureは事例をあまり見かけませんが、有名なところだとvideo_playerで採用されています。
「プラットフォームのViewを表示したい」という目的を達成するためには、基本的にはPlatformViewを選択すれば間違いはありません。しかし、Textureを使う状況にはそれなりの理由があります。では、Textureを使う場面とは一体何でしょうか。あるいは、PlatformViewを使わない理由とは？

このトークでは、上記2つの方法について実装方法やその違い、メリデメ等を紹介します。このトークを通じて、プラットフォームのViewを表示する実装を行うときに適切な選択ができるようになることを目標とします。

想定視聴者

• Flutterの基本的な知識があり、より多くの引き出しを増やしたい方
• プラットフォームのネイティブViewを表示するような実装をしたい、またはpackageを作成したい方

概要

iOS App Extensionを使うと、 ユーザーが他のアプリやシステムを操作している間でも、その機能やコンテンツを利用できるようになります。
しかしApp ExtensionをFlutterアプリで使いたい場合、思ったより色んな問題が発生します。
このセッションではiOS App ExtensionをFlutterアプリに導入した経験を共有し、
どのような設定をすれば良いのか、そしてMethod channelはどのように実装すれば良いのかについて説明します。

• なぜApp Extensionが必要？
• iOS App Extension実装
  ・ 簡単にApp Extensionを作る
  ・ Xcodeの設定など、設定に必要なことを紹介
• Method channelの構成
  ・ App ExtensionのUIをFlutterを使って実装
  ・ App ExtensionとやりとりするためのMethod Channelのコードを実装
• よく発生する問題
  ・ App Extensionを導入しながら、よく発生する問題を紹介
  ・ メモリの制限を回避する方法
  ・ Flutterの公式ドキュメントの注意点を共有

想定視聴者

• iOS App Extensionに興味がある方
• Method Channelの実装に興味がある方

概要

WebRTC技術は映像、音声、テキストなどをリアルタイムでPeer 2 peer通信ができるようにする技術です。
このセッションではflutter_webrtcパッケージを使ってWebRTCを利用したビデオ通話アプリを作る方法を共有します。
WebRTC通信をするためにはSignaling server、STUN(TURN) serverが必要です。 Signaling serverをとても簡単なレベルのJavascriptコードでデモし、
STUN/TURNサーバーのためのcoturnのインストールと設定について簡単に説明します。

• WebRTCとは？
  ・ WebRTCを使うために必要なこと
  ・ WebRTCのProtocol
• flutter_webrtcを使ってWebRTCアプリ実装
  ・ Project初期設定
  ・ 簡単なビデオ通話アプリの実装
  ・ WebRTC通信のためのSocketクライアント実装
  ・ STUNサーバー設置、Signaling server実装（Javascript）
• WebRTCを導入する際、注意事項

想定視聴者

• WebRTCに興味がある方
• ビデオ通話などの機能をサービスに導入したい方

Flutterを使ってアプリ独自の世界観をUIで表現することは、複数のプラットフォームに対応するUIを単一のDartコードで構築できるというFlutterの最大のメリットを活かすための一つの手段です。
独自の世界観を表現する際に、画面遷移アニメーションにもこだわることで、さらに魅力的な演出が可能です。

確かに、Flutterには MaterialPageRoute というネイティブライクな画面遷移アニメーションが標準で用意されており、多くのケースではこれで十分対応できます。
しかし、オリジナルの画面遷移アニメーションを取り入れることで、ユーザーをより深くその世界観に没入させることができるかもしれません。
Flutterを選んでいるからこそ、画面遷移にもこだわりを持ち、独自の世界観をさらに引き立ててみてはいかがでしょうか？

本セッションでは、私が公開している画面遷移アニメーションのパッケージ turn_page_transition を作った経験をもとに、次の内容を話します

• CustomPaintの基本
• 画面遷移アニメーションの基本
• オリジナルの画面遷移アニメーションの描き方
• テストの書き方

概要

Flutter 3.24 からプレビュー版が使えるようになった Flutter GPU で「何が出来るようになるのか・何が出来ないのか」を、簡単なサンプルコードを動かしながら解説していきます。
Flutter GPU はOpenGLで3Dレンダリングをしたり、シェーダーでエフェクトをかけたりすることの出来る機能ですが、最大の特長は Widget と親和性が高く、発想次第で新しいアプリ体験が作り出せる点だと思います。
まだプレビュー版なので実際に開発で利用できるのはもう少し先の話ですが、今から未来のFlutterを体験して一緒にわくわくしませんか？

想定視聴者

• Flutter GPU に興味があり、基本的な概要を知りたい方
• 視覚的な面白さを重視したアプリを作りたい方
• Flutterでのゲーム作りを検討している方

概要

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

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

想定視聴者

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

概要

OpenApi Generatorによる通信周りのDartのクライアントコードを自動生成できる。
このコードを使ってRepositoryの実装を行なっていくことになる。
恐らく、多くの方は基本的な方針として「swaggerのYAMLファイルをメンテナンスする」としたいはず。

そうなると、生成されたコードには一切の手をつけないままで、
プロダクトコードとUnitTestコードともに動作させられるコードを書く必要がある。

このコードの中で
「どのようにテストコードを書いたらよいか」を一つのアプローチを実例を踏まえて説明をしたいと思います。

想定視聴者

OpenApi Generatorによるプロダクトコードへの反映を考えているエンジニア
テストコードの書き方が気になっているエンジニア

概要

生成AIの急速な進化により、私達の生活や仕事においてAIを利用することが身近になりました。
2024年現在、複数の生成AIサービスが提供されており、チャット形式で疑問に答えてくれたり、コーディングのサポートなど徐々に私達の生活に欠かせないものになりつつあります。

本セッションでは、単一の生成AIサービスを用いて、デザインからFlutter用のコード出力した場合のポイントやTipsを深堀りする形で解説していきます。（ChatGPTを想定）

想定視聴者

・AIに興味がある

・プロトタイプを爆速で開発したい

・デザイナーやPMなど、エンジニア以外でも開発に興味がある

概要

生成AIの急速な進化により、私達の生活や仕事においてAIを利用することが身近になりました。
2024年現在、複数の生成AIサービスが提供されており、チャット形式で疑問に答えてくれたり、コーディングのサポートなど徐々に私達の生活に欠かせないものになりつつあります。
本セッションでは、生成AIの中でも特に注目されている「画像からコードを生成する機能」に焦点を当てます。ChatGPTやGeminiをはじめとする最新の生成AIサービスを徹底的に比較し、読み込ませたデザインからFlutter用のコード出力結果にどのような違いがあるのかを明らかにします。また、性能や使い勝手を実際の例を用いて検証・比較をしていきます。

想定視聴者

・AIに興味がある

・プロトタイプを爆速で開発したい

・デザイナーやPMなど、エンジニア以外でも開発に興味がある

概要

セッションの概要を記載してください。

このセッションでは、Pigeonを活用してDartとネイティブプラットフォーム（iOS/Android）間の連携を加速する方法について詳しく解説します。
Pigeonは、Flutterアプリケーションとネイティブコードの間の通信を簡素化し、開発効率を向上させるツールです。
以下のポイントに焦点を当てて説明します。

1. Pigeonの基本概念
2. Pigeon導入方法
   • 導入手順や初期設定のガイド
   • 必要な依存関係や準備すべき環境
3. 使用例
   • 実際にPigeonを使用して、Flutterアプリケーションとネイティブコード間のデータ交換や機能呼び出しを実現する具体例を紹介します。

想定視聴者

誰に向けたセッションなのかを記載してください。
・MethodChannelで四苦八苦している方
・Pigeonに興味がある方

概要

KDDI株式会社では、au PAYアプリを内製開発しており、2023年に部分的にFlutterを採用しました。
基本的にネイティブ（Kotlin/Swift）で開発しているところに、Add-to-appにより部分的にFlutterを取り入れている形です。
また、2024年には、ネイティブで開発してきたau PAYの関連アプリをフルリプレイスする形でFlutterを全面採用することにしました。
Flutterの全面採用は、アプリ開発では勿論、API-GWの開発でも採用しており、バックエンドを含めたAll Flutterなプロジェクトになっています。

本セッションでは、Flutterの部分的採用から全面採用に至るまでに得られた知見を皆様にお届けします。

・Add-to-appによるFlutterの部分的採用
　・Flutterで開発した機能
　・部分的採用で得られた恩恵と課題
　・状態管理にBlocを採用した話
・バックエンドも含めたFlutter（Dart）の全面採用
　・全面採用に踏み切った理由と狙い
　・All Dartによるクロスファンクショナルな開発
・部分的採用か全面採用かの判断の勘所

想定視聴者

・既存のネイティブアプリにFlutterを部分的に採用することに興味がある方
・現場でFlutterを部分的に採用するか全面採用にするかで迷われている方

概要

Flutter におけるアプリ開発において、 DevTools は必要不可欠な存在です。
しかし既存の DevTools に独自の機能をカスタマイズできることはあまり知られていません。
DevTools を独自にカスタマイズすることで、ログの表示制御、キャッシュの表示、アプリ内の開発者用の画面を DevTools に移行するなど、開発体験の向上が見込めます。

このセクションでは、devtools_extensions パッケージを使用して、 DevTools を独自にカスタマイズする方法や、
実際のチーム開発でどのような機能をカスタマイズしているかなどの実例を紹介します。
加えてパッケージ製作者向けに自身のパッケージに DevTools Extensions を提供する方法も解説します。

想定視聴者

• DevTools の開発に興味のある方
• チーム開発の生産性を上げたい方
• アプリ内の開発用画面を DevTools に移行させたい方

概要

GraphQL は Meta 社が REST の問題点を解決するために開発した API クエリ言語およびランタイムです。
エンドポイントの統一、オーバーフェッチやアンダーフェッチの解消などが利点としてよく挙げられます。
中でも GraphQL クライアント技術は宣言的 UI と非常に相性がよく、Flutter アプリケーションのアーキテクチャに選択肢を増やしました。

このセクションでは、実際に Flutter アプリに GraphQL を採用して得られた以下の知見を共有します。

• GraphQL の概要
• GraphQL と Flutter の親和性
• 実際のアーキテクチャ
• 開発における工夫点
• React から推測する Flutter の今後

想定視聴者

• GraphQL を使ってみたい方
• Flutter アプリのアーキテクチャに興味のある方
• 大規模プロジェクトの開発に興味のある方