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

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

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

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

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

コンテンツマーケター
Capacitor 8を使用してNuxtアプリをiOS & Androidに変換する

Introduction

既存のNuxt Webアプリがある場合? Capacitor __CAPGO_KEEP_0__

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.

__CAPGO_KEEP_0__は、既存のVueコードベースを保持しながら、カメラ、ファイルシステム、プッシュ通知などのデバイスAPIにアクセスできるネイティブコンテナでWebアプリをラップします。FlutterやReact Nativeとは異なり、再実装する必要はありません — Nuxt __CAPGO_KEEP_1__はそのまま動作します。

  • 学ぶこと:
  • Add Capacitor 8 with essential native plugins
  • __CAPGO_KEEP_0__ 8に基本的なネイティブプラグインを追加する
  • iOSおよびAndroidシミュレータでビルドおよびテストする
  • 開発のためにライブリロードを有効にする

オプションでKonsta UIを追加してネイティブなコンポーネントを使用する Nuxtモバイルアプリの作成から.

Capacitorを使用するNuxtの利点

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

前提条件

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

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

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

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

__CAPGO_KEEP_0__ が静的ファイルを生成するように確認してください 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"
  }
}

重要な注意: サーバーサイド機能 (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/キーボードアプリのキーボード動作を制御する
  • @capacitor/スプラッシュスクリーンネイティブのスプラッシュスクリーンを管理する
  • @capacitor/ステータスバーデバイスのステータスバーをスタイリングする
  • @capacitor/設定キーバリューストレージ (localStorageと同様のネイティブストレージ)
  1. Capacitorをプロジェクトの詳細と初期化する:
bunx cap init my-app com.example.myapp --web-dir .output/public

置き換え my-app にアプリ名を入力する com.example.myapp アプリケーションID (逆ドメイン記法) を使用して。

  1. Create or update the 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 はプロジェクトのルートディレクトリにネイティブプロジェクトを含むフォルダを作成します。 ios Android プロジェクトをビルドするには、Android Studio が必要です。 android iOS の場合、Mac と Xcode が必要です。

Install native platforms: Add the native platform folders:__CAPGO_KEEP_0__ will create and.

  1. プロジェクトをビルドしてSync: 
bun run mobile

このスクリプトを実行すると、静的Nuxtビルドが生成され、ネイティブプラットフォームとファイルをSyncします。

ネイティブアプリのビルドとデプロイ

ネイティブモバイルアプリをビルドしてデプロイするには、次の手順に従ってください。

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

  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に登録している必要がある)。設定が完了したら、接続された実機でアプリを実行するには「Play」ボタンをクリックする。

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

nuxtjs-mobile-app

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

Capacitor Live Reload

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

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

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

    ipconfig getifaddr en0

  • Windows上では、以下のコマンドを実行してください:

    ipconfig

    出力に表示されるIPv4アドレスを探してください。

  1. __CAPGO_KEEP_0__を更新してください。 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;

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

  1. コマンドは、webフォルダと構成変更をnativeプロジェクトにコピーし、プロジェクト全体を更新せずに実行します。
bunx cap copy

Nuxt devサーバーを起動し、Xcode/Android Studioで再構築してください: copy Nuxtアプリに変更を加えた場合、モバイルアプリは自動的にリロードされ、変更を反映します。

  1. コマンドは、webフォルダと構成変更をnativeプロジェクトにコピーし、プロジェクト全体を更新せずに実行します。
bun run dev

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

注意: 新しいプラグインをインストールしたり、ネイティブファイルを変更したりした場合、ライブリロードはウェブ code の変更のみに適用されるため、ネイティブプロジェクトを再構築する必要があります。

Capacitor プラグインの使用

Capacitor プラグインは、Nuxtアプリからネイティブデバイスの機能にアクセスできるようにします。Shareプラグインを使用する例をご紹介します。 Shareプラグインのインストール Shareプラグインを使用するページを作成または更新します。Nuxt 4 では、ページは

  1. ネイティブプロジェクトと同期します。
bun add @capacitor/share
  1. または再構築せずに同期します。 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

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

bunx cap sync
  1. Using __CAPGO_KEEP_0__ Plugins

Plugins

__CAPGO_KEEP_0__ v5 を追加する

