トーク

概要

複数のユーザータイプと多数の画面を持つアプリにおける画面遷移の管理は、一筋縄ではいきません。
弊社のアプリでは、この問題に対処するために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の運用を検討している方

概要

Flutter 2.10でuseMaterial3プロパティが登場して以降、Flutter 3.0でさらに対応が進み、最近ではMaterial 3のアプリもよく見かけるようになりました。当時はコンポネントも未対応なものがありましたが、現在ではほぼ全ての対応が完了し2023年の4QにはMaterial 3がデフォルトとなる予定です。

本セッションでは現場での商用サービス経験を元に、Material 3の背景からTheme APIの活用事例、ダークテーマやDynamic Color対応によるパーソナライズ化の考え方など、包括的なThemeの活用についてお話します。

トピック

• Theme APIの実践
• ダークテーマ対応時に考えること
• Material 3とHarmonization
• Dynamic ColorとThemed App Icon
• 独自ColorSchemeの作成手順
• ThemeExtensionの活用方法

想定視聴者

• Theme APIやMaterial 3を正しく現場で利用したい方
• 効率的にダークテーマ対応をしたい方
• まだMaterial 3を利用したことがない方

概要

AIアプリの開発に興味がある方や作ってみたい方は注目
このセッションでは、FlutterフレームワークとTensorFlow Liteを使用してモバイル環境で機械学習アプリケーションを開発する方法と
MNIST（Mixed National Institute of Standards and Technology）を活用して、手書きの数字を分類するアプリを作成する方法を紹介します。

1.はじめに

• FlutterとTensorFlow Liteの簡単な紹介
  2. TensorFlow Liteとは？
• TensorFlow Liteの概要と特徴
  3. TensorFlow LiteとFlutterの統合方法
• TensorFlow Liteモデルの統合方法の紹介
  4. FlutterアプリケーションでTensorFlow Liteモデルを実行する
• FlutterでTensorFlow Liteモデルをロードして実行する方法。 推論結果を活用してUIに表示する方法。
  5. TensorFlow LiteとFlutterを活用した実戦例
• MNISTや画像分類やオブジェクト検出などの実践例の紹介

想定視聴者

1. AI Modelを使ってアプリを作りたい方。
2. TensorFlow やTensorFlow Lite に興味ある方。

概要

Flutter開発でDependency Injection(DI)に興味がある方は注目
Dependency Injectionはソフトウェアデザインのパターンの一つで、
オブジェクト間の依存関係を緩やかにし、柔軟性を高めるための技術です。
このパターンは、オブジェクト間の結合度を低くし、再利用性と保守性を向上させるのに役立ちます。

セッションはDependency Injection が難しい方のための内容を含めています。
基本から、FlutterでDependency Injectionを使用する方法について詳しく説明します。

1. DIについて
2. Flutter DI 基本
3. DI with get_it

想定視聴者

1. Flutter アーキテクチャに興味がある方
2. Dependency Injectionに興味がある方
3. Dependency Injectionを学びたい方

概要

Flutterでの開発では、テスト導入、アクセシビリティ対応が必要なプロジェクトも多いです。
しかしプロダクトの開発フェーズによって、必要がないプロダクトも少なからずあります。
今回の発表では、開発フェーズを軸に、テスト戦略、アクセシビリティ対応について話します。

内容

• 何をやるか!? 〜 Flutterアプリでのアクセシビリティ対応 〜
• どこまでやるのか!? 〜 E2Eテスト(自動テスト)の導入と運用戦略 〜
• どうやって使うのか!? 〜 VRT(visual regression testing)導入と運用戦略 〜

これらの3テーマを開発フェーズを軸にメリット、デメリットを踏まえて話します。
また「導入方法」や「テスト戦略」、「技術選定」、「実際に導入した結果」についてもお話しさせていただきます。
※実際の開発における経験に基づいてお話しさせていただきます

本稿では、開発の生産性向上やプロダクトの品質向上を目的としたテーマです。

想定視聴者

• FlutterにおけるE2Eテストに興味がある方
• Flutterにおけるアクセシビリティに興味がある方
• FlutterにおけるVRTに興味がある方
• テスト導入やアクセシビリティ対応を検討中の方

