[読書会]Androidのアプリリンクの設定

1.概要

 Android向けのアプリリンクを設定する方法について述べています。
ディープリンクとは、URI(Uniform Resource Identifier)を使ってアプリを起動する仕組みで、特定の画面を開くために使用されます。URIには、スキーム(例えばhttps)、ホスト(例えばwww.example.com)、そしてパス(/path/to/page)が含まれます。これにより、ユーザーが特定のページに直接遷移することが可能になります。

 アプリリンクは、Android固有のディープリンクの一種で、httpまたはhttpsスキームを使用します
つまり、通常のWebリンクと同様に扱われ、リンクがクリックされた時に対応するAndroidアプリが開かれます。

重要なポイント:

  • Flutter DevTools には、Android用のディープリンクを検証するツールが提供されており、iOS向けのツールも開発中です。
  • アプリリンクを設定するためには、ウェブドメインの所有が必要です。(ウェブドメインを持っていない場合は、一時的な解決策として、Firebase HostingGitHub Pages を使用することが提案されています。)

 この手順により、Androidアプリhttpやhttpsのリンクを使ったディープリンクを有効にし、ユーザがブラウザから特定のページや機能に直接アクセスできるようになります。

2.Flutter アプリのカスタマイズ

 ここでは、Flutter アプリケーションが受信した URL を処理する方法を説明しています。
(特に、go_router パッケージを使用してルーティングを管理する方法についての手順を示しています。)

(1)Flutterアプリケーションの作成

 flutter create コマンドを使用して新しい Flutter アプリケーションを作成します。
(ここでは、例として deeplink_cookbook というアプリ名を使用しています。)

(2)go_router パッケージの追加

 Flutter での複雑なルーティング簡単に管理できる様に、go_router パッケージを使用します。

Dart
flutter pub add go_router

(3)ルーターの作成

 main.dart ファイルに GoRouter オブジェクトを作成し、ルーティングを設定します。
これにより、特定の URL パスに応じて異なる画面(ルート)を表示できるようになります。

簡単な URL ルーティングから複雑な画面遷移まで、go_router パッケージで効率よく処理できます。
void main() => runApp(
  // MaterialApp.router を使用して、
  // routerConfig に GoRouter の設定を渡す。
  // これにより、アプリのルーティングが動的に処理する。
  MaterialApp.router(routerConfig: router)
);

// GoRouter オブジェクトを使用してルートを定義し、
// '/'ルート(ホーム画面)と '/details'ルート(詳細画面)を設定する。
final router = GoRouter(
  routes: [
    GoRoute(
      // ルートの定義:
      // path 属性でルートパス指定し、builderで対応する画面のUIを作成する。
      path: '/',
      builder: (_, __) => Scaffold(
        appBar: AppBar(title: const Text('Home Screen')),
      ),
      routes: [
        GoRoute(
          // ルート階層: 
          // 子ルート(/details など)も定義できます。
          // routes リスト内にルートを追加し、異なる画面遷移を設定します。
          path: 'details',
          builder: (_, __) => Scaffold(
            appBar: AppBar(title: const Text('Details Screen')),
          ),
        ),
      ],
    ),
  ],
);

3.AndroidManifest.xml の変更

 ここでは、Androidの AndroidManifest.xml ファイルディープリンク(deep linking) を設定する方法について触れています。
ディープリンクとは、アプリを開くだけでなく、アプリ内の特定の画面に直接ナビゲートするために使用されるURIです。

(1)プロジェクトの編集

 VS Code または Android Studio を使って Flutter プロジェクトを開きます。

(2)AndroidManifest.xml を編集

 プロジェクトの以下のディレクトリにあるファイルに移動します。

AndroidManifest.xml の場所:
android/app/src/main/AndroidManifest.xml

(3)メタデータとインテントフィルタの追加

 タグ内に以下の meta-data タグ intent-filter 追加します。
