Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Guard とDeep Link を活用した ナビゲーション管理 / Navigation M...
Search
CyberAgent
PRO
November 21, 2023
Technology
0
3.3k
Guard とDeep Link を活用した ナビゲーション管理 / Navigation Management Utilizing Guard and Deep Link
CyberAgent
PRO
November 21, 2023
Tweet
Share
More Decks by CyberAgent
See All by CyberAgent
2025年度 生成AI 実践編
cyberagentdevelopers
PRO
3
180
LLMを用いたメタデータベースレコメンド検証
cyberagentdevelopers
PRO
5
1.4k
CodeAgentとMCPで実現するデータ分析エージェント
cyberagentdevelopers
PRO
1
230
SQL Agentによるタップルのデータ利活用促進
cyberagentdevelopers
PRO
1
400
NAB Show 2025 動画技術関連レポート / NAB Show 2025 Report
cyberagentdevelopers
PRO
1
380
【2025年度新卒技術研修】100分で学ぶ サイバーエージェントのデータベース 活用事例とMySQLパフォーマンス調査
cyberagentdevelopers
PRO
7
10k
【CA.ai #1】未来を切り拓くAIエージェントの可能性
cyberagentdevelopers
PRO
3
150
【CA.ai #1】MCP世界への招待:AIエンジニアが創る次世代エージェント連携の世界
cyberagentdevelopers
PRO
2
150
【CA.ai #1】ABEMA のコンテンツ制作を最適化! 生成 AI × クラウド映像編集システム
cyberagentdevelopers
PRO
0
120
Other Decks in Technology
See All in Technology
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
180
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
130
実践! AIエージェント導入記
1mono2prod
0
160
SalesforceArchitectGroupOsaka#20_CNX'25_Report
atomica7sei
0
140
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.1k
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
11
3.8k
“社内”だけで完結していた私が、AWS Community Builder になるまで
nagisa53
1
360
第9回情シス転職ミートアップ_テックタッチ株式会社
forester3003
0
220
Definition of Done
kawaguti
PRO
6
480
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.1k
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
190
標準技術と独自システムで作る「つらくない」SaaS アカウント管理 / Effortless SaaS Account Management with Standard Technologies & Custom Systems
yuyatakeyama
3
1.2k
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Automating Front-end Workflow
addyosmani
1370
200k
A designer walks into a library…
pauljervisheath
206
24k
Visualization
eitanlees
146
16k
Gamification - CAS2011
davidbonilla
81
5.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
RailsConf 2023
tenderlove
30
1.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Transcript
『AutoRouteの活用事例』 Guard とDeep Link を活用した ナビゲーション管理 2023/11/14 Hirokazu Tanaka
Hirokazu Tanaka 株式会社 サイバーエージェント 23年度入社 株式会社 WinTicket techiro appgrape 自己紹介
3 WINTICKETの紹介 競輪とオートレースのネット投票サービス
4
今回お話する内容 • auto_route パッケージについて • Guard とアクセス制御について • WINTICET のGuard
の活用例 • Deep Link のハンドリングについて • まとめ 5
auto_route パッケージについて 6
AutoRoute とは? auto_route は、Flutter 用のルーティングパッケージです。 コードの複雑さを減らし、ルーティングの宣言と管理を簡単にする 主流のルーティングパッケージ - auto_route 2.2K
👍 → 今回お話するパッケージ - go_router 3.6K 👍 → Flutter/packagesに仲間入り 今回は、WINTICKETのルーティングで利用しているAutoRouteについて話をします 7
WINTICKET アプリでのAutoRoute の活用 2021年3月にFlutter 製アプリにリプレース開始 - リプレース当初からAutoRoute を採用し、 堅牢でスケーラブルなナビゲーションを実現 -
アプリの成長とともに複雑になるルート管理をスムーズに対応 - 現在、150以上あるページをAutoRoute を活用して管理している 8 auto_routeライブラリの最新バージョンはv7.x系ですが、 プロダクトで利用しているバージョンがv5.x系なため、 サンプルコードを参考にする際にはご注意ください。
AutoRouteの主な機能について auto_route_generator - コードを自動生成 - 型安全なルーティング 複雑なルーティングの要件に対応 - ネストされたルーティング -
ガードを使ったアクセス制御 カスタムトランジション - 画面遷移時のアニメーションもカスタム可能 9
ルートの宣言方法 routes: - ルートを定義する場所 guards: - Guardを設定 (後述) meta: -
AutoRoute 自体に追加情報を付与し、 ルーティング処理に利用可能 10
Routeを定義後、 右のコマンドを叩くと、コードが自動生成 AutoRoute 毎に AutoRouteInfo オブジェクトが生成 11 ルートの自動生成コードについて 厳密な型指定が可能
初期設定の方法 12 先ほどのAppRouterを Appに定義 MaterialApp.router()内で 設定を行う
AutoRouterObserver 画面遷移のイベントを監視 - didPush(), didPop()・・・ オブザーバーの活用例 ユーザーがどの画面を回遊しているか のログを収集 13
Guardとアクセス制御について 14
Guardについて 15 画面遷移の前に、インターセプター として処理を含めることができる 特定のルートへのアクセスを制御し 安全なルーティングを実現する Routeに定義
例えば 16 VIP 向けのページを公開 このページに訪れたVIPユーザにもれなく1000ptプレゼント!
VIP AutoRouteを定義 17 https://hoge.com/campaign/vip リリース 🎉
いざリリース! 18 画面遷移の管理をしないと 大きなリスクにつながる https://hoge.com/campaign/vip 実は、誰でも閲覧可能なページ 😱 このページに訪れたVIPユーザにもれなく 1000ptプレゼント!
1. ログインしているか? ✅ YES 2. 本人確認が完了しているか? ✅ YES 3. VIP
ユーザーであるか? 🚫 NO Guardを活用した対処法 19 VIP 画面は開かれない
Guardの特徴 - ユーザーが特定の条件を満たして いるかどうかをチェック - 条件別のページにリダイレクトす るなどの処理を書くことが可能 20 VIP 画面は開かれない
VIPユーザー オファー画面を 表示 Home画面に 戻る
WINTICKET が実装しているRouteGuard - 全部で18種類のGuard - 様々なユースケースに対応 今回お話するGuard - FlagGuard: フィーチャーフラグの状態を判定
- KeyboardHiddenGuard: キーボードが閉じているかどうかを判定 - AdminGuard: 開発者モードかどうかを判定 21
FlagGuard の説明をする前に WINTICKET の開発体制について 22
トランクベース開発を採用 23 機能を小さな単位に分割し、mainブランチに頻繁にマージする方法 コンフリクトリスクの低減と短期間の改善サイクル 約1/4に短縮
Flutterにリプレース時 24 - iOS (Swift)フィーチャーブランチ運用から - Flutter リプレース時に開発体制をトランクベース開発に
トランクベース開発を採用 25 参考: https://speakerdeck.com/cyberagentdevelopers/ji-cheng-chang-zhong-nowinticket-niokeruflutterdenomobairuapurino-kurosupuratutohuomuhua 約1/4に短縮 トランクベース開発を支えているのが フィーチャーフラグ PR マージのリードタイムが1/4に短縮
フィーチャーフラグ について 特定の機能を動的に有効化または無効化するための手法 新しい機能を組み込んでおきながら、ストアのリリースタイミングと 切り離して機能をユーザーに対して表示・非表示の制御が可能 26
フィーチャーフラグ について 27 ユーザー フィーチャーフラグ 新機能1 新機能2 新機能1だけを公開 特定の機能を動的に有効化または無効化するための手法 新しい機能を組み込んでおきながら、ストアのリリースタイミングと
切り離して機能をユーザーに対して表示・非表示の制御が可能
フィーチャーフラグを駆使したルーティング制御 28 ユーザー Flag Guard 🚧 アクセス不可 NewFeaturePage アクセス可
NewFeaturePage のRoute を実装 guards: FlagGuard meta: フラグ名を指定 (今回はNEW_FEATURE_FLAG) フィーチャーフラグを駆使したルーティング制御 29
FlagGuardの実装 30
KeyboardHiddenGuard キーボードを閉じきる前に モーダルページが表示される問題 31 モーダルページを表示する前に キーボードを閉じたい SafeAreaが本来の値と変化し 表示崩れが起こっていた
KeyboardHiddenGuard キーボードが閉じられるまで遅延さ せてから画面遷移させる 32 → アプリのシステムを見て画面遷移を操作することも可能
AdminGuard について 開発者モードかどうかの判定を行う デバッグページが存在 - 開発や、QC時に状態の確認や変更を行うためのページ - フィーチャーフラグのON・OFFの切り替え可能 33 フィーチャーフラグ
エディター
Deep Linkのからの ルーティング制御について 34
任意のアプリの任意の画面に遷移させるURL、またはそれを扱う仕組みの総称 ディープリンクを実現する仕組み Deep Linkとは 35 参考:https://qiita.com/y-some/items/e0e0f5cb4d7d5559b09c Firebase Dynamic Links ⛔2025/8
廃止予 定 ユニバーサルリンク アプリリンク iOS/Androidに それぞれ実装可能 カスタムURL スキーム mailto:// tel://
アプリへの様々な流入経路が存在 RouteGuard を活用して、セキュリティーをより強固にしている 36 WINTICKET アプリでDeep Linkを、 どのようにハンドリングしているかについて紹介
リンクからアプリのページが開かれるまでの流れ 37 ※ Deep Link Handlerもアプリの一部ですが、簡略化のためにこの様に表しています
リンクをクリックしてアプリを開く 38 - ユニバーサルリンク - アプリリンク - カスタムURLスキーム etc…
リンクからページを表示するための処理 39 リンクをそのまま利用できない Routerに変換する必要がある Deep Link Handlerを定義し、 URL から Routeクラスに変換
→ 画面遷移を行う
Deep Link Handlerの処理 Deep Linkで呼ばれた時、Routerの 制御がまとまった関数を定義 40 Firebase Dynamic Links
Firebase Messaging URL ・
まとめ - AutoRouteの利用方法の説明 - RouteGuardを活用すると、より高度な画面遷移を実現可能に - WINTICKET のRoute Guardの活用方法の紹介 -
フィーチャフラグ運用とFlagGuardについて - アプリのシステムの状態で画面遷移するGuard - 開発者モードかどうかの判定をAdmin Guardで制御 - Deep Linkについての説明とそのハンドリング方法について Route GuardやDeep Linkを利用して柔軟な画面遷移と、 ユーザビリティーの向上 41
最後に WINTICKET ではたくさんのFlutter に関わる記事を執筆しています。 42 https://developers.cyberagent.co.jp/blog/?s=winticket+flutter