AABファイルとAPKファイルの違いは何ですか？

AAB（Android App Bundle）はGoogle Play向けの推奨フォーマットです。Google側で端末に最適化されたAPKが自動生成されるため、配布ファイルが軽量になります。APKは直接インストール可能な形式ですが、Play申請にはAABが推奨されています。

AIで作ったオセロゲームをスマホで遊べるようにするぞ｜TWA・Bubblewrap・AAB生成解説

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

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

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

この記事でできること

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

この記事はこんな人向け

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

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

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

①は第一回の記事でオセロゲーム作成済（第一回の記事はこちら）
②は第二回の記事でTWA環境構築済（第二回の記事はこちら）
③は第三回の記事でGitHub Pages公開済（第三回の記事はこちら）

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

本記事は、プログラミング経験がない人には少し敷居が高いかもしれません。私は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"
    }
  ]
}

書き換えポイント

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

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

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

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

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

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

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

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

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

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

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

#	セクション	質問	概要	実際の入力例	重要度
①	Web app details 1/5	`Domain`	PWAがホストされているドメイン（originのみ）	`https://ユーザ名.github.io`	◎
②	Web app details 1/5	`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`	キー単体のパスワード。必ず控えておくこと	（任意のパスワード）	◎

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

③ ビルドを実行する

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

bubblewrap build

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

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

AABとAPKの違い

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

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

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

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

スマホにインストール

APKで実機動作確認をする

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

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

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

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

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

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

FAQ

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

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

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

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

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

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

今後やりたいこと

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

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