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

Building Mobile Apps with Pure React.js and Capacitor

Capacitorを使用してReact.jsのWebアプリケーションをネイティブモバイルアプリに変換し、CapgoNativeナビゲーション、トランジション、iOSレイアウトのベストプラクティスを追加するガイド

Martin Donadieu

Martin Donadieu

コンテンツマーケター
React.jsとCapacitorでモバイルアプリを構築する

このチュートリアルでは、ReactとCapacitorを使用してモバイルアプリケーションを作成する方法を説明します。最終的には、Capacitorを使用してReact.jsのWebアプリをネイティブモバイルアプリケーションに変換し、Capgo Native Navigation and Transitionsを使用してネイティブなフィールを追加することができます。

Capacitorは、React.jsのWebアプリをネイティブモバイルアプリケーションに変換するための簡単な方法を提供し、React Nativeなどの新しい戦略を学ぶ必要はありません。

このプロセスには、数ステップしか必要ありません。なので、簡単にReact.jsアプリをモバイルアプリケーションに変換する方法を学びましょう。

Capacitorの概要

CapacitorJSはゲームチェンジャーです。任意のWebプロジェクトと組み合わせて、ネイティブのWebビューにアプリをラップし、ネイティブのXcodeとAndroid Studioプロジェクトを生成することができます。また、プラグインを使用して、カメラなどのネイティブデバイス機能にアクセスすることができます。

Capacitorは、ネイティブモバイルアプリケーションを作成するための簡単な方法を提供し、ハッスルや急な学習カーブはありません。APIとストリーミングされた機能は、プロジェクトに簡単に組み込むことができます。

React.jsアプリの設定

Reactアプリケーションを開始する最も簡単な方法を使用してみましょう。npmパッケージマネージャーを使用して、次のReactアプリケーションを作成します:

npx create-react-app my-app

モバイルアプリに変換するには、プロジェクトを export する必要があります。

その後、戻ってきます。まず、CapacitorをReactアプリに統合する方法を理解しましょう。

CapacitorをReact.jsアプリに統合する

初期設定の手順は少し詳細かもしれませんが、その後、ネイティブアプリラッパーを更新することは、コマンドを実行するだけの簡単な作業です。 sync 最初に、__CAPGO_KEEP_0__と__CAPGO_KEEP_1__を開発依存モジュールとしてインストールし、プロジェクト内で設定します。セットアップ中、名前とバンドルIDのデフォルト値に「Enter」を押してください。

First, we’ll install the Capacitor CLI as a development dependency and set it up within our project. During the setup, accept the default values for name and bundle ID by pressing “enter.”

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

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

# 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

ios ios と android ディレクトリは現在、React.jsプロジェクト内に存在します。

Androidプロジェクトにアクセスするには後で、 Android Studioをインストールしてください。 iOSの場合はMacが必要であり、.

Xcode をインストールしてください。 次に、下記のように capacitor.config.json を更新してください。

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

Capacitorを実行してプロジェクトをCapacitorと同期してください

npm run build
npx cap sync

The npm run build コマンドはReact.jsプロジェクトをビルドし、 npx cap sync はネイティブプラットフォームの正しい場所にウェブcodeを配置するため、ネイティブアプリを実行できるようにします。

今、少しお気楽にエラーがなく、React.jsアプリはデバイスでリリースできる状態になります!

ネイティブアプリのビルドと配布

iOSアプリの開発には Xcodeが必要です。Androidアプリの開発には Android Studioが必要です。アプリをアプリストアで配布する場合、iOSにはApple Developer Programに登録し、AndroidにはGoogle Play Consoleに登録する必要があります。

Capacitor CLIは、両方のネイティブプロジェクトを開くプロセスを簡素化します:

npx cap open ios
npx cap open android

nativeプロジェクトがセットアップされたら、接続されたデバイスにアプリをデプロイするプロセスは、直感的なものです。

Android Studioの場合、すべての内容が読み込まれたら、接続されたデバイスにアプリをデプロイしてください。

Xcodeの場合、実機にアプリをデプロイするために署名アカウントを設定する必要があります。そうすると、シミュレータではなく実機でアプリを実行できます。

すべてがうまくいったら、React.jsのWebアプリをネイティブモバイルアプリに変換することができます。

Capacitor Live Reload

モダンな開発フレームワークはほとんどがホットリロードをサポートしていますが、Capacitor も同様の機能を提供できます。 __CAPGO_KEEP_0__ を使用すると、ローカルホストのアプリケーションにライブリロード機能を追加できます。!

You can make your locally hosted application accessible with live reload on your network by having the Capacitor app load the content from a specific URL.

Windowsの場合、実行してください。 ipconfig getifaddr en0 IPv4アドレスを探してください。 ipconfig __CAPGO_KEEP_0__ を使用して、サーバーからアプリを直接読み込むように設定する必要があります。

Capacitorのパラメータに、サーバーから読み込むURLを追加する必要があります。 capacitor.config.ts ファイル:

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

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

export default config;

正しいIPアドレスとポート番号を使用してください。Run npx cap copy これらの変更をCapgoのネイティブプロジェクトに適用するには

