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
1
2.6k
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
FastlyとfalcoでNode.jsレスなWebサーバーの構築: IPTV版ABEMAアプリのインフラ刷新
cyberagentdevelopers
PRO
1
28
Amebaチョイス立ち上げの裏側 ~ 依存システムとの闘い ~
cyberagentdevelopers
PRO
1
29
マイグレーションコード自作して File-Based Routing に自動移行!! ~250 ページの歴史的経緯を添えて~
cyberagentdevelopers
PRO
1
18
コードメトリクス計測による課題可視化と品質確保
cyberagentdevelopers
PRO
1
34
サイバーエージェントにおけるインナーソーシングの取り組み
cyberagentdevelopers
PRO
3
940
ABEMAにおけるLLMを用いたコンテンツベース推薦システム導入と効果検証
cyberagentdevelopers
PRO
6
2.9k
クリエイティブ制作領域の データ活用を0から推進した話
cyberagentdevelopers
PRO
2
840
opt-in camera:カメラによる行動計測におけるオプトインの仕組みの実現
cyberagentdevelopers
PRO
2
800
競輪選手の体力を視覚化するための物体認識とデータサイエンスの融合
cyberagentdevelopers
PRO
3
1.2k
Other Decks in Technology
See All in Technology
Agile in Automotive Industry, puzzles and lights.
hiranabe
1
230
React Aria で実現する次世代のアクセシビリティ
ryo_manba
4
1k
音声AIエージェントの世界とRetell AI入門 / Introduction to the World of Voice AI Agents and Retell AI
rkaga
4
890
Estrategias de escalabilidade para projetos web
jessilyneh
2
220
突撃! 隣のAmazon Bedrockユーザー 〜YouはどうしてAWSで?〜
minorun365
PRO
3
310
「家族アルバム みてね」における運用管理・ オブザーバビリティの全貌 / Overview of Operation Management and Observability in FamilyAlbum
isaoshimizu
4
140
忙しい人のためのLangGraph概要まとめ
__ymgc__
1
150
Developer Experienceを向上させる基盤づくりの取り組み事例集
coconala_engineer
0
110
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
2
170
RAGHack: Building RAG apps in Python
pamelafox
0
160
Javaにおける関数型プログラミンへの取り組み
skrb
7
300
事前準備が肝!AI活用のための業務改革
layerx
PRO
1
110
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
166
48k
Learning to Love Humans: Emotional Interface Design
aarron
270
40k
Build The Right Thing And Hit Your Dates
maggiecrowley
30
2.2k
What the flash - Photography Introduction
edds
67
11k
The Straight Up "How To Draw Better" Workshop
denniskardys
230
130k
Faster Mobile Websites
deanohume
304
30k
Teambox: Starting and Learning
jrom
131
8.7k
Designing the Hi-DPI Web
ddemaree
278
34k
A designer walks into a library…
pauljervisheath
201
24k
How to train your dragon (web standard)
notwaldorf
85
5.6k
The Invisible Customer
myddelton
119
13k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
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