メインコンテンツにジャンプ
Capgo ロゴ
チュートリアル

Capacitor 8でiOS & Androidに変換する

Capacitor 8を使用して、既存のNuxt 4 Webアプリケーションを静的生成、ネイティブプラグインの追加、App Storeへのデプロイまで、ネイティブiOSおよびAndroidモバイルアプリケーションに変換する完全なガイド。

マーティン・ドナディュー

マーティン・ドナディュー

コンテンツマーケター
Capacitor 8でiOS & Androidに変換する

導入

既存のNuxt Webアプリケーションを持っている場合、このガイドでは、__CAPGO_KEEP_0__ 8を使用してネイティブiOSおよびAndroidモバイルアプリケーションに変換する方法を学びます。 Capacitor 8 — 最新バージョンで、パフォーマンスが向上し、新機能が追加されています。

Capacitor は、カメラ、ファイルシステム、プッシュ通知などのデバイス API にアクセスできるネイティブ コンテナにアプリケーションをラップします。既存の Vue コードベースを変更する必要はありません — Nuxt code はそのまま動作します。

学習すること:

  • 既存の Nuxt アプリを静的生成用に設定する
  • Capacitor 8 に必要なネイティブ プラグインを追加する
  • iOS と Android シミュレータでビルドおよびテストする
  • 開発を高速化するためにライブ リロードを有効にする
  • iOS の一般的なレイアウト問題 (ビュー ポート、セーフ エリア、水平 オーバーフロー) を修正する
  • Capgo Native Navigation と Transitions を使用してネイティブ フィーリングの UI を追加する

新しいプロジェクトから始めるには、 Nuxt モバイル アプリをゼロから構築する方法のガイドを参照してください.

Nuxt と Capacitor を使用する利点

  • Code の再利用性: モバイルアプリとウェブアプリ間でVueコンポーネントとロジックを共有する。
  • パフォーマンス: Nuxtの静的生成により、モバイル向けに最適化されたバンドルが作成されます。
  • ネイティブ機能: Capacitor プラグインを使用して、カメラ、位置情報、ファイルシステムなどのデバイス機能にアクセスできます。
  • 開発の簡素化: FamiliarなVue/Nuxtパターンを使用して、ネイティブ開発を学ぶことなく開発を進めます。

前提条件

: 開始する前に、以下を確認してください。

  • Node.js 18+ インストール済み
  • 既存の Nuxt 4 アプリケーション
  • Xcode (iOS開発用、macOSのみ)
  • Android Studio (Android開発用)

Nuxtアプリをモバイル向けに設定する

Nuxtアプリを静的生成するには、最初にNuxtアプリを静的生成用に設定する必要があります。Capacitorが静的HTML/JS/CSSファイルをネイティブアプリにバンドルする必要があるためです。

generateスクリプトが含まれていることを確認してください: package.json 重要:

{
  "scripts": {
    "dev": "nuxt dev",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "mobile": "bun run generate && bunx cap sync",
    "mobile:ios": "bun run mobile && bunx cap open ios",
    "mobile:android": "bun run mobile && bunx cap open android"
  }
}

サーバーサイド機能 (__CAPGO_KEEP_0__ ルート、サーバーミドルウェアなど) を使用している場合、クライアントサイドの代替または外部APIを使用する必要があります。 If you’re using server-side features (API routes, server middleware, etc.), you’ll need to refactor those to use client-side alternatives or external APIs.

静的生成をテストするには、以下のコマンドを実行してください。

bun run generate

静的ファイルが含まれるフォルダを確認してください。 これは、__CAPGO_KEEP_0__ がネイティブアプリにバンドルするものです。 .output/public folder with your static files. This is what Capacitor will bundle into your native app.

Adding Capacitor 8 to Your Project

Capgo のコアと __CAPGO_KEEP_1__ をインストールしてください。

  1. Install Capacitor core and CLI:
bun add @capacitor/core
bun add -D @capacitor/cli
  1. Install common Capacitor plugins you’ll likely need:
