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

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

CyberAgent
November 21, 2023

Guard とDeep Link を活用した ナビゲーション管理 / Navigation Management Utilizing Guard and Deep Link

CyberAgent

November 21, 2023
Tweet

More Decks by CyberAgent

Other Decks in Technology

Transcript

  1. 4

  2. AutoRoute とは? auto_route は、Flutter 用のルーティングパッケージです。 コードの複雑さを減らし、ルーティングの宣言と管理を簡単にする 主流のルーティングパッケージ - auto_route 2.2K

    👍 → 今回お話するパッケージ - go_router 3.6K 👍 → Flutter/packagesに仲間入り 今回は、WINTICKETのルーティングで利用しているAutoRouteについて話をします 7
  3. WINTICKET アプリでのAutoRoute の活用 2021年3月にFlutter 製アプリにリプレース開始 - リプレース当初からAutoRoute を採用し、 堅牢でスケーラブルなナビゲーションを実現 -

    アプリの成長とともに複雑になるルート管理をスムーズに対応 - 現在、150以上あるページをAutoRoute を活用して管理している 8 auto_routeライブラリの最新バージョンはv7.x系ですが、 プロダクトで利用しているバージョンがv5.x系なため、 サンプルコードを参考にする際にはご注意ください。
  4. AutoRouteの主な機能について auto_route_generator - コードを自動生成 - 型安全なルーティング 複雑なルーティングの要件に対応 - ネストされたルーティング -

    ガードを使ったアクセス制御 カスタムトランジション - 画面遷移時のアニメーションもカスタム可能 9
  5. ルートの宣言方法 routes: - ルートを定義する場所 guards: - Guardを設定 (後述) meta: -

    AutoRoute 自体に追加情報を付与し、 ルーティング処理に利用可能 10
  6. 1. ログインしているか? ✅ YES 2. 本人確認が完了しているか? ✅ YES 3. VIP

    ユーザーであるか? 🚫 NO Guardを活用した対処法 19 VIP 画面は開かれない
  7. WINTICKET が実装しているRouteGuard - 全部で18種類のGuard - 様々なユースケースに対応 今回お話するGuard - FlagGuard: フィーチャーフラグの状態を判定

    - KeyboardHiddenGuard: キーボードが閉じているかどうかを判定 - AdminGuard: 開発者モードかどうかを判定 21
  8. まとめ - AutoRouteの利用方法の説明 - RouteGuardを活用すると、より高度な画面遷移を実現可能に - WINTICKET のRoute Guardの活用方法の紹介 -

    フィーチャフラグ運用とFlagGuardについて - アプリのシステムの状態で画面遷移するGuard - 開発者モードかどうかの判定をAdmin Guardで制御 - Deep Linkについての説明とそのハンドリング方法について Route GuardやDeep Linkを利用して柔軟な画面遷移と、 ユーザビリティーの向上 41