ブログ

[読書会]ディープリンク(Deep linking)

１．概要

（１）ディープリンクとは？

　ディープリンクは、アプリを開くだけでなく、アプリ内の特定の画面やセクションに直接ユーザーを案内するリンクです。
（例えば、ある商品の広告をクリックした際、その商品ページに直接遷移するショッピングアプリがその例です。）
つまり、アプリの「深い」部分に直接アクセスできるリンクのことです。

（２）Flutter におけるディープリンクのサポート

　Flutterでは、iOS、Android、そしてWebブラウザでもディープリンクをサポートしています。アプリがディープリンクを受け取ると、そのURLに基づいてアプリ内の特定のルート（画面）を表示することができます。　

（３）具体的な対応方法

  • 名前付きRoutes や onGenerateRoute を使ってルートを生成し、そのルートに応じて指定の画面を表示させることができます。
  • Router widget を使った場合も同様に、URLに基づいて適切な画面を表示させることが可能です。

注意
名前付きルートは、もはやほとんどの用途で推奨されていません。
詳細については、ナビゲーションの概要ページの「制限事項」をご覧下さい。

（４）Webアプリでのディープリンク

　ウェブブラウザーでアプリを実行する場合、追加の設定は必要ありません。
ルートパスは、iOSやAndroidのディープリンクと同じように扱われます。
デフォルトでは、ウェブアプリはurlフラグメントからパターンを使ってディープリンクパスを読み込みます：
/#/path/to/app/screen、しかし、これはアプリのURLストラテジーを設定することで変更できます。

　ビジュアル学習者の方はビデオをご覧下さい。

２．プラグインベースのディープリンクからの移行

（１）プラグインベースのディープリンクとは？

（２）移行の概要

（３）Info.plist と AndroidManifest.xml

  • iOSの場合
    　Info.plist に FlutterDeepLinkingEnabled を追加することで、公式のディープリンク機能を有効化します。
  • Androidの場合
    　AndroidManifest.xml に flutter_deeplinking_enabled を追加して同様にディープリンク機能を有効化します。

　この移行により、Flutterが提供するディープリンクの統合機能を簡単に利用できるようになり、プラグインに依存せず、より統一されたディープリンクの処理が可能となります。

３．振舞い

　ディープリンクを処理する際の挙動が、プラットフォームやアプリケーションの状態（起動中か未起動か）によって異なることを説明しています。また、Navigator と Router を使った場合の違いについても詳しく触れています。

（１）Routerの利点

　Router を使用すると、アプリが実行中に新しいディープリンクが開かれた場合、現在のページセットを置き換えることができます。このように、Router はより柔軟で強力な方法でディープリンクを処理し、複数のルートを管理する場合や動的なページ更新が必要な場合に便利です。

　要するに、Router と Navigator には、ディープリンク処理の方法においていくつかの違いがあり、特にルートの解析やページの管理において Router はより強力なツールです。

（２）動作の詳細

  1. iOSが未起動の場合
    • Navigatorを使用
      　アプリは initialRoute (“/”)を取得し、その後少し経って pushRoute が呼ばれ、
      対応するルートがプッシュされます。
    • Routerを使用
      　アプリは initialRoute (“/”)を取得し、少し後に RouteInformationParser が呼び出されます。
      　その結果、ルートを解析して RouterDelegate.setNewRoutePath が呼ばれ、
      Navigator が対応する Page で構成されます。

  2. Androidが未起動の場合
    • Navigatorを使用
      　アプリは initialRoute としてディープリンクのルート(“/deeplink”)を取得します。
    • Routerを使用
      　アプリは initialRoute (“/deeplink”)を取得し、RouteInformationParser でルートを解析します。
      　続いて、RouterDelegate.setNewRoutePath が呼び出され、
      Navigator が対応するページで構成されます。

  3. iOSが起動済みの場合
    • Navigatorを使用
      　pushRoute が呼び出されます。
    • Routerを使用
      　ルートが解析され、Navigato rが新しいページセットで構成されます。

  4. Androidが起動済みの場合
    • Navigatorを使用
      　pushRoute が呼び出されます。
    • Routerを使用
      　ルートが解析され、Navigator が新しいページセットで構成されます。

４．さらに詳しく

Router システムへの導入

Google I/O 2023からFlutterのディープ・リンク・ビデオの掘り下げ

ディープリンク上級ガイド

コメントを残す