Mac miniで初めてのiOSアプリ開発

ここからは、Claude AIさんに聞きながら、指示どおりにしていきます。

必要なツールのインストール

1. Xcode（App Storeからインストール）
2. Node.js（https://nodejs.org/ からLTS版をダウンロード）
3. Homebrew（パッケージ管理ツール）
4. CocoaPods（iOS依存関係管理）

【開発環境構築編】

3. Capacitorプロジェクトの作成

ターミナルアプリで入力して実行

# プロジェクトフォルダ作成
cd ~/Desktop
mkdir 〇〇〇〇〇←自分でファイルの名前を決める
cd 〇〇〇〇〇

# Capacitor初期化
npm init -y
npm install @capacitor/core @capacitor/cli
npx cap init

# iOS追加
npm install @capacitor/ios
npx cap add ios

4. HTMLファイルの配置

Xcodeアプリを開いて、〇〇〇〇〇プロジェクトファイルを開く。

• wwwフォルダを作成
• Android版のHTMLファイル（index.html）と画像・音声ファイルをコピー【Androidアプリのコードを移植】

【機能実装編】

5. プラグインのインストール

ターミナルアプリで入力して実行

# 振動機能
npm install @capacitor/haptics

# AdMob広告
npm install @capacitor-community/admob

# アプリ基本機能
npm install @capacitor/app

# スプラッシュスクリーン
npm install @capacitor/splash-screen

6. iOS用コードの実装

振動機能（Haptics）を付けたかったので、Androidアプリのコードを修正

javascript

const playSound = async (soundType) => {
  if (typeof Capacitor !== 'undefined' && Capacitor.Plugins && Capacitor.Plugins.Haptics) {
    const { Haptics } = Capacitor.Plugins;
    await Haptics.impact({ style: 'MEDIUM' });
  }
};

音声機能をAndroidアプリのコードからiOS版に修正

javascript

const audioFiles = {
  start: new Audio('△△△.mp3'),←Androidアプリで使用していた音声をコピー
  correct: new Audio('□□□.mp3'),←Androidアプリで使用していた音声をコピー
  wrong: new Audio('◇◇◇.mp3')←Androidアプリで使用していた音声をコピー
};

function playAudio(soundType) {
  const audio = audioFiles[soundType];
  if (audio) {
    audio.currentTime = 0;
    audio.play();
  }
}

AdMob広告（Androidアプリと同じく、広告を入れることにしました）の部分をiOS版に修正

javascript

async function showAd() {
  if (typeof Capacitor !== 'undefined' && Capacitor.Plugins && Capacitor.Plugins.AdMob) {
    const { AdMob } = Capacitor.Plugins;
    await AdMob.initialize();
    await AdMob.prepareInterstitial({
      adId: 'ca-app-pub-xxxxx/yyyyy'
    });
    await AdMob.showInterstitial();
  }
}

7. Info.plistの設定

• AdMob App IDの追加：GADApplicationIdentifier

このあたりのコードもすべてClaude AIさんに書いてもらいました。

【実機テスト編】

8. iPhone実機での動作確認

1. Lightning – USB-C変換アダプターでiPhoneとMac miniを接続
2. iPhone側で「このコンピュータを信頼」を選択
3. 「設定」→「プライバシーとセキュリティ」→「デベロッパモード」をオン
4. Xcodeで実機を選択して実行（▶️ボタン）
5. 「設定」→「一般」→「VPNとデバイス管理」で開発者証明書を信頼

【仕上げ編】

9. スプラッシュスクリーン（起動画面）の設定

• 2048×2048pxの画像を作成（中央に1024×1024のアイコン、周囲に余白）
• ios/App/App/Assets.xcassets/Splash.imageset/ に配置
• capacitor.config.json で表示時間を設定

アプリ起動時にアイコンを表示させたかったのですが、うまくいかなかったので調整しました。

10. 同期とビルド

ターミナルアプリで入力して実行

npx cap sync ios

【完成！】

実装できた機能：

• ✅ ゲーム本体の動作
• ✅ 振動フィードバック（Haptics）
• ✅ 効果音再生
• ✅ AdMob広告表示
• ✅ Firebaseランキング
• ✅ スプラッシュスクリーン
• ✅ アプリアイコン

ここまでくるのに丸2日かかりました。iPhoneで動いたときはかなり感動！！

つまずいたポイントと解決方法

ポイント1：Hapticsが動作しない

→ @capacitor/haptics プラグインのインストール忘れ

ポイント2：広告が表示されない

→ テスト広告IDで動作確認後、本番IDに変更

ポイント3：音声が再生されない

→ Web Audio APIを使った独自実装が必要（おそらく別の言語を使ってコードを書いていれば簡単に設定できるような気がします）

ポイント4：スプラッシュスクリーンが画面いっぱいに

→ 周囲に余白を持たせた大きめの画像を使用（おそらく別の言語を使ってコードを書いていれば簡単に設定できるような気がします）

まとめ

Mac mini初期設定から2日間で、Android版HTMLアプリをiOS化することができました。Capacitorを使うことで、既存のWebコードをほぼそのまま活用でき、プラットフォーム固有の機能（振動、広告など）も比較的簡単に実装できました。

次回は「App Store審査申請編」をお届けします！

以上、次のアプリをiOS化するための自分の覚書用に記事を書いてみました。みなさんのお役には立っていないと思いますがお許しください。m(__)m