トーク

概要

このセッションでは、既存アプリのリプレースから考えさせられた「コード上で抽象モジュール実態を静的特定する実態」について説明します。

説明

Flutterを使った既存 iOS/Android アプリのリプレースは、ブラッシュアップしたシングルコードベースの新規開発です。

これは「何のために何が求められているのか」を洗い出すことのない、安易な「既存アプリの挙動やロジックの踏襲」という開発方針を慎み、
要件の核心を抽象統一化する、iOS/Android UI共通部品と、プラットフォーム依存部が分離された純粋なドメインロジックの開発作業でもあります。

ですが可搬性を保つためプロパティ・フィールドに抽象型を宣言して粗結合にすると、実態が実行時に決定するため、チームメンバーであってもコードを追わないと実態が把握できなくなります。

そこで Flutter や Dart の基本機能や API を使ってコード上で抽象モジュールの実態を静的特定させる実装について、いくつかのパターンを説明します。

想定視聴者

中級開発者
既存アプリの Flutter リプレースを行おうと思っている開発者となるため。

概要

2023年6月、Apple よりApple Vision Pro が発表されました。
現実空間とデジタルのコンテンツをシームレスに複合させる、
空間コンピューティングを可能とする次世代の眼鏡型デバイスです。
2024年初頭の発売が予定されており、開発者向けにSDK等が現在提供されています。

一方Flutterは、空間コンピューティングで使用される3D制作に対し相性が良いとは現状言えません。
では、Flutter エンジニアは Apple Vision Pro の動向を指を加えて見ているしかないのでしょうか？

私はそんなことはないと考えます。
Flutter というフレームワークのある特性は、
空間コンピューティングに対して、またApple Vision Pro のアプリとしてかなりの力を発揮します。

本セッションでは、Apple Vision Pro に対するFlutter アプリの強みを解説します。
また、この強みを活かし、既存のFlutter製 iOS/iPadアプリを
Apple Vision Pro 向けのアプリとして適用させる方法について実践を交え、解説します。

想定視聴者

Apple Vision Pro 向けのアプリを作りたい方
既存のFlutterアプリのApple Vision Proに対応を検討している方
最新技術の動向を知りたい方

2023年7月に、キャリアSNSアプリYOUTRUSTの、投稿画像やプロフィール画像の閲覧機能の改善を行いました。

画像ビューアのライブラリはすでに広く使われているものが多数ありますが、重ねるコンテンツをカスタマイズできる余地を残しつつ、「ピンチ・ダブルタップズーム」「上下にスワイプして閉じる」などの機能を、違和感なく同時に実現するためには、既存のものでは解決できず、標準の機能を組み合わせて実装する必要がありました。

また、画面遷移時や、タップ時やスワイプ時のアニメーションを工夫することにより、既存のものに比べてスムーズで直感的な動きを実現することができました。

このセッションでは、実際の画像閲覧機能の実装と、直感的な動きを実現するためのアニメーションなどについて紹介します。また、関連する以下の要素などについて解説し、理解を深めます。

■ジェスチャー操作に応じた体験を作る要素

・GestureDetector
・Listener
・InteractiveViewer

■アニメーションを実現するための要素

・Animation widgets
・Tween
・Hero / PageRoute

想定視聴者

• Flutterで基本的なアプリを作ったことがある人
• タッチ操作に応じた動作をする機能を開発したい人
• アニメーションやUX改善に興味がある人

概要

昨今のアプリ開発ではメジャーになったスキーマ駆動開発ですが、
このセッションではOpenAPIを使って、高速にバックエンドとの通信部分の開発を行う手法を紹介します。

OpenAPIはオプションが多様でdioのgeneratorやserializationライブラリが選べたりと、自由度が高いが故にハマるポイントを解説します。

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

• スキーマ駆動開発のメリット
• 基本的なOpenAPIの使い方
• Flutterではどう扱うか
  • プロジェクトでの管理方法
  • dart-dio, dartはどちらを選ぶのがいいのか (dart-dio-nextからの変化)
  • built_value, json_serializableはどちらを選ぶのが良いのか
