概要

今年の初めに、弊社で開発しているアプリを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の静的解析ツール
• 静的解析による検知の次に必要なもの
• 実装方法の地層問題と適応度関数

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

想定視聴者

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

概要

私たちのチームは、品質維持を目指してテスト戦略の見直しを行い、その結果、integration_testを用いた自動テストの導入に至りました。
これまで一年間の運用を通じて、自動テストのシナリオ数は40を超え、その過程で多くの課題と学びがありました。

具体的には、以下のような問いに対する答えを探求しました。

• 自動テストを実行する最適なフローとタイミングは何か
• 成熟したプロジェクトにおいて、どの機能から自動テストを導入すべきか
• 自動テストを実施するか否かの判断基準は何か
• 不安定なテストシナリオにどのように対処すべきか
• AutifyやMaestroなどの他のツールと比較して、何が違うのか

私たちがこれらの課題にどのように取り組み、何を学んだのかを共有します。さらに、以下の観点からも話を進めます。

• テスト戦略を見直すことになった背景と動機
• テスト戦略の見直しから自動テスト選定までのプロセス
• 自動テスト導入による得られた利益とデメリット

本トークは、Flutterとintegration_testを使用したプロジェクトの事例を中心に話しますが、その内容はモバイルアプリ全般の開発に役立つ情報を提供します。

想定視聴者

• Flutter開発で自動テストに興味がある方
• プロダクト開発において自動テストの運用を検討中の方

概要

私は、趣味でスマホアプリを作成しています。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を使用した開発経験がある方
• 個人開発に興味がある方

概要

Flutterには画面遷移アニメーションとして、ネイティブライクなアニメーションがMaterialPageRouteとして最初から使いやすい形で用意されています。
確かにほとんどの場合ではネイティブ画面遷移アニメーションで十分で、実際ユーザーは違和感をあまり感じずにアプリを扱えるでしょう。
しかし私たちはネイティブではなくFlutterを選択して使っています。せっかくなら画面遷移にも凝って独自の世界観を演出してみませんか？

本セッションでは私が公開している画面遷移アニメーションのパッケージturn_page_transitionを作った経験をもとに、オリジナルの画面遷移アニメーションを実装する方法やTipsについてお話しします。

想定視聴者

画面遷移アニメーションの作り方に興味がある方

概要

このプレゼンテーションでは、ネットスーパーにおけるDeepLinkの実装について詳しく解説します。DeepLinkは、顧客がネットスーパーアプリやウェブサイトから特定の商品やカテゴリページに直接アクセスするための手法です。DeepLinkの設計と実装方法に焦点を当て、複数プラットフォームのDeepLink / Universal Links /App Links実装の共通の困難さ
各プラットフォームの違いによる挙動の違いや技術的な制約など、複数プラットフォームでのDeepLink実装について紹介します。

想定アジェンダ

• DeepLinkとは
  DeepLinkを取り巻く技術のこれまでの歴史を踏まえて用語を整理します
• Flutterにおける実装例
  ネイティブアプリのみではなく、Flutter on the Webを同一ソースで提供している場合の実装例、困ったところや学びとなったところを、ネットスーパーアプリケーションで商品の値引きをするクーポンを提供したいという具定例とともに話します

想定視聴者

• Flutter興味ある人
• DeepLinkを実装することになった人
• マルチプラットフォーム対応サービスつくってる人

概要

みなさんのFlutterアプリでは、状態管理にどのような手法を採り入れていますか？ 私たちのアプリでは、初めはRiverpodとfreezedのパッケージを組み合わせて、Android MVVMのような状態管理手法で実装を行っていました。しかし、非Androidエンジニアの学習コストがかかったり、宣言的UIの特性にマッチしているとはいいがたいなど、このアプローチが最適ではないとの結論に達し、状態管理の方針を見直すこととなりました。

