このページは Cloud Translation API によって翻訳されました。

統合ガイド

André Cipriani Bandarra

Twitter GitHub Glitch Mastodon ホームページ

Trusted Web Activity をセットアップするために Java コードを記述する必要はありませんが、Android Studio が必要です。このガイドは Android Studio 3.3 を使用して作成されています。インストール方法に関するドキュメントをご確認ください。

信頼できるウェブアクティビティプロジェクトを作成する

Trusted Web Activity を使用する場合は、プロジェクトが API バージョン 16 以降を対象にする必要があります。

Android Studio を開き、[Start a new Android Studio project] をクリックします。

Android Studio で、アクティビティのタイプの選択を求められます。Trusted Web Activity はサポートライブラリから提供されるアクティビティを使用するため、[Add No Activity] を選択して [Next] をクリックします。

次のステップでは、プロジェクトの構成を求めるプロンプトが表示されます。各フィールドについて簡単に説明します。

名前: Android ランチャーでアプリに使用される名前。
Package Name: Play ストアと Android デバイス上の Android アプリの一意の識別子。Android アプリのパッケージ名を作成する際の要件とおすすめの方法について詳しくは、ドキュメントをご覧ください。
Save location: Android Studio はファイルシステム内にプロジェクトを作成します。
言語: プロジェクトで Java または Kotlin コードを記述する必要はありません。デフォルトとして [Java] を選択します。
最小 API レベル: サポートライブラリでは API レベル 16 以上が必要です。上記のいずれかのバージョンで API 16 を選択します。

Instant Apps や AndroidX アーティファクトは使用しないため、残りのチェックボックスはオフのままにして、[Finish] をクリックします。

Trusted Web Activity サポートライブラリを取得する

プロジェクトに Trusted Web Activity ライブラリを設定するには、アプリケーションのビルドファイルを編集する必要があります。プロジェクトナビゲータの [Gradle Scripts] セクションを探します。build.gradle という 2 つのファイルがあり、若干混乱を招く可能性があります。また、かっこ内の説明で正しいファイルを特定できます。

ここで探しているのは、名前の横に Module モジュールを含むファイルです。

Trusted Web Activities ライブラリは Java 8 機能を使用しており、最初の変更では Java 8 が有効化されています。次のように、android セクションの一番下に compileOptions セクションを追加します。

android {
        ...
    compileOptions {
       sourceCompatibility JavaVersion.VERSION_1_8
       targetCompatibility JavaVersion.VERSION_1_8
    }
}

次のステップで、Trusted Web Activity サポートライブラリをプロジェクトに追加します。dependencies セクションに新しい依存関係を追加します。

dependencies {
    implementation 'com.google.androidbrowserhelper:androidbrowserhelper:2.2.0'
}

Android Studio に、プロジェクトの同期をもう一度求めるプロンプトが表示されます。 [Sync Now] リンクをクリックして、同期します。

Trusted Web Activity を起動する

Trusted Web Activity を設定するには、Android アプリマニフェストを編集します。

プロジェクトナビゲータで、[app] セクション、[manifests] の順に展開し、AndroidManifest.xml をダブルクリックしてファイルを開きます。

プロジェクトの作成時に Android Studio でプロジェクトにアクティビティを追加しないよう指定したため、マニフェストは空で、アプリタグのみが含まれています。

activity タグを application タグに挿入して、Trusted Web Activity を追加します。

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.example.twa.myapplication">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme"
        tools:ignore="GoogleAppIndexingWarning">
        <activity
            android:name="com.google.androidbrowserhelper.trusted.LauncherActivity">

           <!-- Edit android:value to change the url opened by the Trusted Web Activity -->
           <meta-data
               android:name="android.support.customtabs.trusted.DEFAULT_URL"
               android:value="https://airhorner.com" />

           <!-- This intent-filter adds the Trusted Web Activity to the Android Launcher -->
           <intent-filter>
               <action android:name="android.intent.action.MAIN" />
               <category android:name="android.intent.category.LAUNCHER" />
           </intent-filter>

           <!--
             This intent-filter allows the Trusted Web Activity to handle Intents to open
             airhorner.com.
           -->
           <intent-filter>
               <action android:name="android.intent.action.VIEW"/>
               <category android:name="android.intent.category.DEFAULT" />
               <category android:name="android.intent.category.BROWSABLE"/>

               <!-- Edit android:host to handle links to the target URL-->
               <data
                 android:scheme="https"
                 android:host="airhorner.com"/>
           </intent-filter>
        </activity>
    </application>
</manifest>

XML に追加されるタグは、標準の Android アプリマニフェストです。Trusted Web Activity のコンテキストについては、次の 2 つの関連情報があります。

meta-data タグは、Trusted Web Activity で開く URL を示します。android:value 属性は、開く PWA の URL に変更します。この例では、https://airhorner.com です。
2 つ目の intent-filter タグを使用すると、Trusted Web Activity は https://airhorner.com を開く Android インテントをインターセプトできます。data タグ内の android:host 属性は、Trusted Web Activity によって開かれるドメインを指している必要があります。

