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

このチュートリアルでは、最初は新しい React アプリから始め、Capacitorを使用してネイティブモバイル開発に移行します。 Capgo Native NavigationとTransitionsを追加すると、ネイティブモバイルのフィールが得られ、safe areasにはtailwind-capacitorを使用できます。

Capacitorは、React Webアプリケーションをネイティブモバイルアプリケーションに変換するための簡単な方法を提供します。

Reactアプリケーションのほとんどは、簡単な手順でネイティブモバイルアプリケーションに変換できます。

このチュートリアルでは、最初は新しいReactアプリから始め、Capacitorを使用してネイティブモバイルアプリケーションに移行します。 Capgo Native Navigation、Transitions、tailwind-capacitorを使用してsafe areasを追加することもできます。

Capacitorについて

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

Capacitorを使用すると、複雑なセットアップや急な学習カーブなしで素晴らしいネイティブモバイルアプリケーションを取得できます。 APIはスリムで、Capacitorの機能はストリーミングされており、プロジェクトに簡単に統合できます。

確かに、__CAPGO_KEEP_2__を使用して完全に機能するネイティブアプリを実現するのは、驚くほど簡単です。

このチュートリアルでは、最もシンプルな方法でReactアプリケーションを開始する方法を紹介します。

npx create-react-app my-app

nativeモバイルアプリを作成するには、プロジェクトの __CAPGO_KEEP_0__ をエクスポートする必要があります。 したがって、package.jsonに簡単なスクリプトを追加して、Reactプロジェクトをビルドしてエクスポートできるようにします。 このコマンドを実行するだけで済みます。

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

このコマンドを実行すると、 npm run build __CAPGO_KEEP_0__

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

Adding Capacitor to Your React App

__CAPGO_KEEP_0__ sync によって使用されますが、現在は正しく設定する必要があります。

最初に、 Capacitor CLI を開発依存モジュールとしてインストールし、プロジェクト内でセットアップすることができます。セットアップ中、名前とバンドル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 StudioiOSの場合、Macが必要で、Xcodeをインストールする必要があります。 Xcode.

さらに、プロジェクト内で見つける必要があるのは 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 アプリを開発するには、

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

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

nativeプロジェクトを設定した後、デバイスにアプリをデプロイするのは簡単です。Android Studioでは、設定を変更することなく、デバイスにアプリをデプロイできます。例えば、

android-studio-run

Xcodeでは、実機にアプリをデプロイするには署名アカウントを設定する必要があります。シミュレータにのみアプリをデプロイする場合は、設定を変更する必要はありません。署名アカウントを設定する必要がある場合は、Xcodeがガイドを提供します (ただし、開発者プログラムに登録する必要があります)。署名アカウントを設定した後、デバイスにアプリを実行するには、上部でデバイスを選択して「実行」ボタンをクリックするだけです。例えば、

xcode-run

Congratulations!

react-mobile-app

Capacitor Live Reload

現在、すべてのモダンフレームワークでホットリロードが慣れ親しみのようだ。いいニュースは、同じ機能をモバイルデバイスでも実現できることだ。 モバイルデバイスでも 最小限の手間で!

ローカルホストのアプリケーションにライブリロード機能を有効にする ローカルネットワーク上で Capacitor アプリが特定のURLからコンテンツを読み込むように設定する

最初のステップはローカルIPアドレスを調べることだ。Macを使用している場合、ターミナルで以下のコマンドを実行して調べることができる。

ipconfig getifaddr en0

Windowsの場合、

ipconfig

次に、IPv4アドレスを探す。

Capacitor をサーバーから直接アプリを読み込ませるには、ファイルに別のエントリを追加する必要がある。 capacitor.config.ts ファイル:

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_KEEP_0__を正しく使用してください。 __CAPGO_KEEP_1__と__CAPGO_KEEP_2__を指定してください。この例では、デフォルトのReactポートを使用しています。

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

npx cap copy

このコマンドは、 copy と似ていますが、 syncに限ります。 変更はwebフォルダと設定のみをコピーし、nativeプロジェクトを更新しません。 Android StudioまたはXcodeを使用してアプリを再度デプロイしてください。

その後、Reactアプリに何か変更を加えると、 自動的に更新され、変更が表示されます! __CAPGO_KEEP_0__は__CAPGO_KEEP_1__と__CAPGO_KEEP_2__を指定してください。

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

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