方針の策定にあたり、宣言的UIの先駆者であり、既に経験や議論の練度が高いReactの思想、特にReact HooksやRecoilベースのアイディアを取り入れることにしました。FlutterはReactの設計思想と非常に近しく、またRiverpodやFlutter HooksといったライブラリがこれらのReactの状態管理手法から影響を受けていることから、この方針が適していると考えました。
 
今回のセッションでは、RiverpodやFlutter Hooksを使用した、Reactインスパイアの状態管理手法について、具体的な実装や工夫をご紹介いたします。

想定視聴者

• Flutterらしいアーキテクチャが何なのか今ひとつ自信を持てない方
• 現状の状態管理手法で課題を感じている
• 状態管理手法の選択に悩んでいる人

概要

Flutterに関連するツールやパッケージは多様にあり、どれを使うか迷うこともあるかと思います。
チームで開発するには開発メンバー全員が同じ環境で開発することがとても重要です。
Flutterをそのまま利用した場合、メンバーごとにバージョンの齟齬が発生したり、
後から参入したメンバーの環境構築が複雑になったりしがちです。
このセッションでは私たちがどのように環境構築をしてFlutterを利用しているかをご紹介します。
皆さんのFlutter環境構築の参考になれば幸いです。

予定セッション内容

• どのようなパッケージやツールを使っているか
• その剪定はどうしたか
• 使ってみての感想

想定視聴者

• これからFlutterでアプリ開発をしようと考えている方
• Flutterでチーム開発をスムーズに始めたい方
• Flutter以外の開発経験のある方でFlutterに興味がある方

概要

Dartのエコシステムは、ライブラリやツールなどの共有ソフトウェアを管理するためのパッケージを使用します。
pub.devで公に利用できるパッケージやGitなど他のソースから取得することができます。
引用元: https://dart.dev/guides/packages

パッケージをとにかく使えばいいのかというとそうではありません。しっかりと整備されたものもあれば、あまりよろしくないものがあります。

では良いパッケージ・悪いパッケージの選定はどうしたらいいのでしょうか？

具体的には以下について話す予定となっております。
• Flutterの公式が紹介している
• 定期的なメンテナンスがしっかりされている
• ドキュメントがしっかりと記載されている
• Packageのリポジトリの評価が高い
• 多くの人が利用している
• テストコードが充実している
• Contributorが複数人いる
• リリースフローが明記されており、問題がなさそうなもの
• ライセンスの互換性がある

本セッションでは、「Flutterエンジニアのためのパッケージ選択術」について話していこうと思います。
注意）制限時間によって一部省く場合がありますが、増える場合もあります。

想定視聴者

• Flutter、Dartを使用した開発経験がある方

概要

Google I/O 2023でのnext-gen UIの発表や、2023年のFlutter Forwardでの3Dオブジェクトの描画に関する新機能の披露があり、Flutterで目を惹くUIデザインを実現する取り組みが加速しています。加えて、Flutter公式のハッカソンであるFlutter Clock ChallengeやFlutter Puzzle Hackの入賞作品のUIデザインはどれも魅力的なものでした。

しかし、こういった魅力的でユーザーの目を惹くUIデザインの実装にチャレンジしている方はまだ少ないのではないでしょうか。

このセッションでは、Flutterで目を惹くUIデザインを実現するための4つの手法を紹介します。

• RenderObjectのカスタマイズ
• Riveを用いた2Dアニメーション
• Fragment Shaderを活用したグラフィックスの描画
• Impellerを利用した3Dオブジェクトの描画

これらの手法を具体例をもとに、それぞれの実装方法や特徴を徹底解説します。

このセッションを通して、ユーザーを惹きつける洗練されたUIデザインのアプリを開発できるようになるでしょう。

想定視聴者

• 人とは違うUIデザインののアプリを作ってみたい人
• Flutterの描画の裏側に興味がある人

概要

