Antigravity × Capacitor ハイブリッドアプリ実装ガイド：WebアプリをiOS/Android両対応ネイティブアプリに変換するAI駆動ワークフロー

# Antigravityが自動実行するセットアップコマンド例
node -v  # v20以上を確認
pod --version  # 1.15以上を確認
xcodebuild -version  # Xcode 16以上を確認
 
# CocoaPodsがない場合
sudo gem install cocoapods

# プロジェクトルートで実行
npm install @capacitor/core @capacitor/cli
npx cap init
 
# 初期化時の入力
# App Name: MyApp
# App ID: com.yourcompany.myapp（逆ドメイン形式）
# Web Dir: out（Next.jsの静的出力ディレクトリ）

// capacitor.config.ts
// AntigravityがベストプラクティスのWebViewSetting等を自動追加
import type { CapacitorConfig } from '@capacitor/cli';
 
const config: CapacitorConfig = {
  appId: 'com.yourcompany.myapp',
  appName: 'MyApp',
  webDir: 'out',
  server: {
    // 開発時はローカルサーバーを使用（本番では削除）
    // url: 'http://192.168.1.x:3000',
    // cleartext: true,
  },
  plugins: {
    SplashScreen: {
      launchShowDuration: 2000,
      launchAutoHide: true,
      backgroundColor: '#ffffff',
      androidSplashResourceName: 'splash',
      showSpinner: false,
    },
    PushNotifications: {
      presentationOptions: ['badge', 'sound', 'alert'],
    },
  },
};
 
export default config;

# iOS/Androidプラットフォームを追加
npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android
 
# プロジェクトをビルドしてネイティブに同期
npm run build  # Next.jsのstatic export
npx cap sync   # ネイティブプロジェクトを最新状態に更新

npm install @capacitor/camera
npx cap sync

// src/hooks/useCamera.ts
// Antigravityが型安全かつ権限処理を含む実装を生成
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
import { useState, useCallback } from 'react';
 
interface UseCameraReturn {
  photo: Photo | null;
  takePhoto: () => Promise<void>;
  pickFromGallery: () => Promise<void>;
  error: string | null;
  isLoading: boolean;
}
 
export const useCamera = (): UseCameraReturn => {
  const [photo, setPhoto] = useState<Photo | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(false);
 
  const requestPermissions = async (): Promise<boolean> => {
    const permissions = await Camera.requestPermissions({
      permissions: ['camera', 'photos'],
    });
    return (
      permissions.camera === 'granted' &&
      permissions.photos === 'granted'
    );
  };
 
  const takePhoto = useCallback(async () => {
    setIsLoading(true);
    setError(null);
 
    try {
      const granted = await requestPermissions();
      if (!granted) {
        setError('カメラへのアクセス許可が必要です。設定から許可してください。');
        return;
      }
 
      const result = await Camera.getPhoto({
        quality: 85,           // 画質（0-100）
        allowEditing: false,
        resultType: CameraResultType.DataUrl,  // base64 DataURL形式で取得
        source: CameraSource.Camera,
        width: 1024,
        height: 1024,
        correctOrientation: true,  // 自動回転補正
      });
 
      setPhoto(result);
    } catch (err) {
      // ユーザーがキャンセルした場合はエラーとして扱わない
      if (err instanceof Error && err.message.includes('cancelled')) {
        return;
      }
      setError('写真の取得中にエラーが発生しました。');
      console.error('Camera error:', err);
    } finally {
      setIsLoading(false);
    }
  }, []);
 
  const pickFromGallery = useCallback(async () => {
    setIsLoading(true);
    setError(null);
 
    try {
      const result = await Camera.getPhoto({
        quality: 85,
        allowEditing: false,
        resultType: CameraResultType.DataUrl,
        source: CameraSource.Photos,  // ギャラリーから選択
        width: 1024,
        height: 1024,
      });
 
      setPhoto(result);
    } catch (err) {
      if (err instanceof Error && err.message.includes('cancelled')) {
        return;
      }
      setError('ギャラリーへのアクセス中にエラーが発生しました。');
    } finally {
      setIsLoading(false);
    }
  }, []);
 
  return { photo, takePhoto, pickFromGallery, error, isLoading };
};

<!-- ios/App/App/Info.plist に追加 -->
<!-- Antigravityがこの設定を自動検出して追加を提案してくれる -->
<key>NSCameraUsageDescription</key>
<string>プロフィール写真の撮影や商品画像のアップロードに使用します</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>ギャラリーから画像を選択するために使用します</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>撮影した写真をカメラロールに保存するために使用します</string>

