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
720
クリエイティブ制作領域の データ活用を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
開発生産性をむしろ向上させる セキュリティパートナーの作り方 / Dev Productivity Con 2024
flatt_security
0
360
ACRiルーム最新情報とAMD GPUサーバーのご紹介
anjn
0
150
ペパボのオブザーバビリティ研修2024 説明資料
kesompochy
0
1.1k
コンテナ・K8s研修 - 後半 Kubernetes 基礎&ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
1
120
ソフトウェアエンジニアリングの知見を活かして データ基盤をいい感じにする on Snowflake [MIERUNE BBQ #10]
mtpooh
2
150
スタートアップにおける組織設計とスクラムの長期戦略 / Scrum Fest Kanazawa 2024
yoshikiiida
13
3.6k
RAGのサービスをリリースして1年3ヶ月が経ちました
segavvy
4
910
[NIKKEI Tech Talk] KDDI/KAG Scrum & Community for Engineering Training
curanosuke
2
220
コンテナ・K8s研修 - 前半 コンテナ基礎・ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
コミュニティサービスに「あなたへ」フィードを リリースするまでの試行錯誤
takapy
1
150
AOAI Dev Day - Opening Session
yoshidashingo
2
440
What if...? 처음부터 다시 LLM 어플리케이션을 개발한다면
huffon
0
1k
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
GraphQLとの向き合い方2022年版
quramy
36
13k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
Fireside Chat
paigeccino
25
2.8k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
Design by the Numbers
sachag
277
18k
Teambox: Starting and Learning
jrom
130
8.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Being A Developer After 40
akosma
72
580k
The World Runs on Bad Software
bkeepers
PRO
63
11k
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