Capacitor プラグインの使用

Let’s take a look at how to use a Capacitor plugin in action, which we’ve mentioned a few times before. To do this, we can install a fairly simple plugin by running:

npm i @capacitor/share

__CAPGO_KEEP_0__ プラグインは何も特別なことはないですが、ネイティブの共有ダイアログを表示します。このプラグインを使用するには、パッケージをインポートし、関数を呼び出すだけです。アプリのsrc/App.js share() を次のように変更してみましょう。前述のように、新しいプラグインをインストールした場合、同期操作を実行し、再度アプリをデバイスにデプロイする必要があります。以下のコマンドを実行してください。 __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

After buttonをクリックすると、美しいネイティブシェアダイアログが実行されます!

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

数年間、Ionicを使用してクロスプラットフォームアプリケーションを構築してきましたが、Reactと統合することはハック的で、すでに持っているTailwind CSSと組み合わせることの価値が低いことが多かったです。 Capacitorを使用してReactアプリケーションにネイティブモバイルフィーリングを与えるには、WebのみのUIキットであるKonsta UIのようなものではなく、__CAPGO_KEEP_0__プラグインを使用します。 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation — iOSではLiquid Glassタブバー、Androidではブラーされたタブバーのスタイルが実現されます。Reactルーターのルート状態は維持されますが、プラグインはネイティブのブラウザを管理します。.

@Capacitor/Capgo-transitions

@capgo/capacitor-native-navigation @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation
@capgo/capacitor-transitions — WebViewレイヤーで、IonicスタイルのページトランジションとiOSエッジスワイプバックを実現するが、Ionic UIを採用する必要はありません。

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

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') と呼び出してください。ネイティブナビゲーションが管理する表面に重複したウェブヘッダーまたはフッターを表示しないでください。

詳細なガイドを参照してください: 使用する:@capgo/capacitor-native-navigation と Using @capgo/capacitor-transitions.

安全なエリアにTailwind

Tailwind CSSのデバイス安全エリアを使用するには @capgo/tailwind-capacitor (Cloudflareで公開された tailwind-capacitor on npm). It provides safe-areas utilities and other Capacitor-friendly Tailwind plugins:

bun add -D tailwind-capacitor

utilitiesとその他の__CAPGO_KEEP_0__-対応するTailwindプラグイン src/index.css:

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

In pt-safe, pb-safeutilitiesを使用する 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-shelliOSセーフエリアのパディングを複数のコンポーネントに追加すると、UIが切り取られたり大きすぎるように見えることがよくあります。

とともに @capgo/tailwind-capacitor、ユーティリティのような pt-safe pb-safe px-safe その単一のシェル。

Capacitor iOS `contentInset` を `never` 最初

、 capacitor.config.ts原生インセットを無効にして、CSS (またはネイティブナビゲーションの contentInsetMode: 'css') が安全なエリアを所有することを優先します。

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

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

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

通常の容疑者は、 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の統一性を維持する簡単な方法を提供します。

そして、 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

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

ReactとCapacitorでモバイルアプリを構築する

Capacitorについて

確かに、__CAPGO_KEEP_2__を使用して完全に機能するネイティブアプリを実現するのは、驚くほど簡単です。

Adding Capacitor to Your React App

iOS アプリを開発するには、

Capacitor Live Reload

Capacitor プラグインの使用

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

安全なエリアにTailwind

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

ビューポートメタタグを追加する

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

Capacitor iOS `contentInset` を `never` 最初

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

結論

Keep going from Building Mobile Apps with React and Capacitor

ReactとCapacitorでモバイルアプリを構築する

Capacitorについて

確かに、__CAPGO_KEEP_2__を使用して完全に機能するネイティブアプリを実現するのは、驚くほど簡単です。

Adding Capacitor to Your React App

iOS アプリを開発するには、

Capacitor Live Reload

Capacitor プラグインの使用

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

安全なエリアにTailwind

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

ビュー ポート メタタグを追加する

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

Capacitor iOS contentInset を never 最初

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

結論

Keep going from Building Mobile Apps with React and Capacitor

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

ビューポートメタタグを追加する

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

Capacitor iOS `contentInset` を `never` 最初