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

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

前回、AIを使ってHTML版オセロゲームを作成してみました。しかし実際に作ってみると、次にやりたくなるのはやはりスマホ対応です。

「普段遊んでいるスマホゲームはどういった工程を経て、GooglePlayからインストールできるんだろう？」 そう疑問に思ったので、ならやってみよう！となりました。

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

現在のゲームの主戦場はブラウザというよりスマホですよね。

また、以下のことを考えて、スマホアプリ化を目指しました。

  • スマホアプリが世に公開されるまでの手番を把握したいため
  • 将来的に作成してみたいRPGもスマホをイメージしているため
  • 家族や知人にゲームプレイしてもらうのにスマホがお手軽と考えたため

本記事は、プログラミング経験がない人には少し敷居が高いかもしれません。 ただあまり難しく考える必要はありません。何らかの目的のためにパソコンやスマホにアプリをインストールしたりすることありますよね？ その作業が行っていると考えてください。専門用語も多少でてきますが、理解が困難な内容はないと思います。

大きな流れは下図のようになります。

①は前回の記事でオセロゲーム作成済（前回記事はこちら）となります。

本記事は②を対象としています。

スマホアプリ作成フロー

TWAとは？

TWA公式情報は Trusted Web Activity（Google Developers） となります。

正直、最初は 「Webサイトをスマホアプリ化ってどういうこと？」、「TWAってなに？」 という状態でした。

TWA（Trusted Web Activity）は、 HTML・JavaScriptで作成したWebアプリやゲームを、 「Androidアプリとして動かす」 ための仕組みです。

Google公式技術の1つであり、 個人開発のブラウザゲームやPWA（Progressive Web App）を PlayStore公開したい場合によく利用されています。

スマホゲーム制作者におすすめな理由

  1. HTMLゲームをAndroidアプリ化できる
    普段ブラウザで動いているゲームを、Androidアプリとしてインストール可能な形へ変換できます。
  2. Web技術だけで開発できる
    HTML・CSS・JavaScriptベースでアプリ公開を目指せます。
  3. PlayStore公開が可能（重要）
    GitHub Pagesなどへ公開したWebゲームを、APK / AAB化してGoogle Playへ申請できます。
  4. 更新が簡単
    ゲーム本体はWeb側に存在するため、軽微な修正であればアプリ再配布なしで更新可能です。

Android Studio のインストール

まずは、Androidアプリ開発に必要となるAndroid Studioをインストールします。

TWA（Trusted Web Activity）では、APK生成・実機テスト・署名作業などでAndroid Studio を利用します。

Android Studio は Google公式の開発ツールです。基本的に無料で利用できます。

以下のGoogle公式ページへアクセスします。

Android Studio 公式ページ

ページを開いたら、「Download Android Studio」 ボタンを押します。

Windows・Mac・Linux それぞれ対応版があります。
自分のOSに合ったものを選択してください。

スマホアプリ作成_TWA Android Studio画像

② インストーラーを実行

ダウンロードしたインストーラーを起動します。

基本的に、「Next」→「Next」→「Install」の流れで問題ありません。

JDK（Java開発環境）の確認

次に、TWAビルドで必要になるJDK（Java Development Kit）が利用可能か確認していきます。

Android StudioにはJava環境が同梱されている場合も多いため、まずは「すでに利用可能か確認する」作業から始めます。

無理に新しいJavaをインストールする必要はありません。
確認 → 問題なければそのまま利用するという流れがおすすめです。

① コマンドプロンプトを開く

Windowsの場合は、スタートメニューから「cmd」または「コマンドプロンプト」と検索して起動します。

Windows Terminal や PowerShell でもOKです。

② Javaバージョン確認コマンドを実行

以下コマンドを入力します。 

java -version

Enterキーを押してください。

③ バージョン表示されればOK

下図のような表示が出れば、Java環境は利用可能です。

スマホアプリ作成_JDK確認画像

または、「java version "17"」のような表示でも問題ありません。

TWA + Android Studio 環境では、Java 17 前後が利用されることが多いです。

④ エラーが出る場合

以下のようなエラーが表示された場合は、 Java環境が認識されていません。

'java' は、内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチ ファイルとして認識されていません。

この場合は、JDKを導入する必要があります。

⑤ Android Studio 同梱JDK の確認

Android Studioには、JDKが内蔵されている場合があります。

Android Studio を開き、以下を確認します。

File ↓ Settings ↓ Build, Execution, Deployment ↓ Build Tools ↓ Gradle

