トーク

概要

In the AI ​​generation, we are living in now. How can we use it well to develop and implement better products? In this session, I will share with you how to complete an AI application through Flutter Full Stack, combining multi-connection interaction and fun. I will explain the full-end features, functional codes, and benefits it can bring to us so that everyone can experience more possibilities of Flutter!

想定視聴者

1. All levels of developer
2. Interested in Flutter Full Stack

概要

私たちのチームでは、リリース中となる動画視聴アプリのFlutterでのフルリニューアルの鋭意対応中です。Flutterは、標準のwidgetが豊富に揃えられているのが魅力の一つとなるF/Wですが、それそのままでは複雑な機能要件を全て満足することができないケースがしばしば発生します。
リニューアル対象のアプリでは、動画コンテンツの商品パッケージやシーンのサムネイルといった画像のプレビュー機能があるのですが、それがまさにそうでした。
InteractiveViewerが近しいwidgetになりますが、ピンチ操作による拡大・縮小といった一般的な画像ビューワの操作性はもちろんですが、タップ操作でのオートスケール、フリック操作で画面を閉じる等、特徴的なジェスチャ操作と共存させる上で難しい課題があり、結論としてゼロから実装することになりまして、どうせならpackageとして公開しちゃおうよー
、といった感じで今に至ります。

作業過程でぶつかった課題や、画像ビューワを実装する上での勘所等をお話し、同じような壁にぶつかり、乗り越えようとしてきている皆さんへ共有させていただき、少しでも助力にしていただけたらと思います。

想定視聴者

• Flutter、InteractiveViewerが好きな方
• 画像ビューワが好きな方
• package公開に興味がある方

概要

モバイルアプリを長期的に運用・メンテナンスするうえで、機能や複雑化したシステムを削減し、効率的な運用を実現するための「スリム化」が重要なテーマとなっています。
本セッションでは、FacebookとX（旧Twitter）ログインの削除を例に、サービスのスリム化をどのように実行するかについて考察します。

スリム化を進める上での具体的なステップとして、ユーザーへの通知方法、新規登録・ログイン導線の変更、既存ユーザーの対応策などを取り上げ、サービスのスリム化によって得られる利点と潜在的な課題について議論します。
また、削除までの意思決定を行うためにどのようなことを行い、機能のスリム化の意思決定をしたかの流れをお話し、サービス運用に携わるさまざまな役割の方々が直面する課題に焦点を当て、スリム化による具体的な利点と実施方法をお伝えします。

想定視聴者

• 実際に機能の実装や保守を担当するエンジニア。複雑な機能のメンテナンスや障害対応に課題を感じている方
• ユーザー体験を向上させるためのスリム化戦略を検討している方
• ユーザー体験をシンプルで直感的なものにしたい方

概要

Dart3で以下を実行するとどうなるでしょうか？

void main() {
  final l = <String>['あいざわ', 'アイザワ', '相澤', 'いとう', 'イトウ', '伊藤'];
  l.sort();
  print(l);
}

出力結果は以下です。
[あいざわ, いとう, アイザワ, イトウ, 伊藤, 相澤]

当然空気を読んでくれるはずもなく、無情な結果が出力されました。
ひらがな→カタカナ→漢字どころか、伊藤が相澤より前になりました。
万年出席番号1番だった相澤さんもこれにはびっくりです。

現在観測できる限りでは、Dartでは現状これを直接解決するパッケージが存在しません。
本セッションではこの単純だが厄介な問題に対して、複数の観点から向き合っていきます。

想定視聴者

• 日本語の文字列リストをそのままsort()してギョッとしたことがある方

概要

ChatGPTのような生成AIの登場によって、プログラミングの在り方は大きく変わろうとしています。さらに、GitHub Copilot や Cursor などの開発ツールに登場によって、さらに素早く生成AIの機能を使えるようになってきています。

本セッションでは、日常から生成AIをFlutterアプリ開発などのプログラミング作業でフル活用している筆者が、生成AIを使い、より効率的に検索、コード生成、問題解決する方法を探ります。そのためのルールの書き方や、関連ツールについても紹介します。

想定視聴者

生成AIの活用方法が気になるFlutterアプリ開発者

概要

トランジションとは、アプリの個々の要素を繋ぐ短いアニメーションのことです。トランジションは、変化した意味を説明したり、UI要素の階層を明確化したり、ユーザーがアプリの動作を直感的に理解するのに役立つため、うまく使うことで、優れたUXを提供します。

