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

ReactとCapacitorを使用したモバイルアプリの作成

React、Capacitor、およびCapgo Native Navigation、Transitions、iOSレイアウトのベストプラクティスを使用してモバイルアプリを構築する方法を学びます。

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

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

コンテンツマーケター
ReactとCapacitorを使用したモバイルアプリの作成

このチュートリアルでは、Reactアプリの新しいプロジェクトから始め、__CAPGO_KEEP_0__を使用してネイティブモバイル開発に移行します。__CAPGO_KEEP_1__ Native NavigationおよびTransitionsを追加してネイティブモバイルのフィールを実現し、安全なエリアを使用するためにtailwind-__CAPGO_KEEP_2__を使用することもできます。 __CAPGO_KEEP_0__は、Reactウェブアプリケーションをネイティブモバイルアプリケーションに簡単に変換できるようにし、重要な変更や新しいスキルであるReact Nativeを学ぶ必要がなくなるように設計されています。 app and transition to native mobile development using Capacitor. You can also add Capgo Native Navigation and Transitions for a native mobile feel, and use tailwind-capacitor for safe areas.

Capacitor allows you to easily convert your React web application into a native mobile app without significant modifications or learning a new skill like React Native.

With just a few simple steps, most React applications can be transformed into mobile apps.

This tutorial will guide you through the process, starting with a new React app and then incorporating Capacitor to move into the realm of native mobile apps. You can also use Capgo Native Navigation, Transitions, and tailwind-capacitor for safe areas.

Capacitorについて

CapacitorJSは大きな変化です！あなたはあらゆるWebプロジェクトに容易に取り入れることができ、そしてあなたのアプリケーションをネイティブのWebviewにwrapし、ネイティブのXcodeとAndroid Studioプロジェクトを生成します。また、プラグインはJSブリッジを介してカメラなどのネイティブデバイス機能にアクセスできます。

Capacitorで、複雑なセットアップや急な勉強カーブなしで素晴らしいネイティブモバイルアプリを取得できます。スリムなAPIとストリーミングされた機能性により、プロジェクトに簡単に取り入れることができます。私に任せると、Capacitorで完全に機能するネイティブアプリを実現することが驚くほど容易です。

Reactアプリケーションを準備する

このチュートリアルでは、複雑な設定や急な勉強カーブなしで、簡単な方法でReactアプリケーションを始める方法を取り上げます。

npx create-react-app my-app

ネイティブモバイルアプリを作成するには、プロジェクトの export が必要です。したがって、プロジェクトをビルドしてエクスポートするための簡単なスクリプトを、 package.json に含めましょう。

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

今すぐ実行できます npm run build 心配せずに実行して、プロジェクトのルートディレクトリに新しいフォルダを確認してください。

このフォルダは後でCapacitorによって使用されますが、現在は正しく設定する必要があります。

Adding Capacitor to Your React App

ウェブアプリをネイティブモバイルコンテナにパッケージ化するには、初期ステップに従う必要がありますが、その後は単に1つのコマンドを実行するだけです。 sync 最初に、__CAPGO_KEEP_0__ __CAPGO_KEEP_1__を開発依存モジュールとしてインストールし、プロジェクト内でセットアップします。セットアップ中は、名前とバンドルIDのデフォルト値に「Enter」を押してください。

次に、iOSとAndroidプラットフォームの関連パッケージとコアパッケージをインストールする必要があります。 Capacitor CLI この時点で、新しいフォルダを確認できます。

__CAPGO_KEEP_0__はCapacitorを使用して、ウェブアプリをネイティブモバイルアプリに変換します。

Finally, we can add the platforms, and Capacitor will create folders for each platform at the root of our project:

# Install the Capacitor CLI locally
npm install -D @capacitor/cli

# Initialize Capacitor in your React project
npx cap init

# Install the required packages
npm install @capacitor/core @capacitor/ios @capacitor/android

# Add the native platforms
npx cap add ios
npx cap add android