概要

AWS Amplify ではモバイルアプリ開発者からバックエンド開発者、 そしてスタートアップからエンタープライズまでビジネスの規模や開発者のロールに依存せず、 アプリケーションの開発を加速するためのサービスです。
このセッションでは、AWS Amplify と Flutter を使用したモバイルアプリ開発や、認証と認可、他の AWS サービスとの簡単な統合、スケーラブルなバックエンド リソースを迅速に作成できる機能など、AWS Amplify を Flutter と組み合わせて使用​​する利点について説明します。
また、GraphQL API、リアルタイムのデータ同期、プッシュ通知など、Flutter で使用できる AWS Amplify の主要な機能についても説明します。さらに、実際の例を使用して AWS Amplify と Flutter を統合する方法を示します。
講演の最後には、参加者は AWS Amplify を活用して、Flutter を使用して機能豊富でスケーラブルで安全なモバイル アプリケーションを構築する方法を明確に理解できるようになります。

想定視聴者

• AWSを使ってFlutterアプリケーションを構築したことがないエンジニア
• Flutter アプリケーションを素早く構築することに興味あるエンジニア

概要

「TOKYO MIX CURRY」はアプリストア評価4.8を獲得している「アプリでしか注文できないカレー屋」です
４年前よりFlutterを採用しており、その主要な機能である決済に関して、以下の方法を提供しています：

• Stripeによるクレジットカード決済
• Pay Pluginを統合したネイティブペイ(Google Pay / Apple Pay)
• PayPay

本セッションでは、実際の商用プロダクトとして4年間運用した際の課金に関するノウハウについて、詳細にまとめて解説します

• 課金の種類について
• クレジットカード決済
• Google Pay / Apple Pay
• PayPay
• In-App-Purchase(予定)
• セルフレジにおける決済
• まとめ

想定視聴者

• Flutterでの課金実装方法について知りたい方

概要

• スケーラブルなFlutterアプリのレイヤー構成を丁寧に説明し、実演します。

想定視聴者

• Flutterを触り始めたは良いもののどういう風に作り上げれば良いのか分からない方
• Riverpodを使うのがなんとなく良さそうに思うけど、その後の手が動かせない方
• 猫の手も借りたいくらいにレイヤー構成に悩んでいる方

説明

YOUTRUSTアプリはflutter createを実行してから、今年で3年が経ちました。
ご愛顧いただいている方々、本当にありがとうございます。

Flutterは当時1.x.xでした。

FlutterやDartが目まぐるしく進化を遂げる中、
YOUTRUSTアプリはレイヤー構成を一貫して保ってきました。
言い換えれば、小規模アプリから中規模(大規模？)なアプリまで使える構成ということです。

• フォルダ構成
• レイヤー紹介
• どうして今のレイヤー構成になったのか
• 各レイヤーの役割
• 時間があれば、Live Coding

概要

大学でパチンコ、タバコ、酒、麻雀、バンドしか履修しなかった現在無職のフリーターが何の知識もなくプログラミングを独学で学び、
flutterで実務経験を手に入れるまでの苦労や感動涙なしでは聞かれないロードストーリーをお届けします。

具体的な以下の内容をお話しします。

• プログラミングを始めたきっかけ
• 独学での学び方
• 苦労したこと
• 実際に作ったもの
• 就職活動のやり方

想定視聴者

エンジニアを目指すすべての人

概要

アプリにおいて正常に処理が完了しないときに適切なエラーメッセージを表示することは、適切なユーザ体験とサポートコストの軽減につながります。またエラー処理は多くの画面で同じような処理になることが多いので、使い回し可能な部品にすることは開発者体験の向上につながります。このセッションでは以下の内容で、Flutterアプリでのエラー処理の設計と実装例をソースコードと併せて解説します。

• なぜエラー処理の設計が大事かを、スマホアプリのデリバリー特性から解説
• エラーを分類する
  • ネットワークエラーなど、ユーザに原因があるので、ユーザが対処できる
  • サーバエラーなど、サービス提供元に原因があるので、ユーザは待つことしかできない
