Capacitorを使用したReact.jsとモバイルアプリの開発

このチュートリアルでは、ReactとCapacitorを使用してモバイルアプリケーションを作成する方法を説明します。最終的には、Capacitorを使用してReact.jsのWebアプリをネイティブモバイルアプリケーションに変換し、CapgoNativeナビゲーションとトランジションを追加してネイティブなフィールを実現する方法を学びます。

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.”

次に、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

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

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

をインストールしてください。次に、 webDir あなたの capacitor.config.json 以下のようになります。

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

CapacitorでプロジェクトをSyncするためのビルドコマンドを実行してください。

npm run build
npx cap sync

The npm run build コマンドはReact.jsプロジェクトをビルドし、 npx cap sync nativeプラットフォームの正しい場所にWebcodeを配置することで、

デバイスで実行できるアプリとして動作するようにします。

少しずつ運が良く、エラーも出ない限り、

あなたのReact.jsアプリはデバイスで動作する準備が整っています! Nativeアプリのビルドとデプロイ、iOSアプリとAndroidアプリの両方に必要です。 Android StudioiOSとGoogle Play ConsoleのAndroid向けアプリを配信する場合、Apple Developer Programに登録する必要があります。

The Capacitor CLI simplifies the process of opening both native projects:

npx cap open ios
npx cap open android

ネイティブプロジェクトがセットアップされたら、実機にアプリをデプロイするのは簡単です。

Android Studioの場合、すべての内容が読み込まれたら、実機にアプリをデプロイします。

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

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

Capacitor Live Reload

Modern development frameworks usually come with hot reload, and luckily, you can have the same with Capacitor but モバイルデバイス上で実行できます。!

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.

最初に、ローカルIPアドレスを決定してください。Macの場合、ターミナルで実行してください。 ipconfig getifaddr en0 Windowsの場合、実行してください。 ipconfig IPv4アドレスを探してください。

この後、Capacitorにアプリを直接サーバーから読み込むように指示するには、ファイルのパラメータに別のものを追加する必要があります。 capacitor.config.ts 正確なIPとポートを使用してください。

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;

を実行して、これらの変更をネイティブプロジェクトに適用してください。 npx cap copy Android StudioまたはXcodeを通じてアプリをもう一度デプロイすると、Reactアプリの変更は自動的に再読み込みされ、アプリに表示されます!

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

__CAPGO_KEEP_0__ プラグインの使用

Capacitor プラグインを簡単に使用する方法をご紹介します。Share プラグインをインストールしてみましょう

Capacitor Share、nativeシェアダイアログを表示します。

npm i @capacitor/share

使用するには、パッケージをインポートし、関連する関数をアプリから呼び出してください。アプリの開発を検討してください。 share() App.js 新しいプラグインをインストールした後、Reactプロジェクトを再度Syncしてください。:

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;

次に、iOSとAndroidでnativeなアプリのフィールを実現するために、__CAPGO_KEEP_0__ナビゲーションとトランジションを使用し、水平オーバーフローまたはクロップされたセーフエリアを引き起こすiOSの一般的なレイアウト問題を解決できます。 npx cap sync.

CapgoNativeナビゲーションとトランジションを使用することで、nativeなUIを実現できます。

React + __CAPGO_KEEP_0__アプリケーションでnativeなモバイルフィールを実現するには、webのみのUIキットであるKonsta UIではなく、__CAPGO_KEEP_1__プラグインを使用してください。 __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ __CAPGO_KEEP_0__.

For a native mobile feel in a React + Capacitor app, use Capgo plugins instead of web-only UI kits like Konsta UI:

@capgo/capacitor-native-ナビゲーション — iOSではLiquid Glassタブバー、Androidではブラー効果のあるタブバーが表示されます。Reactルーターのルート状態は保持されますが、プラグインがネイティブのブラウザを管理します。
@capgo/capacitor-トランジション — WebViewレイヤー内でiOSのエッジスワイプバックとIonicスタイルのページトランジションが実装されますが、IonicのUIは採用されません。

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

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

ネイティブのタブバーを表示する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') 移動する前に注意してください。ネイティブのナビゲーションが管理しているヘッダーまたはフッターを重複して表示しないでください。

詳細なガイドはこちらを参照してください: @capgo/capacitor-ネイティブナビゲーションの使用と @capgo/capacitor-トランジションの使用.

セーフエリア（安全エリア）とTailwind