• Flutter(Dart)では扱えない型をどう表現するか
• 同プロジェクト、他のプラットフォーム(WEB, バックエンドなど)との共存方法
• API通信以外の使い道
  • ログ共通基盤管理方法

想定視聴者

• OpenapiをFlutterで使おうと考えている方
• スキーマレス開発が耐えられなくなってきた方

概要

アプリケーションを作る上でライフサイクルの管理は欠かせません。
しかしながらFlutterはEverything is a Widgetになっているため、既存のモバイルアプリのライフサイクルの概念にあてはめるには少し考える必要があります。
また最新のFlutter 3.13.0でライフサイクルの動作がどのように変わったのかを解説します。

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

• ライフサイクルとは
• WidgetsBindingObserver
  • Flutter3.13.0より前のライフサイクル
  • Flutter3.31.0以降のライフサイクル
• NavigatorObserver
  • Navigator Stackの動作説明(各種操作による変化)
• 具体的な実用例
  • どのようにWidgetsBindingObserverとNavigatorObserverを組み合わせるのか
  • 組み合わせることでどういったライフサイクルの管理ができるようになるのか
  • 実際のプロダクトの使用例を紹介

想定視聴者

• Flutterアプリのライフサイクル管理方法で悩んでいる方
• 既存のAndroid, iOSとのライフサイクルの違いで困っている方

概要

Flutterは慣れるととても直感的にレイアウトを組んでいくことができる優秀なフレームワークです。
簡単なものであればただwidthやheightを指定してあげるだけでうまくいくかもしれません。
しかし、赤色の背景に黄色字の画面が突如出現し、サイズ関連のエラーで怒られ、またかとうんざりすることはありませんか？
前もってエラーを予想していればダメージは少ないですが、唐突に現れると、widgetツリーのどこがダメなのか探すこととなり、勘所を掴んでいないとエラー解決に予想以上に時間がかかるかもしれません。

また、Intrinsic系のwidgetでとりあえず解決することはないですか？
ドキュメントにある通りこれは描画にexpensiveなwidgetで、できれば利用したくないwidgetです。
もしかすると、今直面している問題は上のwidgetを使わずとも解決できるかもしれません。

さらに、sliver系のwidgetを使ったときに出るエラーもこのレイアウト周りが関係していることがあります。

今回のセッションではそんな超重要なレイアウトをドキュメントやソースコード、具体例を通しながら改めて一緒に理解していきます！

想定視聴者

レイアウト関連のエラーによく遭遇する方
そのエラー解決に時間がかかってしまう方
Flutterのレイアウトを再入門しておきたい方

概要

背景

• REST APIをバックエンドにもつアプリケーションを開発する際、「バックエンド開発にフロントエンド開発が律速されている」「APIの変更にAPIクライアントが追従できていない」といった課題がよく起こります。
• Open API Specificationで記述したスキーマをSingle Source of Truthとして、バックエンド・フロントエンドが独立して開発をする手法(スキーマ駆動開発)を用いることで上記の課題に対応することができます。
• 本セッションでは、Flutterでスキーマ駆動開発をする際に、運用を楽にするTipsについて紹介します。

  発表予定の内容

  • openapi-generatorでAPIクライアントを生成する
  • Github Actionsを用いて、OASの変更検知からのDartクライアント生成を自動化する
  • prismを用いて、OASを元に開発用のモックサーバーを立てる
  • 使いやすいクライアントを生成するためのOASの書き方のコツ
  • (バックエンドにFastAPIを採用するとさらに楽になるかもという話)

想定視聴者

• REST APIと疎通するアプリケーションを開発している方
• OASを用いたスキーマ駆動開発を始めようとしている方

概要

Flutterは、1つのコードでモバイル、デスクトップ、ウェブといった複数のプラットフォームで動作するという圧倒的なメリットがあります。しかし、プラットフォームにはそれぞれ画面の大きさ、OSの標準的な動作やデザインといった違いがあります。