「Gradle JDK」にバージョンが表示されていれば、Android Studio側ではJava利用可能です。

近年のAndroid Studioは、自動的にEmbedded JDKを利用するケースが多いです。

⑥ JDKを新規インストールする場合

Java未導入だった場合は、OpenJDK または Oracle JDK を導入します。

初心者向けには、OpenJDK系の利用がおすすめです。

代表例：

  • Microsoft Build of OpenJDK
  • Eclipse Temurin
  • Oracle JDK

Javaのバージョンが古すぎると、 Gradleビルドエラーの原因になる場合があります。

Java 17 系を利用すると比較的安定しやすいです。

この時点では、「Javaが利用できる状態か確認できた」程度でOKです。

Node.js の導入

次は、TWA生成ツールBubblewrapを利用するために、Node.js を導入していきます。

Bubblewrap は npm（Node Package Manager）経由でインストールするため、Node.js 環境が必要になります。

Node.js は、JavaScriptをPC上で動かすための実行環境です。 Web開発系では非常によく使われています。

① Node.js 公式サイトへアクセス

まずは公式サイトへアクセスします。

Node.js 公式サイト

トップページには複数バージョンが表示されますが、基本的にはLTS版を選択してください。

LTS（Long Term Support）は、 長期サポート版のことです。

安定性重視のため、TWA環境ではこちらがおすすめです。

スマホアプリ作成_Node.jsサイト

② インストーラーを実行

ダウンロードしたインストーラーを起動します。

基本的に、「Next」を押して進めればOKです。特別な設定変更は不要です。

インストール途中で「Add to PATH」のような項目が表示される場合は、有効のまま進めてください。

これが無効だと、コマンドが認識されない場合があります。

③ Node.js が導入されたか確認

インストール完了後、 コマンドプロンプトを開きます。

以下コマンドを入力してください。 

node -v

以下のような表示が出れば成功です。

スマホアプリ作成_Node.js確認画像

数字部分は異なっていても問題ありません。

④ npm の確認

Node.js を導入すると、npm（Node Package Manager）も自動的に利用可能になります。

以下コマンドを入力してください。 

npm -v

バージョン番号が表示されればOKです。

スマホアプリ作成_npm確認画像

npm は、JavaScript系ツールをインストールするための管理ツールです。

Bubblewrap も npm 経由で導入します。

⑤ エラーが出る場合

以下のようなエラーが表示される場合があります。

'node' は、内部コマンドまたは外部コマンド、 操作可能なプログラムまたはバッチ ファイルとして認識されていません。

この場合は、PATH設定が反映されていない可能性があります。

  • PC再起動
  • コマンドプロンプト再起動
  • Node.js 再インストール

で解決するケースが多いです。

⑥ npm が古い場合（任意）

必須ではありませんが、npm を最新版へ更新することも可能です。 

npm install -g npm

ただし、初心者のうちは無理に更新しなくても問題ありません。

⑦ Node.js は今後かなり使う

今回は Bubblewrap 用として利用しますが、Node.js は他のWeb開発等でも利用頻度が高いので、その点は認識しておくと良いかと思います。

Bubblewrap のインストール

Node.js の準備ができたら、次は Google公式のTWA生成ツールBubblewrapをインストールしていきます。

Bubblewrap を利用すると、WebアプリやHTMLゲームをAndroidアプリ化するためのプロジェクトを自動生成できます。 Trusted Web Activity（TWA）向けに設計されているため、個人開発でも安心して利用できます。

非公式ツールや古い解説記事では、古い build.gradle 設定が紹介されている場合があります。できるだけ Bubblewrap ベース構築がおすすめです。

TWA開発では、Bubblewrap がほぼ標準ツールとして利用されています。

① コマンドプロンプトを開く

まずは、コマンドプロンプトを起動します。

Windowsなら、スタートメニューから「cmd」と検索すればOKです。

PowerShell や Windows Terminal でも利用可能です。

② Bubblewrap をインストール

以下コマンドを入力してください。 

npm install -g @bubblewrap/cli

Enterキーを押すと、インストールが開始されます。

初回は数分かかる場合があります。

npm関連メッセージが大量表示されても正常です。

スマホアプリ作成_Bubblewrapインストール画像

③ インストール確認

インストール完了後、以下コマンドを実行します。 

bubblewrap --version

バージョン番号が表示されれば成功です。 

1.22.3

数字部分は異なっていても問題ありません。

スマホアプリ作成_Bubblewrapバージョン確認画像

④ bubblewrap コマンドが認識されない場合

