ReactとCapacitorでモバイルアプリを作る

このチュートリアルでは、新しいReactアプリを作成し、__CAPGO_KEEP_0__を使用してネイティブモバイル開発に移行します。__CAPGO_KEEP_1__ Native NavigationとTransitionsを追加するとネイティブモバイルのフィールが得られ、安全なエリアを使用するためにtailwind-__CAPGO_KEEP_2__も使用できます。 __CAPGO_KEEP_0__は、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.

Reactアプリを簡単に数ステップでモバイルアプリに変換できます。

このチュートリアルでは、Reactアプリの新しいプロジェクトから始めて、Capacitorを使用して、ネイティブモバイルアプリに移行するプロセスをガイドします。Capgo Native Navigation、Transitions、tailwind-capacitorを使用して安全なエリアも利用できます。

Capacitorについて

CapacitorJSはゲームチェンジャーです!あなたのウェブプロジェクトに簡単に取り入れることができ、ネイティブウェブビューにアプリケーションをwrapし、ネイティブのXcodeとAndroid Studioプロジェクトを生成します。また、プラグインはJSブリッジを使用してカメラなどのネイティブデバイス機能にアクセスできます。

Capacitorを使用すると、複雑なセットアップや急な学習カーブなしで素晴らしいネイティブモバイルアプリを取得できます。APIがスリムで機能性がstreamlinedなので、プロジェクトに簡単に統合できます。私が言っていることは、Capacitorを使用して完全に機能するネイティブアプリを達成するのはとても簡単であることを信じてください。

Reactアプリを準備する

Reactアプリを開始するには、さまざまな方法がありますが、このチュートリアルでは、簡単な方法を使用します。この方法は、空のReactアプリを提供します。

npx create-react-app my-app

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

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

Capacitorを使用してReactモバイルアプリを作成する npm run build 心配することなく実行できます。プロジェクトのルートディレクトリに新しいフォルダが表示されるはずです。

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

Adding Capacitor to Your React App

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

次に、コアパッケージとiOSおよびAndroidプラットフォーム用の関連パッケージをインストールする必要があります。 Capacitor CLI この時点で、新しいフォルダが表示されるはずです。

__CAPGO_KEEP_0__

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

__CAPGO_KEEP_0__ iOS と Android プロジェクトのフォルダ

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

Androidプロジェクトにアクセスするには、Android Studioをインストールする必要があります。 iOSの場合、Macが必要であり、Xcodeをインストールする必要があります。プロジェクトで__CAPGO_KEEP_0__.config.tsファイルを見つける必要があります。このファイルには、Syncの際に使用される基本的な__CAPGO_KEEP_0__設定が含まれています。注目すべきは.

ファイルの capacitor.config.ts file in your project, which contains some fundamental Capacitor settings utilized during the sync. The only thing you need to pay attention to is the webDir、これは現在不正確です。

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

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

Capgoのソリューションマーケティングページ。ロール：ウェブサイトコピー文。ページ/エリア：ソリューション/コルダボトゥキャパシタアイル.astro。メッセージキー `solutions_cordova_to_capacitor_ai_step2_body` (Solutions Cordova To Capacitor Ai Step2 Body)。

npm run build
npx cap sync

を更新してください。 npm run build Capgoのソリューションマーケティングページ。ロール：ウェブサイトコピー文。ページ/エリア：ソリューション/コルダボトゥキャパシタアイル.astro。メッセージキー `solutions_cordova_to_capacitor_ai_step2_body` (Solutions Cordova To Capacitor Ai Step2 Body)。

を実行してみてください。 npx cap sync will sync all the web code into the right places of the native platforms so they can be displayed in an app.

は、Reactプロジェクトをビルドし、静的ビルドをエクスポートします。 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はプロセスをガイドします (ただし、開発プログラムに登録する必要があります)。その後、実機に接続したデバイスでアプリを実行するには、上部で選択したデバイスを選択するだけで済みます。ここでは例を示します。

xcode-run

React Webアプリをモバイルデバイスにデプロイしました。ここでは例を示します。

しかし、開発中にこのプロセスを高速化する方法もあります。

Capacitor Live Reload

現在の最新のフレームワークでは、ホットリロードが一般的になっています。幸いなことに、Capacitorを使用して、ホットリロードの機能をモバイルデバイスで実現することができます。 on a mobile device 最小限の手間で実現できます。

ローカルにホストされているアプリケーションにアクセスするためのLive Reloadを有効にします。 ネットワーク上のデバイスでLive Reloadを有効にします Capacitorアプリが特定の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: 'out',
  bundledWebRuntime: false,
  server: {
    url: 'http://192.168.x.xx:3000',
    cleartext: true
  }
};

export default config;

この例では、デフォルトのReactポートを使用しています。 これらの変更を適用するには、ネイティブプロジェクトにコピーする必要があります。コマンドは

__CAPGO_KEEP_0__はCapacitorの短縮形です。

npx cap copy

__CAPGO_KEEP_0__はCapacitorの短縮形です。 copy __CAPGO_KEEP_0__はCapacitorの短縮形です。 syncが実行されますが、 ウェブフォルダの変更をコピーするだけです。 設定とともに、ネイティブプロジェクトを更新せずに。

Android StudioまたはXcodeを通じてアプリをもう一度デプロイできます。次に、Reactアプリに何か変更を加えた場合、 アプリは自動的に再読み込みされ 変更が表示されます!

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