本セクションでは、Material Designで紹介されている以下のような代表的なトランジションパターンと、それらの使い道や、実際にFlutterで実現する方法などについて紹介します。また、実際に業務で導入しようとしたときの体験談や反省点などについてもお話します。

• Container transform
• Forward and backward
• Lateral
• Top level
• Enter and exit
• Skeleton loaders

トランジションパターンについて正確に理解することによって、UIアニメーションの利点を、ただ単にカッコいいからといった感覚的な理由からではなく、理屈で説明できるようになると思います。

想定対象者

・アニメーションを使ったUX改善に興味がある人

概要

未踏アドバンスト事業 2023 に採択された私は flutter_unity_widget を利用した Flutter × Unity による AR アプリの開発に挑戦し、リリースしたアプリの運用を半年間経験しました。
参考リンク：https://www.cyberagent.co.jp/way/list/detail/id=29535

本トークでは、その際に得た flutter_unity_widget を利用した iOS / Android アプリを運用する上での知見について詳しくお話しできればと思います。

想定視聴者

・flutter_unity_widget を利用したアプリをリリースしてみたい人
・flutter_unity_widget を利用したアプリで気をつけるポイントを知りたい人
・Flutter と Unity を掛け合わしたアプリを作ってみたい人

今後Flutterが大きく変わる転換点としてMacrosがあります。
私の所属するチームでは、freezedなどのモデル生成からflutter_genでのアセット管理、独自で運用しているmock用クラスを生成するfake_genなどがあります。それらの生成ファイルが既に1000件を超えており、開発環境及びCI環境で無視できない時間がかかっていました。
今後Macros導入によってそれらが何が変わり、何が必要なくなるのかをお話しします。

1. Macrosの現状と未来
2. 現状でのbuild_runnerの最適化の限界
3. Macrosで起こる変化
4. Macros試しに入れてみた

本セッションでは、Flutterを用いたマルチプラットフォーム災害危機情報可視化システムの開発について詳しく解説します。
みちびき(準天頂衛星システム)の災害・危機管理通報情報を専用の受信機を通じ、マルチプラットフォームデバイス(Android, Web, macOS)で受け取り、インターネット接続環境の有無に問わない状況下での災害危機情報の提供を実現します。

セッション内容

• みちびきの災危通報サービスの概要
• 衛星から情報を受信する手法
  • PRIORIS社のUSB-C接続GNSS受信機 GR-M10-C/Sを利用
  • https://prioris.jp/gnss/lineup#gr-m10-cs
• 受信機からの情報をFlutter側で受け取る手法
• 受信データの解析および可視化

目的

• 衛星から災害・危機管理情報を受信することで、通信インフラが壊滅的な被害を受けた場合でも情報を受信可能にする。
• Flutterを用いることで、マルチプラットフォームでの災害危機情報の可視化を実現する。

対象者

• 災害危機情報に興味がある方
• Flutterを用いたマルチプラットフォームアプリケーション開発に興味がある方
• シリアルコンソール通信に興味のある方

（本プロジェクトは進行中のため、内容は変更される可能性があります)

概要

ローカルDBは手軽にアプリのデータを永続化することができるものの、アプリのリリース後、手元を離れ、長期にわたって変更が加えられるその実体を正確に把握し続けることは困難です。
また、アプリの成長や新しいローカルDBパッケージの登場に伴い、使用パッケージを変更したくなることもあるかもしれません。

私は個人で開発しているFlutterアプリケーションをおよそ4年半もの間運用しており、その間にパッケージ変更を伴う2度の大規模マイグレーションを経験しました。
さらに、パッケージ変更を伴わない中規模のマイグレーションも1度経験しており、現在は2度目の中規模マイグレーションに直面しています。

ユーザーの持つデータ実体を正確に把握できていない状態でのマイグレーションがどれほど恐ろしいか、ご想像に難くないかと思われます。
しかし、そのような困難を乗り越える中で、私が得た知見は決してゼロではありません。
本LTでは、3度のマイグレーションを終え4度目に取り組む今、私が考えるFlutterにおけるローカルDBの

• マイグレーションを軽くする工夫
• マイグレーションを乗り越える工夫

についてお話しします。

想定視聴者

• ローカルDBをメインDBとして使用している、または使用を検討している方
• 勇気をもらいたい個人開発者

