ブラウザゲームをスマホアプリ化しよう 前提知識
この記事ではHTMLを通して公開しているブラウザゲームやWebコンテンツをAndroidアプリ、iOSアプリ化する方法を書いていく。Google PlayやApp Storeに公開することを目指しているのでブラウザ上からダウンロードして使うPWAアプリとは異なり、ハイブリットアプリという形式のアプリを制作する。
普段技術記事を書くときは「非エンジニアでもわかる内容にしよう」と心掛けていたのだが、今回は少し専門的になる可能性がある。
具体的にはHTML+JavaScriptで動作するようなフロントエンドで、かつ開発環境にNode.JSを使っている人向けなので、「Node.JSってなに？」という人は以下記事を読んでほしい。Node.JS環境でnpmコマンドが通るようであれば問題なくこの記事の内容を実行できるはずである。
ちなみに実際にブラウザゲームをスマホアプリ化した例を説明する。
きちんとスマホアプリらしく課金機能もリワード広告表示もできるようになっている。
ただ、Androidアプリの項目を見たらわかるのだが悲しいことにダウンロード数が+10程度と閑古鳥が鳴く結果になってしまった。
供養のためにも一度ダウンロードして遊んでもらえると嬉しい。スマホアプリは高速に制作できるようになったが、肝心の作ったアプリの宣伝方法が全然わからないことが最近の悩みである！
ヴァンサバ系 蛇ゲーム+ローグライトゲーム 蛇サバイバー
iOS
https://apps.apple.com/us/app/%E8%9B%87%E3%82%B5%E3%83%90%E3%82%A4%E3%83%90%E3%83%BC/id6742090934
Android
https://play.google.com/store/apps/details?id=com.hothukurou.snakesuvivor
地図内に五芒星発見アプリ 結界発見
iOS
https://apps.apple.com/us/app/%E7%B5%90%E7%95%8C%E7%99%BA%E8%A6%8B/id6746328052
Android
https://play.google.com/store/apps/details?id=com.hothukurou.barrier&hl=ja
Capacitorを使えばフロントエンドからAndroidアプリやiOSアプリを作成可能
capacitorはフロントエンドで動作するWebアプリをスマホアプリ化するプラグインだ。
このプラグインを用いるとAndroidアプリ用のプロジェクトフォルダを生成して、Android Studioで動作検証できるようになる。
Android StudioはAndroidアプリを生成するためのツールだ。これを用いてアプリファイルを生成すればGoogle Playで配信することができる。
はたまたiOSアプリを作るためのプロジェクトフォルダを生成してXCodeで動作検証できるようになる。もちろんApp Storeで配信ができる。
XCodeはiOSアプリを生成するためのツールなのだが、これはMac OS環境でのみ動作する。Mac OS環境がない人はどうにかして入手する必要がある点に注意が必要だ。
この記事で説明すること
この記事ではCapacitorを用いてフロントエンドWebアプリをAndroid Studioで起動できる状態にする方法を説明する。また、iOSアプリを作るツールであるXCodeで起動できる状態にする方法も説明する。
本当は、他にも説明したい点が多くあるのだが、これを全部書くと膨大な量になることがわかったので、早々にあきらめて、今回は基本的な部分にとどめた。
【今回説明すること】
・Node.JS環境で制作したWebアプリのフロントエンドをAndroidアプリ制作ツールのAndroid StudioやiOSアプリ制作ツールのXCodeで開けるプロジェクト構成に変更する方法
【今回説明しないこと】
・Android Studioの使い方やXCodeの使い方と実機検証方法
・Admobの広告表示の導入
・アクセス解析ツール導入
・アプリ内課金アイテムの実装方法
・Google Playでのアプリストア登録、App Storeでのアプリストア登録
・アプリの宣伝方法(私が知りたい！)
もし知りたければ「〇〇について知りたいです！」コメントをいただけると嬉しい。AIを用いて各自調べてみるのもよいが、2025年3月時点でAIチャットツールに聞いてもおかしな回答ばかり返ってきたので私は理解に相当な時間を要した。
上記工程のそれぞれの項目ごとにボリュームのある地雷があちこちに埋まっており、一つの問題を解決するのに結構なボリュームの知識が求められるので、いつか記事にしたいところ。
自分用のドメインを準備しよう
スマホアプリを公開する時には自分だけの独自ドメインを持っている必要がある。ここには、アプリのプライバシーポリシーページを掲載したり、Admobなどの広告ネットワーク元を証明するためのads-txt.txtファイルを載せたりする。普段Webアプリを作成している人ならば独自ドメインを持っているはず。
実際にアプリ生成を行う
ここからは実際にWebアプリをスマホアプリ化する工程を説明する。
以下は私が普段よく使うブラウザゲーム制作環境のサンプル例である。これを例に説明する。
・githubコード
https://github.com/hothukurou/pixi_game_ts
上記をcloneしてもらったら、以下コマンドを打ってdist/main.jsファイルを生成する。
tscでTypeScriptをトランスパイルして、webpackでmain.jsにひとまとめにしている。
npm install
npx tsc
npx webpack
うまくいくとdist/main.jsが生成される。index.htmlを起動するとこのmain.jsを読んで、html内にあるcanvasにゲーム画面が表示されるはずである。これは、画面下にある球体をクリックして画面から落とさないようにバウンドさせるゲームだ。
WebGLを使っているのでサーバー経由での起動が必要なのだが、Live Server のようなローカルサーバーを立ち上げるVSCodeの拡張を入れて動作検証してほしい。
このゲームは、index.html,dist/main.js,imageフォルダの画像、soundフォルダの音声を用いて動作するブラウザゲームである。
このプロジェクトをスマホアプリ化していく。
Capacitorをインストールする
以下をインストールする。バージョンは2025年6月現在で自分が動作確認した環境である。Capacitor ver.7を用いているのだが、そのうちアップデートするとこれ以降の説明が変わってしまう恐れがあるのでその点だけ注意願いたい。
"@capacitor/android": "^7.3.0",
"@capacitor/assets": "^3.0.5",
"@capacitor/cli": "^7.3.0",
"@capacitor/core": "^7.3.0",
"@capacitor/ios": "^7.3.0",
スマホアプリ化するためのベース環境を作る
スマホアプリ化するにあたり、対象にするHTMLやJavaScript、画像や音声などのリソースを一つのフォルダにまとめる。
以下コマンドで、初期化設定することができる。これは、Capacitor設定ファイル用のcapacitor.config.tsファイルを生成しつつ、リソースを格納するフォルダを生成するためのコマンドである。
npx cap init
3つほど質問されるので答えていく。この時点で、アプリ名やアプリ名を表すユニークなIDを記入する。
ユニークなIDには独自ドメインを用いて記入する。
[?] What is the name of your app?
This should be a human-friendly app name, like what you'd see in the App Store.
√ Name ... [アプリ名を書く]
[?] What should be the Package ID for your app?
Package IDs (aka Bundle ID in iOS and Application ID in Android) are unique identifiers for apps. They must be in
reverse domain name notation, generally representing a domain name that you or your company owns.
√ Package ID ...
[アプリ名を書く。
慣例として、自分の持っている独自ドメインを書いて、
その後ろにアプリの名前を書く。
例: com.example.(アプリ名)]
[?] What is the web asset directory for your app?
This directory should contain the final index.html of your app.
? Web asset directory »
[アプリ化したいパッケージフォルダを書く。
今回はwwwと書く。defaultでもwwwとなる]
上記質問を答えるとcapacitor.config.tsが生成されて、上記で設定したパラメータが格納される。
このパラメータによると、wwwフォルダに動作に必要な全データを格納すればよいことがわかるのだが、wwwフォルダは自動生成されないので自分でwwwフォルダを作成する。
wwwフォルダに格納するプロジェクトファイル
wwwフォルダにアプリ化したいhtmlファイルやその他必要ファイルを入れていく。
今回はindex.htmlとdist/main.js,imageフォルダ、soundフォルダの4つがあればこのブラウザゲームは動作するので、それらをwwwフォルダに格納する。
Androidプロジェクトを作成してAndroid Studioから開けるようにする
ここまで準備できれば、以下コマンドでAndroid Studio向けプロジェクトやXCode向けプロジェクトを作成することができる。まずはAndroidから。
まず事前にAndroid Studioをインストールする。その後で以下コマンドを実行する。
# androidアプリプロジェクトを新規作成する
# androidフォルダ内にAndroid Studioプロジェクトが生成される
npx cap add android
# wwwフォルダの構成をAndroidアプリプロジェクトに同期する
npx cap sync android
wwwフォルダに必要なファイルが揃っていない場合、androidフォルダだけ生成されてエラーが返ってくるので、その時は一度androidフォルダを削除して再生成するとよい。
そのあとで以下コマンドを打つとAndroid Studioが立ち上がる。
# Android Studioが立ち上がり、androidフォルダ内のプロジェクトを読み込む
npx cap open android
Android Studioのロゴが表示されて、しばらく経つと「新規プロジェクト信頼する？」という質問が来るので件の首相みたいに「Trust Me!」と決意表明しよう。
Android Studioが無事に起動すると、プロジェクトのビルドを自動で行われ、プロジェクトに問題があるとエラーが表示される。
この段階で良く発生する問題として「Permission Error」がある。権限のないフォルダにビルドファイルやキャッシュファイルを作ってビルドに失敗することが原因である。この下のページにまとめたので参考にしてほしい。Android Studioの使い方はまたいつか説明したいが、長くなるので今回はこの辺に留める。
Android Studioを起動できれば、「Device Manager」から実機の開発用Android端末を用いて実機検証できるようになる。実機確認はアプリストア公開前に必須なのでぜひ実機のAndroid端末を購入して開発機用に設定変更して試してほしい。そのための方法もいつか解説したいところ。
上記までは簡単だが、そのあとが沼！！
Capacitorを用いてAndroidプロジェクトを生成した時、ビルド時に権限まわりのの問題が頻発したので、その解決策をこれから書いていく。
Android Studioでアプリをビルドするときに、unable to delete directoryとエラーになる
Capacitorで生成したプロジェクトで発生する問題のようなのでここで取り上げる。
Android Studioのビルド先がnode_modulesのような削除権限のないフォルダ内にビルドファイルやキャッシュファイルを作成してしまうことが原因である。
解決策として、ビルドファイルとキャッシュファイルの位置を問題ない位置に移動した上でAndroid Studioのキャッシュ削除が必要になる。
解決策としては、ビルド先を変えるとよい。
android/build.gradleのallProjectプロパティにlayout.buildDirectory.set(~~)と追加すると、生成フォルダ先を権限のあるホームディレクトリ直下に移動できるため、権限エラーを回避できる。
allprojects {
layout.buildDirectory.set(file("$rootDir/.gradle/${project.name}")) // これを追加！！！！
repositories {
google()
mavenCentral()
}
}
そのあとでAndroidプロジェクトフォルダ内にある.gradleフォルダを自分で消した。
最後にAndroid Studioのキャッシュを削除するため、以下項目を実行する。これでAndroid Studioが余計なキャッシュを削除した上で再起動して正常に動作するようになる。
iOS用のプロジェクトを作成してXCodeから開けるようにする。
次にiOSアプリの立ち上げ方を説明する。以下コマンドを実行するとiOSプロジェクトが作られる。
XCodeを使うのでMac OS環境で行うと無駄なく動かせる。
# iOSプロジェクトを新規生成する iosというフォルダが生成され、中にiosプロジェクトが作られる
npx cap add ios
# wwwフォルダの構成をiOSプロジェクトに同期する
npx cap sync ios
そのあと、Mac OS環境で以下コマンドをたたくとXCodeが起動する。
# XCodeを起動して、iosフォルダ内のプロジェクトを読み込む
npx cap open ios
上手くいくとXCodeが開くので、ここから画面上のProduct>Destinationタブから開発機用の端末を指定してビルドするとその端末でアプリの実機動作確認することができる。
このXCodeの使い方もかなり苦戦するので、いつかまとめられたらなと思っている。実機確認用のiPhoneをデベロッパーモードにする設定も必要なので、結構やることは多いが、このあたりは調べたら先人の回答が集まるはずである。
上部メニューから
→ File
→ Invalidate Caches / Restart... を選択
表示されたダイアログで
→ Invalidate and Restart をクリック
これ以外にもいたるところで「Permisson error」とか「Unable to delete」みたいな権限エラーが発生したり、アプリが正常起動しないなどの問題が発生するのだが、ここからはコンソールのエラー文をしっかり読んで原因究明にあたってほしい。
さいごに
アプリ化の勉強をはじめてから2~3週間くらいはこれらのトラブルに苦戦した。今回は説明しなかったが、スマホ広告ツールであるAdmobの設定や計測ツールであるFirebase Analyticsの設定、アプリ内課金の設定を新規で実装しようとすると、原因不明の動作不良落ちや課金アプリの動作検証の準備など、更に色々な課題・問題が発生するからである。
現在はこれらをすべて回避する方法をテキストにまとめ、CopilotのようなAIエージェントツールに読み込ませて自動処理させている。AIにはぜひ人類がやりたくない「面倒で難しい雑用」を引き取ってほしいところである。
これらの知識共有やそれを用いたWebアプリのスマホアプリ化、もし仕事としてお金をいただけたら大変やる気が出るので、興味がある人はぜひ(tukuchauojisan@gmail.com)まで連絡してほしい。マーケティングは今のところダメダメですが技術力はあるので。
来週三作目となるスマホアプリを公開予定なので、今度こそダウンロード数100は越えたいところである・・・！
