トーク

今年5月に開催されたGoogle I/Oにて、Material Designの新たな概念であるMaterial Youが発表されました。Material Youについて、ユーザーが設定した色や形がUIに反映されるらしいということは知っていても、発表からまだ日が浅いこともあり、アプリで何ができるようになるのかよく分かっていない、という方も多いのではないでしょうか。

本セッションではそんな方に向けて、Material Youとは何なのか、Flutterアプリでの対応はどうなるのかを説明します。

• Material Youの概要や思想
• FlutterでのMaterial You対応の状況
• Android MDCライブラリの実装やFlutterの開発状況をふまえての、Material You対応の展望

安定版の内容はもちろんのこと、開発版の状況も可能な限り収録してお届けします。

FlutterにAtomic Designを使った特の責務分担の考え方と役割について説明していきます。

1. Atimic Designとはなにか？
   • Atomic Designの説明
2. なぜFlutterでAtomic Designを利用するほうがいいのか？
   • FlutterでAtomic Designを使用したほうがいい理由
3. Atomic要素とFlutterコンポーネント化の関連
   • Flutterのどの要素をAtomic要素として切り出していくのか？

• ターゲット
  1. Flutterを学び始めたけどファイルの細分化をどの単位でしていけばいいのかがわからない
  2. 同じコードをいろいろな場所で何度も書いてしまっている
  3. webフロントの開発を今までやっていてこれからFlutterを学習しようと思っている

GraphQL は、クライアントアプリケーションが必要なデータを API からフェッチするために設計された言語です。
ApolloなどのGraphQL Clientの機能が豊富なこともあり、近年Web Frontを中心に採用事例が増えてきたように感じます。

しかしながら、Flutterでの採用事例はまだまだ少なく、FlutterでGraphQLを採用された場合は手探りで進められていることが多いのが現状ではないでしょうか。本セッションではFlutterとGraphQLおよびRiverpodを組み合わせたプロジェクト構成をご紹介し、今後FlutterでGraphQLを採用する際の参考となるような情報をご提供することを目指します。

以下の内容をお話しする予定です。
・GraphQL Clientの選定
・graphqlライブラリ
・gql_buildでのコード自動生成
・プロジェクト構成

Flutter は Widget が使えれば UI を構築できるようにデザインされたフレームワークです。
しかし、その Widget を理解して使いこなすためには、 Widget の裏で UI 構築ロジック全体を支えている "Element" の理解が欠かせません。

このトークでは、Flutter フレームワークにおける「Element ツリー」に着目して Element の役割と仕組みを理解することで、「Flutter フレームワークの仕組みを根拠に Widget を使いこなせる」ようになることを目指します。

BuildContext とは何か、.of(context) は何をしているのか、ProviderNotFoundException はなぜ発生するのか、 Flutter アプリを開発する上で頻繁に遭遇する疑問や問題を理屈で理解し、Flutter の学習を一歩先に進めましょう。

モバイルアプリ開発において状態管理方法はアプリエンジニアの頭を悩ませる最も大きなテーマの一つで、試行錯誤をしながら取り組んでいるというチームがほとんどだと考えています。
特にFlutterではProviderやRiverpodなど様々な方法があり、また日進月歩で変化していくことから、モバイル開発の中でも特に正解が見えづらい部分があると思います。
本トークでは私が経験した2つのアプリのリリースとFlutterにおける状態管理の歴史から、
Flutterの状態管理方法にはどんな方法があり、どんな選定をした方が良いのかを試金石となれるようなお話をしたいと思います。

本セッションで話す2つのアプリはiOSDCで紹介したアプリです。
https://fortee.jp/iosdc-japan-2021/proposal/ff5a2426-f1be-4e20-b4a3-ace0d2ad8f05

アプリケーションでは個人情報等のセンシティブな情報を扱うことは少なくないため、開発の中で十分なセキュリティを実装することを求められます。
しかし過剰に固くしても安全性は増さず複雑性だけが増し、不足するとそのアプリの信用は崩壊します。
本トークでは「過不足のないセキュリティ」に焦点を当て、私が実際にFlutterアプリを開発する中で得た知見を元に、
・十分なセキュリティとは何か
・「flutter_secure_storage」や「pointycastle」等のパッケージを使用してFlutterアプリで十分なセキュリティを実装する上で、Android・iOSネイティブの観点から見た注意点
・開発を進める上で、上のものから聞かれるであろう「そのセキュリティで本当に問題ないの？」に対する回答
以上3つの観点について話させていただきます。

