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

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

Learn how to build a mobile app using React, Capacitor, and add Capgo Native Navigation, Transitions, and iOS layout best practices.

記事のクレジット

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

ライター

バレリア

レビュアー

ジョーダン

編集者

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

このチュートリアルでは、Capacitorを使用してReactアプリをモバイルアプリに変換する方法を説明します。 React 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.

Capacitorを使用してReactアプリをモバイルアプリに変換する方法を学びます。

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.

About Capacitor

Capacitorを使用してReactアプリをモバイルアプリに変換する方法を学びます。

With Capacitor, you get a fantastic native mobile app without any complicated setup or steep learning curve. Its slim API and streamlined functionality make it a breeze to integrate into your project. Trust me, you’ll be amazed at how effortless it is to achieve a fully functional native app with Capacitor!

Capacitorはゲームチェンジャーです! どのWebプロジェクトでも容易にCapacitorを組み込むことができ、WebアプリケーションをネイティブのWebビューにラップし、ネイティブのXcodeとAndroid Studioプロジェクトを生成します。また、プラグインはカメラなどのネイティブデバイス機能にアクセスするためのJSブリッジを提供します。

Reactアプリケーションを始める方法は多数ありますが、このチュートリアルでは、最もシンプルな方法を使用します。この方法では、空のReactアプリケーションが提供されます。

npx create-react-app my-app

nativeモバイルアプリを作成するには、プロジェクトの export が必要です。したがって、プロジェクトの package.json に簡単なスクリプトを追加して、Reactプロジェクトをビルドしてエクスポートすることができます。

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

問題なく実行できます。プロジェクトのルートディレクトリに新しい npm run build out

This folder will be used by Capacitor later on, but for now, we must set it up correctly.

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

__CAPGO_KEEP_0__をReactアプリケーションに追加する sync Webアプリケーションをnativeモバイルコンテナにパッケージ化するには、いくつかの初期ステップを実行する必要がありますが、その後は単に1つのコマンドを実行するだけです。

まず、 Capacitor CLI __CAPGO_KEEP_0__を開発依存モジュールとしてインストールし、プロジェクト内でセットアップします。セットアップ中、名前とバンドルIDのデフォルト値を承認するには「Enter」を押すことができます。

次に、iOSとAndroidプラットフォーム用の関連パッケージとコアパッケージをインストールする必要があります。

最後に、プラットフォームを追加し、Capacitorはプロジェクトのルートディレクトリに各プラットフォーム用のフォルダを作成します:

# 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

この時点で、Reactプロジェクト内に新しい ios と android フォルダが観察できます。

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

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

さらに、プロジェクト内で capacitor.config.ts ファイルを見つける必要があります。このファイルには、Syncの際に使用される基本的なCapacitor設定が含まれています。webDirというのは、特に注目する必要がある設定です。 、これはビルドコマンドの結果を指す必要があります。現在は正確ではありません。この問題を解決するには、

__CAPGO_KEEP_0__.config.json capacitor.config.json webDir context:

{
  "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 コマンドは、ネイティブ プラットフォームを更新し、プラグインをインストールする可能性があるため、新しい __CAPGO_KEEP_0__ プラグインをインストールした場合、再度実行する必要があります。 Capacitor plugins ネイティブ アプリをビルドしてデプロイする npx cap sync iOS アプリを開発するには、

__CAPGO_KEEP_0__

__CAPGO_KEEP_0__

__CAPGO_KEEP_0__ Xcode がインストールされている場合、Androidアプリの場合はAndroid Studioがインストールされている必要があります。また、iOSアプリをアプリストアで配布する場合、Apple Developer Programに登録し、Androidアプリを配布する場合、Google Play Consoleに登録する必要があります。 Capacitorを使用することで、native mobile開発の新人でも、nativeプロジェクトを簡単に開くことができます。 nativeプロジェクトを設定した後、実機にアプリをデプロイすることは簡単です。Android Studioでは、設定を変更することなく、実機にアプリをデプロイすることができます。例えば、次のようになります。

If you’re new to native mobile development, you can use the Capacitor CLI to easily open both native projects:

npx cap open ios
npx cap open android

Xcodeでは、実機にアプリをデプロイするには署名アカウントを設定する必要があります。実機にアプリをデプロイするには、シミュレータではなく署名アカウントを使用する必要があります。署名アカウントを設定する必要がある場合は、Xcodeはプロセスをガイドします (ただし、開発者プログラムに登録する必要があります)。署名アカウントを設定した後、実機にアプリをデプロイするには、上部で選択した実機を選択するだけで、実機にアプリを実行できます。例えば、次のようになります。

xcode-run

成功しました！ React webアプリをモバイルデバイスにデプロイしました。例えば、次のようになります。

react-mobile-app

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

Xcode

Androidアプリの場合はAndroid Studio

Capacitor Live Reload

現在、すべてのモダンフレームワークでホットリロードができるようになっているので、同じ機能をモバイルデバイスでも利用できるようになります。 モバイルデバイスでも 最小限の手間で!

ローカルホストのアプリケーションにアクセスし、ライブリロードを有効にするには、__CAPGO_KEEP_0__ アプリが特定のURLからコンテンツを読み込むように設定する必要があります。 ローカルIPアドレスを調べる第一歩は、ローカルIPアドレスを取得することです。Macを使用している場合は、ターミナルで以下のコマンドを実行してください。 by having the Capacitor app load the content from the specific URL.

次に、IPv4アドレスを探してください。

ipconfig getifaddr en0

__CAPGO_KEEP_0__ をサーバーから直接アプリケーションを読み込むように指示するには、ファイルに別のエントリを追加する必要があります:

ipconfig

__CAPGO_KEEP_0__

Capacitor 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;

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

ここで、これらの変更をNativeプロジェクトにコピーできます:

npx cap copy

このコマンドは copy と似ていますが、 syncWebフォルダと設定のみをコピーし、Nativeプロジェクトを更新せずに実行します。 Android StudioまたはXcodeを使用してアプリを再度デプロイできます。その後、Reactアプリに何か変更を加えた場合、アプリは自動的にリロードされ、変更が表示されます。 Capacitorを使用して

Reactアプリをモバイルアプリに変換する方法 Capacitorを使用して Capacitorを使用して

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

注意してください。正しいIPアドレスとポート番号を使用する必要があります。上のcodeブロックはデモ用にデフォルトのReactポートを示しています。

Capacitor プラグインの使用

実際に使用するCapacitor プラグインについては、前にも何度か言及したことがあります。実際に使用するプラグインをインストールするには、以下のコマンドを実行してください。

npm i @capacitor/share

Share プラグインは何も特別なことはありませんが、nativeの共有ダイアログを表示します。 このため、importするパッケージとappからfunctionを呼び出すだけです。src/App.jsを次のように変更してください。前にも言及したように、新しいプラグインをインストールした場合、sync操作を実行し、再度デバイスにアプリをデプロイする必要があります。以下のコマンドを実行してください。 share() src/App.js function __CAPGO_KEEP_0__

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;

__CAPGO_KEEP_0__

npx cap sync

ボタンを押した後、美しいネイティブシェアダイアログが実際に動作します!

react-capacitor-share

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

ネイティブフィーリングのUIとCapgoネイティブナビゲーションとトランジション

数年間、Ionicを使用してクロスプラットフォームアプリケーションを構築してきましたが、Reactと統合することはハック的で、すでにTailwind CSSを持っている場合にはほとんど価値がありません。 Ionic Tailwind CSS React + __CAPGO_KEEP_0__アプリケーションでネイティブモバイルフィーリングを実現するには、WebのみのUIキットであるKonsta UIではなく__CAPGO_KEEP_1__プラグインを使用します。.

@Capacitor/Capgo-native-navigation

両方をインストールする必要があります。

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

液体ガラスのタブバーをレンダリングします (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') または

コンテンツを遷移する前に呼び出してください。ネイティブのナビゲーションがコンテンツを所有している場合、ウェブヘッダーまたはフッターを複製しないでください。 詳細なガイドを参照してください: @capgo/capacitor-native-navigation と @capgo/capacitor-transitions.

セーフエリア

デバイスのセーフエリアをTailwind CSSで使用するには @capgo/tailwind-capacitor (公開日 tailwind-capacitor npmで safe-areas 機能やその他のCapacitor向けのTailwindプラグインを提供します。

bun add -D tailwind-capacitor

In src/index.css:

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

機能を使用する pt-safe, pb-safe、 px-safe 代わりに env(safe-area-inset-*) 手作で。プロジェクトは活発に開発されています — ご自身のReact設定で何かが欠けている場合、 GitHubにPRを提出してください。.

iOSレイアウトの問題を修正する (ビューポート、セーフエリア、水平オーバーフロー)

iOSでコンテンツが切り取られた、ずれた、または水平方向にスクロールできる場合、ビューポートタグを追加したり調整したりするだけでは通常解決しません。順序に従ってこれらのチェックを実行してください。 overflow-x: hidden ビューポートメタタグが正しく適用されていることを確認してください。

ビューポートメタタグを追加してください。

内側に index.html iOSセーフエリアを1つのルートラッパーからのみ取り扱ってください。 <head>:

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

単一のアプリシェルを作成し、セーフエリアのパディングをそこに適用してください — 複数のネストされたコンポーネントにのみ適用してください:

すべてのページコンテンツを

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

セーフエリアのパディングを複数回追加したり、ヘッダー、モーダル、レイアウトラッパーに追加したりすると、UIが切り取られたり大きすぎるように見えることがあります。 .app-shell. Duplicated safe-area padding in headers, modals, and layout wrappers often makes the UI look cropped or too large.

With @capgo/tailwind-capacitor、 pt-safe pb-safe px-safe on that single shell.

Set Capacitor iOS contentInset を never first

In capacitor.config.ts, contentInsetMode: 'css'原生インセットを無効にして、CSS (またはNative Navigationの)

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-*) paddingは、ダブルスペースの原因となることがよくあります。

真実のオーバーフロー要素を見つける

通常の容疑者は、固定ピクセル幅の要素を使用している 100vw, Tailwind w-screen, 固定ピクセル幅の要素、または大きい min-width.

Safari Web インスペクターで実行:

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

Tailwindの場合、 w-screen を置き換える w-full 可能な限り 100vw / w-screen水平方向のオーバーフロー問題の多くは、

、重複した安全エリアのパディング、または固定幅のコンテナから来ています — ではなく、ビュー ポート メタタグ自体から

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__は既存のWebプロジェクトに基づいてネイティブアプリケーションを構築するための優れたオプションであり、__CAPGO_KEEP_1__を共有し、UIの統一性を維持する簡単な方法を提供します。 Capgo最新の機能やバグ修正を常に利用できるように、リアルタイムの更新を追加することができます。

If you would like to learn how to add Capgo to your React app, take a look at the next article:

Keep going from Building Mobile Apps with React and Capacitor

Capgoを使用している場合 Building Mobile Apps with React and Capacitor Capgo CI/CD Capgo CI/CD for the product workflow in Capgo CI/CD, Capgo Native Builds for the product workflow in Capgo Native Builds, Capgo Integrations Capacitorの製品ワークフローにおけるCapgo統合 CI/CD統合 CI/CD統合の実装詳細については GitHubアクション統合 GitHubアクション統合の実装詳細については

Capacitorアプリの即時更新

When a web-layer bug is live, ship the fix through Capgo instead of waiting days for app store approval. Users get the update in the background while native changes stay in the normal review path.

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

ページ/エリア: ホームページのマーケティングコピー。役割: ウェブサイトのコピー文。見つかった場所: コンポーネント HumanSupport.astro、コンポーネント pricing/Plans.astro。メッセージキー `home_hero_human_support` (ホーム ヒーロー ヒューマン サポート)。

今すぐ始めましょう

Capgo gives you the best insights you need to create a truly professional mobile app.

2-Way Communication in Capacitor Apps
開発 モバイル +1
2025年4月26日

Capacitorアプリにおける2方向の通信

OTA更新の5つの一般的なミス
開発 セキュリティ +1
2025年4月13日

OTA更新の5つの一般的なミス

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

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

すべてのブログ記事を表示