以下のようなエラーが出る場合があります。

'bubblewrap' は、内部コマンドまたは外部コマンド、 操作可能なプログラムまたはバッチ ファイルとして認識されていません。

この場合は、npm の PATH が反映されていない可能性があります。

  • コマンドプロンプト再起動
  • PC再起動
  • Node.js 再インストール

で改善するケースがあります。

Windowsでは、再起動だけで解決することもかなり多いです。

⑤ npm グローバルインストールとは？

今回のコマンドでは、-gを付けています。 

npm install -g @bubblewrap/cli

この「-g」は、グローバルインストールを意味します。

PC全体で bubblewrap コマンドを使えるようにする設定です。

毎回フォルダ移動せず利用できるため、TWA開発では通常こちらを使用します。

⑥ Bubblewrap でできること

Bubblewrap を使うと、以下のような作業を半自動化できます。

  • TWAプロジェクト生成
  • AndroidManifest 自動生成
  • APK / AAB ビルド
  • PlayStore向け設定
  • 署名設定補助

手作業でAndroidプロジェクトを作るより、かなり簡単になります。

Androidエミュレータでの確認

TWAプロジェクト生成後は、実際にAndroid上で正常動作するか確認していきます。

Androidスマホ実機でも確認可能ですが、今回はAndroid Emulator（エミュレータ）を利用して、 PC上で動作確認を行います。

Android Emulator を利用すると、実機がなくても Androidアプリ確認が可能です。

① Android Studio を起動

まずは Android Studio を起動します。

Bubblewrapで生成したプロジェクトを「Open」から開いてください。

初回は Gradle同期が始まるため、数分程度待つ場合があります。

② Device Manager を開く

Android Studio 上部メニューから、 Device Manager を開きます。

スマホアプリ作成_Androidエミュレータ_Device Manager起動画像
Tools ↓ Device Manager

右側にエミュレータ管理画面が表示されます。

③ 新しい仮想端末を作成

「Create Device」ボタンを押します。

スマホアプリ作成_Androidエミュレータ_CreateDevice画像

端末一覧が表示されるので、好きな機種を選択します。

私は自身のスマホがPixelなので、Pixelを選択しています。

スマホアプリ作成_Androidエミュレータ_端末一覧画像

④ Android バージョンを選択

次に、Androidイメージを選択します。>基本的に、最新安定版を選べばOKです。

「Download」表示がある場合は、Androidシステムイメージ未導入です。

数GBダウンロードされる場合があり、時間を要する場合があります。完了すると下図のような画面が表示されますので、「Finish」ボタンを押下して、作成完了です。

スマホアプリ作成_Androidエミュレータ_作成完了画像

⑤ エミュレータ起動

作成完了後、Device Manager の▶ボタンを押すと起動します。Android端末画面がPC上に表示されれば成功です。

スマホアプリ作成_Androidエミュレータ_起動開始画像

初回起動はかなり時間がかかることがあります。

スマホアプリ作成_Androidエミュレータ_起動完了画像

⑥ TWAアプリを実行

Android Studio 上部の▶ Run ボタンを押します。スマホ画面が表示されたら、HOMEのオセロアイコンからゲームを起動します。

正常なら、Webアプリが Androidアプリ風に起動します。

スマホアプリ作成_Androidエミュレータ_アプリ起動画像

⑦ 確認しておきたいポイント

以下をチェックしておくと安心です。

  • 画面サイズ崩れ
  • タップ操作
  • スクロール動作

特にスマホUI崩れは、PCブラウザでは気付きにくいため重要です。

⑧ よくあるエラー

エミュレータが重い

PCスペック不足や、仮想化設定が原因の場合があります。

  • 不要ソフトを閉じる
  • RAM割り当てを減らす
  • 軽量端末を選ぶ

などで改善する場合があります。

TWAは HTTPS必須です。

http:// のままだと正常動作しません。

以上で、TWA環境構築は完了です。

FAQ

GitHub Pagesは無料ですか？

はい。HTMLサイトを無料で公開可能です。個人ゲーム制作との相性が非常に良いです。

PWAとは何ですか？

Webサイトをアプリのように扱える技術です。ホーム画面追加や全画面表示が可能になります。

初心者でも本当にできますか？

はい。私が初心者ですが、できました。

今後やりたいこと

やってみたいことがたくさんあり過ぎて困りますね。（笑）

  • ③〜⑥のスマホアプリ化対応（PWA化など）
  • BGM・効果音の挿入
  • 広告の挿入
  • GooglePlayへの登録