この記事は、スマホでAIで作成したゲームをプレイしたい、ブラウザゲームをGoogle Playへ公開したいと考えている人向けです。

本記事を読みつつ、実際の作業を並行で行った場合、1時間以上要することもあると思いますので、その点はご容赦ください。

これまでの記事でHTMLオセロゲームの作成・TWA環境構築・GitHubへの公開まで完了しました。 次は、実際にスマホへアプリインストールを行います。

この記事でできること

  • AIで作ったHTMLゲームをAndroidアプリ化
  • スマホへ実際にインストール
  • Google Play公開用AAB生成
  • TWA + Bubblewrapの基本理解

この記事はこんな人向け

  • AIでゲームを作ってみたい人
  • HTMLゲームをスマホアプリ化したい人
  • Android Studioに触れてみたい人

スマホアプリ化の作業フロー、本記事の対象作業

シリーズ全体の流れをおさらいします。

本記事は④、⑤を対象としています。

本記事は、プログラミング経験がない人には少し敷居が高いかもしれません。 私はIT業界に長く身を置いていますが、それでも不明な用語等を都度調べながら実施しました。 可能な限り用語説明も行っておりますので、最後までお付き合いください。

スマホアプリ作成フロー

用語と役割は下表の通りです。（apkはaabの説明のために明記しています）

用語 役割
PWA Webサイトをアプリ風に動作させる技術
TWA PWAをAndroidアプリとして動作させる仕組み
Bubblewrap TWAアプリのビルドを支援するツール
APK Android端末へ直接インストール可能な実行ファイル形式（〜2021年頃まで主流）
AAB Google Play提出用のAndroid App Bundle形式（2021年夏頃から主流）
ビルド ソースコード（HTMLなど）をアプリとして動く形式のファイルに変換する作業のこと
manifest.json PWAの「Webサイトをスマホアプリっぽく動かすため設定ファイル」

manifest.jsonの作成、GitHubへのアップロード

Bubblewrapでビルド（アプリ化）を行う前に、絶対に欠かせない「下準備」があります。 それがmanifest.json（ウェブアプリマニフェスト）の作成と公開です。

Bubblewrapは実行時に、指定されたURLへアクセスしてこのファイルを読み取ります。 もしファイルが存在しなかったり、URLが間違っていたりすると、「Unexpected token '<', "<!DOCTYPE "... is not valid JSON」というエラーが出て止まってしまいます。

② manifest.json を作成する

テキストエディタを開き、以下の内容をコピーして manifest.json という名前で保存しましょう。