iOS と Android のネイティブなコンポーネントを実現するために、Konsta UI を追加して、ボタンがモバイルフレンドリーな見た目になるようにします。

必要なものは すでに Tailwind CSS 4 がインストールされている必要があります.

  1. 必要なパッケージをインストールする:
bun add konsta
bun add tailwindcss @tailwindcss/vite
  1. Vite プラグインを設定する: nuxt.config.ts:
import tailwindcss from '@tailwindcss/vite';

export default defineNuxtConfig({
  compatibilityDate: '2025-01-15',
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  vite: {
    plugins: [tailwindcss()],
  },
});
  1. 作成する app/assets/css/main.css:
@import 'tailwindcss';
@import 'konsta/theme.css';
  1. Konsta UI のコンポーネントをアプリにラップする: App __CAPGO_KEEP_0__ を更新して、Konsta UI のコンポーネントを使用する: app/app.vue:
<template>
  <App theme="ios">
    <NuxtPage />
  </App>
</template>

<script setup>
import { App } from 'konsta/vue';
</script>
  1. Material Design テーマのために Roboto フォントを追加する:
<template>
  <Page>
    <Navbar title="My App" />

    <Block strong>
      <p>
        Here is your Nuxt & Konsta UI app. Let's see what we have here.
      </p>
    </Block>

    <BlockTitle>Navigation</BlockTitle>
    <List>
      <ListItem href="/about/" title="About" />
      <ListItem href="/form/" title="Form" />
    </List>

    <Block strong class="flex space-x-4">
      <Button>Button 1</Button>
      <Button>Button 2</Button>
    </Block>
  </Page>
</template>

<script setup>
import {
  Page,
  Navbar,
  Block,
  Button,
  List,
  ListItem,
  BlockTitle,
} from 'konsta/vue';
</script>
  1. Nuxt アプリは、ネイティブなモバイル UI を持つべきです: nuxt.config.ts:
export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
        { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
        {
          rel: 'stylesheet',
          href: 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap',
        },
      ],
    },
  },
  // ... rest of config
});

__CAPGO_KEEP_1__

konsta-nuxt

Conclusion

Capgoを使用して、既存のNuxt WebアプリケーションをiOSおよびAndroid用のネイティブアプリケーションに変換しました。Capacitor 8を使用しました。

実施したこと:

  • Nuxtを静的生成用に設定
  • Added Capacitor 8 with essential plugins
  • iOSおよびAndroidのシミュレータにビルドおよびデプロイ
  • 開発用にライブリロードを有効
  • オプションで、ネイティブなUIコンポーネントを追加することができます。

次のステップ:

  • Capgoをセットアップ Capgo アプリをオンラインで更新するためにアプリストアへの再提出を必要とせずに
  • カメラ、位置情報、またはプッシュ通知などのネイティブ プラグインを追加する
  • 実稼動用のアプリアイコンとスプラッシュスクリーンを設定する
  • アプリストアとGoogle Playへの提出を準備する

新しいプロジェクトから始める場合はこちらをご覧ください Nuxtモバイルアプリの作成から ガイド付きウォークスルー

リソース

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

Capacitor 8 を使用して、Nuxt アプリを iOS と Android に変換し続けます。

__CAPGO_KEEP_0__ を使用している場合 Nuxt アプリを iOS と Android に変換する Capacitor 8 ネイティブ プラグインの作業を計画するには、 __CAPGO_KEEP_0__ 8 を接続します。 Capgo プラグイン ディレクトリ Capgo プラグイン ディレクトリの製品ワークフロー Capacitor Plugins by Capgo Capgo による Capacitor プラグイン __CAPGO_KEEP_0__ プラグインの実装詳細 実装詳細の追加または更新の場合の実装詳細 Ionic Enterprise プラグインの代替 Ionic Enterprise プラグインのワークフロー Capgo ネイティブ ビルドのための製品ワークフロー Capgo ネイティブ ビルドのための製品ワークフロー

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

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

Get Started Now

Latest from our Blog

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

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

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

5つのOTA更新ミスを避ける
開発、セキュリティ、更新
2025年4月13日

5つのOTAアップデートのミスを避ける方法

モバイルアプリのライブアップデートのセキュリティのベストプラクティス
開発、モバイル、更新
2025年1月14日

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

ブログからすべてを参照