<!-- android/app/src/main/AndroidManifest.xml -->
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
<uses-feature android:name="android.hardware.camera" android:required="false" />

npm install @capacitor/push-notifications
npx cap sync

// src/services/pushNotifications.ts
import { PushNotifications, PushNotificationSchema, ActionPerformed } from '@capacitor/push-notifications';
import { Capacitor } from '@capacitor/core';
 
export class PushNotificationService {
  private static instance: PushNotificationService;
  private token: string | null = null;
 
  private constructor() {}
 
  static getInstance(): PushNotificationService {
    if (!PushNotificationService.instance) {
      PushNotificationService.instance = new PushNotificationService();
    }
    return PushNotificationService.instance;
  }
 
  async initialize(onTokenReceived: (token: string) => void): Promise<void> {
    // ネイティブ環境でのみ実行（Web環境はスキップ）
    if (!Capacitor.isNativePlatform()) {
      console.log('プッシュ通知はネイティブ環境でのみ利用可能です');
      return;
    }
 
    // 通知受信時のリスナー登録
    PushNotifications.addListener('registration', (token) => {
      this.token = token.value;
      console.log('Push registration token: ', token.value);
      onTokenReceived(token.value);
    });
 
    PushNotifications.addListener('registrationError', (error) => {
      console.error('Push registration error: ', error.error);
    });
 
    // フォアグラウンドでの通知受信
    PushNotifications.addListener('pushNotificationReceived', (notification: PushNotificationSchema) => {
      console.log('Push notification received: ', notification);
      // アプリ内通知UIを表示する処理を追加
      this.handleForegroundNotification(notification);
    });
 
    // 通知タップ時のアクション
    PushNotifications.addListener('pushNotificationActionPerformed', (action: ActionPerformed) => {
      console.log('Push action performed: ', action);
      this.handleNotificationAction(action);
    });
 
    // 権限要求と登録
    await this.requestPermissionAndRegister();
  }
 
  private async requestPermissionAndRegister(): Promise<void> {
    let permStatus = await PushNotifications.checkPermissions();
 
    if (permStatus.receive === 'prompt') {
      permStatus = await PushNotifications.requestPermissions();
    }
 
    if (permStatus.receive !== 'granted') {
      console.warn('通知の権限が拒否されました');
      return;
    }
 
    await PushNotifications.register();
  }
 
  private handleForegroundNotification(notification: PushNotificationSchema): void {
    // フォアグラウンド通知の処理（カスタムUIを表示など）
    const event = new CustomEvent('push-notification-received', {
      detail: notification,
    });
    window.dispatchEvent(event);
  }
 
  private handleNotificationAction(action: ActionPerformed): void {
    // 通知のディープリンク処理
    const data = action.notification.data;
    if (data?.route) {
      window.location.href = data.route;
    }
  }
 
  getToken(): string | null {
    return this.token;
  }
 
  async removeAllListeners(): Promise<void> {
    await PushNotifications.removeAllListeners();
  }
}
 
// 使用例
// const pushService = PushNotificationService.getInstance();
// await pushService.initialize(async (token) => {
//   // サーバーにトークンを登録
//   await registerDeviceToken(token, userId);
// });

npm install @aparajita/capacitor-biometric-auth
npx cap sync

// src/hooks/useBiometricAuth.ts
import { BiometricAuth, BiometryType } from '@aparajita/capacitor-biometric-auth';
import { useState, useEffect } from 'react';
 
interface BiometricAuthState {
  isAvailable: boolean;
  biometryType: string;
  authenticate: () => Promise<boolean>;
}
 
export const useBiometricAuth = (): BiometricAuthState => {
  const [isAvailable, setIsAvailable] = useState(false);
  const [biometryType, setBiometryType] = useState('');
 
  useEffect(() => {
    checkBiometryAvailability();
  }, []);
 
  const checkBiometryAvailability = async () => {
    try {
      const result = await BiometricAuth.checkBiometry();
      setIsAvailable(result.isAvailable);
 
      // 利用可能な生体認証のタイプを取得
      if (result.biometryType === BiometryType.faceId) {
        setBiometryType('Face ID');
      } else if (result.biometryType === BiometryType.touchId) {
        setBiometryType('Touch ID');
      } else if (result.biometryType === BiometryType.fingerprint) {
        setBiometryType('指紋認証');
      } else if (result.biometryType === BiometryType.faceAuthentication) {
        setBiometryType('顔認証');
      }
    } catch {
      setIsAvailable(false);
    }
  };
 
  const authenticate = async (): Promise<boolean> => {
    try {
      await BiometricAuth.authenticate({
        reason: 'アカウントにアクセスするために認証が必要です',
        iosFallbackTitle: 'パスコードを使用',
        androidTitle: '生体認証',
        androidSubtitle: 'アカウントへのアクセスを確認',
        androidConfirmationRequired: false,
      });
      return true;
    } catch (error) {
      console.error('Biometric authentication failed:', error);
      return false;
    }
  };
 
  return { isAvailable, biometryType, authenticate };
};