これらの違いを考えないまま、1つのコードで開発しても、特定のプラットフォームではユーザーにとっては使いにくいアプリになってしまうこともあると思います。それらをなるべく減らすために、アプリをプラットフォームへ適応させていくことが重要だと考えています。

そもそもプラットフォームに適応するとはなにか？から始まり、Flutterでプラットフォームに適応したアプリを作るにはどうすればいいか、筆者が所属する10Xで複数プラットフォーム(モバイル/Web)へのリリースした経験から実際に行ったことや反省、今後やっていきたいことなどを話していきたいと考えています。

想定視聴者

• Flutterで開発してみたいが、Flutterってマテリアルデザインでしょ？と思っている人
• Flutterで開発しているiOSアプリでマテリアルデザインをそのまま使っている人
• モバイルアプリを前提に作っていたプロダクトにWebを追加したい人

概要

Dart言語はFlutterとともにアプリフロントエンドの領域で広く認知されてきました。しかし、バックエンドにおける実践的な活用例はまだまだ少ないのが現状です。
とはいえ、Flutterアプリ向けのBFF(Backend For Frontend)をDartで実装することは、型宣言を共通化することができ、生産性を飛躍的に向上させるアプローチとなり得ます。
本セッションでは、Dartをバックエンド・BFFに採用する背景から、dart_frogというパッケージの特徴と、マルチパッケージ管理ツールであるmelos を利用して、Flutterでのアプリ構築を加速させる過程について深掘りします。更に、実際の案件でdart_frogとmelosを導入していく過程、そしてそれをどのようなプロジェクトに組み込んだのかの経験談を交えながら、Dartバックエンド・BFFとしての魅力と、それを実現する具体的な手法をお伝えます。

想定視聴者

• バックエンド・BFFにDartを採用することを検討している開発者
• BFFの設計や実装に興味がある方
• dart_frog 等のDartのバックエンド関連の技術に興味を持つエンジニア
• melos を用いてマルチパッケージ管理を楽にしたいエンジニア
• 実際のプロジェクトでの技術導入の経験談やノウハウを知りたい方

概要

私は、2022年3月より 約1年半ほど 緊急地震速報等の地震情報を「より早く・より正しく・よりわかりやすく」入手することを目標にしたアプリケーション「EQMonitor」を製作しています。このアプリにより、地震情報をインターネット経由で素早く入手できるようになりました。しかし、これでは十分ではないと考えます。
例えば、山間部 あるいは災害で地上通信インフラが使用できなくなったような場合でも、我々は重要な情報を素早く得る必要があります。そのために、準天頂衛星システム「みちびき」の災害・危機管理通報サービス「災危通報」を使用し、スマートフォンからその情報をチェックできるシステムを作り上げます。
PRIORIS社のGNSS受信機とのUSBシリアルコンソール接続を通じて、情報を解析していく手法についてお話していきます。

トピック

• 地震速報アプリケーション「EQMonitor」
  • Flutterでの地図描画システムについて
• みちびきの災危通報システム
  • Flutterでのシリアルコンソール通信
  • 解析・可視化

想定視聴者

• 空から降ってくる災危情報バイナリデータをFlutterで解析する方法に興味のある方
• Flutterでのシリアルコンソール通信に興味がある方
• Flutterでの地図描画のパフォーマンス改善に興味がある方

概要

私たちのチームでは品質保証向上のために、ユニットテストにおけるに工夫を数多く行ってきました。
Flutterでアプリを運用するにあたり、どのようにユニットテストを通して、品質保証を担保できるかを共有します。

例
アプリ内のユニットテストカバレッジ
モックの生成と活用方法
テーブルドリブンテストの導入と活用方法
Custom Hooksをどのようにテストするのか
UIなどのテストを書きづらいロジックのテスト方法

想定視聴者

Flutter開発で品質保証の向上に興味がある方

概要

私たちのチームでは開発生産性向上のためにトランクベース開発を採用しております。
運用の過程で様々な課題と対面し、都度チーム内で熱い議論を行ってきました。
そこで生まれたTipsをご紹介します。