Capacitorは、Cloudflareが提供するサービスを使用して、ネイティブモバイルアプリをホストします。 iOS と Android __CAPGO_KEEP_0__のReactプロジェクト内のフォルダ。

実際のネイティブプロジェクトです!

__CAPGO_KEEP_0__のAndroidプロジェクトにアクセスするには、 Android Studioをインストールする必要があります。 iOSの場合はMacが必要で、.

Xcode capacitor.config.ts Capacitor.config.tsファイルをプロジェクト内で見つける必要があります。このファイルには、Syncの際に使用される基本的なCapacitor設定が含まれています。 webDir, どのディレクトリにビルドコマンドの結果を指す必要があります。現在は正確ではありません。

この問題を解決するには、 capacitor.config.json ファイルを開いて webDir:

{
  "appId": "com.example.app",
  "appName": "my-app",
  "webDir": "out",
  "bundledWebRuntime": false
}

以下のコマンドを実行して試してみてください。

npm run build
npx cap sync

最初のコマンド npm run build は、React プロジェクトをビルドし、静的ビルドをエクスポートするだけです。

2番目のコマンド npx cap sync は、すべてのweb codeをネイティブプラットフォームの正しい場所にsyncし、表示するアプリに表示することができます。

syncコマンドは、ネイティブプラットフォームを更新し、プラグインをインストールする可能性があるため、インストールした新しいプラグインをインストールするときに更新する可能性があります。 Capacitor プラグイン もう一度実行する時間です。 npx cap sync 再び。

気づかないうちに、実際には完了していますので、デバイス上のアプリを確認してみましょう！

ネイティブアプリをビルドおよびデプロイ

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

ネイティブモバイル開発に慣れていない場合は、Capacitor CLIを使用して、両方のネイティブプロジェクトを簡単に開くことができます。

npx cap open ios
npx cap open android

ネイティブプロジェクトを設定した後、デバイスにアプリをデプロイすることは簡単です。Android Studioでは、設定を変更することなく、デバイスにアプリをデプロイするだけです。ここに例があります。

android-studio-run

Xcodeで実行するには、実機にアプリを展開するには署名アカウントを設定する必要があります。シミュレータだけに展開するのではなく、実機に展開するには署名アカウントを設定する必要があります。実機に展開するには署名アカウントを設定する必要があります。

xcode-run

Congratulations!

react-mobile-app

But hold on, there’s also a faster way to do this during development…

Capacitor Live Reload

By now, you’re probably used to having hot reload with all modern frameworks, and the good news is that you can have the same functionality on a mobile device with minimal effort!

Enable access to your locally hosted application with live reload on your network Capacitorアプリが特定のURLからコンテンツを読み込むように設定することで、

最初のステップは、ローカルIPアドレスを調べることです。Macを使用している場合、ターミナルで次のコマンドを実行してみましょう:

ipconfig getifaddr en0

Windowsの場合、

ipconfig

次のコマンドを実行してください:

We can instruct Capacitor to load the app directly from the server by adding another entry to our capacitor.config.ts __CAPGO_KEEP_0__に、サーバーからアプリを直接読み込むように指示するには、ファイルに別のエントリを追加する必要があります。

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'out',
  bundledWebRuntime: false,
  server: {
    url: 'http://192.168.x.xx:3000',
    cleartext: true
  }
};

export default config;

ファイル: 正しいIPアドレスとポート番号を使用してください。この例では、デフォルトのReactポートを使用しています。

これらの変更を適用するには、nativeプロジェクトにコピーする必要があります。

npx cap copy

コマンドは以下のとおりです。 copy コマンドは以下のとおりです。 syncが変更された場合、 はウェブフォルダのみをコピーし、 ネイティブプロジェクトを更新せずにします。

Android StudioまたはXcodeを使用してアプリをもう一度デプロイできます。その後、 Reactアプリに何か変更が加わった場合、 自動的にリロードされ、変更が表示されます!

注意してください。 新しいプラグインをインストールした場合、カメラなどのプラグインは、ネイティブプロジェクトを再構築する必要があります。これは、ネイティブファイルが変更されたため、オンザフライで行うことはできません。