次のセクションでは、Digital AssetLinks を設定して、ウェブサイトとアプリの関係を確認し、URL バーを削除する方法について説明します。

URL バーを削除する

Trusted Web Activity では、URL バーを削除するために Android アプリとウェブサイト間の関連付けを確立する必要があります。

この関連付けはデジタルアセットリンクを使用して作成されます。関連付けは、アプリからウェブサイトへのリンクとウェブサイトからアプリの両方にリンクする必要があります。

アプリでウェブサイト検証を設定し、デバッグのためにウェブサイト間の検証をスキップするように Chrome を設定できます。

アプリからウェブサイトへの関連付けを行う

文字列リソースファイル app > res > values > strings.xml を開き、以下の Digital AssetLinks ステートメントを追加します。

<resources>
    <string name="app_name">AirHorner Trusted Web Activity</string>
    <string name="asset_statements">
        [{
            \"relation\": [\"delegate_permission/common.handle_all_urls\"],
            \"target\": {
                \"namespace\": \"web\",
                \"site\": \"https://airhorner.com\"}
        }]
    </string>
</resources>

Trusted Web Activity によって開かれたスキーマとドメインと一致するように、site 属性の内容を変更します。

Android アプリマニフェストファイル AndroidManifest.xml に戻り、新しい meta-data タグを追加してステートメントにリンクします。ただし、今回は application タグの子として行います。

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.twa.myapplication">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <meta-data
            android:name="asset_statements"
            android:resource="@string/asset_statements" />

        <activity>
            ...
        </activity>

    </application>
</manifest>

これで、Android アプリからウェブサイトまでの関係が確立されました。ウェブサイトとアプリケーションの検証を作成せずに、関係のこの部分をデバッグすると便利です。

開発用デバイスでテストする方法は次のとおりです。

デバッグモードを有効にする

開発デバイスで Chrome を開き、chrome://flags に移動し、[root 権限のないデバイスでコマンドラインを有効にする] という項目を検索して [有効] に変更し、ブラウザを再起動します。
次に、オペレーティングシステムのターミナルアプリで、Android Debug Bridge（Android Studio と一緒にインストール）を使用して、次のコマンドを実行します。

adb shell "echo '_ --disable-digital-asset-link-verification-for-url=\"https://airhorner.com\"' > /data/local/tmp/chrome-command-line"

Chrome を閉じて、Android Studio からアプリを再起動します。アプリが全画面表示されます。

ウェブサイトからアプリへの関連付けを行う

関連付けを作成するには、アプリから次の 2 つの情報を収集する必要があります。

Package Name: 最初の情報はアプリのパッケージ名です。これはアプリの作成時に生成されたパッケージ名と同じです。モジュール build.gradle 内の Gradle Scripts > build.gradle (Module: app) 内にあり、applicationId 属性の値です。
SHA-256 フィンガープリント: Android アプリを Play ストアにアップロードするには、署名する必要があります。同じ署名が、アップロード鍵の SHA-256 フィンガープリントを通じてウェブサイトとアプリ間の接続を確立するためにも使用されます。

Android のドキュメントでは、Android Studio を使用して鍵を生成する方法が詳しく説明されています。次のステップで必要になるため、キーストアのパス、エイリアス、パスワードをメモしておきます。

次のコマンドで keytool を使用して SHA-256 フィンガープリントを抽出します。

keytool -list -v -keystore [path] -alias [alias] -storepass [password] -keypass [password]

SHA-256 フィンガープリントの値が [証明書] フィンガープリントセクションに出力されます。出力の例を次に示します。

keytool -list -v -keystore ./mykeystore.ks -alias test -storepass password -keypass password

Alias name: key0
Creation date: 28 Jan 2019
Entry type: PrivateKeyEntry
Certificate chain length: 1
Certificate[1]:
Owner: CN=Test Test, OU=Test, O=Test, L=London, ST=London, C=GB
Issuer: CN=Test Test, OU=Test, O=Test, L=London, ST=London, C=GB
Serial number: ea67d3d
Valid from: Mon Jan 28 14:58:00 GMT 2019 until: Fri Jan 22 14:58:00 GMT 2044
Certificate fingerprints:
   SHA1: 38:03:D6:95:91:7C:9C:EE:4A:A0:58:43:A7:43:A5:D2:76:52:EF:9B
   SHA256: F5:08:9F:8A:D4:C8:4A:15:6D:0A:B1:3F:61:96:BE:C7:87:8C:DE:05:59:92:B2:A3:2D:05:05:A5:62:A5:2F:34
Signature algorithm name: SHA256withRSA
Subject Public Key Algorithm: 2048-bit RSA key
Version: 3

両方の情報を参照できたら、アセットリンク生成ツールに移動し、フィールドに入力し、[ステートメントを生成] をクリックします。生成されたステートメントを URL /.well-known/assetlinks.json からコピーして、ドメインから提供します。

アイコンを作成する

Android Studio で新しいプロジェクトを作成すると、デフォルトのアイコンが表示されます。Android ランチャーでは、独自のアイコンを作成してアプリを他のアプリと差別化できます。

