__CAPGO_KEEP_0__
Capgo
チュートリアル

Capacitor 8でiOS & Androidに変換する

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

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

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

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

導入

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

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

What you’ll learn:

  • 既存のNext.jsアプリを静的エクスポート用に設定する
  • Capacitor 8にエッセンスのネイティブプラグインを追加する
  • iOSおよびAndroidシミュレータでビルドおよびテストする
  • 開発を高速化するためにライブリロードを有効にする
  • ネイティブ風のコンポーネントを追加するためのオプションであるKonsta UIを追加する

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

Next.jsとCapacitorの利点

  • Codeの再利用性: Next.jsは、再利用可能なコンポーネントを書き、ウェブおよびモバイルアプリ間でcodeを共有できるため、開発時間と労力を節約できます。
  • パフォーマンス: Next.jsには、サーバーサイドレンダリングやcodeスプリッティングなどのパフォーマンス最適化機能が組み込まれており、高速なロード時間と滑らかなユーザー体験を保証しています。
  • ネイティブ機能: Capacitorは、カメラ、位置情報、などなどのネイティブデバイス機能にアクセスできるため、機能豊富なモバイルアプリを構築できます。
  • 簡素化された開発: Capacitorを使用すると、馴染みのあるWeb技術を使用してモバイルアプリを開発およびテストできます。これにより、学習曲線が低減され、開発プロセスが簡素化されます。

前提条件

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

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

Next.jsアプリをモバイルに設定する

最初のステップは、静的エクスポート用にNext.jsアプリを設定することです。Capacitorは、静的HTML/JS/CSSファイルをネイティブアプリにバンドルする必要があります。

ファイルを開いて、エクスポート設定を追加してください。 next.config.js 設定は、Next.jsが静的HTMLファイルを生成するように指示します。 next.config.ts設定

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  images: {
    unoptimized: true,
  },
};

module.exports = nextConfig;

設定 output: 'export' (または images: { unoptimized: true } Next.jsの画像最適化を回避するため、サーバーが必要です。

重要: サーバーが必要な機能を使用している場合（APIルート、データフェッチを含むサーバーコンポーネントなど）、クライアントサイドの代替または外部APIを使用する必要があります。

モバイル用のスクリプトを追加します。 package.json:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "mobile": "bun run build && bunx cap sync",
    "mobile:ios": "bun run mobile && bunx cap open ios",
    "mobile:android": "bun run mobile && bunx cap open android"
  }
}

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

bun run build

プロジェクトのルートディレクトリに、__CAPGO_KEEP_0__がネイティブアプリにバンドルする静的ファイルがすべて含まれるディレクトリがあります。 out folder at the root of your project. This contains all the static files that 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/preferences

Capgoプラグインをインストールする

  • @capacitor/app: アプリのライフサイクルイベントをハンドル (前景/背景、URL)
  • @capacitor/keyboard: モバイルデバイス上のキーボードの動作を制御
  • @capacitor/splash-screen: ネイティブのスプラッシュスクリーンを管理
  • @capacitor/preferences: キー値データを永続的に保存
  1. Initialize Capacitor with your project details:
bunx cap init my-app com.example.myapp --web-dir out

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

  1. プロジェクトを作成または更新する capacitor.config.ts 適切な構成を持つファイルを作成または更新する
import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: 'out',
  plugins: {
    SplashScreen: {
      launchShowDuration: 2000,
      launchAutoHide: true,
      androidScaleType: 'CENTER_CROP',
      showSpinner: false,
      splashFullScreen: true,
      splashImmersive: true,
    },
  },
};

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 の場合、Mac と Xcode が必要です。

Android Studio Mac とプロジェクトをビルドして同期する プロジェクトをビルドして同期する.

  1. プロジェクトをビルドして同期する
bun run mobile

このスクリプトを実行すると、Next.js プロジェクトをビルドし、静的ファイルをネイティブプラットフォームと同期します。

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

ネイティブモバイルアプリをビルドおよびデプロイするには、次の手順に従ってください: 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」ボタンをクリックしてください。

Congratulations! You have successfully deployed your Next.js web app to a mobile device.

nextjs-mobile-app
しかし、開発中にはもっと速い方法があります...

Capacitor Live Reload

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

  1. Find your local IP address:

  • 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: 'out',
  server: {
    url: 'http://YOUR_IP_ADDRESS:3000',
    cleartext: true,
  },
};

export default config;

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

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

Android StudioまたはXcodeを使用して、デバイス上でアプリを再構築して実行してください。 copy Next.jsアプリに変更を加えた場合、モバイルアプリは自動的にリロードされ、変更を反映します。

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

__CAPGO_KEEP_0__ プラグインを使用します。

code

Capacitor

Capacitor プラグインは、Next.js アプリからネイティブ デバイスの機能にアクセスすることを可能にします。ネイティブ デバイスの機能にアクセスする方法を紹介していきましょう。 Share プラグイン Share プラグインを使用する例として、以下の手順に従ってください。

  1. Share プラグインをインストールするには、以下のコマンドを実行してください。
bun add @capacitor/share
  1. __CAPGO_KEEP_0__ ファイルを更新して、Share プラグインを使用するようにします。 pages/index.js Sync の変更をネイティブ プロジェクトと同期する必要があります。