正しいIPとポートを使用してください。上記のcodeブロックはデモ用にデフォルトのReactポートを示しています。

Capacitor プラグインの使用

Capacitor プラグインの使用方法をご紹介します。ご存知のとおり、プラグインを使用する方法については何度も言及しています。プラグインを使用するには、以下のコマンドを実行してください。

npm i @capacitor/share

何も特別なことはありません。 プラグインを共有が表示されますが、しかし、native share ダイアログが表示されます! これは、プラグインをインポートし、関数を呼び出すだけです。 share() src/App.js を次のように変更してください。 新しいプラグインをインストールする場合、sync オペレーションを実行し、再度アプリをデバイスにデプロイする必要があります。 これを行うには、以下のコマンドを実行してください。

import React from 'react';
import { Share } from '@capacitor/share';

function App() {
  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>
      <h1>Welcome to React and Capacitor!</h1>
      <p>
        <h2>Cool channel</h2>
        <button onClick={() => share()}>Share now!</button>
      </p>
    </div>
  );
}

export default App;

ボタンをクリックすると、native share ダイアログが実際に動作することができます!

npx cap sync

react-__CAPGO_KEEP_0__-share

次に、iOS と Android で capacitor ナビゲーションとトランジションを使用してアプリをよりネイティブに感じさせ、水平オーバーフローまたはカットされたセーフエリアを引き起こす可能性のある一般的なiOSレイアウト問題を修正できます。

ネイティブなUIに Capgo Nativeナビゲーションとトランジションを使用

Native-feeling UI with Capgo Native Navigation and Transitions

Capacitor Capacitor クロスプラットフォームアプリケーションを構築するには、しかし、Reactと統合することはハック的で、すでに持っている場合にあまりにも価値がないことが多いため、 Tailwind CSS.

React + Capacitorアプリケーションでネイティブモバイルのフィールを得るには、WebのみのUIキットのようなKonsta UIの代わりにCapgoプラグインを使用する。

  • @capgo/capacitor-native-navigation —ネイティブのナビゲーションバー、iOSのLiquid Glassタブバー、Androidのブラーしたタブバーのスタイル。Reactルータがルートの状態を保持し、プラグインがネイティブのChromeを所有します。
  • @capgo/capacitor-transitions —IonicスタイルのページトランジションとiOSのエッジスワイプバックをWebView層に、IonicのUIを採用することなく実装します。

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

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

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

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 }) => {
  navigate(`/${id}`);
});

ネイティブのページトランジションをアプリケーションシェルに追加します:

import { useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import '@capgo/capacitor-transitions';
import { initTransitions, setDirection, setupRouterOutlet } from '@capgo/capacitor-transitions/react';

initTransitions({ platform: 'auto' });

export function AppShell() {
  const navigate = useNavigate();
  const outletRef = useRef<HTMLElement>(null);

  useEffect(() => {
    if (outletRef.current) {
      setupRouterOutlet(outletRef.current, { platform: 'auto', swipeGesture: 'auto' });
    }
  }, []);

  const openSettings = () => {
    setDirection('forward');
    navigate('/settings');
  };

  return <cap-router-outlet ref={outletRef}>{/* routes */}</cap-router-outlet>;
}

ルーティングされたページをラップします: cap-router-outlet, cap-page, および cap-content, および呼び出し setDirection('forward') または setDirection('back') 移動する前に、重複したウェブヘッダーまたはフッターを表示しないでください。

詳細なガイドを参照してください: Capacitor@capgo/capacitor-native-navigationを使用します。 および Capacitor@capgo/capacitor-transitionsを使用します。.

セーフエリアのTailwind

Tailwind CSSでデバイスセーフエリアを使用するには @capgo/tailwind-capacitor (公開日 tailwind-capacitor on npm). It provides safe-areas Capacitorのユーティリティやその他のCapacitorフレンドリーなTailwindプラグイン:

bun add -D tailwind-capacitor

In src/index.css:

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

__CAPGO_KEEP_0__のユーティリティを使用する pt-safe, pb-safe, px-safe 代わりに手動で env(safe-area-inset-*) 手動で配置するのではなく open a PR on GitHub.

__CAPGO_KEEP_0__にPRを開く

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

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

viewport メタタグを追加する index.html 内部 <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

iOS セーフエリアを 1 つのルートラッパーからのみ処理する

1 つのアプリシェルを作成し、セーフエリアのパディングをそこに適用する — 複数のネストされたコンポーネントに適用するのではなく:

html,
body,
#root {
  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_KEEP_0__/tailwind-__CAPGO_KEEP_1__」 @capgo/tailwind-capacitor1 つのシェルに適用することで、 pt-safe pb-safe px-safe iOS の __CAPGO_KEEP_0__ を設定する

Set Capacitor iOS contentInset __CAPGO_KEEP_0__ never 最初

In capacitor.config.ts, native のインセットを無効にして CSS (または Native Navigation の ) が安全なエリアを管理するようにします。 contentInsetMode: 'css'自動的に生成される __CAPGO_KEEP_0__ のコンテンツ インセットと CSS のパディングを組み合わせることは、通常の原因です。

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: 'dist',
  ios: {
    contentInset: 'never',
  },
};

