プログレッシブ ウェブアプリを Google Play に追加する

1. ようこそ

このラボでは、デプロイした既存のプログレッシブ ウェブアプリをアプリにラップして、Google Play ストアでの配信に使用します。

学習内容

  • Bubblewrap を利用して Google の Play ストア向けのプログレッシブ ウェブアプリをパッケージ化する方法
  • 署名鍵の概要と使用方法
  • Google Play Console で新しいアプリを作成し、公開前にアプリをテストするテストリリースの設定方法
  • デジタル アセット リンクの概要とウェブサイトに追加する方法

必要な予備知識

必要なもの

保証の対象外

2. PWA のバブルラッピング

Bubblewrap は、いくつかの CLI コマンドを実行するのと同じくらい簡単に、プログレッシブ ウェブアプリを Android App Bundle にラップするためのツールです。これを行うために、PWA を Trusted Web Activity として起動する Android プロジェクトを生成します。

まず、プロジェクトを配置するディレクトリを作成し、そのディレクトリに移動します。

$ mkdir my-pwa && cd my-pwa

次に、Bubblewrap コマンドライン ツールを実行して、Play にアップロードする Android App Bundle の設定と Android プロジェクトを生成します。

$ bubblewrap init --manifest=https://my-pwa.com/manifest.json

ここでは、Bubblewrap は PWA のウェブアプリ マニフェスト ファイルの場所で初期化されています。これにより、ウェブアプリ マニフェストからデフォルトの構成が生成され、そのデフォルトの設定を変更できるコンソール内ウィザードが起動します。ツールによって生成される値を変更するには、ウィザードに従います。

ドメインが example.com でオーバーライドされ、開始 URL がオーバーライドされた、Airhorner からの初期化が表示されたバブルバブル CLI ウィザード。

署名鍵

Google Play ストアでは、アプリ パッケージをアップロードする際に、証明書（デジタル署名鍵とも呼ばれます）を使用してデジタル署名する必要があります。この証明書は自己署名証明書であり、HTTPS 経由でアプリケーションを配信する場合とは異なる証明書です。

Bubblewrap はアプリケーションの作成時にキーのパスを要求しますアプリで Play ストアの掲載情報をすでにご利用の場合は、その掲載情報と同じキーへのパスを追加する必要があります。

ユーザーの既存の署名鍵の場所と名前を要求するバブルラップ CLI ウィザード

既存の署名鍵がなく、Play ストアで新しい掲載情報を作成する場合は、Bubblewrap で提供されるデフォルト値を使用して新しい鍵を作成できます。

新しい署名鍵を作成するかどうかをユーザーに尋ねるバブル ラップ CLI ウィザード。

バブルラップ出力

Bubblewrap プロジェクトを初期化し、ウィザードを完了すると、次の項目が作成されます。

  • twa-manifest.json - Bubblewrap ウィザードで選択した値を反映したプロジェクト設定。必要に応じてこのファイルを Bubblewrap プロジェクト全体を再生成する際に使用できるため、バージョン管理システムでこのファイルを追跡してください。
  • Android プロジェクト ファイル - ディレクトリの残りのファイルは、生成された Android プロジェクトになります。このプロジェクトは、Bubblewrap ビルドコマンドに使用されるソースです。これらのファイルは、バージョン管理システムでもトラッキングできます。
  • （省略可）署名鍵 - Bubblewrap が署名鍵を作成するように選択した場合、鍵はウィザードに記載された場所に出力されます。鍵を安全な場所に保管して、アクセス可能なユーザーの数を制限してください。鍵は Play ストアでアプリが提供したことを証明するために使われます。

これらのファイルのおかげで、Android App Bundle のビルドに必要なものがすべて揃っています。

Android App Bundle をビルドする

Bubblewrap の初期化コマンドを実行したのと同じディレクトリで、次のコマンドを実行します（署名鍵のパスワードが必要です）。

$ bubblewrap build

プロジェクトをビルドし、署名鍵のパスワードを要求して、さまざまなバージョンの Android アプリの世代を表示するための、Bubblewrap CLI の出力。

ビルドコマンドは、次の 2 つの重要なファイルを生成します。

  • app-release-bundle.aab - PWA の Android App Bundle。このファイルを Google Play ストアにアップロードします。
  • app-release- signed.apk - bubblewrap install コマンドを使用して、開発用デバイスにアプリを直接インストールするために使用できる Android のパッケージ化形式。

3. 試してみる - バブルラップ