Android StudioまたはXcodeを使用してアプリを再度デプロイすると、Reactアプリの変更は自動的にロードされ、アプリ内で表示されます!

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

Capacitor プラグインの使用

Capacitor プラグインを使用する方法を簡単に確認してみましょう。簡単なものから始めましょう。 Share プラグイン、ネイティブの共有ダイアログを提示します。

npm i @capacitor/share

使用するには、パッケージをインポートし、関連する share() 関数をアプリから呼び出してください。App.js を考慮してください。:

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

function ShareButton() {
  const share = async () => {
    await Share.share({
      title: 'React App',
      text: 'Visit this React App',
      url: 'http://localhost:3000',
      dialogTitle: 'Share with...'
    });
  };

  return (
    <button onClick={share}>
      Share
    </button>
  );
}

export default ShareButton;

After installing a new plugin, remember to sync your React project again using npx cap sync.

Next, you can make the app feel more native on iOS and Android with Capgo navigation and transitions, and fix common iOS layout issues that cause horizontal overflow or cropped safe areas.

Native-feeling UI with Capgo Native Navigation and Transitions

数年間、、Ionic、を使用してクロスプラットフォームアプリケーションを構築してきましたが、、React、と統合することはハック的で、ほとんどの場合、既存の、Tailwind CSS、を使用している場合にのみ価値があります。 Reactアプリケーションにネイティブモバイルのフィールを与えるには、、__CAPGO_KEEP_0__、アプリケーションに、__CAPGO_KEEP_1__、プラグインを使用するのではなく、ウェブのみのUIキットであるKonsta UIのようなものを使用するのではなく、、__CAPGO_KEEP_1__、ネイティブナビゲーションとトランジションを使用してください。 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation —ネイティブのナビゲーションバー、iOSのLiquid Glassタブバー、Androidのブラーしたタブバーのスタイル。Reactルータがルートの状態を保持し、プラグインがネイティブのChromeを所有します。.

@Capacitor/Capgo-transitions

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

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

CSS inset モードでネイティブのバーを尊重するようにウェブコンテンツをネイティブのナビゲーションと組み合わせる:

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') とラップし、

または Using @capgo/capacitor-native-navigation 詳細なガイドを参照してください:「@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation」を使用する」および「 Using @capgo/capacitor-transitions.

安全なエリアにTailwind

Tailwind CSSのデバイス安全エリアを使用するには @capgo/tailwind-capacitor (__CAPGO_KEEP_0__として公開) tailwind-capacitor npmで提供される safe-areas Tailwindプラグインの機能やその他のCapacitorフレンドリーな機能

bun add -D tailwind-capacitor

Tailwindプラグイン src/index.css:

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

Use utilities such as pt-safe, pb-safe、 px-safe の代わりに手作業で env(safe-area-inset-*) プロジェクトは積極的に開発されています。 Reactのセットアップで欠けているものがあれば open a PR on GitHub.

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-shellWith

__CAPGO_KEEP_0__ @capgo/capacitor, __CAPGO_KEEP_0__で表現できる同様のパディングは pt-safe pb-safe px-safe その単一のシェル上で。

Capacitor iOS contentInset を never 最初

In capacitor.config.ts, __CAPGO_KEEP_0__の自動コンテンツインセットとCSS contentInsetMode: 'css'パディングの組み合わせは、ダブルスペースの原因となることがよくあります。

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

Capacitorの実際にオーバーフローしている要素を見つける env(safe-area-inset-*) __CAPGO_KEEP_0__

__CAPGO_KEEP_1__

通常の原因は、 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は既存のWebプロジェクトに基づいてネイティブアプリを構築するためのシームレスな手段を提供し、codeを簡単に共有し、UIが一貫しているようにする簡単な方法を提供します。

Capacitorなどの技術を利用して、React.js Webアプリからモバイルアプリを構築することは今までに簡単ではありません。Web開発スキルを高次元に引き上げて、印象的なネイティブモバイルアプリを作成しましょう。ハッピーコーディング!

アプリ開発プロセスを高速化する方法についてさらに詳しく知りたい場合は、 sign up for a free account today.

Keep going from Building Mobile Apps with Pure React.js and Capacitor

If you are using Building Mobile Apps with Pure React.js and Capacitor to plan native media and interface behavior, connect it with Using @capgo/capacitor-live-activities for the native capability in Using @capgo/capacitor-live-activities, @capgo/capacitor-live-activities for the implementation detail in @capgo/capacitor-live-activities, Using @capgo/capacitor-video-player for the native capability in Using @capgo/capacitor-video-player, @capgo/capacitor-video-player @capgo/capacitor-video-playerの実装詳細について Using @capgo/capacitor-native-navigation @capgo/capacitor-native-navigationのネイティブ機能について

リアルタイムの更新機能をCapacitorアプリに

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

今すぐ始めましょう

最新のブログ記事

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

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

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

5つのOTAアップデートのミスを避ける方法
開発 セキュリティ +1
2025年4月13日

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

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

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

ブログからすべてを参照