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

1. ようこそ

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

学習内容

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

必要な予備知識

必要なもの

保証の対象外

2. PWA をバブルラップする

Bubblewrap は、プログレッシブ ウェブアプリを Android App Bundle にラップする作業を、いくつかの CLI コマンドを実行するのと同じくらい簡単にするツールです。これは、PWA を信頼できるウェブ アクティビティとして起動する Android プロジェクトを生成することで実現されます。

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

$ mkdir my-pwa && cd my-pwa

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

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

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

Bubblewrap CLI ウィザード。airhorner からの初期化を示しています。ドメインは example.com でオーバーライドされ、スタート URL はオーバーライドされています。

署名鍵

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

Bubblewrap は、アプリケーションの作成時に鍵のパスを尋ねます。アプリケーションに既存の Google Play ストアの掲載情報を使用している場合は、その掲載情報で使用されている鍵と同じ鍵のパスを追加する必要があります。

Bubblewrap CLI ウィザードで、ユーザーの既存の署名鍵の場所と名前を尋ねています。

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

Bubblewrap CLI ウィザードで、新しい署名鍵を作成するかどうかをユーザーに尋ねています。

Bubblewrap の出力

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

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

これらのファイルがあれば、Android アプリケーション バンドルをビルドするために必要なものがすべて揃います。

Android App Bundle をビルドする

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

$ bubblewrap build

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

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

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

3. 試してみる - Bubblewrap

それでは、実際に試してみましょう。前のステップで学習した内容を使用して、次のことを試してください。

  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 の [アプリの作成] フォームが表示されている画面。

アプリ名、デフォルトの言語、アプリとゲームのどちらであるか、無料か有料か、申告など、入力するフィールドがいくつかあります。宣言に同意しないとアプリを作成できないため、同意する前に必ずお読みになり、内容を理解してください。

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

内部テストを設定する

内部テストは、審査を受けずに、選択した信頼できるテスターのグループにアプリを迅速にリリースするのに最適な方法です。[今すぐテストを開始] チェックリストでタスクを確認し、[テスターを選択] を選択します。

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

そのタスクをクリックすると、[内部テスト] ページに移動します。ここで、アプリのテスト設定を管理します。サイドバーの [リリース] メニューにある [テスト] セクションを開くと、このページに再び移動できます。まず、アプリをテストするテスターのメーリング リストを作成します。そのためには、ページの [テスター] セクションにある [メーリング リストを作成] リンクをクリックします。ポップアップが開き、メールリストを作成できます。

メールリストの作成フォームが表示されたポップアップ。リスト名、メールアドレス、メールアドレスの CSV ファイルをアップロードするリンク、アップロードされたメールアドレスを表示する領域が含まれています。

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

[内部テスト] ページ。[新しいリリースを作成] ボタンが矢印で指し示されています。

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

[新しいリリースを作成する] ボタンをクリックすると、いくつかのセクションが表示されます。1 つ目の [アプリの完全性] では、アプリの署名鍵の管理方法を選択します。デフォルトのオプションは、Google に署名鍵の管理を任せることです。このオプションは、セキュリティが確保され、アップロード鍵を紛失した場合でもアプリを復元できるため、推奨されています。

Play アプリ署名

左から右に、デベロッパーとそのアップロード鍵がアプリに署名して Google に送信する様子を示すフローチャート。Google はアプリ署名鍵を取得し、その鍵でアプリに署名してユーザーに配信します。

アプリのアップロードと最終確認

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

内部テストのページ。テスターとテストリンクを共有するための [リンクをコピー] リンクを指す矢印が表示されています。

5. 試してみる - アプリを作成する

それでは、実際に試してみましょう。前のステップで学習した内容を使用して、次のことを試してください。

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

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

Google Play で PWA をテストしたときに、全画面表示で実行されないことに気づくかもしれません。これは、Digital Asset Links ファイルを使用してサイトの所有権をまだ確認していないためです。Bubblewrap は Android アプリケーション バンドルを構成してビルドできますが、ウェブ アプリケーションを更新してリンクを完了する必要があります。

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

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

Play アプリ署名を使用する場合

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

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

Play アプリ署名を使用しない場合

Play アプリ署名を無効にした場合、最終的なアプリの署名に使用される鍵は、アプリを Google 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 を Bubblewrap でラップするで作成した同じディレクトリ内で次のコマンドを実行します。<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

Jack は、QA チームに PWA Android アプリのテストを依頼しようとしています。Jack は、Android App Bundle を内部テストトラックに ______ します。

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

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

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

9. 理解度テスト - 回答

知識チェックの質問の答え

  1. Bubblewrap で Android プロジェクトを生成した後、サリーは生成された ______ ファイルをバージョン管理システムにコミットし、必要に応じて再ビルドできるようにします。
  2. Jack は、QA チームに PWA Android アプリをテストしてもらおうとしています。彼は Android App Bundle を内部テストトラックに ______ します。
  3. Oogie Boogie の PWA Android アプリが全画面表示で実行されていません。この問題を解決するには、______ の SHA-256 証明書フィンガープリントを取得し、PWA と同じオリジンにある ______ の Digital Asset Links ファイルにアップロードします。

10. 完了

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

準備ができたら、次の手順を試してみてください。

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