bun add @capacitor/app @capacitor/keyboard @capacitor/splash-screen @capacitor/status-bar @capacitor/preferences

@__CAPGO_KEEP_0__/app

  • @capacitor/app@__CAPGO_KEEP_0__/keyboard
  • @capacitor/keyboard@__CAPGO_KEEP_0__/app
  • @capacitor/splash-screen:
  • @capacitor/status-bar@__CAPGO_KEEP_0__/status-bar
  • @capacitor/preferencesデバイスのステータスバーをスタイルする
  1. @Capacitor/preferences
bunx cap init my-app com.example.myapp --web-dir .output/public

: my-app localStorageと同様の機能を持つキー値ストレージ com.example.myapp プロジェクトの詳細を__CAPGO_KEEP_0__に初期化する:

  1. をアプリ名に置き換え capacitor.config.ts をアプリID (逆ドメイン記法) に置き換え (例: com.example.myapp)。アプリIDは、プロジェクトの識別子として使用されます。
import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: '.output/public',
  plugins: {
    SplashScreen: {
      launchShowDuration: 2000,
      launchAutoHide: true,
      androidScaleType: 'CENTER_CROP',
      splashFullScreen: true,
      splashImmersive: true,
    },
    Keyboard: {
      resize: 'body',
      resizeOnFullScreen: true,
    },
    StatusBar: {
      style: 'dark',
    },
  },
};

export default config;
  1. ネイティブプラットフォームをインストールする:
bun add @capacitor/ios @capacitor/android
  1. ネイティブプラットフォームフォルダを追加する:
bunx cap add ios
bunx cap add android

Capacitorはプロジェクトのルートディレクトリにネイティブプロジェクトを含むフォルダを作成します。 ios アンドロイドプロジェクトをビルドするには android Android Studio

が必要です。iOSの場合は Xcodeが必要です。Macです。 プロジェクトをビルドして同期する:.

  1. これは、静的Nuxtビルドを生成し、ネイティブプラットフォームとファイルを同期するカスタムスクリプトを実行します。
bun run mobile

ネイティブアプリをビルドしてデプロイする:

__CAPGO_KEEP_0__

nativeモバイルアプリをビルドおよび配信するには、以下の手順に従ってください。

iOSアプリを開発するには、 Xcode がインストールされている必要があります。また、Androidアプリを開発するには、 Android Studio がインストールされている必要があります。さらに、App Storeでアプリを配信する場合、iOSの場合はApple Developer Programに登録し、Androidの場合はGoogle Play Consoleに登録する必要があります。

  1. nativeプロジェクトを開く:

iOSの場合:

bun run mobile:ios

Androidの場合:

bun run mobile:android

または直接Capacitor CLIで:

bunx cap open ios
bunx cap open android
  1. アプリをビルドおよび実行する:

android-studio-run

  • In Android Studio, projectが準備できたら、実機またはエミュレータにアプリをデプロイするために「Run」ボタンをクリックしてください。

xcode-run

  • In Xcode,実機にアプリをデプロイするために署名アカウントを設定してください。署名アカウントを設定することは初めての場合は、Xcodeはプロセスをガイドします (Apple Developer Programに登録している必要があります)。設定が完了したら、「Play」ボタンをクリックして実機にアプリを実行してください。

Congratulations! Nuxt webアプリをモバイルデバイスに成功でデプロイしました。

nuxtjs-mobile-app

しかし、開発中にはもっと速くする方法もあります…

Capacitor Live Reload

開発中は、モバイルデバイスで即時変更を確認するためにLive Reloadを利用できます。Live Reloadを有効にするには、以下の手順に従ってください。

  1. ローカルIPアドレスを探してください。

  • macOSの場合、ターミナルで以下のコマンドを実行してください。

    ipconfig getifaddr en0

  • Windowsの場合、以下のコマンドを実行してください。

    ipconfig

    出力でIPv4アドレスを探してください。

  1. アップデート capacitor.config.ts __CAPGO_KEEP_0__に開発サーバーへのパスを設定してください:
