HTMLとJavaScriptだけで作ったゲームを、スマホアプリとSteamにする。同じ中身で、気をつけることは別々だった

こんにちは、北海道のWEB屋です。

ドット絵の経営シミュレーション「IT起業伝」は、HTML・CSS・JavaScriptとCanvasだけで作っています。ゲーム用のエンジンやフレームワークは使っていません。ビルドの手順もなく、ファイルをそのままブラウザで開けば動きます。

この1つの中身を、3つの形で出す準備をしています。

同じWindows版を、Epic Games Storeにも出す予定です。

ブラウザ版：Service Workerで、オフラインでも

ブラウザ版は、Service Workerで、一度読み込んだファイルを端末にためておきます。ためかたは2通りに分けました。

• ゲームのプログラム（HTML、JavaScript、CSS）：まずネットから取り、つながらなければためておいたものを使う。更新したら、すぐ新しいものが届くように
• 絵やフォント：まずためておいたものを使う。数が多く、めったに変わらないので

ホーム画面に追加すると、アプリのように全画面で開けます。一度開いた素材は、電波のないところでも遊べます。

Android版：38万個のファイルを、1つにまとめる

Android版は、Capacitorでブラウザゲームをアプリに包んでいます。ゲームの中身はそのままで、アプリの中のブラウザ（WebView）で動かします。

ここで最初の壁がありました。このゲームは、年代ごとに描き分けた絵が多く、素材のファイルが約38万個あります。ところが、Androidのアプリのファイル（APK）には、中に入れられるファイルの数に上限（65,535個）があり、そのままでは署名すらできませんでした。

そこで、素材を1つの大きなファイルにまとめ、どこに何があるかの索引を別に作りました。アプリの中のブラウザが絵を読み込もうとすると、アプリが索引を見て、まとめたファイルの中から取り出して返します。ゲームの側は、ふつうにファイルを読んでいるつもりのままです。

さらに、Google Playではアプリの基本部分の大きさにも上限（200MB）があります。まとめた素材は約680MBあるので、Play Asset Deliveryという、アプリと一緒に別配信できる「アセットパック」に入れました。インストールのときに一緒に届く設定です。

Android版で気をつけたこと

• アプリを閉じたら音を止める：ブラウザなら、タブを隠すと音の扱いも変わりますが、アプリではホームに戻っても音が鳴り続けました。画面が隠れたら音の処理を止め、戻ったら再開するようにしています。音のしくみはBGMの記事に書きました
• 課金：製品版の購入は、Android版だけの機能です。ブラウザ版や Windows版には、購入の画面は出ません。購入まわりでつまずいた話は、次の記事で書きます
• Service Workerは使わない：素材はもう端末の中にあるので、アプリでは使わない設定にしています

Windows版：Electronで包んで、Steamから届ける

Windows版は、Electronで包んでいます。ここでも38万個のファイルが問題になりました。

Electronには、アプリのファイルを1つの書庫（asar）にまとめる仕組みがあります。ところが、ファイルが多すぎて書庫の索引だけで100MBほどになり、アプリが起動しなくなりました。そこで、ゲームの素材は書庫に入れず、そのままのフォルダとして一緒に置き、アプリ専用のアドレス（app://）から読むようにしています。

インストーラーは作らず、展開したフォルダのままSteamに上げます。上げるのはコマンド1つ。プレイヤーへの更新は、Steamの自動アップデートに任せています。変わったファイルだけが届くので、38万個あっても毎回全部を配り直すことはありません。

Steamの実績などの機能は使っていないので、Steam専用の作り込みはほとんどありません。そのぶん、同じWindows版をEpic Games Storeにもそのまま出せる見込みです。

3つの環境で、ひとつの中身

ゲームの中身は1つで、環境ごとの違いは、それぞれの「包み」の側と、ほんの少しの分岐だけにしています。

• アプリの中かどうか、Windows版かどうかを見分けて、使う機能を切り替える
• 体験版かどうかは、アドレスの指定で切り替える。体験版は「札幌の物語」の1986年まで
• 体験版のセーブは、引き継ぎのコードで製品版に持っていける

中身が同じなので、絵を直せば3つとも同時に直ります。一方で、配り方の苦労は環境ごとにまったく違いました。ブラウザの体験版を約38万ファイルのまま配っている話は、次の記事に書きます。

まとめ

• ゲーム本体は、HTML・CSS・JavaScriptとCanvasだけ。同じ中身を3つの形で出す
• ブラウザ版はService Workerでオフラインにも対応
• Android版はCapacitor。38万ファイルを1つにまとめ、Play Asset Deliveryで別配信
• Windows版はElectron。素材は書庫に入れずフォルダのまま。更新はSteamの自動アップデートで

ブラウザ版の無料体験版は公式サイトから。発売は2026年12月の予定です。

出典とリンク

• Capacitor：capacitorjs.com
• Electron：electronjs.org
• Android Developers「Play Asset Delivery」：developer.android.com
• IT起業伝 公式サイト：itkigyoden.com
• 開発：北海道のWEB屋

各ストアでの販売の状況は、2026年11月時点のものです。