次はあなたの番です。前のステップで学んだことを使って、次のことを試してみましょう。

  1. 生成された Android プロジェクトを格納するディレクトリを作成します。
  2. そのディレクトリを Bubblewrap と PWA のウェブアプリ マニフェストで初期化します。
  3. 新しい署名鍵を生成するか、既存の署名鍵を再利用します。
  4. 生成された Android プロジェクトから Android App Bundle をビルドします。

4. Google Play ストアにアプリを追加する

これで PWA 用の Android App Bundle が Google の Play ストアにアップロードされます。デベロッパー アカウントの登録が完了したら、Google Play Console に移動してログインできます。

アプリを作成する

ログインすると、すべてのアプリを含む画面が表示されます。上部に [アプリを作成] ボタンがあります。クリックすると、次の画面が表示され、新しい Android アプリのリスティングを作成できます。

Google Play Console の [アプリの作成] フォームが表示されている画面。

ここには、アプリ名、デフォルトの言語、アプリかゲームか、無料か有料か、宣言など、さまざまな項目があります。宣言に同意せずにアプリを作成することはできないため、同意する前に内容を読み、理解しておくことが重要です。

すべての情報を記入して、フォームの下部にある [Create app] ボタンをクリックすると、新しいアプリのダッシュボードに移動します。ダッシュボードには、アプリの設定、テストの開始、リリースを行うために完了する必要があるタスクのチェックリストが表示されます。

内部テストをセットアップする

内部テストは、選択した Trusted Tester のグループに対して審査を受けることなく、迅速にアプリをリリースする優れた方法です。[今すぐテストを開始] チェックリストのタスクを表示して、[テスターを選択] を選択します。

今すぐテストを開始するためのチェックリスト

そのタスクをクリックすると、[Internal Testing] ページが表示されます。ここでアプリのテストの設定を管理します。サイドバーの [リリース] メニューの下にある [テスト] を開くと、テスト環境にもう一度移動できます。まず、アプリをテストするテスターのメーリング リストを作成します。作成するには、ページの [テスター] で [メーリング リストを作成] をクリックします。ポップアップが開き、メーリング リストが作成されます。

メーリング リスト フォーム。リスト名、メールアドレス、メールアドレスの CSV ファイルをアップロードするリンク、アップロードしたメールアドレスを示すエリアが表示されます。

このポップアップでは、メーリング リストに名前を付け、メールアドレスを手動で入力するか、または使用するメールアドレスの CSV をアップロードします。完了したら、[変更を保存] ボタンを押します。すでに作成済みのメーリング リストに戻り、必要に応じてメールアドレスを追加または削除できます。テスターを追加したら、テスト版リリースを作成します。ページの上部にある [新しいリリースを作成] ボタンをクリックします。

[新しいリリースを作成] を指す矢印が付いた内部テストページ。

テストリリースを作成する

[新しいリリースを作成] ボタンをクリックすると、いくつかのセクションが表示されます。1 つ目の [App Integrity] では、アプリの署名鍵を管理する方法を選択します。デフォルトのオプションは、Google が署名鍵を管理することを許可するオプションです。これは、安全であり、アップロード鍵を紛失した場合にアプリが回復可能な状態を保つため推奨されるオプションです。

Play アプリ署名

デベロッパーとアップロード鍵（左から順に、アプリに署名して Google に送信するキー）を示すフローチャート。次に、Google がアプリ署名鍵を作成し、その鍵でアプリに署名してユーザーに渡します。

アプリのアップロードとファイナライズ

署名鍵の管理方法を選択すると、App Bundle をリリースにアップロードするように求められます。これを行うには、Bubblewrap が生成した app-release-bundle.aab ファイルをフォームにドラッグ&ドロップします。リリースを確定するには、残りのリリースの詳細を入力して [保存]、[レビューのレビュー]、そして最後に [内部テストへの公開を開始] ボタンをクリックしてリリースを開始します。これで、内部テスターがアプリを利用できるようになります。[Internal Testing] ページの [テスター] タブに戻り、テスターと共有するリンクをコピーして、テスターがアプリにアクセスできるようにします。

内部テストページ。矢印の付いたコピーリンクが指し、テストリンクをテスターと共有します。

5. 演習 - アプリを作成する

次はあなたの番です。前のステップで学んだことを使って、次のことを試してみましょう。

  1. Google Play Console で PWA 用の新しいアプリを作成します。
  2. アプリの内部テストを設定し、自分をテスターとして追加します。
  3. App Bundle をアップロードして、アプリのテスト版リリースを作成します。
  4. テストリンクを使用して、Android または Chrome OS デバイスの Play ストアからアプリをインストールします。

6. デジタル アセット リンク