これにより、指定したウェブドメイン(例: example.com)に対してアプリをディープリンクで開けるようになります
つまり、Android デバイス HTTP および HTTPS の URL に対して、Flutter アプリ内の特定の画面を開くことができます。

(AndroidManifest.xml)メタデータとインテントフィルタの追加:
//(1) meta-data タグ:
// これは flutter_deeplinking_enabled を true に設定することで、Flutter のデフォルトのディープリンクハンドラを有効にします。このハンドラは、アプリがURLを受け取ったときに、適切な画面にナビゲートする処理を行います。

//(2) flutter_deeplinking_enabled タグ:
// flutter_deeplinking_enabled を有効にすると、Flutter のデフォルトのディープリンク処理が使われます。しかし、もしサードパーティのプラグイン(例: uni_links)を使用している場合、このタグを追加すると、それらのプラグインの動作に影響を与える可能性があります。その場合、サードパーティプラグインを使用するならこのタグを省略してください。
<meta-data android:name="flutter_deeplinking_enabled" android:value="true" />

//(3) intent-filter タグ:
// ディープリンクのフィルタを設定します。アプリがHTTPまたはHTTPSスキームのリンクを受け取ったときにこのインテントがトリガーされます。ここでは、android:host="example.com" の部分を自分のドメインに置き換えます。

//(4) android:autoVerify="true":
// これにより、Androidが自動的に指定されたドメインのディープリンクを検証します。
<intent-filter android:autoVerify="true">
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="http" android:host="example.com" />
    <data android:scheme="https" />
</intent-filter>

4.assetlinks.json ファイルのホスティング

 ここでは、assetlinks.json ファイルを使用して、特定のドメインにアクセスした際にモバイルブラウザがアプリを起動する様に設定する手順を説明しています。(具体的には、Androidでアプリリンクを設定する為のガイドです。)

 アプリリンクが正しく機能するためには、assetlinks.json ファイル自分の所有するドメインにホストする必要があります。
このファイルは、ブラウザ指定された Android アプリ開くべきであることを指示します。

4-1.ファイル作成の為の情報

(1)パッケージ名

 AndroidManifest.xml ファイル内に記載されているパッケージ名です。
(通常、com.example.* の形式です。)

(2)sha256 フィンガープリント

 アプリのAPK署名に使用するキー SHA256 の フィンガープリント が必要です。
取得方法はAPKの署名方法によって異なります

4-2.SHA256フィンガープリントの取得方法

(a)Google Play アプリ署名を使用する場合:

 Play Developer Console の「App Signing」タブで、直接に SHA256フィンガープリント を確認できます。

(b)ローカルキーストアを使用する場合:

 以下のコマンドを使用してローカルのキーストアから SHA256フィンガープリント生成できます。

(コマンド)ローカルのキーストアから SHA256フィンガープリント を生成:
keytool -list -v -keystore <path-to-keystore>

4-3.assetlinks.json

(1)assetlinks.json ファイル(例)

assetlinks.json ファイル(例):
[{
  "relation": ["delegate_permission/common.handle_all_urls"],
  "target": {
    "namespace": "android_app",
    //package_name:
    // 自分のAndroidアプリケーションのIDに設定する。
    "package_name": "com.example.deeplink_cookbook",
    //sha256_cert_fingerprints: 
    // 取得したSHA256証明書フィンガープリントを入力する。
    "sha256_cert_fingerprints": [
      "FF:2A:CF:7B:DD:CC:F1:03:3E:E8:B2:27:7C:A2:E3:3C:DE:13:DB:AC:8E:EB:3A:B9:72:A1:0E:26:8A:F5:EC:AF"
    ]
  }
}]

(2)assetlinks.json ファイルのホスティング(例)

assetlinks.json ファイルのホスティング(例):
https://<webdomain>/.well-known/assetlinks.json