例
Firebase RemoteConfigを用いたFeatureFlag運用
実装を行う上で、FeatureFlagをどこでみるのか
PRの回転率向上につながっているのかどうか
どのようなフロー・タイミングで自動テストを実行するのか
Conflictを起こしづらい実装方法
上記で挙げた課題に対して行ったことの紹介はもちろん、以下のことについても話します。

トランクベース開発を検討した背景
トランクベース開発によるメリット、デメリット

想定視聴者

Flutter開発で開発生産性向上に興味がある方
Flutter開発での運用方法を考えている方

概要

セッションの概要を記載してください。
分散型SNSのプロトコルであるNostrをFlutterで実装し、投稿、閲覧だけでなく、TODO機能と組み合わせてTODO×SNSとしてハッカソンに出場した話です。

想定視聴者

誰に向けたセッションなのかを記載してください。
分散型SNSに興味がある人、Nostrの概要について知りたい人、SNSとTODO機能の組み合わせについて知りたい人

概要

Dart 3.0 で Records や Patterns などの強力な言語機能が追加され、Dart はますます魅力的な言語になってきました。
そういったこともあり、個人的に Dart で CLI ツールを開発する機会が増えてきました。

いくつもの Dart プロジェクトを並行して開発していると、スムーズかつ安全に開発を進めるために、それぞれのプロジェクトで Dart のバージョンを切り替える必要が出てきました。
そこで、Flutter のバージョン管理ツールで人気のある FVM のようなものがあれば便利だと思い、FVM を参考に Dart Version Manager (DVM) を開発しました。

本セッションでは、DVM を開発するにあたって苦労した点・工夫した点についてお話しします。

トピック

• Dart で CLI ツールを開発する方法
• DVM の開発にあたって苦労した点・工夫した点

想定視聴者

• Dart で CLI ツールを開発したい方
• DVM の開発にあたって苦労した点・工夫した点に興味のある方

概要

堅牢で品質の高いアプリーケーション開発を行うためには適切なアーキテクチャを選択することが重要です。

Flutterにおいては主要な状態管理のパッケージの移り変わりが激しかったり、その登場から日が浅かったりとアーキテクチャのデファクトスタンダートがなく幅広い選択肢があるように思われます。

そこで本セッションではFlutterと同じく宣言的UIフレームワークであり、歴史も長いAndroidを参考にしたLayer-firstなFlutterのアーキテクチャについて紹介します。

アジェンダとしては前半に、

• プロダクト開発におけるアーキテクチャの重要性
• 公式のドキュメントやOOSで開発されている大規模なアプリのAndroidのアーキテクチャ・ディレクトリ構成

後半に、

• Androidを参考にしたFlutterらしいアーキテクチャ・ディレクトリ構成
  • ディレクトリの役割と責務
  • riverpodを用いた状態管理
  • featureを意識した画面遷移の方針
  • UIのコンポーネントの分け方
• Flutterにおけるmulti packageの実現

を予定しています。

想定視聴者

• Flutterのアプリ開発に興味がある人
• Flutterのアーキテクチャ・レイヤー構成に興味がある人

概要

このセッションでは、宣言的UIの経験がなかったAndroidアプリ開発者がFlutterを使って業務プロジェクトに取り組んだ2年間の経験を紹介します。
アプリの開発と保守を通じて得た実践的な知識を皆さんに共有できればと思います。

内容

• Dartや宣言的UIを何も知らない状態でFlutterを使ったアプリ開発を行った方法について
• Flutterでアプリ開発したことによる思わぬ利点
• 開発後のリファクタリングについて
• テストコードの作成について
• Flutterやライブラリのバージョンアップについて

想定視聴者

• これから業務でFlutterを用いた開発を行う人
• Flutterで開発したアプリを保守していく人

概要

Flutter で高度なグラフィックスを実現するために、これまでは RenderObject や CustomPainter を利用していました。
しかし、これらは CPU 上で多くの処理を実行することになってしまうため、柔軟性や表現力にどうしても限界がありました。

Flutter 2.8 で Fragment Shader を利用可能になり、GPU 上で処理を実行できるようになったため、より柔軟で高度なグラフィックスを実現できるようになりました。