デバイスのセーフエリア（安全エリア）をTailwind CSSで使用する場合、@__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__を使用してください。 @capgo/tailwind-capacitor イン tailwind-capacitor @npm/__CAPGO_KEEP_1__ safe-areas @Capacitor/__CAPGO_KEEP_1__

bun add -D tailwind-capacitor

@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__ 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-*) の代わりに手作業で open a PR on GitHub.

__CAPGO_KEEP_0__

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

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

ビューポートメタタグを 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が切り取られたり大きすぎるように見えることがよくあります。

Capacitorの @capgo/tailwind-capacitorで、同じパディングを表現できます。 pt-safe pb-safe px-safe 1つのシェルに

Set Capacitor iOS `contentInset` を使用します。 `never` iOSの

__CAPGO_KEEP_0__ capacitor.config.tsを contentInsetMode: 'css'安全領域を所有する

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

Capacitorの自動コンテンツインセットとCSSの組み合わせ env(safe-area-inset-*) パディングは、ダブルスペースの原因となる一般的な原因です。

実際にオーバーフローしている要素を探す

通常の原因は、 100vwTailwind 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安全領域の重複パディング、または固定幅のコンテナ — ではなく、ビューポートメタタグ自体から来ています。

Conclusion

Capacitorは既存のWebプロジェクトを基にしたネイティブアプリを構築するためのシームレスな手段を提供し、codeを簡単に共有し、UIが一貫性を保ったままになるようにします。

React.js Webアプリからモバイルアプリを構築するための技術であるCapacitorを利用することで、モバイルアプリの開発が簡単になりました。Web開発のスキルを高め、インパクトのあるネイティブモバイルアプリを作成しましょう。ハッピーコーディング!

モバイルアプリの開発プロセスを高速化する方法について詳しく知りたい場合は、無料アカウントを作成する今日。

Building Mobile Apps with Pure React.jsとCapacitorから始めて、

Building Mobile Apps with Pure React.jsと__CAPGO_KEEP_0__を使用している場合、 ネイティブメディアとインターフェイスの動作を計画するには、Capacitor/__CAPGO_KEEP_1__-live-activitiesと接続してください。 __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-activitiesを使用して、ネイティブ機能を使用します。 capgo/capacitor-live-activitiesを使用してネイティブ機能を使用します。 capgoは既存のWebプロジェクトを基にしたネイティブアプリを構築するためのシームレスな手段を提供し、capacitorを簡単に共有し、UIが一貫性を保ったままになるようにします。 @capgo/capacitor-live-activities @capgo/capacitor-live-activitiesの実装詳細 Using @capgo/capacitor-video-player @capgo/capacitor-video-playerのネイティブ機能 @capgo/capacitor-video-player @capgo/capacitor-video-playerの実装詳細、そして Using @capgo/capacitor-native-navigation @capgo/capacitor-native-navigationのネイティブ機能

Building Mobile Apps with Pure React.js and Capacitor

Capacitorの概要

React.jsアプリの設定

CapacitorをReact.jsアプリケーションに統合する

少しずつ運が良く、エラーも出ない限り、

Capacitor Live Reload

Capacitor プラグインを簡単に使用する方法をご紹介します。Share プラグインをインストールしてみましょう

Native-feeling UI with Capgo Native Navigation and Transitions

セーフエリア（安全エリア）とTailwind

__CAPGO_KEEP_0__

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

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

Set Capacitor iOS `contentInset` を使用します。 `never` iOSの

実際にオーバーフローしている要素を探す

Conclusion

Building Mobile Apps with Pure React.jsとCapacitorから始めて、

Building Mobile Apps with Pure React.js and Capacitor

Capacitorの概要

React.jsアプリの設定

CapacitorをReact.jsアプリケーションに統合する

少しずつ運が良く、エラーも出ない限り、

Capacitor Live Reload

Capacitor プラグインを簡単に使用する方法をご紹介します。Share プラグインをインストールしてみましょう

Native-feeling UI with Capgo Native Navigation and Transitions

セーフエリア（安全エリア）とTailwind

__CAPGO_KEEP_0__

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

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

Set Capacitor iOS contentInset を使用します。 never iOSの

実際にオーバーフローしている要素を探す

Conclusion

Building Mobile Apps with Pure React.jsとCapacitorから始めて、

Set Capacitor iOS `contentInset` を使用します。 `never` iOSの