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

Capacitor 8でiOS & Androidに変換する

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

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

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

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

導入

既存のNuxt Webアプリケーションを持っていますか? このガイドでは、__CAPGO_KEEP_0__ Capacitor 8 — 最新バージョンで改善されたパフォーマンスと新機能が含まれています。

Capacitor は、ウェブアプリをネイティブコンテナにラップすることで、カメラ、ファイルシステム、プッシュ通知などのデバイスAPIにアクセスできるようになります。既存のVueコードベースを変更する必要はありません — そのままNuxt code が実行されます。

学ぶこと:

  • 既存のNuxtアプリを静的生成用に設定する
  • Capacitor 8 に必要なネイティブプラグインを追加する
  • iOSとAndroidのシミュレータでビルドおよびテストする
  • 開発を高速化するためにライブリロードを有効にする
  • ネイティブ風のコンポーネントにKonsta UIを追加する (任意)

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

Nuxtと Capacitor の利点

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

前提条件

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

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

モバイル向けNuxtアプリの設定

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

生成スクリプトが含まれていることを確認してください: 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.

targetLanguage

bun run generate

あなたは静的ファイルのフォルダを確認するはずです。これが __CAPGO_KEEP_0__ がネイティブアプリにバンドルするものです。 .output/public Capacitor 8 をプロジェクトに追加する

Adding Capacitor 8 to Your Project

__CAPGO_KEEP_0__ のコアと __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__/splash-screen
  • インストールする必要がある一般的な capacitor プラグイン: 本地スプラッシュ画面を管理する
  • @capacitor/status-bar: デバイスのステータスバーをスタイルする
  • @capacitor/preferences: ローカルストレージと同じように動作するネイティブのキー値ストレージ
  1. プロジェクトの詳細をCapacitorに初期化する:
bunx cap init my-app com.example.myapp --web-dir .output/public

をアプリ名に置き換え、をアプリID (逆ドメイン表記) に置き換え my-app 適切な構成で作成または更新するファイル: com.example.myapp ネイティブプラットフォームをインストールする

  1. : 本地スプラッシュ画面を管理する capacitor.config.ts @__CAPGO_KEEP_0__/status-bar
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プロジェクトをビルドするには、 Android Studioが必要です。iOSの場合、 Xcode.

  1. が必要です。プロジェクトをビルドして同期するには:
bun run mobile

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

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

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

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

Or directly with Capacitor CLI:

bunx cap open ios
bunx cap open android
  1. __CAPGO_KEEP_0__

__CAPGO_KEEP_1__

  • アプリをビルドして実行する:

xcode-run

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

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

Nuxt.jsモバイルアプリ

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

Capacitor Live Reload

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

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

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

    ipconfig getifaddr en0

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

    ipconfig

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

  1. 更新してください capacitor.config.ts 開発サーバーにアクセスするには:
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の変更にのみ適用されるため、ネイティブプロジェクトを再構築する必要があります。 code プラグインの使用

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

Capacitor プラグインを共有 __CAPGO_KEEP_0__の例:

  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!」ボタンをクリックすると、ネイティブの共有ダイアログが表示されます。

Konsta UI v5とTailwind CSS 4を追加する:

ネイティブのiOSとAndroidコンポーネントの見た目のiOSとAndroidコンポーネントを追加するために、Konsta UIを使用できます。

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

  1. 必要なパッケージをインストールしてください:
bun add konsta
bun add tailwindcss @tailwindcss/vite
  1. __CAPGO_KEEP_0__の設定 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 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
});

konsta-nuxt

まとめ

Capgoを使用して、既存のNuxtウェブアプリケーションをネイティブのiOSおよびAndroidアプリケーションに変換しました。8。Vueコードベースは、デバイスAPIにアクセスできるモバイルデバイス上で実行されます。

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.

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

  • Nuxtの静的生成を設定しました。
  • Capacitor 8に基本的なプラグインを追加しました。
  • iOSとAndroidのシミュレータにビルドおよびデプロイしました。
  • 開発用にライブリロードを有効にしました。
  • オプションで、ネイティブの見た目のコンポーネント用にKonsta UIを追加しました。

次のステップは

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

新しいプロジェクトを始めるのですか? 以下のガイド付きウォークスルーをチェックしてください。 Nuxt Mobile アプリの作成から for a guided walkthrough.

リソース

Learn how Capgo can help you build better apps faster, 無料アカウントに登録してください。 今日。

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

Capgo アプリの場合、ウェブ層のバグが発生した場合、修正をCapgoを通じて配信し、数日間待つ必要のないアプリストアの承認の待ち時間を避けることができます。ユーザーはバックグラウンドで更新を受け取り、ネイティブの変更は通常のレビューのパスを通ることになります。

始めましょう

最新のブログ記事

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

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

2-Way Communication in Capacitor アプリ

モバイル アプリのOTA更新に伴う5つのよくあるミス
開発、セキュリティ、更新
2025年4月13日

モバイル アプリのOTA更新に伴う5つのよくあるミス

モバイル アプリのライブ更新に対する5つのセキュリティ上のベストプラクティス
開発、モバイル、更新
2025年1月14日

モバイル アプリのライブ更新に対する5つのセキュリティ上のベストプラクティス

ブログからすべてを参照