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

Capacitor 8を使用してNuxtアプリをiOS & Androidに変換する

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

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

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

コンテンツマーケター
NuxtアプリをiOS & Androidに変換する方法を学びましょう。 Capacitor 8

導入

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

Capacitor wraps your web app in a native container, giving you access to device APIs like camera, filesystem, and push notifications while keeping your existing Vue codebase. Unlike Flutter or React Native, you don’t need to rewrite anything — your Nuxt code runs as-is.

FlutterまたはReact Nativeとは異なり、__CAPGO_KEEP_1__をNuxtアプリに組み込むだけで済みます。

  • 学びたいこと
  • Add Capacitor 8 with essential native plugins
  • iOSとAndroidのシミュレータでビルドおよびテスト
  • 開発を高速化するためにライブリロードを有効にします
  • iOSの一般的なレイアウト問題 (ビュー ポート、セーフ エリア、水平オーバーフロー) を修正
  • Capgo Native Navigation and Transitionsを使用してネイティブフィーリングのUIを追加

新しいプロジェクトから始める準備ができた場合は、 Nuxt Mobile Appから始めるためのガイドをご確認ください.

Capacitorの利点

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

前提条件

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

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

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

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

Make sure your package.json には、generateスクリプトが含まれていることを確認してください:

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

静的ファイルが含まれた .output/public フォルダが表示されます。このフォルダは、Capacitorがネイティブアプリにバンドルするものです。

Capacitor 8をプロジェクトに追加する

Nuxtアプリをネイティブモバイルコンテナにパッケージ化するには、次の手順に従ってください。

  1. CapacitorコアとCLIをインストールしてください。
bun add @capacitor/core
bun add -D @capacitor/cli
  1. 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/: __CAPGO_KEEP_0__データストレージ (localStorageと同様のネイティブストレージ)
  1. プロジェクトの詳細情報でCapacitorを初期化してください:
bunx cap init my-app com.example.myapp --web-dir .output/public

置き換え my-app アプリ名と com.example.myapp アプリID (逆ドメイン記法)と

  1. 適切な構成で 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. __CAPGO_KEEP_0__でネイティブプラットフォームをインストールしてください:
bun add @capacitor/ios @capacitor/android
  1. __CAPGO_KEEP_0__でネイティブプラットフォームフォルダを追加してください:
bunx cap add ios
bunx cap add android

Capacitorは ios と android プロジェクトのルートディレクトリにあるフォルダは、ネイティブプロジェクトを含みます。

Androidプロジェクトをビルドするには、 Android Studioが必要です。iOSの場合は、 Xcode.

  1. がインストールされているMacが必要です。
bun run mobile

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

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

ネイティブアプリをビルドして配信する

ネイティブモバイルアプリをビルドして配信するには、以下の手順に従ってください。 iOSアプリを開発するには、 Xcode Android Studio をインストール済みです。また、App Storeでアプリを配布する場合、iOS用にApple Developer Programに登録し、Android用にGoogle Play Consoleに登録する必要があります。

  1. native projectsを開く:

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

開発中は、モバイルデバイスで即時反映できるように、ライブリロードを利用できます。ライブリロードを有効にするには、以下の手順に従ってください。

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

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

    ipconfig getifaddr en0

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

    ipconfig

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

  1. を更新してください。 capacitor.config.ts にローカルIPアドレスを入力してください（例えば、
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 にローカルIPアドレスを入力してください（例えば、 192.168.1.100).

  1. アプリケーションに変更を適用します:
bunx cap copy

この 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 プラグインをインストールします:

  1. __CAPGO_KEEP_0__ は保護されたトークンです
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の一般的なレイアウト問題を修正できます。

Capgo Native ナビゲーションとトランジションを使用することで、ネイティブフィーリングのUIが実現します。

数年間、 Ionic を使用してクロスプラットフォームアプリケーションを構築してきましたが、Nuxtと統合することはハック的で、既存の Tailwind CSS.

を使用することよりもほとんど価値がありません。ネイティブモバイルフィーリングを実現するには、Nuxt + Capacitor アプリで Capgo プラグインを使用するのではなく、WebのみのUIキットであるKonsta UIを使用するのではなく、

  • @capgo/capacitor-native- — iOSではLiquid Glassのタブバー、Androidでは背景がぼやけたタブバーのスタイルが使用されます。Nuxtルーターのルート状態は保持されますが、プラグインがネイティブのブラウザを管理します。
  • @capgo/capacitor- — WebViewレイヤー内で、Ionic UIを採用せずに、iOSのエッジスワイプバックとIonicスタイルのページトランジションが使用されます。

