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

統合ガイド

André Cipriani Bandarra

信頼できるウェブアクティビティの設定では、デベロッパーが Java コードを作成する必要はありませんが、Android Studio が必要です。このガイドは Android Studio 3.3 を使用して作成されています。インストール方法に関するドキュメントをご覧ください。

Trusted Web Activity プロジェクトを作成する

Trusted Web Activities を使用する場合は、プロジェクトで API 16 以降をターゲットにする必要があります。

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

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

次のステップで、プロジェクトの構成を求めるメッセージが表示されます。各フィールドの簡単な説明は次のとおりです。

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

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

Trusted Web Activity サポートライブラリを入手する

プロジェクトで Trusted Web Activity ライブラリを設定するには、アプリケーションのビルドファイルを編集する必要があります。[Project Navigator] で [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 に、プロジェクトをもう一度同期するよう求めるメッセージが表示されます。[今すぐ同期] リンクをクリックして同期します。

Trusted Web Activity を起動する

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

Project Navigator で [app] セクションを開き、[manifests] を開いて、AndroidManifest.xml をダブルクリックしてファイルを開きます。

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

application タグに activity タグを挿入して、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 タグは、開く URL を Trusted Web Activity に指示します。android:value 属性を開く PWA の URL に変更します。この例では、https://airhorner.com です。
2 つ目の intent-filter タグを使用すると、信頼できるウェブアクティビティは https://airhorner.com を開く Android インテントをインターセプトできます。data タグ内の android:host 属性は、信頼できるウェブアクティビティによって開かれるドメインを参照する必要があります。

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

URL バーを削除する

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

この関連付けは Digital Asset Links を介して作成され、アプリからウェブサイトとウェブサイトからアプリの両方でリンクして、関連付けを確立する必要があります。

デバッグ目的で、アプリをウェブサイト検証に設定し、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 に移動して、[Enable command line on non-rooted devices] という項目を検索し、[ENABLED] に変更してから、ブラウザを再起動します。
次に、オペレーティングシステムのターミナルアプリケーションで、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 つの情報を収集する必要があります。

パッケージ名: 最初の情報はアプリのパッケージ名です。これは、アプリの作成時に生成されたパッケージ名と同じです。[Gradle Scripts] > [build.gradle (Module: app)] の モジュール build.gradle 内にも存在し、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

両方の情報を手に入れたら、assetlinks 生成ツールに移動し、フィールドに入力して [Generate Statement] をクリックします。生成されたステートメントをコピーし、ドメインの 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

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

adb logcat | grep -e OriginVerifier -e digital_asset_links

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

スプラッシュ画面を追加する

Chrome 75 以降、Trusted Web Activity でスプラッシュ画面がサポートされるようになりました。スプラッシュ画面は、プロジェクトに新しい画像ファイルと構成を追加することで設定できます。

必ず Chrome 75 以降に更新し、最新バージョンの Trusted Web Activity Support Library を使用してください。

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

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

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

そこから、他のピクセル密度に必要なサイズを導き出すことができます。以下に、画素密度、ベースサイズ（320x320dp）に適用される乗数、結果のサイズ（ピクセル単位）、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.0x	960x960 ピクセル	/res/drawable-xxhdpi/
xxxhdpi	4.0 倍	1,280 x 1,280 ピクセル	/res/drawable-xxxhdpi/

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

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

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

<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>

最後に、Android マニフェストに meta-tags を追加して 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>

デベロッパーが信頼できるウェブアクティビティで何を構築するか、楽しみにしています。フィードバックをお送りいただくには、@ChromiumDev までお問い合わせください。