import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: '.output/public',
  server: {
    url: 'http://YOUR_IP_ADDRESS:3000',
    cleartext: true,
  },
  plugins: {
    // ... your plugin config
  },
};

export default config;

に置き換えます。 YOUR_IP_ADDRESS ローカルIPアドレス (例えば、 192.168.1.100).

  1. ネイティブプロジェクトに変更を適用してください:
bunx cap copy

コマンドは、Webフォルダと構成変更をネイティブプロジェクトにコピーし、プロジェクト全体を更新せずにします。 copy Nuxtの開発サーバーを起動し、Xcode/Android Studioで再構築してください:

  1. Nuxtアプリに変更を加えた場合、モバイルアプリは自動的にリロードされ、変更を反映します。
bun run dev

注意:

新しいプラグインをインストールしたりネイティブファイルに変更を加えた場合、ライブリロードはWeb __CAPGO_KEEP_0__ の変更にのみ適用されるため、ネイティブプロジェクトを再構築する必要があります。 If you install new plugins or make changes to native files, you’ll need to rebuild the native project since live reloading only applies to web code changes.

Capacitor

Capacitor プラグインは、Nuxt アプリからネイティブ デバイスの機能にアクセスすることを可能にします。ネイティブ デバイスの機能を使用する方法をご紹介しましょう。 Share プラグイン を使用する例としてご紹介します。

  1. Share プラグインをインストールするには、以下のコマンドを実行してください。
bun add @capacitor/share
  1. Share プラグインを使用するページを作成または更新します。Nuxt 4 では、ページは以下のディレクトリに配置します。 app/pages/:
<template>
  <div class="p-6">
    <h1 class="text-2xl font-bold mb-4">Welcome to Nuxt + Capacitor!</h1>
    <button
      @click="shareContent"
      class="px-6 py-3 bg-blue-600 text-white rounded-lg font-semibold"
    >
      Share now!
    </button>
  </div>
</template>

<script setup lang="ts">
import { Share } from '@capacitor/share';

async function shareContent() {
  await Share.share({
    title: 'Check this out!',
    text: 'Built with Nuxt and Capacitor',
    url: 'https://capacitorjs.com',
    dialogTitle: 'Share with friends',
  });
}
</script>
  1. 変更をネイティブ プロジェクトと同期するには、以下のコマンドを実行してください。
bun run mobile

または、ビルドせずに同期する場合は以下のコマンドを実行してください。

bunx cap sync
  1. アプリをデバイス上で実行するには、以下のコマンドを実行してください。

「Share now!」ボタンをクリックすると、ネイティブ シェア ダイアログが表示されます。

次に、iOS と Android でアプリがネイティブに感じられるようにするには、Capgo ナビゲーションとトランジションを使用し、水平オーバーフローまたはカットオフされたセーフエリアを引き起こすiOSの一般的なレイアウト問題を修正することができます。

ネイティブ フィーリングのUIを作成するには、Capgo Native Navigation and Transitionsを使用することができます。

私は数年間、 Ionic クロスプラットフォームアプリケーションを構築するには、Nuxtと統合することはハック的で、既存のものと比較してほとんど価値がない場合にのみ使用することをお勧めします。 Tailwind CSS.

Nuxt + Capacitorアプリケーションで、ネイティブモバイルのフィールを得るには、WebのみのUIキットであるKonsta UIではなく、Capgoプラグインを使用することをお勧めします。

  • @capgo/capacitor-native-navigation —ネイティブのナビゲーションバー、iOSのLiquid Glassタブバー、Androidのブラーされたタブバーのスタイル。Nuxtルーターはルートの状態を維持しますが、プラグインはネイティブのブラウザを所有します。
  • @capgo/capacitor-transitions —IonicスタイルのページトランジションとiOSのエッジスワイプバックをWebViewレイヤーに実装することなく、Ionic UIを採用する必要はありません。