私の所属するチームでは、事業のスケールと共にアプリチームのメンバーも増え、現在10人のメンバーがいます。
そのスケールの中で開発生産性を落とさず、さらに増加させていく取り組みとしてコードレビューを促進する取り組みを行っています。

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

1. 現在運用されているコードレビュー促進の仕組み
2. Flutter on the WebでGithub APIと連携したPRメトリクスを可視化したダッシュボードの作成
3. 社内ダッシュボードを形骸化させないための工夫
4. モチベーションを上げるための工夫

想定視聴者

• コードレビューを促進する必要のあるアプリチームに居る方

Flutterは標準でスクリーンリーダーに対応しており、簡単に文字を読み上げることができます。
しかし、Semanticsウィジェットを正しく使わないと、スクリーンリーダーを使用する人にとって使いにくいアプリになってしまうことがあります。

スクリーンリーダーに対応するために重要なSemanticsの要素として下記があります。

• SemanticsLabel
• SemanticsSortKey
• SemanticBoundary
• MergeSemantics
• ExcludeSemantics

上記の内容を踏まえ、本セッションでは、Semanticsの使い分けによるスクリーンリーダー対応の最適化の手法についてお話しします。

具合的には、以下の内容についてお話しします。

• Semanticsの仕組み
• スクリーンリーダーに対応するための実践的なSemanticsの使い方
• showSemanticsDebuggerを使い、SemanticsTreeの可視化し、開発を効率的に進める手法

想定視聴者

• アクセシビリティに関心がある方

Flutter on the WebがStableになってから３年経ち、さまざまな変化が加えられてきました。
今年はHTML renderer廃止に関するドキュメントが公開され、今後CanvasとWasmのrendererが主力になっていきます
Wasmサポートによって良くなること、できなくなることをHTML,Canvas rendererと実際に動作を比較していきます。

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

1. Wasmとは一体何なのか
2. Flutter on the WebのWasmサポートで何が変わったのか
3. Wasmサポートで、できるようになること、できなくなることをHTML,Canvasとの比較
4. Flutter on the Webの今後

想定視聴者
Flutter on the WebのWasmサポートで何が変わるか興味がある方

概要

Flutterアプリ開発において「Widget」は欠かすことのできない重要な概念です。

Flutterのアップデートともに多彩な進化を遂げているWidgetを、私たちはどれくらい知り、どれくらい正しく使えているでしょうか？
例えば、DialogにはAlertDialog・SimpleDialog・Dialogが存在しますが目的や使い方は異なります。

本セッションでは普段のアプリ開発でよく使うWidgetから最近登場したWidgetまで、その機能と適切な使い所と実装について有名なパッケージなどを例に挙げながらサンプルコードと共に詳解します。

想定視聴者

・ 新しいウィジェットや、あまり知られていないウィジェットの使い方を学びたい方
・ ウィジェットの選択や使い分けに関する知識を深めたい方

概要

このセッションでは、Flutter開発における最新のCodePush技術を活用し、コンテンツの動的更新の実現方法を紹介します。CodePushを利用することで、アプリの審査を通さずに迅速な更新が可能となり、開発プロセスが効率化されます。具体的には、CodePushを実現する代表的なパッケージであるShorebirdの内部構造について説明します。また、先駆けとなったReact Native CodePushとの比較を通じて、Flutterの技術的な優位性や制約についても詳しく解説します。

このセッションで得られること

• CodePushの可能性を探る: 動的なUI更新やアプリロジックの変更がどのように実現されるか、その技術的な将来性を学びます。
• CodePushの実用シナリオを理解する: 緊急修正や継続的なデプロイ、FeatureFlagの上位互換としてのCodePushの活用法を具体例から学び、効率的な運用方法の知識を得ます。

想定視聴者

• CodePush技術に興味がある方

概要

Flutterの新しいレンダリングエンジン「Impeller」は、従来のSkiaと比べて多くの進化を遂げていますが、その具体的な技術的な違いや利点についてはまだ広く理解されていません。
このトークでは、「Impellerを知ろう」というテーマのもと、Impellerの基本的な動作原理やパフォーマンス向上の理由を解説します。
また、メリット・デメリットについても紹介し、実際に運用しているアプリのImpeller有効化の可能性を探っていきます。このセッションを通じて、Impellerの基本をしっかりと押さえ、Flutter開発における新たな可能性を探りましょう。

想定視聴者

• Flutterの内部構造に興味を持つエンジニア
• Flutterアプリケーションのパフォーマンスを改善したい開発者

