Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Guard とDeep Link を活用した ナビゲーション管理

CyberAgent
November 21, 2023
160

Guard とDeep Link を活用した ナビゲーション管理

複数のユーザータイプや、deeplinkなど多岐にわたる画面遷移の管理について、auto_routerライブラリのAutoRouteGuardを活用した画面遷移の最適化手法を紹介します。

CyberAgent

November 21, 2023
Tweet

More Decks by CyberAgent

Transcript

  1. 『AutoRouteの活用事例』
    Guard とDeep Link を活用した
    ナビゲーション管理
    2023/11/14
    Hirokazu Tanaka

    View full-size slide

  2. Hirokazu Tanaka
    株式会社 サイバーエージェント 23年度入社
    株式会社 WinTicket
    techiro appgrape
    自己紹介

    View full-size slide

  3. 3
    WINTICKETの紹介
    競輪とオートレースのネット投票サービス

    View full-size slide

  4. 今回お話する内容
    ● auto_route パッケージについて
    ● Guard とアクセス制御について
    ● WINTICET のGuard の活用例
    ● Deep Link のハンドリングについて
    ● まとめ
    5

    View full-size slide

  5. auto_route パッケージについて
    6

    View full-size slide

  6. AutoRoute とは?
    auto_route は、Flutter 用のルーティングパッケージです。
    コードの複雑さを減らし、ルーティングの宣言と管理を簡単にする
    主流のルーティングパッケージ
    - auto_route 2.2K 👍 → 今回お話するパッケージ
    - go_router 3.6K 👍 → Flutter/packagesに仲間入り
    今回は、WINTICKETのルーティングで利用しているAutoRouteについて話をします
    7

    View full-size slide

  7. WINTICKET アプリでのAutoRoute の活用
    2021年3月にFlutter 製アプリにリプレース開始
    - リプレース当初からAutoRoute を採用し、
    堅牢でスケーラブルなナビゲーションを実現
    - アプリの成長とともに複雑になるルート管理をスムーズに対応
    - 現在、150以上あるページをAutoRoute を活用して管理している
    8
    auto_routeライブラリの最新バージョンはv7.x系ですが、
    プロダクトで利用しているバージョンがv5.x系なため、
    サンプルコードを参考にする際にはご注意ください。

    View full-size slide

  8. AutoRouteの主な機能について
    auto_route_generator
    - コードを自動生成
    - 型安全なルーティング
    複雑なルーティングの要件に対応
    - ネストされたルーティング
    - ガードを使ったアクセス制御
    カスタムトランジション
    - 画面遷移時のアニメーションもカスタム可能 9

    View full-size slide

  9. ルートの宣言方法
    routes:
    - ルートを定義する場所
    guards:
    - Guardを設定 (後述)
    meta:
    - AutoRoute 自体に追加情報を付与し、
    ルーティング処理に利用可能
    10

    View full-size slide

  10. Routeを定義後、
    右のコマンドを叩くと、コードが自動生成
    AutoRoute 毎に
    AutoRouteInfo オブジェクトが生成
    11
    ルートの自動生成コードについて
    厳密な型指定が可能

    View full-size slide

  11. 初期設定の方法
    12
    先ほどのAppRouterを
    Appに定義
    MaterialApp.router()内で
    設定を行う

    View full-size slide

  12. AutoRouterObserver
    画面遷移のイベントを監視
    - didPush(), didPop()・・・
    オブザーバーの活用例
    ユーザーがどの画面を回遊しているか
    のログを収集
    13

    View full-size slide

  13. Guardとアクセス制御について
    14

    View full-size slide

  14. Guardについて
    15
    画面遷移の前に、インターセプター
    として処理を含めることができる
    特定のルートへのアクセスを制御し
    安全なルーティングを実現する
    Routeに定義

    View full-size slide

  15. 例えば
    16
    VIP 向けのページを公開
    このページに訪れたVIPユーザにもれなく1000ptプレゼント!

    View full-size slide

  16. VIP AutoRouteを定義
    17
    https://hoge.com/campaign/vip
    リリース 🎉

    View full-size slide

  17. いざリリース!
    18
    画面遷移の管理をしないと
    大きなリスクにつながる
    https://hoge.com/campaign/vip
    実は、誰でも閲覧可能なページ 😱
    このページに訪れたVIPユーザにもれなく
    1000ptプレゼント!

    View full-size slide

  18. 1. ログインしているか?
    ✅ YES
    2. 本人確認が完了しているか?
    ✅ YES
    3. VIP ユーザーであるか?
    🚫 NO
    Guardを活用した対処法
    19
    VIP 画面は開かれない

    View full-size slide

  19. Guardの特徴
    - ユーザーが特定の条件を満たして
    いるかどうかをチェック
    - 条件別のページにリダイレクトす
    るなどの処理を書くことが可能
    20
    VIP 画面は開かれない

    VIPユーザー
    オファー画面を
    表示
    Home画面に
    戻る

    View full-size slide

  20. WINTICKET が実装しているRouteGuard
    - 全部で18種類のGuard
    - 様々なユースケースに対応
    今回お話するGuard
    - FlagGuard: フィーチャーフラグの状態を判定
    - KeyboardHiddenGuard: キーボードが閉じているかどうかを判定
    - AdminGuard: 開発者モードかどうかを判定
    21

    View full-size slide

  21. FlagGuard の説明をする前に
    WINTICKET の開発体制について
    22

    View full-size slide

  22. トランクベース開発を採用
    23
    機能を小さな単位に分割し、mainブランチに頻繁にマージする方法
    コンフリクトリスクの低減と短期間の改善サイクル
    約1/4に短縮

    View full-size slide

  23. Flutterにリプレース時
    24
    - iOS (Swift)フィーチャーブランチ運用から
    - Flutter リプレース時に開発体制をトランクベース開発に

    View full-size slide

  24. トランクベース開発を採用
    25
    参考: https://speakerdeck.com/cyberagentdevelopers/ji-cheng-chang-zhong-nowinticket-niokeruflutterdenomobairuapurino-kurosupuratutohuomuhua
    約1/4に短縮
    トランクベース開発を支えているのが
    フィーチャーフラグ
    PR マージのリードタイムが1/4に短縮

    View full-size slide

  25. フィーチャーフラグ について
    特定の機能を動的に有効化または無効化するための手法
    新しい機能を組み込んでおきながら、ストアのリリースタイミングと
    切り離して機能をユーザーに対して表示・非表示の制御が可能
    26

    View full-size slide

  26. フィーチャーフラグ について
    27
    ユーザー
    フィーチャーフラグ
    新機能1
    新機能2 新機能1だけを公開

    特定の機能を動的に有効化または無効化するための手法
    新しい機能を組み込んでおきながら、ストアのリリースタイミングと
    切り離して機能をユーザーに対して表示・非表示の制御が可能

    View full-size slide

  27. フィーチャーフラグを駆使したルーティング制御
    28
    ユーザー
    Flag Guard
    🚧 アクセス不可
    NewFeaturePage
    アクセス可

    View full-size slide

  28. NewFeaturePage のRoute を実装
    guards: FlagGuard
    meta: フラグ名を指定
    (今回はNEW_FEATURE_FLAG)
    フィーチャーフラグを駆使したルーティング制御
    29

    View full-size slide

  29. FlagGuardの実装
    30

    View full-size slide

  30. KeyboardHiddenGuard
    キーボードを閉じきる前に
    モーダルページが表示される問題
    31
    モーダルページを表示する前に
    キーボードを閉じたい
    SafeAreaが本来の値と変化し
    表示崩れが起こっていた

    View full-size slide

  31. KeyboardHiddenGuard
    キーボードが閉じられるまで遅延さ
    せてから画面遷移させる
    32
    → アプリのシステムを見て画面遷移を操作することも可能

    View full-size slide

  32. AdminGuard について
    開発者モードかどうかの判定を行う
    デバッグページが存在
    - 開発や、QC時に状態の確認や変更を行うためのページ
    - フィーチャーフラグのON・OFFの切り替え可能
    33
    フィーチャーフラグ
    エディター

    View full-size slide

  33. Deep Linkのからの
    ルーティング制御について
    34

    View full-size slide

  34. 任意のアプリの任意の画面に遷移させるURL、またはそれを扱う仕組みの総称
    ディープリンクを実現する仕組み
    Deep Linkとは
    35
    参考:https://qiita.com/y-some/items/e0e0f5cb4d7d5559b09c
    Firebase Dynamic
    Links
    ⛔2025/8 廃止予

    ユニバーサルリンク
    アプリリンク
    iOS/Androidに
    それぞれ実装可能
    カスタムURL
    スキーム
    mailto:// tel://

    View full-size slide

  35. アプリへの様々な流入経路が存在
    RouteGuard を活用して、セキュリティーをより強固にしている
    36
    WINTICKET アプリでDeep Linkを、
    どのようにハンドリングしているかについて紹介

    View full-size slide

  36. リンクからアプリのページが開かれるまでの流れ
    37
    ※ Deep Link Handlerもアプリの一部ですが、簡略化のためにこの様に表しています

    View full-size slide

  37. リンクをクリックしてアプリを開く
    38
    - ユニバーサルリンク
    - アプリリンク
    - カスタムURLスキーム
    etc…

    View full-size slide

  38. リンクからページを表示するための処理
    39
    リンクをそのまま利用できない
    Routerに変換する必要がある
    Deep Link Handlerを定義し、
    URL から Routeクラスに変換
    → 画面遷移を行う

    View full-size slide

  39. Deep Link Handlerの処理
    Deep Linkで呼ばれた時、Routerの
    制御がまとまった関数を定義
    40
    Firebase
    Dynamic Links
    Firebase
    Messaging
    URL

    View full-size slide

  40. まとめ
    - AutoRouteの利用方法の説明
    - RouteGuardを活用すると、より高度な画面遷移を実現可能に
    - WINTICKET のRoute Guardの活用方法の紹介
    - フィーチャフラグ運用とFlagGuardについて
    - アプリのシステムの状態で画面遷移するGuard
    - 開発者モードかどうかの判定をAdmin Guardで制御
    - Deep Linkについての説明とそのハンドリング方法について
    Route GuardやDeep Linkを利用して柔軟な画面遷移と、
    ユーザビリティーの向上 41

    View full-size slide

  41. 最後に
    WINTICKET ではたくさんのFlutter に関わる記事を執筆しています。
    42
    https://developers.cyberagent.co.jp/blog/?s=winticket+flutter

    View full-size slide