両方をインストールする

bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap sync

ネイティブのナビゲーションをCSSのインセットモードで構成して、Webコンテンツがネイティブのバーを尊重するようにします。

import { NativeNavigation } from '@capgo/capacitor-native-navigation';

await NativeNavigation.configure({
  contentInsetMode: 'css',
  animationDuration: 360,
  glass: {
    effect: 'liquidGlass',
  },
});

液体ガラスのタブバーをレンダリングします (iOSはシステムが所有するレンダリングを使用し、AndroidはブラーされたWebViewのバックグラウンドを使用します)。

await NativeNavigation.setTabbar({
  selectedId: 'home',
  labelVisibilityMode: 'labeled',
  icons: true,
  colors: { dynamic: true },
  tabs: [
    { id: 'home', title: 'Home', icon: { svg: '...' } },
    { id: 'settings', title: 'Settings', icon: { svg: '...' } },
  ],
});

await NativeNavigation.addListener('tabSelect', ({ id }) => {
  router.push(`/${id}`);
});

ネイティブのページトランジションをアプリケーションシェルに追加します

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import '@capgo/capacitor-transitions';
import { initTransitions, setDirection, setupRouterOutlet } from '@capgo/capacitor-transitions/vue';

initTransitions({ platform: 'auto' });

const router = useRouter();
const outletRef = ref(null);

onMounted(() => {
  if (outletRef.value) {
    setupRouterOutlet(outletRef.value, { platform: 'auto', swipeGesture: 'auto' });
  }
});

const openSettings = () => {
  setDirection('forward');
  router.push('/settings');
};
</script>

<template>
  <cap-router-outlet ref="outletRef">
    <router-view />
  </cap-router-outlet>
</template>

ルーティングされたページを cap-router-outlet, cap-page, および cap-content, および呼び出す setDirection('forward') または setDirection('back') 移動する前に。ネイティブのナビゲーションが管理するヘッダーまたはフッターを複製しないでください。

詳細なガイドを参照してください: Using @capgo/capacitor-native-navigation と Using @capgo/capacitor-transitions.

セーフエリアにTailwind

デバイスのセーフエリアにTailwind CSSを使用するには @capgo/tailwind-capacitor (published as tailwind-capacitor npm) safe-areas utilities and other Capacitor-friendly Tailwind plugins:

bun add -D tailwind-capacitor

の機能や app/assets/css/main.css:

@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";

Nuxt 4とTailwind CSS 4の場合、CSSファイルに nuxt.config.ts.

の機能や pt-safe, pb-safeの機能や px-safe の機能や env(safe-area-inset-*) の機能や open a PR on GitHub.

の機能や

の機能や overflow-x: hidden または、ビューポートタグを調整するだけでは通常解決されません。順序に従ってこれらのチェックを実行してください。

ビューポートメタタグが正しく適用されていることを確認してください

したがって nuxt.config.ts、ビューポートを app.head:

export default defineNuxtConfig({
  app: {
    head: {
      meta: [
        {
          name: 'viewport',
          content: 'width=device-width, initial-scale=1, viewport-fit=cover',
        },
      ],
    },
  },
});

iOSのセーフエリアを1つのルートラッパーからのみ処理する

単一のアプリシェルを作成し、セーフエリアのパディングをそこに適用する — 複数のネストされたコンポーネントに適用するのではなく

html,
body,
#__nuxt {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

.app-shell {
  min-height: 100dvh;
  width: 100%;
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

すべてのページコンテンツを .app-shellヘッダー、モーダル、レイアウトラッパーなどで複製されたセーフエリアのパディングがUIが切り取られたり大きすぎるように見えることがよくあります。

その 、@capgo/tailwind-capacitorで、同じパディングをユーティリティとして表現できます。 pt-safe pb-safe px-safe その単一のシェルに

Capacitor iOSをセット contentInset に never 最初

In capacitor.config.ts、 contentInsetMode: 'css'native insetを無効にしてCSS（またはNative Navigationの）

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: 'out',
  ios: {
    contentInset: 'never',
  },
};