設定で正しいIPアドレスとポート番号を使用するようにしてください。上記のcodeブロックはデモ用にデフォルトのReactポートを示しています。

Capacitor プラグインの使用

Capacitor プラグインの使用方法をご紹介します。実際に使用する方法をご紹介します。プラグインをインストールするには、以下のコマンドを実行します。

npm i @capacitor/share

何も特別なことはありません。プラグインを共有ですが、どちらにしても、ネイティブの共有ダイアログが表示されます! これは、以下の手順で実現できます。 share() 関数を呼び出すには、パッケージをインポートするだけです。アプリの src/App.js を次のように変更してみましょう。

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;

新しいプラグインをインストールする際には、sync操作を実行し、再度アプリをデバイスにデプロイする必要があります。以下のコマンドを実行してください。

npx cap sync

ボタンをクリックすると、美しいネイティブの共有ダイアログが表示されます!

次に、iOSとAndroidでネイティブのUIを実現するために、Capgoナビゲーションとトランジションを使用し、水平オーバーフローまたは安全エリアがカットされたiOSのレイアウト問題を解決できます。

私は数年間イオニククロスプラットフォームアプリケーションを構築するには、しかし、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',
  },
});

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

ルーティングされたページをwrapします。 cap-router-outlet, cap-page、そして cap-content、そして呼び出す setDirection('forward') または setDirection('back') Capacitorライブアップデートの代替

Capacitorライブアップデートの代替 Using @capgo/capacitor-native-navigation Capawesomeの代替 Using @capgo/capacitor-transitions.

Appflowの代替

Capgoのガイド @capgo/tailwind-capacitor Capgoのガイド: @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-ネイティブナビゲーションを使用する方法 tailwind-capacitor on npm). It provides safe-areas utilities and other Capacitor-friendly Tailwind plugins:

bun add -D tailwind-capacitor

Capacitorを使用して src/index.css:

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

Capacitorを使用して pt-safe, pb-safeCapacitorを使用して px-safe Capacitorを使用して env(safe-area-inset-*) Capacitorを使用して open a PR on GitHub.

Capacitorを使用して

Capacitorを使用して overflow-x: hidden Capacitorを使用して

Capacitorを使用して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が切り取られたり大きすぎるように見えることがあります。

「@__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__」と設定すると、同じパディングをユーティリティーで表現できます。 @capgo/tailwind-capacitor__CAPGO_KEEP_0__ iOS pt-safe pb-safe px-safe を設定します。

Set Capacitor iOS `contentInset` コンテキスト:ライブアップデート製品ページ。役割:短いUIラベルまたはナビゲーションアイテム。メッセージキー`live_update_dynamic_label_to` (ライブアップデートダイナミックラベルトゥー) `never` first

In capacitor.config.ts, native のインセットを無効にして CSS (または Native Navigation の) contentInsetMode: 'css') の安全エリアを管理する:

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

Capacitor の自動コンテンツインセットと CSS のパディングを組み合わせると、一般的なダブルスペースの原因となる。 env(safe-area-inset-*) 実際にオーバーフローしている要素を探す

通常の原因は、

, Tailwind 100vw, 固定ピクセル幅の要素、または大きい w-screenSafari Web インスペクターで実行: min-width.

Tailwind の場合、

[...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 w-screen Capacitor w-full Capacitor 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 CapgoCapacitor

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

Capacitor Building Mobile Apps with React and Capacitor CI/CD自動化を計画するには、__CAPGO_KEEP_0__に接続する Capgo CI/CD Capgo CI/CDの製品ワークフロー Capgoネイティブビルド Capgoネイティブビルドの製品ワークフロー Capgo統合 for the product workflow in Capgo Integrations, __CAPGO_KEEP_0__アクション統合 __CAPGO_KEEP_0__アクション統合の実装詳細 GitHubアクション統合の実装詳細 for the implementation detail in GitHub Actions Integration.

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

Capacitorについて

Reactアプリを準備する

Adding Capacitor to Your React App

ネイティブアプリをビルドして配布

Capacitor Live Reload

Capacitor プラグインの使用

Native-feeling UI with Capgo Native Navigation and Transitions

Appflowの代替

Capacitorを使用して

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

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

Set Capacitor iOS `contentInset` コンテキスト:ライブアップデート製品ページ。役割:短いUIラベルまたはナビゲーションアイテム。メッセージキー`live_update_dynamic_label_to` (ライブアップデートダイナミックラベルトゥー) `never` first

通常の原因は、

結論

Keep going from Building Mobile Apps with React and Capacitor

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

Capacitorについて

Reactアプリを準備する

Adding Capacitor to Your React App

ネイティブアプリをビルドして配布

Capacitor Live Reload

Capacitor プラグインの使用

Native-feeling UI with Capgo Native Navigation and Transitions

Appflowの代替

Capacitorを使用して

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

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

Set Capacitor iOS contentInset コンテキスト:ライブアップデート製品ページ。役割:短いUIラベルまたはナビゲーションアイテム。メッセージキー`live_update_dynamic_label_to` (ライブアップデートダイナミックラベルトゥー) never first

通常の原因は、

結論

Keep going from Building Mobile Apps with React and Capacitor

Set Capacitor iOS `contentInset` コンテキスト:ライブアップデート製品ページ。役割:短いUIラベルまたはナビゲーションアイテム。メッセージキー`live_update_dynamic_label_to` (ライブアップデートダイナミックラベルトゥー) `never` first