npm install @capacitor/preferences
npx cap sync

// src/lib/storage.ts
// AntigravityがTypeScriptのGenericsを活用した型安全な実装を生成
import { Preferences } from '@capacitor/preferences';
 
export class TypedStorage {
  static async set<T>(key: string, value: T): Promise<void> {
    await Preferences.set({
      key,
      value: JSON.stringify(value),
    });
  }
 
  static async get<T>(key: string): Promise<T | null> {
    const { value } = await Preferences.get({ key });
    if (value === null) return null;
 
    try {
      return JSON.parse(value) as T;
    } catch {
      return null;
    }
  }
 
  static async remove(key: string): Promise<void> {
    await Preferences.remove({ key });
  }
 
  static async clear(): Promise<void> {
    await Preferences.clear();
  }
 
  static async keys(): Promise<string[]> {
    const { keys } = await Preferences.keys();
    return keys;
  }
}
 
// 使用例
interface UserSettings {
  theme: 'light' | 'dark';
  language: 'ja' | 'en';
  notifications: boolean;
}
 
// 保存
await TypedStorage.set<UserSettings>('userSettings', {
  theme: 'dark',
  language: 'ja',
  notifications: true,
});
 
// 取得
const settings = await TypedStorage.get<UserSettings>('userSettings');
// settings?.theme === 'dark'

npm install @capacitor-community/sqlite
npx cap sync

// src/lib/database.ts
import { CapacitorSQLite, SQLiteConnection, SQLiteDBConnection } from '@capacitor-community/sqlite';
import { Capacitor } from '@capacitor/core';
 
class DatabaseService {
  private sqlite: SQLiteConnection;
  private db: SQLiteDBConnection | null = null;
 
  constructor() {
    this.sqlite = new SQLiteConnection(CapacitorSQLite);
  }
 
  async initialize(): Promise<void> {
    // Web環境ではIndexedDBを使用するためのポリフィルが必要
    if (Capacitor.getPlatform() === 'web') {
      await import('@capacitor-community/sqlite/electron/dist/plugin.js');
    }
 
    this.db = await this.sqlite.createConnection(
      'myapp.db',      // データベース名
      false,           // 暗号化なし
      'no-encryption', // 暗号化モード
      1,               // バージョン
      false            // 読み取り専用でない
    );
 
    await this.db.open();
    await this.createTables();
  }
 
  private async createTables(): Promise<void> {
    if (!this.db) throw new Error('Database not initialized');
 
    const createUsersTable = `
      CREATE TABLE IF NOT EXISTS users (
        id TEXT PRIMARY KEY,
        name TEXT NOT NULL,
        email TEXT UNIQUE NOT NULL,
        created_at INTEGER NOT NULL,
        updated_at INTEGER NOT NULL
      );
    `;
 
    const createPostsTable = `
      CREATE TABLE IF NOT EXISTS posts (
        id TEXT PRIMARY KEY,
        user_id TEXT NOT NULL,
        title TEXT NOT NULL,
        content TEXT,
        created_at INTEGER NOT NULL,
        FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
      );
    `;
 
    await this.db.execute(createUsersTable);
    await this.db.execute(createPostsTable);
  }
 
  async insertUser(user: { id: string; name: string; email: string }): Promise<void> {
    if (!this.db) throw new Error('Database not initialized');
 
    const now = Date.now();
    const query = `
      INSERT OR REPLACE INTO users (id, name, email, created_at, updated_at)
      VALUES (?, ?, ?, ?, ?);
    `;
 
    await this.db.run(query, [user.id, user.name, user.email, now, now]);
  }
 
  async getUserById(id: string): Promise<{ id: string; name: string; email: string } | null> {
    if (!this.db) throw new Error('Database not initialized');
 
    const query = 'SELECT * FROM users WHERE id = ?;';
    const result = await this.db.query(query, [id]);
 
    if (result.values && result.values.length > 0) {
      return result.values[0] as { id: string; name: string; email: string };
    }
    return null;
  }
 
  async close(): Promise<void> {
    if (this.db) {
      await this.sqlite.closeConnection('myapp.db', false);
      this.db = null;
    }
  }
}
 
export const database = new DatabaseService();