Flutterは1つのコードで複数のプラットフォームに対応できます。
しかし1つのリポジトリで全てを管理しなければならない、とまでは規定していないのではないでしょうか？

このトークでは"1つのFlutterのアプリを、複数の内部向けPluginとして分割する"開発手法について紹介します。
主な導入のメリットは、次のようなものです。

・機能ごとのメンテナンスやアップデート
・それぞれのプラットフォーム事情に合わせたリビジョン管理
・コードベースを小さく保つことによる、新規メンバーの負担軽減
・Add to Appによる段階的なFlutter導入における、コードの共通化

Flutterにマイクロサービス的な開発を導入し、圧倒的DXを体験しませんか？

Flutterでは、Android、iOS他ネイティブプラットフォームとの連携を容易にすることが可能です。アプリがフォアグラウンドにいる間はもちろん、バックグラウンド、あるいはアプリタスクがキルされている状態でも、プラットフォーム側の機能（例えばAndroidのForeground Serviceなど）を駆使することで、好きなタイミングでDartコードを実行することが可能となります。
本セッションでは、基本的なFlutterの仕組みを簡易的に説明することから始まり、Dart Isolateの説明、Dartコードとネイティブコードの連携、そしてコード例を示しながらDartコードのバックグラウンド実行について解説します。

FlutterでスクロールするWidgetをカスタマイズしたいときに見かけるSliver Widgetですが、その概念は抽象的で少しとっつきにくいと感じるかもしれません。
サンプルコードが豊富なのでそれをコピペするだけでも十分に使えますが、きちんと理解することでスクロール領域の表現力を格段に広げることができます。
このセッションではSliver Widgetの概念的な説明から入って、Flutterに用意されているSliver Widgetの紹介、実際の開発への応用までを扱います。
皆さんに明日から使えるSliverのノウハウを持って帰ってもらえるように全力のサンプルコードを用意してお待ちしています。

Flutterを用いたアプリ開発においてどのアプリでもヘビーに使用するTextですが、実はiOSとAndroidでは一部挙動が異なってそのままでは両プラットフォームで全く同じ見た目をしてくれません。AndroidのほうがiOSよりもWidgetの高さが多く取られてしまったりなどの違いがあります。iOSとAndroidで同じフォントを使えばプラットフォーム間でTextを配置したときのデザインの差異をなくすことはできますが、ユーザにとって普段目にするOSが選択するシステムフォントと異なるのは優しくありません。本セッションでは、Textの構成要素を紹介し、プラットフォームごとのTextの実行結果が一部異なることをオーディエンスに認知させることと、同じ見た目になるようなTextをiOSとAndroidでつくれるようになることを目的とします。

近年のアプリ開発では、アクセシビリティを向上させて、より多くのユーザーがアクセスできるアプリを開発することが求められています。
Flutterは標準でアクセシビリティをサポートしており、アクセシビリティが高いアプリ開発が可能です。しかし、アクセシビリティやWidgetについての知見がなければ、十分にFlutterの恩恵を受けることができず、アクセシブルなアプリの開発を行うことは困難です。
本トークではFlutterでのアクセシビリティの対応項目に触れ、対応方法について実例を含めて解説します。

【目次】

• a11yについて
• a11yの対応項目
• SemanticsTreeとSemanticsWidget
• デバッグ方法
• a11y対応例
  • SemanticLabelどこに付ける？
  • Loadingのa11y
  • ScaleFactor対応
  • etc

通常、アプリ開発といえば作って終わりではなくサービスを改善するための修正や変更を日々繰り返し行うものです。
プロダクト開発ではコードの信頼性を担保するために多くのテストコードを書くことも少なくありませんが、意図しない見た目（UI）の変更は PR のレビューを行ってもそうかんたんには防ぐことはできません。

web 界隈では VRT を行うことが多いイメージですが、 Flutter を使ったアプリ開発の現場で実際に行った VRT の導入と、その際に作成した UIコンポーネントを一覧するためのカタログアプリや、そのアプリを作成するためのパッケージの話をするつもりです。