import Head from 'next/head';
import styles from '../styles/Home.module.css';
import { Share } from '@capacitor/share';

export default function Home() {
  const share = async () => {
    await Share.share({
      title: 'Open Youtube',
      text: 'Check new video on youtube',
      url: 'https://www.youtube.com',
      dialogTitle: 'Share with friends',
    });
  };

  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Capgo!</a>
        </h1>

        <p className={styles.description}>
          <h2>Cool channel</h2>
          <button onClick={() => share()}>Share now!</button>
        </p>
      </main>
    </div>
  );
}
  1. 新しいプラグインをインストールした場合、Sync を実行し、再度アプリをデバイスにデプロイする必要があります。Sync を実行するには、以下のコマンドを実行してください。

Sync を実行するだけです。再構築は必要ありません。

bun run mobile

アプリをデバイスに再構築し、実行します。

bunx cap sync
  1. 「Share now!」ボタンをクリックすると、ネイティブ シェア ダイアログが表示されます。内容を他のアプリと共有できます。

next-__CAPGO_KEEP_0__-share

next-capacitor-share

モバイルデバイス用のボタンをより使いやすく見せるには、Webアプリ用のUIコンポーネントライブラリであるNext.jsを使用してスタイリングを追加することができます (冗談ではありません)。

Konsta UI v5とTailwind CSS 4を追加

私は Ionic を使って years.

に跨いだ

クロスプラットフォームアプリケーションを構築し、それは数年間で最高の選択肢でした。 しかし、今ではそれを推奨しません。Next.jsと統合するのは非常にハック的で、すでに Tailwind CSS 4 がインストールされている場合、実際にはそれ以上の価値はありません。iOSとAndroidの特定のスタイリングに適応する、素晴らしいモバイルUIを実現したい場合は、Konsta UI v5を推奨します。 必要なものはTailwind CSS 4

  1. 必要なパッケージをインストールします (Konsta UI v5):
bun add konsta
  1. __CAPGO_KEEP_0__でKonsta UIのテーマをインポートします (例えば styles/globals.css):
@import 'tailwindcss';
/* import Konsta UI v5 theme */
@import 'konsta/theme.css';
  1. Next.js用にTailwind CSS 4を設定します (PostCSS):

プロジェクトのルートディレクトリで postcss.config.mjs Next.jsでは直接PostCSSを使用するため、Tailwind v4のグローバルインポートは

export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

(上記で既に追加されています). styles/globals.css Konsta UI v5のコンポーネントを

  1. Example Page App 設定が完了したら、Next.jsのページでKonsta UI v5のReactコンポーネントを使用できます。 pages/_app.js:
import { App } from 'konsta/react';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return (
    <App theme="ios">
      <Component {...pageProps} />
    </App>
  );
}

export default MyApp;

更新

Wrap your app with the Konsta UI v5 component in

  1. Create pages/index.js Konsta UI v5コンポーネントを使用するファイル:
import {
  Page,
  Navbar,
  Block,
  Button,
  List,
  ListItem,
  BlockTitle,
} from 'konsta/react';

export default function Home() {
  return (
    <Page>
      <Navbar title="My App" />

      <Block strong>
        <p>
          Here is your Next.js & 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 className="flex space-x-4">
        <Button>Button 1</Button>
        <Button>Button 2</Button>
      </Block>
    </Page>
  );
}
  1. Material Designテーマのために必要なKonsta UI v5にRobotoフォントを追加:

あなたの pages/_document.js または主HTMLファイルに、以下を追加してください:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap"
  rel="stylesheet"
/>
  1. 開発サーバーを再起動し、再構築してください。

あなたのNext.jsアプリは、Konsta UI v5とTailwind CSS 4でスタイリングされたネイティブなモバイルUIを備えたはずです。

パフォーマンス最適化

あなたのNext.jsとCapacitorアプリの最適なパフォーマンスを確保するために、以下のベストプラクティスを考慮してください:

  • アプリサイズを最小化するために、不要な依存関係とアセットを削除してください。
  • ロード時間を短縮するために、画像や他のメディアファイルを最適化してください。
  • 初期ロードパフォーマンスを向上させるために、コンポーネントとページのラジーロードを実装してください。
  • Next.jsでSSRを実装して、アプリのロード速度とSEOを向上させてください。
  • Capacitor の組み込み最適化を活用してください。例えば、ウェブビューのキャッシュとアプリのバンドルなど。

まとめ

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

達成したこと:

  • Next.js を静的エクスポート用に設定
  • Capacitor 8 を追加し、必須のプラグインを追加
  • iOS と Android のシミュレータにビルドしてデプロイ
  • 開発用にライブリロードを有効
  • オプションで、ネイティブな外観のコンポーネントを追加する

次のステップ:

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

新しいプロジェクトから始める場合はこちらをご覧ください。 Next.jsモバイルアプリケーションを作成するためのガイド付きウォークスルー。 ガイド付きウォークスルー。

リソース

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

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

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

今すぐ始める

最新のブログ記事

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

Capacitorアプリで2方向の通信
開発、モバイル、更新
2025年4月26日

Capacitorアプリで2方向の通信

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

__CAPGO_KEEP_0__で避けるべき5つのOTA更新のミス

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

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

ブログからすべてを参照