Guard とDeep Link を活用したナビゲーション管理 / Navigation Management Utilizing Guard and Deep Link

by CyberAgent

Slide 1

Slide 1 text

『AutoRouteの活用事例』 Guard とDeep Link を活用したナビゲーション管理 2023/11/14 Hirokazu Tanaka

Slide 2

Slide 2 text

Hirokazu Tanaka 株式会社サイバーエージェント 23年度入社株式会社 WinTicket techiro appgrape 自己紹介

Slide 3

Slide 3 text

3 WINTICKETの紹介競輪とオートレースのネット投票サービス

Slide 4

Slide 4 text

Slide 5

Slide 5 text

今回お話する内容 ● auto_route パッケージについて ● Guard とアクセス制御について ● WINTICET のGuard の活用例 ● Deep Link のハンドリングについて ● まとめ 5

Slide 6

Slide 6 text

auto_route パッケージについて 6

Slide 7

Slide 7 text

AutoRoute とは？ auto_route は、Flutter 用のルーティングパッケージです。コードの複雑さを減らし、ルーティングの宣言と管理を簡単にする主流のルーティングパッケージ - auto_route 2.2K 👍 → 今回お話するパッケージ - go_router 3.6K 👍 → Flutter/packagesに仲間入り今回は、WINTICKETのルーティングで利用しているAutoRouteについて話をします 7

Slide 8

Slide 8 text

WINTICKET アプリでのAutoRoute の活用 2021年3月にFlutter 製アプリにリプレース開始 - リプレース当初からAutoRoute を採用し、堅牢でスケーラブルなナビゲーションを実現 - アプリの成長とともに複雑になるルート管理をスムーズに対応 - 現在、150以上あるページをAutoRoute を活用して管理している 8 auto_routeライブラリの最新バージョンはv7.x系ですが、プロダクトで利用しているバージョンがv5.x系なため、サンプルコードを参考にする際にはご注意ください。

Slide 9

Slide 9 text

AutoRouteの主な機能について auto_route_generator - コードを自動生成 - 型安全なルーティング複雑なルーティングの要件に対応 - ネストされたルーティング - ガードを使ったアクセス制御カスタムトランジション - 画面遷移時のアニメーションもカスタム可能 9

Slide 10

Slide 10 text

ルートの宣言方法 routes: - ルートを定義する場所 guards: - Guardを設定 (後述) meta: - AutoRoute 自体に追加情報を付与し、ルーティング処理に利用可能 10

Slide 11

Slide 11 text

Routeを定義後、右のコマンドを叩くと、コードが自動生成 AutoRoute 毎に AutoRouteInfo オブジェクトが生成 11 ルートの自動生成コードについて厳密な型指定が可能

Slide 12

Slide 12 text

初期設定の方法 12 先ほどのAppRouterを Appに定義 MaterialApp.router()内で設定を行う

Slide 13

Slide 13 text

AutoRouterObserver 画面遷移のイベントを監視 - didPush(), didPop()・・・オブザーバーの活用例ユーザーがどの画面を回遊しているかのログを収集 13

Slide 14

Slide 14 text

Guardとアクセス制御について 14

Slide 15

Slide 15 text

Guardについて 15 画面遷移の前に、インターセプターとして処理を含めることができる特定のルートへのアクセスを制御し安全なルーティングを実現する Routeに定義

Slide 16

Slide 16 text

例えば 16 VIP 向けのページを公開このページに訪れたVIPユーザにもれなく1000ptプレゼント！

Slide 17

Slide 17 text

VIP AutoRouteを定義 17 https://hoge.com/campaign/vip リリース 🎉

Slide 18

Slide 18 text

いざリリース！ 18 画面遷移の管理をしないと大きなリスクにつながる https://hoge.com/campaign/vip 実は、誰でも閲覧可能なページ 😱 このページに訪れたVIPユーザにもれなく 1000ptプレゼント！

Slide 19

Slide 19 text

1. ログインしているか? ✅ YES 2. 本人確認が完了しているか? ✅ YES 3. VIP ユーザーであるか? 🚫 NO Guardを活用した対処法 19 VIP 画面は開かれない

Slide 20

Slide 20 text

Guardの特徴 - ユーザーが特定の条件を満たしているかどうかをチェック - 条件別のページにリダイレクトするなどの処理を書くことが可能 20 VIP 画面は開かれない VIPユーザーオファー画面を表示 Home画面に戻る

Slide 21

Slide 21 text

WINTICKET が実装しているRouteGuard - 全部で18種類のGuard - 様々なユースケースに対応今回お話するGuard - FlagGuard: フィーチャーフラグの状態を判定 - KeyboardHiddenGuard: キーボードが閉じているかどうかを判定 - AdminGuard: 開発者モードかどうかを判定 21

Slide 22

Slide 22 text

FlagGuard の説明をする前に WINTICKET の開発体制について 22

Slide 23

Slide 23 text