両方をインストールする:

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',
  },
});

Liquid Glassのタブバーをレンダリングします (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') 移動する前に注意してください。ネイティブのナビゲーションが管理するヘッダーまたはフッターを重複して表示しないでください。

詳細なガイドはこちらを参照してください: ネイティブのナビゲーションを使用する方法: @capgo/capacitor-native-navigation と ネイティブのトランジションを使用する方法: @capgo/capacitor-transitions.

セーフエリアの設定方法: Tailwind

デバイスのセーフエリアをTailwind CSSで設定するには、@__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__を使用します。 @capgo/tailwind-capacitor __CAPGO_KEEP_0__に適したTailwind プラグインの機能とその他の機能を提供します。 tailwind-capacitor on npm). It provides safe-areas utilities and other Capacitor-friendly Tailwind plugins:

bun add -D tailwind-capacitor

In app/assets/css/main.css:

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

For Nuxt 4 with Tailwind CSS 4, __CAPGO_KEEP_0__ import を CSS ファイルに含めておきます。 nuxt.config.ts.

のユーティリティを使用します。 pt-safe, pb-safe、 px-safe の代わりに、手作業で env(safe-area-inset-*) を散りばめずに。 open a PR on GitHub.

に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 つのルートラッパーからのみ管理する

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 を使用すると、 @capgo/tailwind-capacitor, 1 つのシェルにパディングを適用することで、同じパディングを表現できます。 pt-safe pb-safe px-safe __CAPGO_KEEP_0__ iOS のセーフエリアを

Set Capacitor iOS contentInset 最初に never 最初

In capacitor.config.tsnativeのインセットを無効にして、CSS (またはNative Navigationの) contentInsetMode: 'css'自動のセーフエリアとCSSのパディングを組み合わせることはよくある問題です。

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-*) 実際にオーバーフローしている要素を探します。

通常の原因は、

Tailwind 100vw固定ピクセル幅の要素、または大きすぎる w-screenSafari Web Inspectorで実行します。 min-width.

Tailwindの場合、

[...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,
  }));

を w-screen できる場合、多くの水平オーバーフロー問題は w-full の要素から来ています。 100vw / w-screen, 重複した安全エリアのパディング、または固定幅のコンテナ — これは、ビュー ポート メタ タグ自体からではない。

まとめ

あなたは Capacitor 8 を使用して、既存の Nuxt ウェブ アプリケーションをネイティブの iOS と Android アプリケーションに変換することに成功しました。 あなたの Vue コードベースは、デバイス API にアクセスできるモバイル デバイス上で動作します。

あなたが達成したこと:

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

次のステップ:

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

新しいプロジェクトから始める? Nuxtモバイルアプリの作成から ガイド付きウォークスルー

リソース

Capgoは、より良いアプリをより速く作るのに役立つ方法を学びましょう。 無料アカウントに登録する 今日。

Capacitor 8を使用して、NuxtアプリをiOS &amp; Androidに変換

あなたが使用している Capacitor 8を使用して、NuxtアプリをiOS &amp; Androidに変換 native プラグインの作業を計画するには、 Capgo プラグイン ディレクトリと接続する Capgo プラグイン ディレクトリ内での製品ワークフローについて Capacitor プラグインを Capgo で Capacitor プラグインを Capgo で実装する際の詳細 プラグインの追加または更新 プラグインの追加または更新の実装詳細 Ionic Enterprise プラグインの代替 Ionic Enterprise プラグインの代替の製品ワークフロー Capgo ネイティブ ビルド Capgo ネイティブ ビルドの製品ワークフロー

Set Capacitor iOS contentInset to never first

Capgo iOS contentInsetを最初に設定しないようにする

スタートする

最新のブログ記事

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

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

Capacitorアプリで2方向のコミュニケーション

OTA更新の5つの一般的なミスを避ける
開発 Security +1
April 13, 2025

5 Common OTA Update Mistakes to Avoid

5 Security Best Practices for Mobile App Live Updates
Development Mobile +1
January 14, 2025

5 Security Best Practices for Mobile App Live Updates

See all from our blog