// capacitor.config.ts に追加する最適化設定
// AntigravityがiOS/Android別の最適な設定を提案
const config: CapacitorConfig = {
  // ...基本設定...
  ios: {
    // WKWebViewの設定
    contentInset: 'automatic',
    scrollEnabled: true,
    backgroundColor: '#ffffff',
    preferredContentMode: 'mobile',
    limitsNavigationsToAppBoundDomains: true,
    // ハードウェアアクセラレーションを有効化
    webContentsDebuggingEnabled: false, // 本番はfalse
  },
  android: {
    // Android WebViewの設定
    backgroundColor: '#ffffff',
    useLegacyBridge: false,
    // Android 9以降のDarkMode対応
    allowMixedContent: false,
    captureInput: true,
    webContentsDebuggingEnabled: false, // 本番はfalse
  },
};

# Xcodeでアーカイブを作成
cd ios/App
xcodebuild -workspace App.xcworkspace \
           -scheme App \
           -configuration Release \
           -archivePath App.xcarchive \
           archive
 
# IPA を作成（App Store Connect 用）
xcodebuild -exportArchive \
           -archivePath App.xcarchive \
           -exportOptionsPlist ExportOptions.plist \
           -exportPath ./output

<!-- ExportOptions.plist -->
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN"
  "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  <key>method</key>
  <string>app-store</string>
  <key>teamID</key>
  <string>YOUR_TEAM_ID</string>
  <key>uploadSymbols</key>
  <true/>
  <key>compileBitcode</key>
  <false/>
</dict>
</plist>

# Gradle でリリースビルドを作成
cd android
./gradlew bundleRelease  # AAB形式（推奨）
# または
./gradlew assembleRelease  # APK形式

// android/app/build.gradle に追加
// Antigravityがセキュリティベストプラクティスに従った設定を生成
android {
    signingConfigs {
        release {
            // キーストアはバージョン管理に含めない
            // 環境変数または local.properties から読み込む
            storeFile file(System.getenv('KEYSTORE_PATH') ?: '../keystore/release.keystore')
            storePassword System.getenv('KEYSTORE_PASSWORD') ?: ''
            keyAlias System.getenv('KEY_ALIAS') ?: 'release'
            keyPassword System.getenv('KEY_PASSWORD') ?: ''
        }
    }
 
    buildTypes {
        release {
            signingConfig signingConfigs.release
            minifyEnabled true  // コードの難読化
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
            shrinkResources true  // 未使用リソースの削除
        }
    }
}

# .github/workflows/mobile-release.yml
name: Mobile Release Pipeline
 
on:
  push:
    tags:
      - 'v*.*.*'
 