{ "name": "AIオセロゲーム", "short_name": "オセロ", "start_url": "/othello-game/index.html", "display": "standalone", "background_color": "#1a472a", "theme_color": "#ffffff", "icons": [ { "src": "icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "icon-512x512.png", "sizes": "512x512", "type": "image/png" } ] }
スマホアプリ作成_manifest.json画像

書き換えポイント

  • start_url：GitHub PagesのURLに合わせて変更してください（例：/リポジトリ名/index.html）。
  • icons：192pxと512pxの正方形PNG画像が必要です。ファイル名が実際の画像と一致しているか確認しましょう。

192pxと512pxの正方形PNG画像はAIにお願いして、作成してもらいましょう。

スマホアプリ作成_ChatGPTでAndroidアプリアイコン画像を生成している画面

③ index.html にリンクを追加する

ブラウザやBubblewrapがマニフェストを見つけられるよう、index.html の <head> 内に以下の1行を追記します。

<link rel="manifest" href="manifest.json">
スマホアプリ作成_index.htmlマニフェスト追加画面

④ GitHubへアップロード（デプロイ）する

作成した manifest.json と アイコン画像 を、GitHubリポジトリのルート（index.htmlと同じ階層）にアップロードします。 GitHubのブラウザ画面から直接ドラッグ＆ドロップでアップロードしてもOKです。

スマホアプリ作成_manifest.jsonをGitHubへアップロード画像

ここでURLの確認を行っておくと後続でエラーになるリスク削減につながります。

アップロード後、ブラウザで直接マニフェストのURL（例：https://ユーザー名.github.io/リポジトリ名/manifest.json）にアクセスしてみてください。
コードがそのまま表示されれば問題ありません。
もしGitHubの404エラー画面（HTML）が表示される場合は、ファイル名（大文字小文字）や階層を再確認しましょう。

TWAビルドパイプライン｜BubblewrapでAABを生成する

環境構築が終わっていれば、いよいよビルド（アプリファイルの生成）です。 TWAでは Bubblewrap というツールを使って、HTMLゲームをAndroidアプリ形式に変換します。

① プロジェクトを初期化する

コマンドプロンプト（またはターミナル）を開き、作業用フォルダへ移動します。 以下のコマンドを実行してプロジェクトを初期化します。

bubblewrap init --manifest https://ユーザー名.github.io/othello-game/manifest.json
スマホアプリ作成_Bubblewrap初期化開始画像

コマンド実行後、対話形式でいくつかの設定項目に答える必要があります。各項目の意味と答え方は以下の通りです。（2026年5月中旬時点）

重要度は、以下ぐらいを念頭に置いてください。
◎：よく考えることが必要/保存が必要、〇：少し考えましょう、空白：特に考えなくてよい

例：パッケージ名（com.ユーザ名.othello）は一度決めたら変更が困難です。 Google Play上での識別子になるため、慎重に決めましょう。

# セクション 質問 概要 実際の入力例 重要度
① Web app details
1/5		 Domain PWAがホストされているドメイン（originのみ） https://ユーザ名.github.io ◎
② URL path アプリ起動時に開くパス（ルートからの相対パス） /othello-game2/index.html ◎
③ Android app details
2/5		 Application name Google Playやアプリ情報画面に表示されるアプリ名 オセロゲーム ◎
④ Short name ホーム画面に表示される短い名前（12文字以内） オセロ 〇
⑤ Application ID Android固有の識別子（Package Name）。後から変更不可 com.ユーザ名.othello2 ◎
⑥ Starting version code アプリの内部バージョン番号。初回は 1 でOK 1
⑦ Display mode 画面表示モード。standaloneでブラウザUIを隠せる standalone 〇
⑧ Orientation 画面の向き。defaultで端末設定に従う default
⑨ Status bar color アプリ上部ステータスバーの色 #FFFFFF 〇
⑩ Launcher icons & splash
3/5		 Splash screen color 起動時のスプラッシュ画面の背景色 #1a472a 〇
⑪ Icon URL 512×512px以上のアイコン画像のフルURL https://ユーザ名.github.io/othello-game2/icon-512x512.png ◎
⑫ Maskable icon URL 丸型アイコン用。同じ画像でもOK（任意） https://ユーザ名.github.io/othello-game2/icon-512x512.png 〇
⑬ Optional Features
4/5		 Monochrome icon URL 通知アイコン用（任意）。空欄でもOK （空欄のままEnter）
⑭ Play Billing アプリ内課金が必要か。不要なら No No
⑮ Geolocation permission 位置情報が必要か。不要なら No No
⑯ Signing key
5/5		 Key store location キーストアファイルの保存先パス E:\temp\ai_game\android.keystore ◎
⑰ Key name キーのエイリアス名 android 〇
⑱ Create keystore? キーストアが存在しない場合に新規作成するか Yes ◎
⑲ First and Last names 署名者の名前（公開されない） trendsnews
⑳ Organizational Unit 部署名（任意） trendsnews
㉑ Password for Key Store キーストアのパスワード。必ず控えておくこと （任意のパスワード） ◎
㉒ Password for Key キー単体のパスワード。必ず控えておくこと （任意のパスワード） ◎

初期化が完了したら、下図のような画面となります。

スマホアプリ作成_Bubblewrap初期化完了画像

③ ビルドを実行する

初期化が完了したら、ビルドコマンドを実行します。パスワードを2回確認されるので、先ほど設定したパスワードを入力します。

bubblewrap build
スマホアプリ作成_Bubblewrapビルド完了画像

ビルドが成功すると、プロジェクトフォルダ内に以下のファイルが生成されます。

  • app-release-bundle.aab（Google Play申請用）
  • app-release-signed.apk（実機インストール確認用）

AABとAPKの違い

  • AAB（Android App Bundle）：Google Play申請に使う推奨フォーマット。Googleが端末に合わせて最適なAPKを生成してくれます。
  • APK：端末に直接インストールできる形式。動作確認に便利です。
スマホアプリ作成_app-release-bundle.aab画像

④ 署名（サイニング）について

ビルド時には署名（キーストア）が必要です。 Bubblewrap は初期化時に署名用のキーストアファイルを自動生成してくれます。

キーストアファイル（.keystore）は絶対に紛失しないでください。 紛失するとアプリの更新ができなくなります。 バックアップを必ず取っておきましょう。

スマホにインストール

APKで実機動作確認をする

生成されたapp-release-signed.apkを実機Androidスマホへ転送し、インストールして動作を確認します。

PCからスマホへのデータ転送手段はたくさんあるので、どの手段でも問題ありません。 今回、私はGoogleDriveを使用しました。先ほど作成されたAPKをGoogleDriveへアップロードします。

スマホアプリ作成_GoogleDriveへAPKアップロード画像

スマホ側からGoogleDriveにアクセスすると、先ほどのAPKが参照できるので、タップします。

Androidスマホの「設定 → セキュリティ → 提供元不明のアプリ」を有効にすると、 APKをインストールできます。確認後はオフに戻すことをおすすめします。

スマホアプリ作成_スマホ_APK選択画像

インストールするか確認されるので、インストールします。

スマホアプリ作成_スマホ_オセロゲームインストール開始画像

スマホのメジャーゲームやメジャーアプリの中にしれっとオセロゲームが追加されました。感慨深い。。。。

スマホアプリ作成_スマホ_ホーム画面オセロゲームアイコン追加画像

FAQ

AABとAPKはどちらを使えばいいですか？

Google Playへの申請にはAAB（Android App Bundle）が推奨されています。APKは動作確認用として利用しましょう。

アドレスバーが消えない場合はどうすればいいですか？

デジタルアセットリンク（assetlinks.json）の設定が正しくできているか確認してください。 原因としては、SHA256フィンガープリントの記載ミスや、ファイルの配置パスの間違いが多いです。

初心者でも本当にスマホアプリ作成できますか？

はい。私が初心者ですが、できました。BubblewrapやTWAの設定は難しく見えますが、手順通りに進めれば初心者でもAndroidアプリ化できます。

今後やりたいこと

シリーズを通じてスマホにインストールしてプレイすることができました。次はいよいよGooglePlayへの申請、公開を行いたいと考えています。

  • GooglePlayへの申請、公開
  • BGM・効果音の挿入
  • 広告（AdMob）の挿入