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

Capacitor 8でNuxtアプリをiOSおよびAndroidに変換

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

記事のクレジット

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

ライター

バレリア

レビュアー

ジョーダン

エディター

Capacitor 8でiOS & Androidに変換する

導入

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

Capacitorは、Webアプリをネイティブコンテナにラップし、カメラ、ファイルシステム、プッシュ通知などのデバイスAPIにアクセスできるようにします。既存のVueコードベースを維持しながら、FlutterまたはReact Nativeのように何も書き直す必要はありません。codeは、Nuxtとして動作します。

学びます:

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

新しいプロジェクトから始める準備ができた場合は、 Nuxtモバイルアプリの作成から.

Capacitorの利点

  • Codeの再利用:ウェブとモバイルアプリ間でVueコンポーネントとロジックを共有することができる
  • :Nuxtの静的生成は、最適化されたバンドルを作成し、モバイル向けに適していますネイティブ機能
  • :__CAPGO_KEEP_0__プラグインを使用して、デバイスの機能にアクセスすることができます (カメラ、位置情報、ファイルシステム): Access device features like camera, geolocation, and filesystem through Capacitor plugins.
  • __CAPGO_KEEP_0__はCapacitorです: Vue/Nuxt パターンを熟知したまま、ネイティブ開発を学ばずにモバイルアプリを構築する。

前提条件

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

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

モバイル用にNuxtとCapacitorを組み合わせたアプリを構築する

The first step is to configure your Nuxt app for static generation. Capacitor needs static HTML/JS/CSS files to bundle into the native app.

__CAPGO_KEEP_0__には、HTMLファイルが静的生成されていることを確認してください。 package.json __CAPGO_KEEP_0__の生成スクリプトが含まれていることを確認してください。

{
  "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"
  }
}

重要: サーバーサイド機能を使用している場合 (API ルート、サーバーミドルウェアなど)、クライアントサイドの代替または外部APIを使用する必要があります。

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

bun run generate

静的ファイルが含まれるフォルダが表示されます。これがCapgoがネイティブアプリにバンドルするものです。 .output/public folder with your static files. This is what Capacitor will bundle into your native app.

Adding Capacitor 8 to Your Project

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

  1. Install Capacitor core and CLI:
bun add @capacitor/core
bun add -D @capacitor/cli
  1. CapgoのCapacitorプラグインをインストールしてください。
bun add @capacitor/app @capacitor/keyboard @capacitor/splash-screen @capacitor/status-bar @capacitor/preferences

これらのプラグインは、以下の機能を提供します。

  • @capacitor/app: アプリのライフサイクルイベントをハンドル (前景/背景、ディープリンク)
  • @capacitor/keyboard: モバイルデバイス上のキーボードの動作を制御
  • @capacitor/splash-screen: ネイティブのスプラッシュスクリーンを管理
  • @capacitor/status-bar: デバイスのステータスバーをスタイル化
  • @capacitor/preferences: キー値ストレージ (localStorageと同様のネイティブストレージ)
  1. Initialize Capacitor with your project details:
bunx cap init my-app com.example.myapp --web-dir .output/public

置き換え my-app アプリ名と com.example.myapp アプリID (逆ドメイン記法) を指定してください。

  1. Capgoの設定ファイルである capacitor.config.ts ファイルを生成または更新してください。
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 will create ios フォルダを作成し、ネイティブプロジェクトを含むプロジェクトのルートに配置します。 android Androidプロジェクトをビルドするには

必要なものがあります Android Studio. For iOS, you need a Mac with iOS用には.

  1. Xcode
bun run mobile

プロジェクトをビルドして同期する:

このコマンドは、カスタムスクリプトを実行し、静的Nuxtビルドを生成し、ネイティブプラットフォームとファイルを同期します。

ネイティブアプリのビルドと配布

ネイティブモバイルアプリをビルドおよび配布するには、以下の手順に従ってください。 iOSアプリを開発するには Xcode がインストールされている必要があります。また、Androidアプリを開発するには Android Studio

  1. __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ を開いてください:

iOS の場合:

bun run mobile:ios

Android の場合:

bun run mobile:android

または直接に Capacitor CLI を使用:

bunx cap open ios
bunx cap open android
  1. アプリをビルドして実行してください:

android-studio-run

  • Android Studio で、プロジェクトが準備されるのを待ち、次に「実行」ボタンをクリックして、接続されたデバイスまたはエミュレータにアプリをデプロイしてください。

xcode-run

  • Xcode で、実機にアプリをデプロイするために署名アカウントを設定してください。アカウントを設定する必要がある場合は、Xcode がガイドを提供します (Apple Developer Program に登録している必要があります)。設定が完了したら、「再生」ボタンをクリックして、接続されたデバイスでアプリを実行してください。

おめでとうございます！ Nuxt の Web アプリをモバイル デバイスに成功でデプロイしました。

nuxtjs-mobile-app

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

Capacitor Live Reload

開発中は、実機で即時反映することができるLive Reload機能を利用できます。Live Reloadを有効にするには、以下の手順に従ってください。

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

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

    ipconfig getifaddr en0

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

    ipconfig

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

  1. 開発サーバーのURLを更新してください。 capacitor.config.ts CapacitorのURLを置き換えてください。
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;

ローカルIPアドレスに置き換えてください (例:) YOUR_IP_ADDRESS nativeプロジェクトに変更を適用してください。 192.168.1.100).

  1. Capacitorの
bunx cap copy

__CAPGO_KEEP_0__ copy コマンドは、Web フォルダと構成変更をネイティブ プロジェクトにコピーし、プロジェクト全体を更新せずにします。

  1. Xcode/Android Studio で開発サーバーを起動し、再構築してください:
