トーク

概要

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 アプリケーションを素早く構築することに興味あるエンジニア

概要

• スケーラブルな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 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開発を始める方

概要

今年の初めに、弊社で開発しているアプリをSwiftからFlutterへとリプレースしました。
そして、この内部的なシステム刷新はユーザーにとって一切無関係のお話です。
なので、ユーザー視点でリプレースによるアプリの更新を考えると、「いつも通りアプリをただ更新した」という事実で済まさなければなりません。
更新した際に「ログアウトされている」、「設定していた情報が消えている」などのユーザー体験を損なうことが起きればミッション失敗です。
それを防ぐためには適切なマイグレーションによって、Swiftで保持しているローカルデータをFlutterへ正常に引き継ぐ必要があります。

決死の思いで無事故を達成したマイグレーション戦略をご紹介します。

今回マイグレーションの対象とするローカルデータは、
「セキュア情報を保持するKeyChain」と「ユーザー設定情報を保持するUserDefaults」です。

紹介する内容の補足

リプレースにおけるマイグレーションのお話だけではなく、
「Flutterでの可用性と整合性を考慮したマイグレーション機構の設計」についてもご紹介します。

想定視聴者

• Flutterにおけるローカルデータのマイグレーションに興味がある人
• iOS/AndroidをFlutterへリプレースしようと考えている人

概要

FlutterのIntegrationテストは、時に煩雑であり、また、WebViewや通知ダイアログ等のネイティブが関与する場合には、これらネイティブ機能に対応できず失敗してしまいます。

そんな問題を解決するために、Patrolが開発されました。

Patrolは、LeanCode社が開発したFlutterアプリのテストのためのOSSフレームワークです。Patrolを使用すれば、DartでUIテストを簡単に書くことができます。さらに、Flutter公式パッケージでは対応が難しいネイティブサイドとの対応も可能です。また、Firebase Test Labを使用し、多数のデバイス上でE2Eテストを実行することもできます(Flutter未対応)。

このセッションでは、既存ソリューションの課題から始め、Patrolを活用したWidgetテストやIntegrationテストの実例を通じて、Patrolの機能とその有用性を解説します。Flutterプロジェクトのテスト自動化を進めたい方、また品質向上を目指す方にとって、このセッションは有益なものになるはずです。

想定視聴者

Flutterプロジェクトの品質を高めたい方
FlutterプロジェクトにE2Eテストを追加したい方
integration_test に疲れた方
Patrolについて詳しく知りたい方

概要

Riverpodは多くのFlutter開発者に支持されている状態管理ライブラリです。その中で、開発を助けるためのツールとして提供されているのが、 riverpod_lint というLintパッケージです。
riverpod_lint は custom_lint を使用して作成されています。これは一般的なRiverpodの問題を予防し、繰り返しのタスクを単純化する目的で設計されています。

本セッションでは以下のトピックをカバーします：

• Custom Lintの基本的な概念
• riverpod_lint によるRiverpodの使い勝手の向上
• riverpod_lint 導入に伴うRiverpodの進化 - Notifier、Riverpod Generatorの概要
• riverpod_lint の背後にある思考や実装の考察

特に4点目の考察に関しては、私がRiverpodへ貢献した際の経験を元にしたものであり、これは公式な見解や作者の意図を示すものではありません。私の解釈や経験を元にした異なる視点からの洞察を提供することを目指しています。

想定視聴者

• Custom Lintに興味を持っている方
• Riverpodの内部や設計について新しい視点で知りたい方
• 将来的にRiverpodにcontributeしてみたい方

概要

チーム開発では生産性向上やリスク抑制などのために、実装方法の取り決めをすると思います。
取り決めを機能させるためには、必要な時に取り決めを認識できなければなりませんが、
これは人の知識や事前インプットの度合いに依存するため、どうしてもバラツキが出てしまいます。

静的解析はこの問題を解決する手段であり、取り決めの認識を人に依存しない形で実現できます。
また、機械的な検知を前提とすると、チームへのインプットの方法が変わり、共有できる知識の量が変わります。

このセッションでは、まずチーム開発における共通の知識の重要性を説明し、
続いてDartの静的解析ツールを活用した共通知識を育てる方法を説明します。

以下のコンテンツを含む予定です。

• チーム開発における共通の知識の重要性
• Dartの静的解析ツール
• 静的解析による検知の次に必要なもの
• 実装方法の地層問題と適応度関数

