統合ガイド

信頼できるウェブ アクティビティの設定では、デベロッパーが 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 で、アクティビティの種類を選択するよう求められます。信頼できるウェブ アクティビティはサポート ライブラリから提供されるアクティビティを使用するため、[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 サポート ライブラリを入手する

プロジェクトに信頼できるウェブ アクティビティ ライブラリを設定するには、アプリケーション ビルドファイルを編集する必要があります。[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 を起動する

信頼できるウェブ アクティビティを設定するには、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 つあります。

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

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

URL バーを削除する

信頼できるウェブ アクティビティでは、Android アプリとウェブサイト間の関連付けを設定して、URL バーを削除する必要があります。

この関連付けは 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 アプリからウェブサイトへの関係が確立されました。ウェブサイトからアプリケーションへの検証を作成せずに、関係のこの部分をデバッグすると便利です。

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

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

  1. 開発用デバイスで Chrome を開き、chrome://flags に移動して、[Enable command line on non-rooted devices] という項目を検索し、[ENABLED] に変更してから、ブラウザを再起動します。
  2. 次に、オペレーティング システムのターミナル アプリで、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 アプリを Google 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

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

adb logcat | grep -e OriginVerifier -e digital_asset_links

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

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

Chrome 75 以降、信頼できるウェブ アクティビティでスプラッシュ画面がサポートされます。 スプラッシュ画面を設定するには、いくつかの新しい画像ファイルと構成をプロジェクトに追加します。

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

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

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

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

そこから、他のピクセル密度に必要なサイズを導き出すことができます。以下に、ピクセル密度、ベースサイズ(320 x 320 dp)に適用される乗数、生成されるサイズ(ピクセル単位)、Android Studio プロジェクトで画像が追加される場所を示します。

密度 調整因子 サイズ プロジェクトの場所
mdpi(ベースライン) 1.0 倍速 320x320 ピクセル /res/drawable-mdpi/
ldpi 0.75 倍速 240x240 ピクセル /res/drawable-ldpi/
hdpi 1.5 倍 480 x 480 ピクセル /res/drawable-hdpi/
xhdpi 2.0 倍 640x640 ピクセル /res/drawable-xhdpi/
xxhdpi 3.0 倍 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 までご連絡ください。