• サーバサイドエンジニアとモバイルアプリエンジニアでエラー処理の認識を合わせるためのドキュンテーション事例
• エラーの表示方法
  • Scaffold上のコンテンツ、AlertDialog、Toastのどれで表示するかを、material.ioを参考にして考える
  • バリエーションエラー(テキストフィールドへの入力間違い)の表示方法
  • ネットワークエラーの場合は再読込可能にする
• 使い回し可能なエラー処理部品の実装例

想定視聴者

初めてサービスのスマホアプリを開発する人

概要

今年の4月から新卒として入社し，内定者インターンと実務を含めて1年弱ほどFlutter開発を経験しました．
内定者インターン期間中にはFlutter学習のために画面数の少ない小規模なアプリを開発していましたが，入社してからの実務では画面数も多く，遷移も複雑なアプリを触ることになり，苦労することが多々ありました．
このセッションではその中で特に触ることが多かった画面遷移周りの技術を中心に，実務でつまづいた点をお話しします！

•Flutter画面遷移周りの技術
◦ Navigator 2.0
◦ go_router
•Navigatorの実務でつまづいた点
◦Navigator.pop()とNavigator.of(context).pop()の違い
◦複雑なダイアログ表示での意図しない挙動
•go_routerの実務でつまづいた点
◦パスをどう構成するか
◦ BottomNavigationBarの画面遷移(StatefulShellRoute)

想定視聴者

•Flutterをこれから始めようと思っている人
•Flutter初心者
•Flutterの画面遷移に興味がある人

概要

既存のアプリをFlutterに置き換える際にいきなり全画面をFlutterに置き換えるのは難しいと思います。
その際一部の画面をFlutterに置き換えて既存アプリからFlutterを呼び出せるAdd-to-appが必須になります。

本セッションでは、Add-to-appを2年ほど運用した視点からの知見や起きた不具合などを紹介します。

• Add-to-appの仕組みと導入方法
  • Option A, B, Cのどれを採用したか、その理由
• Flutterの画面数が増えた時の対応
  • MethodChannelの使い方
• 2年間で起きた不具合とその対応
  • CIやiOSライブラリ競合など

想定視聴者

• 既存アプリにFlutter導入を考えている方
• Add-to-appを利用したことない方

概要

Flutterは、1ソースで複数PFのUI・ロジック・テストを共通化できる非常に便利なフレームワークです。

しかし、各PFのネイティブ実装経験者（※1）の中には、「OS固有のAPI（※2）を用いてリッチな体験を実装したい場合、Dartで書いたAPI通信・DB利用・ビジネスロジックなどを一部再実装しなければいけないのでは？」と思ったことはないでしょうか？
(※1) Swift+SwiftUI, Kotlin+Jetpack Compose, etc…
(※2) Push, Widget, Share, etc…

本セッションでは下記アジェンダを元に、Dartで書いたコードをあらゆるケースで活用し、必要なネイティブ実装を最小化する方法をご紹介します。

• MethodChannelを用いたFlutter⇄ネイティブ間の連携
• Plugin/Packageを活用した効率的な実装
• FlutterEngineを使って、ネイティブ実装からFlutterをAPIとして呼び出す方法
• 本体アプリとは別のプロセス（AppExtension）でもFlutterの実装を呼び出す方法

想定視聴者

• Flutterでもネイティブ実装と同じレベルの体験を効率的に作りたい方
• iOS/Androidのネイティブ開発が得意だけど、OS固有のAPIを効率的に扱う方法がわからない方

概要

このセッションではソースコードを抽象的な構文構造としてツリー状に表現するAbstract Syntax Tree（AST）について紹介し、それをDartで扱う方法を紹介します。
また、DartでASTを活用した事例として codemodパッケージを紹介し、大規模な業務コードを一括で機械的にリファクタする例やCustomLintを作成する例などを紹介します。

• Abstract Syntax Tree（AST）について
• DartでASTを扱うためには
• DartでASTを活用した事例
  • リファクタ
  • CustomLint
• まとめ

想定視聴者

• Flutterアプリ開発経験のある人
• analyzerやコード解析に興味がある人