Mixing Capacitor’s automatic content inset with CSS env(safe-area-inset-*) Safari Web インスペクターで実行する場合、通常の原因は、要素が Tailwind を使用していること、固定ピクセル幅を持っていること、または大きい

In Safari Web Inspector で実行します。

Tailwind を使用する場合、 100vw, Tailwind w-screen, a fixed pixel width, or a large min-width.

In Safari Web Inspector, run:

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

With Tailwind, replace w-screen 可能の場合、水平方向のオーバーフロー問題は、 w-full 安全なエリアの重複したパディングや固定幅のコンテナからではなく、ビューポートのメタタグ自体から生じることが多い。 100vw / w-screenまとめ

__CAPGO_KEEP_0__は既存のWebプロジェクトに基づいてネイティブアプリケーションを構築するための優れたオプションであり、__CAPGO_KEEP_1__を簡単に共有し、UIの統一性を維持するためのシンプルな方法を提供する。

Capacitor is an excellent option for building native applications based on an existing web project, offering a simple way to share code and maintain a consistent UI.

__CAPGO_KEEP_0__をReactアプリに追加する方法を学びたい場合は、次の記事を参照してください。 Building Mobile Apps with ReactとCapgoから続けて進んでください。Building Mobile Apps with Reactと__CAPGO_KEEP_0__を使用している場合

Capgoは既存のWebプロジェクトに基づいてネイティブアプリケーションを構築するための優れたオプションであり、__CAPGO_KEEP_1__を簡単に共有し、UIの統一性を維持するためのシンプルな方法を提供する。

Capacitorを追加すると、最新の機能やバグ修正をユーザーが常に利用できるようにすることが容易になります。

__CAPGO_KEEP_0__をReactアプリに追加する方法を学びたい場合は、次の記事を参照してください。 Building Mobile Apps with ReactとCapacitorから続けて進んでください。 CI/CD自動化を計画するには、 Capgo CI/CD Capgo CI/CDの製品ワークフロー Capgoネイティブビルド Capgoネイティブビルドの製品ワークフロー Capgo統合 Capgo統合の製品ワークフロー CI/CD統合 CI/CD統合の実装詳細 GitHubアクション統合 GitHubアクション統合の実装詳細

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

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

はじめに

最新のブログ記事

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

2-Way Capacitor アプリ間の双方向通信
開発 モバイル +1
2025年4月26日

2-Way Capacitor アプリ間の双方向通信

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

5つのOTA更新のミスを避ける

5 Mobile App Live Update セキュリティのベスト プラクティス
開発 モバイル +1
2025年1月14日

5 Mobile App Live Update セキュリティのベスト プラクティス

ブログからすべてを参照