なお、この説明で「取り決め」と呼んでいるものは、プログラムの責務の分離、状態の変更経路の制限、
イベント通知とイベント購読、依存の注入方法、といった「どう実装するか」を指しています。

想定視聴者

チーム開発をより良くしていきたい人。

概要

私は、趣味でスマホアプリを作成しています。2年半前からアプリのリリースを初めて、52個のアプリをリリースしました。

色々な方に話を聞いてみたところ、開発をしたことはあるもののリリースをしたことがないという意見がちらほらありました。

本セッションでは、このセッションを聞くだけですぐにアプリをリリースできるような話をしていこうと思います。
どちらもリリースまでの流れを一通り説明予定です。

Apple Store

• Xcodeからアプリのビルドを提出する方法
• アプリのスクリーンショットの解説（サイズやおすすめサイトなど）
• プロモーション用テキストと概要の素敵な文章を作り方
• 提出に必要なURL関連の記載方法
◦ サポートURL
◦ マーケティングURL
◦ プライバシーポリシーURL
◦ ユーザプライバシー選択URL

Google Play Store

• １２項目のアプリのセットアップを設定する
• Android App BundleをGoogle Play Storeに提出する方法
• アプリのスクリーンショットの解説（サイズやおすすめサイトなど）
注意）制限時間によって一部省く場合がありますが、増える場合もあります。

想定視聴者

• Flutter、Dartを使用した開発経験がある方
• アプリをリリースしたいと思っている方

概要

2019年に、Flutterで点線を描画できるパッケージdotted_lineをリリースしました。
リリースから約4年が経ち、利用者数も増えてイシューやプルリクをいただき継続的な運用ができています。

さて、何故このパッケージはリリースから現在まで継続してご利用いただけているのでしょうか？
それは、「Flutterのパッケージ運用特有の観点」と「OSS運用の観点」から実施した、工夫や取り組みがあったからだと考えています。
それらの工夫や取り組みについて、実際に行った手段とその目的という構成で発表させていただきます。

アジェンダ

• 手に取ってもらうために
  • 分かりやすい命名にする
  • 1文で説明する
  • ロゴでブランディングする
• 利用に繋げるために
  • READMEでインターフェースを説明する
  • スクリーンショットで実物を見せる
  • Scores(Pub point)を上げる
• 継続して利用してもらうために
  • Scoresを維持する
  • Flutter/Dartのアップデートに対応する
  • コントリビューターに敬意を示す
• 継続して運用可能にするために
  • 抜け漏れがないようにチェック機構を用意する
  • 可能な限り自動化する

想定視聴者

• パッケージ運用に興味がある方
• OSS開発に興味がある方

概要

fpdartの1.0.0がリリースされましたが、皆様そもそもfpdartはご存知でしょうか。
(実はすぐ1.1.0も出ましたが…）

Dart3系からSealed Classなどを採用したため、以前と比べ強力になったものの
他言語から移行してきた人たちにとっては物足りない部分があるかと思います。

本セッションは、そんな少し物足りなさを感じている方向けになります。
fpdart「など」を通じて、なにか新たなきっかけを提供できればと考えています。

想定視聴者

• Kotlinなどを触ったことがあり、ちょっとDartに物足りなさを感じる方
• Option/Eitherといったものを聞いたことがあるが、使ったことはない方
• Option/Eitherといったものを使ったことがあるが、もうちょっとだけ詳しく知りたい方

概要

私は、趣味でスマホアプリを作成しています。2年半前からアプリのリリースを初めて、52個のアプリをリリースしました。しかし、ほとんどシンプルなアプリが多く、大規模なアプリを作れずにいました。
そんな中、2023年の4月ごろから食べログなどに近いアプリの開発を始めました。このアプリは長期期間の開発となっています。
現在は、リリースに向けて最終確認やテストコードを書いている最中です。

本セッションでは、開発におけるTipや精神面におけるTipについて話をしていこうと思います。

[開発におけるTip集]
• アプリのアイデアを作成方法
• 使われた技術スタックや選択した理由
• 仕事と両立するための時間の確保方法
• 個人開発におけるコード品質を向上する方法
• 作成しているアプリの展望
• 新機能や市場戦略の話
[精神面におけるTip集]
• 挫折しそうになったときの対応方法
• 持続可能な開発をするための心得

注意）制限時間によって一部省く場合がありますが、増える場合もあります。

想定視聴者

• Flutter、Dartを使用した開発経験がある方
• 個人開発に興味がある方