概要

このセッションでは普段あまり考える機会が少なそうなセキュリティの話をします。
Flutterで動くものを作りたい！というときに機能開発に目がいきがちで、しっかりとFlutterでのセキュリティを意識した開発を視聴者に意識付けることが目的です。
内容的には、弊チームで業務でFlutterアプリを開発するに当たって導入しているFlutterでのセキュリティ実装を紹介しながら、どのような対策を行えるかをセッションを通して考えていきます。
Flutterアプリを開発する上でCI周りでのセキュリティ面の話も少しできたらと思います。

• flutter_secure_storageを使ったローカルデータのセキュア化
• アプリの難読化
  • そもそもAndroid、iOSネイティブでの難読化
  • Flutterの難読化
• CI
  • CIツールにおける依存のセキュリティ対策
  • Flutterパッケージ依存のセキュリティ対策

想定視聴者

• Flutterアプリ開発経験のある人
• Flutterアプリのセキュリティについて興味のある人
• セキュリティについて興味がある人

概要

このセッションではFlutterで動画を再生させる技術について、Flutter Communityで開発されているvideo_playerを通して話します。
video_playerの構成や使える機能などの紹介はもちろん、動画という各ネイティブ独自の機能を呼び出すときに考えなければいけない難しい部分についての話も行います。
また、さらにvideo_playerの実装内容を深く理解してもらうために自分でvideo_playerを拡張する例をタイムシフト再生機能の追加を例に話す予定です。
時間があれば最低限必要とされるHLSの説明を入れる予定です。

1. video_player
   1. 概要
   2. 全体構成
   3. 使える機能、使えない機能
2. video_playerのpigeonを使ったネイティブコード呼び出し
3. video_playerに機能追加を試して理解を深める
   1. AVPlayerとExoPlayerの仕様差異とその吸収の仕方
   2. ネイティブ機能を使うパッケージ開発の困難なところ
4. 直近の動きと今後のvideo_player

想定視聴者

• Flutterアプリ開発経験のある人
• AVPlayer、ExoPlayerに触れたことのある人
• Flutterの動画再生に興味がある人

概要

このセッションでは、Flutterとネイティブアプリ開発の境界について深く掘り下げます。FlutterがどれほどのパフォーマンスやUI/UXをネイティブに近づけることができるのか、またどのようなケースでネイティブのアプローチが適切であるのかを詳しく議論します。実際のユースケースやデモを交えながら、開発者がどの技術を選択すべきかの指針を示します。

セッションの内容

• Flutterの概要とその特徴
• Flutterのパフォーマンス: ネイティブとの比較
• UI/UX: Flutterでの実装可能性とネイティブとの差異
• ネイティブとの連携: プラグインシステムやネイティブコードの統合
• まとめ: あなたのプロジェクトにとって最適なアプローチは?

想定視聴者

• Flutterに興味を持っているが、ネイティブアプリ開発との違いや限界を知りたい開発者
• すでにFlutterを使用しているが、ネイティブとの境界や連携についての知識を深めたい開発者
• アプリ開発プロジェクトの方針を決めるための情報収集をしているプロダクトマネージャーや技術リーダー

概要

私はSwiftUIを使って1年近く個人アプリ開発を行った後, 昨年の4月からFlutterアプリの開発インターンを始めました.
この過程で, Flutterフレームワークの書き方がSwiftUIと比較してネストが深くなりがちで読みにくさを感じることがありました.
特に今年の4月からは, 比較的大規模なアプリの実務開発に取り組むようになり, 複数の異なる要素が混在する画面や条件による要素の出し分けが必要な画面で, この問題が顕著に現れるなと感じています.
このセッションでは, こうした状況で可読性を高く保ちながら開発を進めるために, 私が意識しているポイントや個人的なアプローチ, 実務で役立てているTipsを共有します.

• Flutterの可読性（他の宣言的UIフレームワークとの比較）
• Widgetの切り分け
• パッケージの活用
• WidgetExtension
• その他Tips

想定視聴者

• Flutterコードの可読性に悩まされている方
• これからFlutter開発を始める方