トランクベース開発を採用 23 機能を小さな単位に分割し、mainブランチに頻繁にマージする方法コンフリクトリスクの低減と短期間の改善サイクル約1/4に短縮

Slide 24

Slide 24 text

Flutterにリプレース時 24 - iOS (Swift)フィーチャーブランチ運用から - Flutter リプレース時に開発体制をトランクベース開発に

Slide 25

Slide 25 text

トランクベース開発を採用 25 参考: https://speakerdeck.com/cyberagentdevelopers/ji-cheng-chang-zhong-nowinticket-niokeruﬂutterdenomobairuapurino-kurosupuratutohuomuhua 約1/4に短縮トランクベース開発を支えているのがフィーチャーフラグ PR マージのリードタイムが1/4に短縮

Slide 26

Slide 26 text

フィーチャーフラグについて特定の機能を動的に有効化または無効化するための手法新しい機能を組み込んでおきながら、ストアのリリースタイミングと切り離して機能をユーザーに対して表示・非表示の制御が可能 26

Slide 27

Slide 27 text

フィーチャーフラグについて 27 ユーザーフィーチャーフラグ新機能1 新機能2 新機能1だけを公開特定の機能を動的に有効化または無効化するための手法新しい機能を組み込んでおきながら、ストアのリリースタイミングと切り離して機能をユーザーに対して表示・非表示の制御が可能

Slide 28

Slide 28 text

フィーチャーフラグを駆使したルーティング制御 28 ユーザー Flag Guard 🚧 アクセス不可 NewFeaturePage アクセス可

Slide 29

Slide 29 text

NewFeaturePage のRoute を実装 guards: FlagGuard meta: フラグ名を指定 (今回はNEW_FEATURE_FLAG) フィーチャーフラグを駆使したルーティング制御 29

Slide 30

Slide 30 text

FlagGuardの実装 30

Slide 31

Slide 31 text

KeyboardHiddenGuard キーボードを閉じきる前にモーダルページが表示される問題 31 モーダルページを表示する前にキーボードを閉じたい SafeAreaが本来の値と変化し表示崩れが起こっていた

Slide 32

Slide 32 text

KeyboardHiddenGuard キーボードが閉じられるまで遅延させてから画面遷移させる 32 → アプリのシステムを見て画面遷移を操作することも可能

Slide 33

Slide 33 text

AdminGuard について開発者モードかどうかの判定を行うデバッグページが存在 - 開発や、QC時に状態の確認や変更を行うためのページ - フィーチャーフラグのON・OFFの切り替え可能 33 フィーチャーフラグエディター

Slide 34

Slide 34 text

Deep Linkのからのルーティング制御について 34

Slide 35

Slide 35 text

任意のアプリの任意の画面に遷移させるURL、またはそれを扱う仕組みの総称ディープリンクを実現する仕組み Deep Linkとは 35 参考:https://qiita.com/y-some/items/e0e0f5cb4d7d5559b09c Firebase Dynamic Links ⛔2025/8 廃止予定ユニバーサルリンクアプリリンク iOS/Androidにそれぞれ実装可能カスタムURL スキーム mailto:// tel://

Slide 36

Slide 36 text

アプリへの様々な流入経路が存在 RouteGuard を活用して、セキュリティーをより強固にしている 36 WINTICKET アプリでDeep Linkを、どのようにハンドリングしているかについて紹介

Slide 37

Slide 37 text

リンクからアプリのページが開かれるまでの流れ 37 ※ Deep Link Handlerもアプリの一部ですが、簡略化のためにこの様に表しています

Slide 38

Slide 38 text

リンクをクリックしてアプリを開く 38 - ユニバーサルリンク - アプリリンク - カスタムURLスキーム etc…

Slide 39

Slide 39 text

リンクからページを表示するための処理 39 リンクをそのまま利用できない Routerに変換する必要がある Deep Link Handlerを定義し、 URL から Routeクラスに変換 → 画面遷移を行う

Slide 40

Slide 40 text

Deep Link Handlerの処理 Deep Linkで呼ばれた時、Routerの制御がまとまった関数を定義 40 Firebase Dynamic Links Firebase Messaging URL ・

Slide 41

Slide 41 text

まとめ - AutoRouteの利用方法の説明 - RouteGuardを活用すると、より高度な画面遷移を実現可能に - WINTICKET のRoute Guardの活用方法の紹介 - フィーチャフラグ運用とFlagGuardについて - アプリのシステムの状態で画面遷移するGuard - 開発者モードかどうかの判定をAdmin Guardで制御 - Deep Linkについての説明とそのハンドリング方法について Route GuardやDeep Linkを利用して柔軟な画面遷移と、ユーザビリティーの向上 41

Slide 42

Slide 42 text

最後に WINTICKET ではたくさんのFlutter に関わる記事を執筆しています。 42 https://developers.cyberagent.co.jp/blog/?s=winticket+ﬂutter