本セッションでは Fragment Shader の基礎から Flutter での具体的な実装例についてお話しします。

トピック

• Fragment Shader とは
• Flutter で Fragment Shader が実行されるまでの仕組み
• Flutter における Fragment Shader の実装方法
• Fragment Shader の実装例と解説
  • Pixelate
  • Ink Sparkle
  • Hologram Effect
  • Transition Animation

想定視聴者

• Flutter で Fragment Shader を取り扱う方法や具体的な実装例に興味のある方
• Flutter でより柔軟で高度なグラフィックスを実現したい方

概要

複数のユーザータイプと多数の画面を持つアプリにおける画面遷移の管理は、一筋縄ではいきません。
弊社のアプリでは、この問題に対処するためにauto_routerライブラリのAutoRouteGuardを活用して、画面をハンドリングしています。
本セッションでは、AutoRouteGuardを用いた画面遷移の最適化手法を紹介します。

内容

1. AutoRouteとAutoRouteGuardの関係性
   b. AutoRouteをラップしたCustomRouteの導入
2. RouteGuardの活用例
   a. 保護されたページへの不正アクセス対策
   b. DeepLinkによる画面突破の対策
   d. ログイン処理とルーティング保持の連携
   e. etc..
3. AutoRouteGuardにおける処理責務の再考
   a. ユーザータイプに依存しない設計の重要性
   c. 画面遷移時のユーザー体験を損ねないための工夫

本セッションは、auto_routerライブラリのAutoRouteGuardを中心に解説しますが、
go_routerのredirectにも適用可能な内容となっています。

想定視聴者

• auto_routerやgo_routerのライブラリを導入している開発者
• 画面遷移の運用手法を検討中の開発者

概要

高品質なプロダクト開発には、モニタリング体制の構築とそれに伴う検知から修正までのフロー作りが欠かせません。しかし、これらは一見すると難易度が高く感じるかもしれません。
そこで、私たちのチームはエラーの可視化とモニタリングのためのツール、Sentryを活用しています。
私のチームではSentryを2年以上利用してきました。またエラーモニタリングツールとしてだけではなく、多角的なモニタリング体制を構築するために利用してきました。

このセッションでは、Sentryを用いた多様なモニタリングの手法とその運用経験から得られた知見、そして具体的なTipsを紹介します。具体的には以下の内容を予定しています。

• 不具合の検知から解消までのフロー作りとその体制構築
• エラー解消へのモチベーション維持のための工夫
• 画面遷移やアプリ起動時間などのパフォーマンス計測方法
• アプリの可用性向上を目指したSLI/SLOの計測手法

想定視聴者

• エラーモニタリングを強化し、Flutter開発の品質を上げたい方
• アプリのパフォーマンスモニタリングを通じて、ユーザー体験を向上させたいFlutter開発者の方
• アプリのSLI/SLOの計測を通じて、サービスの信頼性を確保したいFlutter開発者の方

概要

品質保証は、私たちのチームにとって重要な課題であり、そのためにintegration_testを用いた自動テストを導入し、一年間で40以上のテストシナリオを作成しました。しかし、integration_testを効果的に利用するためには、多くの課題を解決する必要がありました。WebViewの実行、OS機能のテスト、コーディングコストなど、これらの課題に対し、私たちは以下のキーワードを元に解決策を見つけてきました。

• robot patternを採用した自動テストのコード設計
• シナリオ作成のコストを最小限に抑えるためのコーディングルールや工夫
• より安定したシナリオ実行を可能にするTips
• AutifyやMaestroなどの競合ツールとの比較
• 継続的な運用を可能にするための体制作りと、その上でのintegration_testの評価

現在、integration_testは私たちのチームが品質保証を達成するための強力なツールとなっています。
このセッションでは、私たちのチームが培ってきたintegration_testのノウハウを惜しみなく公開します。

想定視聴者

• Flutter開発においてintegration_testに興味がある方
• Flutter開発において、プロダクトでのintegration_testの運用を検討している方