Canvasゲーム等をWebアプリ化する

Capacitor
1. URLを指定してゲーム化しているページをそのままアプリにする（ラップする）。（存在しないページを指定するとただの白いページになる）
2. ファイルからビルドする

Capacitor

URLを指定してゲーム化しているページをそのままアプリにする（ラップする）。（存在しないページを指定するとただの白いページになる）

環境準備（Mac必須）

必要なもの：

Node.js
Xcode

プロジェクト作成

ターミナルで👇

mkdir my-game-app
cd my-game-app
npm init -y
npm install @capacitor/core @capacitor/cli
npx cap init

mkdir my-game-app

cd my-game-app

npm init -y

npm install @capacitor/core @capacitor/cli

npx cap init

設定を聞かれるので：

App name → ゲーム名
App ID → com.example.game（適当でOK）

Webゲームを組み込む

方法

WordPressのURLをそのまま使う👇

// capacitor.config.json
{
  "appId": "com.example.game",
  "appName": "MyGame",
  "webDir": "public",
  "server": {
    "url": "https://あなたのサイトURL",
    "cleartext": false
  }
}

// capacitor.config.json

{

"appId": "com.example.game",

"appName": "MyGame",

"webDir": "public",

"server": {

"url": "https://あなたのサイトURL",

"cleartext": false

}

👉 これで「WebViewでサイト表示」になる

“webDir”: “public”, のカンマの追加を忘れないこと

mkdir public
npm install @capacitor/ios
npx cap add ios
npx cap open ios

mkdir public

npm install @capacitor/ios

npx cap add ios

npx cap open ios

Xcode側の設定（重要）

やること👇

① Team設定

Signing & Capabilities
Apple ID選択

② アイコン設定

AppIconに画像入れる

③ フルスクリーン設定

Safariっぽさ消す👇

<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>

1 2	<key>UIViewControllerBasedStatusBarAppearance</key> <false/>

④ HTTP対策（必要なら）

httpsじゃない場合：

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

<key>NSAppTransportSecurity</key>

<dict>

<key>NSAllowsArbitraryLoads</key>

<true/>

</dict>

※本番はHTTPS必須

注意点

❌ iOS審査落ち

Appleはこれ見ます👇

「ただのWebViewアプリ」NGになりやすい
最低限：

👉 例：

ローディング画面追加
オフライン時の表示
メニューUI改善

ファイルからビルドする

やりたいこと

👉 Webゲームをそのままローカルに置いてビルド

つまり👇

❌ URL読み込み（server.url）
✅ HTML/JS/CSSをアプリに同梱

UIやゲーム本体は自分で書いてAPIだけWPのものを使う感じ

コマンド

# Capacitorのインストール
npm install @capacitor/core @capacitor/cli

# 初期化（アプリ名とApp IDを設定）
npx cap init 

# 各プラットフォームのインストール
npm install @capacitor/android @capacitor/ios

# プロジェクトの追加
npx cap add android
npx cap add ios

# Capacitorのインストール

npm install @capacitor/core @capacitor/cli

# 初期化（アプリ名とApp IDを設定）

npx cap init

# 各プラットフォームのインストール

npm install @capacitor/android @capacitor/ios

# プロジェクトの追加

npx cap add android

npx cap add ios

Webビルド: npm run build などで最新のWebファイルを生成。
同期: npx cap sync を実行し、Web資産をネイティブ側に反映。
実行: npx cap open android または npx cap open ios で Android Studio や Xcode を開き、そこから実機やエミュレータで起動します。

■ 全体の完成イメージ

my-game-app/
├── capacitor.config.json
├── public/   ← ★ここにゲーム全部入れる
│   ├── index.html
│   ├── js/
│   ├── css/
│   └── assets/

my-game-app/

├── capacitor.config.json

├── public/ ← ★ここにゲーム全部入れる

│ ├── index.html

│ ├── js/

│ ├── css/

│ └── assets/

① server設定を消す（重要）

"server": {
  "url": "https://...",
  "cleartext": false
}

"server": {

"url": "https://...",

"cleartext": false

}

👉 これ削除

② webDirを確認

"webDir": "public"

1	"webDir": "public"

👉 publicフォルダがルートになる

③ ファイル配置

最重要👇

👉 必ず index.html を置く

例：

public/
├── index.html
├── style.css
├── game.js

public/

├── index.html

├── style.css

├── game.js

注意点

index.html修正（ここ超重要）

❌ ダメ（よくあるミス）

<script src="/js/game.js"></script>
<link rel="stylesheet" href="/css/style.css">

1 2	<script src="/js/game.js"></script> <link rel="stylesheet" href="/css/style.css">

👉 / から始まると動かない

Capacitor同期

npx cap sync

npx cap open iOS // ビルド

npx cap sync

npx cap open iOS // ビルド

■ よくあるハマりポイント⚠️

① 画面真っ白

原因ほぼこれ👇

パスミス
JS読み込めてない

👉 Xcodeのコンソールでエラー確認

② WordPressのまま使ってる

👉 PHPは動かない

対策👇

APIとして使う（fetch）
または静的化する

③ 画像が出ない

👉 パス or 大文字小文字ミス

④ fetch先がブロックされる

👉 CORS問題