Mixing Capacitor’s automatic content inset with CSS env(safe-area-inset-*) __CAPGO_KEEP_0__の自動コンテンツインセットとCSSのパディングを組み合わせると、一般的なダブルスペースの原因です。

実際にオーバーフローしている要素を探します

通常の原因は、 100vwTailwind w-screen、固定ピクセル幅、または大きい min-width.

In Safari Web Inspector, run:

[...document.querySelectorAll('*')]
  .filter(el => el.scrollWidth > document.documentElement.clientWidth)
  .map(el => ({
    el,
    tag: el.tagName,
    class: el.className,
    scrollWidth: el.scrollWidth,
    clientWidth: document.documentElement.clientWidth,
  }));

Tailwindを使用すると、 w-screen に置き換えることができます。 w-full 可能な限り。 100vw / w-screen水平方向のオーバーフロー問題の多くは、

安全なエリアの重複したパディング、または固定幅のコンテナから来ています — ではなく、

You’ve successfully converted your existing Nuxt web application into native iOS and Android apps using Capacitor 8. Your Vue codebase now runs natively on mobile devices with access to device APIs.

結論

  • 既存のNuxt Webアプリケーションを、__CAPGO_KEEP_0__ 8を使用して、成功的にiOSおよびAndroidアプリに変換しました。
  • Added Capacitor 8 with essential plugins
  • あなたが達成したこと:
  • 静的生成用にNuxtを設定しました。
  • iOSレイアウトの一般的な問題を解決しました (ビューポート、セーフエリア、オーバーフロー)
  • CapgoのネイティブなUIを追加しました。Native NavigationとTransitions

次のステップは

  • セットアップ Capgo アプリストアの再提出なしでオーバー・ザ・エア更新を行う
  • カメラ、位置情報、プッシュ通知などのネイティブなプラグインを追加する
  • アプリアイコンとスプラッシュスクリーンをプロダクション用に設定する
  • アプリストアとGoogle Playの提出用にアプリを準備する

新しいプロジェクトから始めるのですか?「Nuxt Mobile Appから始める」 ネイティブなUIを使用したNuxt Mobile Appの作成 ガイド付きのチュートリアル「Nuxt Mobile Appから始める」を参照してください

リソース

Capgo を使って、より良いアプリをより速く作る方法を学びましょう、 無料アカウントに登録してください 今日。

Convert Your Nuxt App to iOS &amp; Android with Capacitor 8

Capgoを利用している場合 Convert Your Nuxt App to iOS &amp; Android with Capacitor 8 Capgoを利用している場合、 Capgo Plugin Directory for the product workflow in Capgo Plugin Directory, Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, Capgoプラグインの実装詳細 Adding or Updating Plugins Capgoプラグインの実装詳細 Ionic Enterprise プラグイン代替品の製品ワークフローについて Capgoネイティブビルド Capgoネイティブビルドの製品ワークフローについて

Capacitorアプリのリアルタイム更新

ウェブ層のバグが生じた場合、Capgoを使用して修正を配信するのではなく、数日間待ってアプリストアの承認を待つのではなく、ユーザーはバックグラウンドで更新を受け取り、ネイティブの変更は通常のレビュー経路で残る。

スタートする

ブログの最新記事

Capgoは、プロフェッショナルなモバイルアプリを作成するために必要な最良の洞察を提供します。

Capacitorアプリで2方向のコミュニケーション
開発 モバイル +1
2025年4月26日

2-Way Communication in Capacitor アプリ

5つのOTA更新の誤りを避ける
開発 セキュリティ +1
2025年4月13日

5つのOTA更新の誤りを避ける

モバイルアプリのライブ更新のための5つのセキュリティベストプラクティス
開発 モバイル +1
2025年1月14日

5 モバイル アプリ ライブ アップデートのためのセキュリティ ベスト プラクティス

See all from our blog