bun run dev

変更を加えたあと、Nuxt アプリの変更が反映されるように、モバイル アプリが自動的に再読み込みされます。

注: 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 プラグインを使用する例をご紹介します。 Share プラグインのインストール Share プラグインを使用するページを作成または更新します。Nuxt 4 では、ページは

  1. ネイティブ プロジェクトと同期してください:
bun add @capacitor/share
  1. __CAPGO_KEEP_0__ 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. __CAPGO_KEEP_0__
bun run mobile

または、再構築せずにsyncするだけ:

bunx cap sync
  1. アプリをデバイスに再構築して実行します。

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

次に、iOSとAndroidでネイティブのUIを実現するために、Capgoナビゲーションとトランジションを使用し、水平オーバーフローまたは安全エリアがカットされたiOSの一般的なレイアウト問題を修正できます。

ネイティブのUIに似たCapgoネイティブナビゲーションとトランジション

私は Ionic を使用して 複数のプラットフォームのアプリケーションを構築するために.

For a native mobile feel in a Nuxt + Capacitor app, use Capgo plugins instead of web-only UI kits like Konsta UI:

  • @capgo/capacitor-native-navigation を持っている場合、ほとんどの場合、価値がありません。Nuxt + __CAPGO_KEEP_0__アプリでネイティブのモバイルのフィールを実現するには、WebのみのUIキットのようなKonsta UIではなく、__CAPGO_KEEP_1__プラグインを使用します。
  • capgo-capacitor-transitions --- WebView層のIonicスタイルのページ遷移とiOSのエッジスワイプバック

インストールする:

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

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

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>

ページをwrapする: cap-router-outlet, cap-page, cap-content, setDirection('forward') または setDirection('back') __CAPGO_KEEP_0__

ネイティブのナビゲーションがウェブヘッダーまたはフッターを複製しないようにします。 Using @capgo/capacitor-native-navigation と Using @capgo/capacitor-transitions.

安全領域

For __CAPGO_KEEP_0__の安全領域の場合、 @capgo/tailwind-capacitor (公開日 tailwind-capacitor on npm) safe-areas utilities and other Capacitor-friendly Tailwind plugins:

bun add -D tailwind-capacitor

@__CAPGO_KEEP_0__に適した app/assets/css/main.css:

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

In nuxt.config.ts.

For Nuxt 4 with Tailwind CSS 4、CSSファイルに含めるには、以下のimportを保持してください。 pt-safe, pb-safe、そして px-safe 代わりに手作業で env(safe-area-inset-*) 手作業でなくてはならない open a PR on GitHub.

__CAPGO_KEEP_0__にPRを開く

iOSレイアウトの修正 (ビューポート、セーフエリア、水平オーバーフロー) overflow-x: hidden iOSでコンテンツが切り取られた、ずれた、または水平方向にスクロールできるようになっている場合、ビューポートタグを追加したり修正したりするだけでは通常解決しません。順序に従ってこれらのチェックを実行してください。

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

、で 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が切り取られたり大きすぎるように見えることがよくあります。

Capacitorと組み合わせて @capgo/tailwind-capacitorを使用すると、同じ余白を表現できるユーティリティが得られます。 pt-safe pb-safe px-safe __CAPGO_KEEP_0__ iOS

Set Capacitor iOS contentInset Live Update Dynamic Label To never に設定します。

最初に capacitor.config.ts、 contentInsetMode: 'css'Native Navigationの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__のパディングは、ダブルスペースの原因となる一般的な問題です。

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

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

Safari Web Inspectorで実行します:

[...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, セーフエリアのパディングの重複、または固定幅のコンテナから来ています。— ではなく、ビューポートメタタグ自体から。

結論

CapacitorのiOSおよびAndroidアプリに成功しました。

達成したこと:

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

次のステップ:

  • セットアップ Capgo __CAPGO_KEEP_0__
  • Camera、Geolocation、Push Notificationsなどのネイティブプラグインを追加
  • アプリのアイコンとスプラッシュスクリーンをプロダクション用に設定
  • アプリをApp StoreとGoogle Playの提出用に準備

新しいプロジェクトから始める場合は、 Nuxtモバイルアプリの作成から ガイド付きのチュートリアルを参照

リソース

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

続きます。Nuxt アプリを iOS &amp; Android に変換する Capacitor 8

あなたが使用している Nuxt アプリを iOS &amp; Android に変換する Capacitor 8 ネイティブ プラグインの作業を計画する場合、__CAPGO_KEEP_0__ プラグイン ディレクトリと接続する Capgo for the product workflow in Capgo Plugin Directory, Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, プラグインの追加または更新 プラグインの追加または更新の実装詳細 Ionic エンタープライズ プラグインの代替 Capacitor Native ビルド Capgo Native Builds for the product workflow in Capgo Native Builds.

Live updates for Capacitor apps

ウェブ層のバグが生じた場合、Capgo を通じて修正を配信し、App Storeの承認待ちの日数を待たずに。ユーザーはバックグラウンドで更新を受け取り、ネイティブの変更は通常のレビュー経路で残る。

マーティンから人間のサポートを受けます。

今すぐ始めましょう

最新のブログ記事

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

Capacitor アプリ
開発 モバイル +1
2025年4月26日

Capacitor アプリ

5 OTA を回避するための一般的なミス
開発 セキュリティ +1
企業製品/価格ページ

UIラベル

5 OTA を回避するための一般的なミス
モバイルアプリのライブアップデートのための 5 セキュリティ上のベストプラクティス モバイル +1
2025年1月14日

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

すべてのブログ記事を参照