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 Management Utilizing Guard and Deep Link
Search
CyberAgent
PRO
November 21, 2023
Technology
1
2.4k
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
ABEMAにおけるLLMを用いたコンテンツベース推薦システム導入と効果検証
cyberagentdevelopers
PRO
1
730
クリエイティブ制作領域の データ活用を0から推進した話
cyberagentdevelopers
PRO
2
500
opt-in camera:カメラによる行動計測におけるオプトインの仕組みの実現
cyberagentdevelopers
PRO
2
420
競輪選手の体力を視覚化するための物体認識とデータサイエンスの融合
cyberagentdevelopers
PRO
3
380
学園アイドルマスターの アイドルをより輝かせる ライティング手法
cyberagentdevelopers
PRO
3
17k
スマートフォンGPUの特性を解析! 社内で実施予定のGPUパフォーマンスチューニング研修を紹介します!
cyberagentdevelopers
PRO
1
400
NAB Show 2024 動画技術関連レポート/ NAB Show 2024 Report
cyberagentdevelopers
PRO
3
500
CI/CDのススメ(サイバーエージェント新卒研修2024)
cyberagentdevelopers
PRO
1
140
Kubernetesのススメ(サイバーエージェント新卒研修2024)
cyberagentdevelopers
PRO
2
170
Other Decks in Technology
See All in Technology
Scaling Technical Excellence at 104: Evolution in AWS and Developer Empowerment
scotthsieh825
1
150
さらに高品質・高速化を目指すAI時代のテスト設計支援と、めざす先 / AI Test Lab vol.1
shift_evolve
0
190
地理情報とAPIのトレンド
nagix
0
160
DDDにおける認可の扱いとKotlinにおける実装パターン / authorization-for-ddd-and-kotlin-implement-pattern
urmot
4
390
OSSコミットしてZennの課題を解決した話
dyoshikawa1993
0
150
データ分析を支える技術 生成AI再入門
ishikawa_satoru
0
380
Azure OpenAI Service Dev Day / LLMでできる!使える!生成AIエージェント
masahiro_nishimi
3
750
DevIO2024_レガシー運用からの脱却 -クラウド活用の実践事例とベストプラクティス-
jun2882
0
210
Docker互換のセキュアなコンテナ実行環境「Podman」超入門
devops_vtj
6
3.2k
What if...? 처음부터 다시 LLM 어플리케이션을 개발한다면
huffon
0
1k
AWS IAMのアンチパターン/AWSが考える最低権限実現へのアプローチ概略(JAWS-UG朝会#59資料改修20分版)
htan
0
330
AWSで”最小権限の原則”を実現するための考え方 /20240722-ssmjp-aws-least-privilege
opelab
10
4.3k
Featured
See All Featured
Infographics Made Easy
chrislema
238
18k
Debugging Ruby Performance
tmm1
71
11k
Agile that works and the tools we love
rasmusluckow
325
20k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
For a Future-Friendly Web
brad_frost
173
9.2k
Building Flexible Design Systems
yeseniaperezcruz
323
37k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
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