トーク

概要

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に実装したいエンジニア

概要

​​令和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でのゲーム作りを検討している方

概要

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 アプリのアーキテクチャに興味のある方
• 大規模プロジェクトの開発に興味のある方

概要

「Web3.0」というキーワードを耳にする機会が増えています。
しかし、現在Flutterで開発されているアプリの多くは、まだWeb3の完全な実装には達していません。本セッションでは、Flutterを用いてWeb3アプリを開発する際の技術的な実装方法に加え、直面した課題やそれを克服した経験を共有します。
FlutterでWeb3アプリを開発することに興味がある方にとって、実践的な知識や技術選定のヒントなどが得られるセッションになります。

主な内容

• MetaMaskログインとウォレットアドレス取得
• 秘密鍵による署名の実装
• Web3Authでのソーシャルログイン（Apple, Google）
• Web3関連Packagesの選定の課題と対策
• ドキュメント不足やMetaMaskのバグを乗り越えた方法

想定視聴者

• Flutterエンジニア - FlutterアプリにWeb3機能を統合したいエンジニア。
• モバイルアプリ開発者 - Web3技術を使ってアプリのユーザー体験を向上させたい開発者。
• ブロックチェーンエンジニア - ブロックチェーン技術を活用したアプリ開発に興味がある方。

概要

このセッションでは、Flutterを使ってUIを構築し、Kotlin Multiplatform (KMP) を利用してビジネスロジックを実装する、Dartに依存しないクロスプラットフォームアプリ開発の新しいアプローチを紹介します。
Flutterはその優れたUI構築能力で知られていますが、ビジネスロジックをDartで実装する必要があり、一部の開発者にとっては学習コストが高くなりがちです。Dartの学習を最小限に抑えつつ、Kotlinの強力な機能を活用して、iOSやAndroid両方で動作するアプリを効率的に開発しましょう。

具体的には、FlutterでのUI構築とKMPを用いたビジネスロジックの分離統合の手法、Kotlin/Nativeを用いたプラグインの作成、FlutterとKMP間のデータのやり取りをシンプルに行うためのベストプラクティスを取り上げます。Flutterを活かし、Kotlinでビジネスロジックを管理することで、保守性や開発効率を向上させましょう。

想定視聴者

・Dartの学習に課題を感じているFlutter初心者
・Kotlinのスキルを活用したい他プラットフォーム開発者
・KotlinやKMPの経験があり、Flutterを用いた開発に興味があるAndroidエンジニア
・Kotlinのエコシステムを生かしてモバイル開発を効率化したい開発者

概要

最近Flutter対応を発表したDitto SDKについてご紹介します。

こんなお困りごとはございませんか？

・ 『サーバー、ネットワークの障害でアプリが使えなくなる』
・ 『現場のWi-Fiが弱く、アプリがサクサク使えない』
・ 『施設が混雑した際にネットが遅くなり、現場の業務に支障がある』
・ 『災害時に備えたいが、ハードウェア追加はコストが合わない』

Dittoは、インターネットなしでの快適なデータ同期を実現するSDKです。

自動的にメッシュネットワークを構築し、データを中継します。
また分散していてもデータがコンフリクトしない仕組みを持っています。

レストランのような、通信が売上に直結する場所、
飛行機などの、インターネットが不安定な場所での活用が増えてきています。

このセッションでは、Dittoの仕組みと使い方について詳しく紹介します。

想定視聴者

・ 米スタートアップの新しい技術に興味がある
・ Flutterに新しい可能性を感じたい
・ ネットワークで困るケースがある

概要

副業で携わっているアプリで、Supabaseを使って気づいたメリット、デメリット。Firebaseの完全な代わりになるわけではない。

想定視聴者

• Supabaseに興味がある
• Firebaseの代替品としてどこまで使えるのか　

概要

Flutter SDK は、Google の Material Design と Apple の Human Interface Guidelines に準拠したテーマ (Material Theme, Cupertino Theme) と関連 API を提供しており、これにより OS 標準のデザインに沿ったアプリ開発が容易になります。
しかし、独自のデザインシステムを採用したい場合にテーマ管理が複雑化したり、OS 標準のデザインシステムアップデートに伴う破壊的変更により開発コストが増大したりする可能性があります。

本セッションでは、Flutter のテーマと各 Widget のスタイルの関係性を掘り下げ、OS 標準のデザインシステムへの依存を軽減するテーマ管理のアプローチを発表します。
これにより、独自のデザインシステムの実現や、OS 標準のデザインシステムアップデートの影響を最小限に抑えることを目指します。
加えて、Flutter Roadmap でも触れられている blankcanvas の最新動向についても解説します。