(注意)
 複数のアプリフレーバーがある場合、複数の sha256_cert_fingerprint をリストに追加することができます
これにより、複数の証明書をサポートすることが可能です

 上記手順によって、ブラウザが指定された URL にアクセスしたときに、対応するAndroidアプリが自動的に開くようになります。

5.テスト

 ここでは、Androidのアプリリンクのテスト方法について解説しています。

5-1.リアルデバイスやエミュレータでのテスト

 Flutterアプリがインストールされているデバイス(リアルデバイスやエミュレータ)で、アプリリンクをテストすることができます。但し、テストを行う前に、少なくとも一度は flutter run コマンドを使用してアプリを実行し、デバイスにインストールしておく必要があります。これによって、デバイス上でのアプリリンクのテストが可能になります。

 1枚目の画像が、実際のデバイスでFlutterアプリケーションがインストールされていることを示しています
(デバイスのアイコン画面に「deeplink_」アプリが表示されています)。

5-2.adbコマンドを使用したテスト

 アプリリンクの設定のみをテストする場合、以下の adb コマンドを使うことができます。
このコマンドを使用すると、指定されたURLでアプリが起動されるかどうかを確認できます。

Dart
//android.intent.action.VIEW アクションと
// android.intent.category.BROWSABLE カテゴリを使って、
//ブラウザからのURLリンクに対応したアプリが起動するかどうかをテストします。
adb shell 'am start -a android.intent.action.VIEW \
    -c android.intent.category.BROWSABLE \
    -d "http://<web-domain>/details"' \
    <package name>
//<web-domain> と <package name> は、
// テストするWebドメインとアプリのパッケージ名に置き換えます。

5-3.ブラウザや他のアプリを通じたテスト

 Webファイルとアプリの両方のセットアップをテストするには、ブラウザや他のアプリから直接リンクをクリックする必要があります。一つの方法として、Googleドキュメントにリンクを追加し、そのリンクをクリックする方法が紹介されています。

以下の画像が、リンクをクリックした後、アプリが起動し、詳細画面(”Details Screen”)が表示されている様子を示しています。
このように、正しくセットアップされていれば、アプリはリンクをクリックすると起動し、指定された画面が表示されます。

5-4.注意点

 adb コマンドを使ったテストでは、アプリリンクが機能するかどうかの確認はできますが、Webサーバにホスティングされているファイルが正しく設定されているかどうかは確認できません

 以下の様に、adbコマンドあくまでローカルな環境でアプリリンクが機能するかを確認するためのツールであり、Webサーバー上の設定(ホスティング)についてのテストを行うものではない、ということを強調しています。

(1)adbコマンドを使ったテスト

 この方法は、Androidのデバイス(実機やエミュレータ)で「アプリリンク」が機能しているかを確認するテストです。つまり、コマンドを実行すると、指定したURLに基づいてアプリが起動し、そのリンクに対応した画面が表示されるかどうかをテストできます。この段階では、Webサーバー上に必要なファイル(assetlinks.json など)が正しく配置されているかどうかは無関係で、アプリリンクの機能が正常に動作するかどうかだけを確認します。

(2)Webファイルが正しくホスティングされているかはテストできない

 上記のadbコマンドを使うと、Webサーバーにassetlinks.jsonファイルが存在していなくてもアプリが起動します。adbコマンド自体はローカルでのテストにすぎず、インターネット上のファイルの存在や正確さを確認するものではないためです。

(3)Webファイルのセットアップをテストしたい場合

 Webファイルが正しくホスティングされているか、つまり、ユーザーがブラウザでリンクをクリックした際に、正しくアプリが起動するかを確認したい場合には、実際にブラウザや他のアプリを使ってリンクをクリックするテストが必要です。この場合、サーバー上のファイルが正しく設定されていなければ、アプリは起動しません。

6.付録

https://github.com/flutter/codelabs/tree/main/deeplink_cookbook

コメントを残す