Flutter Web を使ったアプリを2年間プロダクションで運用してみて、 チョットデキルようになってきたので Tips を発表します。
1分に1つ話せたらいいなってことで40選にしましたが、 状況次第で20選になるかもしれないし、 60選になるかもしれません。

チラ見せ

• Flutter Web のロードを早くしたい
• フォント問題、 豆腐とか
• モバイルでRemoteConfig使ってるんだけど
• 以前はこんな問題があったけど改善されてます

想定視聴者

Flutter Web を使いたいひと。 すでに使ってるひと。

概要

2023年は各社から次々に新しいFoldableスマホが発売されました。中でもGoogleが自ら発売したPixel Foldは印象的です。
今後はPixel Foldで快適に使えるアプリかどうかという観点もGoogleが重視することは間違いないでしょう。ASO（アプリストア最適化)の観点でも必要になるかも。

そこで、Googleがリリースしているアプリや、他のFoldableデバイスにマッチしたアプリ、マッチしていないアプリの特徴や、Foldableデバイス独自の機能について調査したレポートをお話します。

想定視聴者

UIやUX寄りの話題が好きなFlutterエンジニア

概要

皆さんはFlutter開発をするとき、どんなエディタを使っていますか？
多くの人はVSCodeやAndroid Studioを使っていると思いますが、中にはVim、Emacsなどで開発をしている人もいると思います。私はEmacsを使っています。

Dartは開発支援機能が豊富に揃っていて、コードの補完、エラーの表示、シンボルのリネームなど多くのことをエディタ上で行うことができますが、
これはDart Analysis Serverという共通基盤を各エディタが利用することで実現されています。
Dart Analysis ServerはLanguage Server Protocol(LSP)に則って開発されていて、
対応しているすべてのエディタで同様の開発体験が得られるようになっています。

普段は意識することがあまりないけれど、とても面白いエディタの裏側の世界を一緒に見てみましょう！

予定している内容は以下の通りです。
・ LSP誕生前のエディタがどうだったか
・ LSPがエディタ界に起こした変革
・ エディタとDart Analysis Serverのやりとりを可視化してみよう
・ Dart Analysis Serverの便利な機能の紹介
・ Dart Analysis Serverの機能を拡張してみる

想定視聴者

・ Dartを使って開発をしている方

概要

近年iOSでもWebからPush通知が送れるようになりWebViewがメインコンテンツとなる、通称ガワアプリの需要が低くなってきているのではないでしょうか。
よりモバイルアプリらしい体験をユーザーに提供することやモバイルを使うことのメリットを活かすためにWebViewを使うことをやめました。
その際に大前提として現在ある財産をそのまま使用できるのか？踏み切ることによって会社にはメリットがあるのかなど考えました。その上でメインコンテンツ部分をflutter_htmlというパッケージを使用することにしました。
これはWebViewと比較するとhtml, cssを読み込むことができる代わりにjsの実行ができません。その分読み込み速度や描画速度でメリットがあります。
このセッションでは上記の問題提起に対する回答に加え、どのような会話をしていったのか、どのように開発を進めていったのかということについて話していけたらと思います。

想定視聴者

WebViewを使っている人
FlutterにおけるWebViewを採用することについて気になっている人

概要

Flutterの画面遷移には、従来型のNavigator.of(context).push()を使う方法と、Navigator2.0を使ったルーティングをする方法があります。
go_routerはNavigator2.0を使った画面遷移を行うためのライブラリです。
2022年に非公式パッケージから公式パッケージに昇格しており、現在ではデファクトスタンダートとなっています。
今回のセッションでは、そんなgo_routerについてサンプルアプリを使いながら紹介したいと思います。
予定している内容は以下の通りです。

・ Navigator2.0のコンセプトの紹介
・ go_routerの基本的な使い方
・ 新しく追加されたShellRoute/StatefulShellRouteの紹介
・ go_router_builderの紹介

想定視聴者

・ Dart/Flutterの基本的な書き方がわかる方