概要

FlutterのScrolling Widgetsには様々な選択肢があり、それぞれに適用シーンや特長がありますが、最適な選択をするためには各ウィジェットの利点と用途を理解することが必要です。
このトークでは、Scrolling Widgetsの代表例であるSliverをはじめ、ListView、SingleChildScrollView、CustomScrollViewなどを徹底比較し、それぞれの利点と適用シーンを明確にします。
また、なぜ特定のWidgetがパフォーマンスに優れているのか、その背後にある技術的理由を解説します。また、実際に運用されているアプリでの実例などを踏まえつつ、より効率的でパフォーマンスの高いアプリを開発するための知識と技術を身に付けましょう。

想定視聴者

• Flutterで効率的かつパフォーマンスの高いスクロール機能を実装したい開発者
• Scrolling Widgetsの選び方や使い分けに悩んでいる人
• Flutterのパフォーマンス最適化に興味があるエンジニア

概要

弊社ではモバイルアプリのデリバリー効率最大化のために、ネイティブアプリをFlutterにフルリプレイスしました。
そのプロジェクト内では技術的な変更だけでなく、将来的にWebエンジニアがモバイル開発の一部を担えるかどうかの検証も合わせて実施しました。
結果としては個人的、事業的の両面で非常に価値のある取り組みとなりました。

こちらの発表ではまさに実験台となった私の経験を元に

• WebエンジニアをFlutterエンジニアにコンバートした際の価値
• 実現させるための効率的なFlutterオンボーディング、学習体制と直面した落とし穴
• リプレイスプロジェクトにおける課題、実際の立ち回り

という話を具体的にさせていただきます。

Webエンジニアの方々の「Flutter開発楽しそう」「ここが落とし穴か・・・」という部分を理解する助けや
Flutterエンジニアの方々の「チーム拡大のための1アイデア」「初学者オンボーディングの工夫ポイント」などのつかみになれば幸いです。

想定視聴者

• Flutter開発をしてみたいWebエンジニア
• Flutter開発組織の拡大を目指すリーダー/マネージャー
• リプレイスプロジェクトにおける課題や解決策を知りたい方

概要

Webアプリケーションでお馴染みのhookという概念があります。
これを使うと状態管理や副作用を隠蔽した状態で、とても宣言的にUIを書き上げることができます。

Flutterにおいてもflutter_hooksを使用することで同等の機能を実現でき、StatefulWidgetを全く書く必要がなくなります。
例えばTextEditingControllerなどの各種Controller系コンポーネントの初期化や破棄の処理をいちいち手書きする必要がなくなるのです。

私は業務でflutter_hooksを活用することで、非常に快適に状態管理を行えています。
本セッションでは以下のお話をします。

• flutter_hooksとは
• 便利なhook関数詰め合わせのflutter_use
• 使うと世界がどう変わるのか？
• APIコールも意識せずに宣言的に！
  • graphql_flutterの事例
  • 普通のHttpClientを使った通信を宣言的にする
• riverpod / providerとの棲み分けは？

想定視聴者

• 徹底的に宣言的UIでアプリケーションを作りたい人
• flutter_hooksを活用したい人、使ってみるか迷っている人
• もっと理解しやすく書きやすいコードにしたいと思っている人

概要

リリースしたアプリのクラッシュ事例を追うべく、Crashlyticsなどのサービスを眺めていると、身に覚えのないスタックトレースを見た経験はありませんか？ Flutter では release buildの場合には、コードが難読化されバイナリに含まれます。
FlutterはAndroid・iOSをはじめとして多くのプラットフォームで動作させる事ができるフレームワークです。Flutterはどのようにして、多くのプラットフォームをサポートする難読化を実現しているのでしょうか？

このセッションは、大きく2つの要素から構成されます。
1つ目は、難読化されたコードに直面したときのトラブルシューティングに焦点を当てたものです。例えば、難読化されたスタックトレースを読む方法や、flutter symbolize の仕組みやオプションについて紹介します。
2つ目は、Flutter の難読化そのものがどのようにして行われるかについて焦点を当てます。Flutterが難読化を行うステップと各プラットフォームでの実例を紹介しつつどのような難読化が行われるかについて紹介します。

想定視聴者

• 難読化に関連したトラブルシューティングについて知りたい人
• 難読化そのものについて理解を深めたい人
• Flutter 特有のマルチプラットフォームでの難読化について知りたい人