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
200
LLMを用いたメタデータベースレコメンド検証
cyberagentdevelopers
PRO
5
1.4k
CodeAgentとMCPで実現するデータ分析エージェント
cyberagentdevelopers
PRO
1
240
SQL Agentによるタップルのデータ利活用促進
cyberagentdevelopers
PRO
1
410
NAB Show 2025 動画技術関連レポート / NAB Show 2025 Report
cyberagentdevelopers
PRO
1
390
【2025年度新卒技術研修】100分で学ぶ サイバーエージェントのデータベース 活用事例とMySQLパフォーマンス調査
cyberagentdevelopers
PRO
7
10k
【CA.ai #1】未来を切り拓くAIエージェントの可能性
cyberagentdevelopers
PRO
3
150
【CA.ai #1】MCP世界への招待:AIエンジニアが創る次世代エージェント連携の世界
cyberagentdevelopers
PRO
2
160
【CA.ai #1】ABEMA のコンテンツ制作を最適化! 生成 AI × クラウド映像編集システム
cyberagentdevelopers
PRO
0
130
Other Decks in Technology
See All in Technology
Witchcraft for Memory
pocke
1
660
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
160
作曲家がボカロを使うようにPdMはAIを使え
itotaxi
0
390
Tech-Verse 2025 Global CTO Session
lycorptech_jp
PRO
0
1.2k
How Community Opened Global Doors
hiroramos4
PRO
1
130
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
730
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1.2k
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
500
AI導入の理想と現実~コストと浸透〜
oprstchn
0
150
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
290
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
940
本が全く読めなかった過去の自分へ
genshun9
0
710
Featured
See All Featured
Writing Fast Ruby
sferik
628
62k
Building an army of robots
kneath
306
45k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
720
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
RailsConf 2023
tenderlove
30
1.1k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
230
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
We Have a Design System, Now What?
morganepeng
53
7.7k
For a Future-Friendly Web
brad_frost
179
9.8k
Code Reviewing Like a Champion
maltzj
524
40k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
940
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