想定視聴者

• 独自のデザインシステムを Flutter アプリに適用したいと考えている開発者
• Flutter のテーマ管理をより深く理解し、効率的な開発手法を学びたい開発者

概要

フラッターエンジニアにとって、ターゲットとするプラットフォームについて詳しく知ることは有利です。iOSの場合、様々なアプリextensionを通じて、アプリとシステムとのインタラクションが向上します。一番よく使われているextensionはホーム画面のwidgetでしょう。しかし、僕達が気づかない中で「シェア」や「アクション」など、日常的に様々な他のextensionも広く使われています。ほとんどのextensionはまだUIKitを使用していますが、Flutterバージョン3.16からは、新しい機能のおかげで、extensionのUIもFlutterで作成されます。

想定視聴者

• iOSで使用可能な様々な種類のextensionについて学びたい開発者
• Flutterアプリに様々なextensionを統合する方法を学びたい開発者
• UIKitの代わりにiOSのextension用のカスタムFlutter UIを作りたい開発者
• extensionの制限事項についての理解を深めたい開発者

概要

Flutterエンジニアとして、ネイティブ機能にアクセスすることは難しいかもしれません。FFIGen/JNIGen、Pigeon、通常のMethodChannelなど、さまざまな選択肢がありますが、どの方法が最も有効かは状況によります。AirPodsのセンサー情報を取得するために「Flutter AirPods」というパッケージを開発する際、僕も多くの選択肢の中で迷いました。このトークでは、「Flutter AirPods」を開発する過程で試したさまざまな方法と、それぞれの方法のメリットとデメリットを共有します。

参加していただければ、トークの終わりまでに、自分にとって最適なツールを安全に選べるようになります。

想定視聴者

・パッケージを開発している開発者
・ネイティブ機能へのアクセスが必要な開発者

概要

Dart の新機能であるマクロ（Dart macros）の登場により、Flutter アプリ開発で煩雑だったボイラープレートの問題や build_runner によるコード生成の問題の解決が期待されています。

とはいえマクロはまだまだ試験的に公開されている段階であるために自由に触りづらく、できることを把握してどう活用するかをイメージしづらいのが現状です。サンプルとして話題に上がるマクロも JSON とオブジェクトの変換が簡単になるというもので、Flutter アプリ開発にどれほどのインパクトをもたらす機能なのかをイメージするには力不足です。

このセッションでは、実際に Flutter アプリ開発で活用することを想定したマクロをいくつか紹介し、実際にコーディングして使ってみることで、マクロ導入後の Flutter アプリ開発がどのように変化するのかを体験します。

来るマクロの正式リリースに備え、マクロの活用方法や作り方、そして適切な距離感を今から考えてみませんか？

想定視聴者

• 2025 年以降も Flutter アプリ開発を続ける予定のすべての開発者
• マクロを使う方・作る方どちらの目線もカバーした内容です

概要

Flutterを使用した開発において、地図機能を統合するための選択肢は多岐にわたります。
本セッションでは、mapbox_maps_flutterを使用したMapboxの基本機能からカスタマイズ方法までを解説し、他の地図ライブラリとの比較も行います。スピーカーの実例を交えながら、Mapboxを使った実践的な地図アプリ開発のポイントを紹介します。
Mapboxを活用してFlutterアプリに高度な地図機能を組み込みたい方におすすめのセッションです。

主な内容

• 基本的な地図の表示方法と初期設定
• ユーザーの現在地を表示し、方向を示す方法
• カスタムスタイルの作成と適用方法
• 特定の座標にピンを表示する方法
• データベース連携で動的にピンを表示する方法
• ピンを押した際にその座標に対する情報を表示する方法
• ピンを押すとその位置に地図を移動させる機能
• 個人開発においてMapBoxを選択した理由
• Mapbox Search APIでやらかしてしまった話

想定視聴者

• Flutterエンジニア - Flutterアプリに地図機能を追加したいエンジニア。
• モバイルアプリ開発者 - Mapboxを使ってアプリのユーザー体験を向上させたい開発者。
• GISエンジニア - 地理情報システムを活用したアプリ開発に興味がある方。

Explore the power of Flutter in robotics! In this live coding session, learn how to code robots using Flutter on a Raspberry Pi and create a cross-platform control station for Web, Desktop, and Mobile. Typically, ROVs, UAVs, and drones require two systems: a main board for control and a separate system for commands. With Flutter, you can code both in the same framework, enabling seamless integration across platforms. Join us to see real-world demos and learn how Flutter simplifies robotics development.