Play で PWA をテストする場合、全画面表示で実行されないことがあります。これは、デジタル アセット リンク ファイルを通してサイトの所有権をまだ確認していないためです。Bubblewrap は Android App Bundle の設定とビルドが可能ですが、ウェブ アプリケーションを更新してリンクを完成させる必要があります。

アプリの SHA-256 フィンガープリントを取得する

PWA のデジタル アセット リンクを設定するには、ユーザーがスマートフォンで受け取るパッケージへの署名に使用される証明書に SHA-256 フィンガープリントが必要です。

Play アプリ署名

リリースを作成する際に（以前は推奨されていた）アプリの Play アプリ署名を設定した場合、SHA-256 のフィンガープリントは Play Console で確認できます。この証明書はアプリのアップロードに使用するものとは異なります。フィンガープリントを取得するには、Play Console 内で、アプリから [リリース - 設定 - アプリの完全性] に移動します。[アプリ署名鍵の証明書] にいくつかのオプションが表示されます。[SHA-256 証明書のフィンガープリント] の値をコピーします。

SHA-256 証明書のフィンガープリントがハイライト表示された [アプリの完全性] 画面。

Play アプリ署名なし

Play アプリ署名を無効にした場合、最終的なアプリへの署名に使用される鍵は、Play Console にアプリをアップロードする場合と同じ鍵になります。フィンガープリントは、Java の keytool を使用して抽出できます。

$ keytool -list -v \
    -keystore <keystore-file-path> \
    -alias <key-alias> \
    -keypass <key-password> \
    -storepass <store-password> | grep SHA256

$     SHA256: BD:92:64:B0:1A:B9:08:08:FC:FE:7F:94:B2...

使用するには、署名鍵へのパスと、関連するパスワードを知っておく必要があります。SHA256 鍵の 16 進数値をコピーします。

Bubblewrap は、取得した署名フィンガープリントを管理して適切なデジタル アセット リンク ファイルを生成できます。Bubblewrap を使用してフィンガープリントを追加するには、PWA のラッピング中に作成したディレクトリ内から次のコマンドを実行して、<fingerprint> を前の手順でコピーしたフィンガープリントに置き換えます。

$ bubblewrap fingerprint add <fingerprint>

このコマンドを実行すると、アプリのフィンガープリント リストにフィンガープリントが追加され、assetlinks.json ファイルが生成されます。このファイルを、PWA と同じオリジンの .well-known ディレクトリにアップロードします。

7. 試してみる - デジタル アセット リンク

次はあなたの番です。前のステップで学んだことを使って、次のことを試してみましょう。

  1. アプリの SHA-256 フィンガープリントを確認してください。
  2. アプリのデジタル アセット リンク ファイルを生成します。
  3. デジタル アセット リンク ファイルを PWA にアップロードします。
  4. API とテストアプリを使用して、デジタル アセット リンク ファイルが正しく設定されていることを確認します。

8. 理解度チェック

終了する前に、次の質問に答えて知識をテストし、学習した内容を確認してください。答えを覗き見ないでください！

Bubblewrap で Android プロジェクトを生成した後、生成された ______ ファイルはバージョン管理システムにコミットされるため、必要に応じて再ビルドできます。

twa-manifest.json 署名鍵 app-release-bundle.aab build.gradle

ジャックさんは QA チームによる PWA Android アプリのテストを希望しています。______ さんは、Android App Bundle を内部テストトラックに関連付けています。

uploads ビルドとアップロード リリース 署名とアップロード

Oogie Boogie の PWA Android アプリが全画面表示されていません。この問題を解決するには、______ の SHA-256 証明書のフィンガープリントを取得して、PWA と同じ生成元にある ______ にあるデジタル アセット リンク ファイルをアップロードします。

アップロード鍵、/.well-known/assetlinks.json アップロード鍵、/assetlinks.json 署名鍵、/.well-known/assetlinks.json 署名鍵、/assetlinks.json

9. 理解度チェック - 答え

Test Your Knowledge の解答

  1. Bubblewrap で Android プロジェクトを生成した後、生成された ______ ファイルはバージョン管理システムにコミットされるため、必要に応じて再ビルドできます。
  2. ジャックさんは QA チームによる PWA Android アプリのテストを希望しています。______ さんは、Android App Bundle を内部テストトラックに関連付けています。
  3. Oogie Boogie の PWA Android アプリが全画面表示されていません。この問題を解決するには、______ の SHA-256 証明書のフィンガープリントを取得して、PWA と同じ生成元にある ______ にあるデジタル アセット リンク ファイルをアップロードします。

10. 完了

これで、Google Play ストアに PWA を追加する方法を習得しました。

実際にお試しになる準備ができたら、以下のステップをご自身でお試しください。

よろしくお願いいたします。