Android Studio には Image Asset Studio が含まれています。これは、アプリに必要な解像度や形状に合わせて適切なアイコンを作成するために必要なツールを提供します。

Android Studio 内で File > New > Image Asset に移動し、Launcher Icons (Adaptative and Legacy) を選択し、ウィザードの手順に沿ってアプリのカスタムアイコンを作成します。

署名済み APK の生成

ドメイン内に assetlinks ファイルを配置し、Android アプリで asset_statements タグを設定したら、次のステップは署名付きアプリの生成です。繰り返しになりますが、この手順は広く文書化されています。

出力 APK は、adb を使用してテストデバイスにインストールできます。

adb install app-release.apk

検証手順が失敗した場合は、Android Debug Bridge を使用して、OS のターミナルとテストデバイスを接続してエラーメッセージを確認できます。

adb logcat | grep -e OriginVerifier -e digital_asset_links

アップロード APK が生成されたら、アプリを Google Play ストアにアップロードできます。

スプラッシュ画面の追加

Chrome 75 以降、Trusted Web Activity はスプラッシュ画面に対応しています。スプラッシュ画面を設定するには、新しい画像ファイルと構成をプロジェクトに追加します。

Chrome 75 以降に更新し、最新バージョンの Trusted Web Activity サポートライブラリを使用してください。

スプラッシュ画面の画像の生成

Android デバイスには、さまざまな画面サイズとピクセル密度があります。スプラッシュ画面がすべてのデバイスで適切に表示されるようにするには、ピクセル密度ごとに画像を生成する必要があります。

ディスプレイ非依存ピクセル（dp または dip）の詳細な説明はこの記事では説明しませんが、例として 320x320 dp の画像を作成する方法があります。これは、任意の密度のデバイス画面で 2x2 インチの正方形を表し、mdpi 密度の 320x320 ピクセルに相当します。

そこから、他のピクセル密度に必要なサイズを導き出すことができます。以下は、ピクセル密度、基本サイズ（320x320 dp）に適用される乗数、結果となるピクセルサイズ、Android Studio プロジェクトで画像を追加する場所のリストです。

密度	調整因子	サイズ	プロジェクトの場所
mdpi（ベースライン）	1.0 倍速	320x320 ピクセル	/res/drawable-mdpi/
ldpi	0.75 倍速	240x240 ピクセル	/res/drawable-ldpi/
hdpi	1.5 倍	480x480 ピクセル	/res/drawable-hdpi/
xhdpi	2.0 倍速	640x640 ピクセル	/res/drawable-xhdpi/
xxhdpi	3.0 倍	960x960 ピクセル	/res/drawable-xxhdpi/
xxxhdpi	4.0 倍	1,280x1,280 ピクセル	/res/drawable-xxxhdpi/

アプリケーションを更新する

スプラッシュ画面の画像を生成したら、必要な構成をプロジェクトに追加します。

まず、content-provider を Android マニフェスト（AndroidManifest.xml）に追加します。

<application>
    ...
    <provider
        android:name="androidx.core.content.FileProvider"
        android:authorities="com.example.twa.myapplication.fileprovider"
        android:grantUriPermissions="true"
        android:exported="false">
        <meta-data
            android:name="android.support.FILE_PROVIDER_PATHS"
            android:resource="@xml/filepaths" />
    </provider>
</application>

次に、res/xml/filepaths.xml リソースを追加し、twa スプラッシュ画面へのパスを指定します。

<paths>
    <files-path path="twa_splash/" name="twa_splash" />
</paths>

最後に、meta-tags を Android マニフェストに追加して、LauncherActivity をカスタマイズします。

<activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity">
    ...
    <meta-data android:name="android.support.customtabs.trusted.SPLASH_IMAGE_DRAWABLE"
               android:resource="@drawable/splash"/>
    <meta-data android:name="android.support.customtabs.trusted.SPLASH_SCREEN_BACKGROUND_COLOR"
               android:resource="@color/colorPrimary"/>
    <meta-data android:name="android.support.customtabs.trusted.SPLASH_SCREEN_FADE_OUT_DURATION"
               android:value="300"/>
    <meta-data android:name="android.support.customtabs.trusted.FILE_PROVIDER_AUTHORITY"
               android:value="com.example.twa.myapplication.fileprovider"/>
    ...
</activity>

android.support.customtabs.trusted.FILE_PROVIDER_AUTHORITY タグの値が、provider タグ内の android:authorities 属性に定義された値と一致することを確認します。

LauncherActivity を透明にする

さらに、LauncherActivity に半透明のテーマを設定して、スプラッシュの前に白い画面が表示されることがないように、LauncherActivity を透明にします。

<application>
    ...
    <activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity"
              android:theme="@android:style/Theme.Translucent.NoTitleBar">
    ...
    </activity>
</application>

Google は、Trusted Web Activity を使ってどんなアプリを開発するのかを楽しみにしています。フィードバックがございましたら、@ChromiumDev にご連絡ください。