jobs:
  build-ios:
    runs-on: macos-latest
    steps:
      - uses: actions/checkout@v4
 
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
 
      - name: Install dependencies
        run: npm ci
 
      - name: Build web app
        run: npm run build
 
      - name: Sync Capacitor
        run: npx cap sync ios
 
      - name: Setup Ruby & CocoaPods
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.2'
          bundler-cache: true
 
      - name: Install CocoaPods
        run: cd ios/App && pod install
 
      - name: Import Certificates
        env:
          P12_CERTIFICATE: ${{ secrets.P12_CERTIFICATE_BASE64 }}
          P12_PASSWORD: ${{ secrets.P12_PASSWORD }}
        run: |
          echo "$P12_CERTIFICATE" | base64 --decode > certificate.p12
          security create-keychain -p "" build.keychain
          security import certificate.p12 -k build.keychain -P "$P12_PASSWORD" -T /usr/bin/codesign
          security set-keychain-settings -t 3600 -u build.keychain
          security default-keychain -s build.keychain
          security unlock-keychain -p "" build.keychain
 
      - name: Build & Archive iOS
        run: |
          cd ios/App
          xcodebuild -workspace App.xcworkspace \
                     -scheme App \
                     -configuration Release \
                     -archivePath $GITHUB_WORKSPACE/App.xcarchive \
                     archive
 
      - name: Export IPA
        run: |
          xcodebuild -exportArchive \
                     -archivePath $GITHUB_WORKSPACE/App.xcarchive \
                     -exportOptionsPlist $GITHUB_WORKSPACE/ExportOptions.plist \
                     -exportPath $GITHUB_WORKSPACE/output
 
      - name: Upload to App Store Connect
        env:
          APPLE_ID: ${{ secrets.APPLE_ID }}
          APPLE_APP_PASSWORD: ${{ secrets.APPLE_APP_PASSWORD }}
        run: |
          xcrun altool --upload-app \
                       -f output/App.ipa \
                       -t ios \
                       -u "$APPLE_ID" \
                       -p "$APPLE_APP_PASSWORD"
 
  build-android:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
 
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
 
      - name: Setup Java
        uses: actions/setup-java@v4
        with:
          distribution: 'temurin'
          java-version: '17'
 
      - name: Install dependencies
        run: npm ci
 
      - name: Build web app
        run: npm run build
 
      - name: Sync Capacitor
        run: npx cap sync android
 
      - name: Build Release AAB
        env:
          KEYSTORE_PATH: ${{ github.workspace }}/release.keystore
          KEYSTORE_PASSWORD: ${{ secrets.KEYSTORE_PASSWORD }}
          KEY_ALIAS: ${{ secrets.KEY_ALIAS }}
          KEY_PASSWORD: ${{ secrets.KEY_PASSWORD }}
        run: |
          echo "${{ secrets.KEYSTORE_BASE64 }}" | base64 --decode > release.keystore
          cd android
          ./gradlew bundleRelease
 
      - name: Upload to Google Play
        uses: r0adkll/upload-google-play@v1
        with:
          serviceAccountJsonPlainText: ${{ secrets.SERVICE_ACCOUNT_JSON }}
          packageName: com.yourcompany.myapp
          releaseFiles: android/app/build/outputs/bundle/release/*.aab
          track: internal  # internal → alpha → beta → production

// capacitor.config.ts
import { CapacitorConfig } from '@capacitor/cli';
 
const config: CapacitorConfig = {
  appId: 'com.yourcompany.myapp',
  appName: 'MyApp',
  webDir: 'out',
  plugins: {
    SplashScreen: {
      launchAutoHide: false,       // 自動で隠さない
      backgroundColor: '#0b1020',  // Web側の背景色と完全一致させる
      androidScaleType: 'CENTER_CROP',
    },
  },
};
export default config;

// src/app/layout.tsx もしくは _app.tsx
import { Capacitor } from '@capacitor/core';
import { SplashScreen } from '@capacitor/splash-screen';
import { useEffect } from 'react';
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    if (!Capacitor.isNativePlatform()) return;
    // フォント・画像・初期API取得が終わってから呼ぶのが重要
    const t = setTimeout(() => { SplashScreen.hide({ fadeOutDuration: 200 }); }, 50);
    return () => clearTimeout(t);
  }, []);
  return <>{children}</>;
}

import { AdMob } from '@capacitor-community/admob';
import { AppTrackingTransparency } from 'capacitor-plugin-app-tracking-transparency';
 
export async function initAds() {
  // 1) ATTプロンプトを先に出す（iOS 14.5+のみ実際にダイアログ表示）
  const att = await AppTrackingTransparency.requestPermission();
  // 2) ステータスがauthorizedならパーソナライズ広告、それ以外は非パーソナライズ
  const npa = att.status === 'authorized' ? '0' : '1';
  // 3) ATT結果を踏まえてからAdMobを初期化
  await AdMob.initialize({
    requestTrackingAuthorization: false,  // 自前で先に呼んだのでfalse
    testingDevices: [],
    initializeForTesting: false,
  });
  // 4) 広告リクエスト時にnpaパラメータを付ける
  await AdMob.bannerAd.show({
    adId: 'ca-app-pub-XXXXXXXXXXXXXXXX/YYYYYYYYYY',
    adSize: 'ADAPTIVE_BANNER',
    position: 'BOTTOM_CENTER',
    margin: 0,
    npa,
  } as any);
}

import { FirebaseCrashlytics } from '@capacitor-community/firebase-crashlytics';
import { Capacitor } from '@capacitor/core';
 
export function installWebErrorBridge() {
  if (!Capacitor.isNativePlatform()) return;
  const send = (message: string, stacktrace?: string) => {
    FirebaseCrashlytics.recordException({ message, stacktrace }).catch(() => {});
  };
  window.addEventListener('error', (e) => {
    send(`[JS Error] ${e.message}`, e.error?.stack);
  });
  window.addEventListener('unhandledrejection', (e) => {
    const r = e.reason;
    send(`[Unhandled Promise] ${r?.message ?? String(r)}`, r?.stack);
  });
}

import { Preferences } from '@capacitor/preferences';
 
const KEY = 'auth.idToken';
 
export async function persistToken(token: string) {
  await Preferences.set({ key: KEY, value: token });
  localStorage.setItem(KEY, token);  // 同一セッション内のWeb側互換
}
 
export async function restoreTokenOnBoot() {
  const { value } = await Preferences.get({ key: KEY });
  if (value && !localStorage.getItem(KEY)) localStorage.setItem(KEY, value);
}