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

このチュートリアルでは、最初は新しい React アプリから始め、Capacitorを使用してネイティブモバイル開発に移行します。オプションで、__CAPGO_KEEP_0__に代わって Konsta UI

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.

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

Reactアプリケーションのほとんどは、Capacitorを使用することで簡単にモバイルアプリケーションに変換できます。このチュートリアルでは、__CAPGO_KEEP_0__を使用して、Reactアプリケーションから始めて、ネイティブモバイルアプリケーションに移行するプロセスを説明します。オプションで、__CAPGO_KEEP_0__に代わって

About Capacitor

を使用して、Tailwind CSSで改善されたモバイルUIを実現できます。

With Capacitor, Capacitorの素晴らしいネイティブモバイルアプリを簡単に作成できます。複雑なセットアップや急な勉強のカーブは必要ありません。APIが細く、機能がstreamlinedになっているため、プロジェクトに簡単に統合できます。私に聞いてもいいですが、Capacitorを使うと、完全に機能するネイティブアプリを作成することがとても簡単です。

Reactアプリの準備

このチュートリアルでは、簡単な方法でReactアプリケーションを起動する方法を紹介します。この方法では、空のReactアプリケーションが提供されます。

npx create-react-app my-app

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

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

__CAPGO_KEEP_0__を実行することができます。心配する必要はありません。プロジェクトのルートディレクトリに新しいフォルダが表示されるはずです。 npm run build このフォルダは、__CAPGO_KEEP_0__によって後で使用されることになりますが、現在は正しく設定する必要があります。

CapacitorをReactアプリに追加

CapacitorはCapgoの略称です。

任意のWebアプリをネイティブモバイルコンテナにパッケージ化するには、最初の数ステップを実行する必要がありますが、その後は単に1つの 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 Studioをインストールする必要があります。iOSの場合はMacが必要で、 Xcode.

をインストールする必要があります。さらに、プロジェクト内で 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 __CAPGO_KEEP_0__設定が含まれています。注目する必要があるのは

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します。これらのWeb codeがアプリ内で表示されるようにします。

Syncコマンドは、ネイティブプラットフォームを更新し、プラグインをインストールする可能性があるため、新しい Capacitor プラグインをインストールした場合再度実行する必要があります。 npx cap sync 気づかなければならないことですが、実際にはすでに完了しています。では、デバイスでアプリを確認してみましょう!

再度実行する必要があります。

nativeアプリをビルドしてデプロイ

iOSアプリを開発するには、 Xcode がインストールされている必要があります。また、Androidアプリを開発するには、 Android Studio がインストールされている必要があります。さらに、App Storeでアプリを配布する場合、iOSではApple Developer Programに登録し、AndroidではGoogle Play Consoleに登録する必要があります。

nativeモバイル開発に新人ですか? 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 アプリが特定のURLからコンテンツを読み込むようにする必要があります。

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

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;

正しいIPアドレスとポート番号を使用してください。デフォルトのReactポートを使用した例を使用しています。 これらの変更を適用するには、変更をWebフォルダと設定のみを含むnativeプロジェクトにコピーする必要があります。コマンドは似ていますが、nativeプロジェクトを更新せずにWebフォルダと設定のみをコピーするため、異なる動作をします。

Android StudioまたはXcodeを使用してアプリをもう一度デプロイしてください。その後、Reactアプリに何か変更を加えた場合

npx cap copy

変更を反映するには、nativeプロジェクトを再度ビルドする必要があります。 copy これで、nativeプロジェクトを再度ビルドする必要があります。 syncnativeプロジェクトを再度ビルドする必要があります。 nativeプロジェクトを再度ビルドする必要があります。 nativeプロジェクトを再度ビルドする必要があります。

nativeプロジェクトを再度ビルドする必要があります。 アプリは自動的に再読み込みされ、変更が表示されます。 変更が表示されます!

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

正しい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

「Share plugin」は何も特別なことはありませんが、ネイティブの共有ダイアログを表示します! プラグインをインストールした後、パッケージをインポートし、関数を呼び出すだけです。アプリの「src/App.js」を変更してみましょう。src/App.js share() src/App.js 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

このコマンドを実行してください:

react-__CAPGO_KEEP_0__-share

ボタンをモバイルフレンドリーに表示するには、Webアプリ用のUIコンポーネントライブラリであるReactを使用してスタイリングを追加できます。

Konsta UIを追加します数年間 Ionic を使用して、素晴らしいクロスプラットフォームアプリケーションを構築し、数年間最高の選択肢でした。しかし今ではおすすめしません。Reactと統合するのが非常にハック的で、すでに.

tailwindcss

iOSとAndroidの特定のスタイリングに適応する素晴らしいモバイルUIが必要な場合は、Konsta UIを使用することをお勧めします。タイルウィンドがすでにインストールされています

使用するには、パッケージreactパッケージのみをインストールする必要があります:

npm i konsta

さらに、ファイル: tailwind.config.js を変更する必要があります。

// import konstaConfig config
const konstaConfig = require('konsta/config')

// wrap config with konstaConfig config
module.exports = konstaConfig({
  content: [
    './src/**/*.{js,ts,javascript,tsx}',
  ],
  darkMode: 'media', // or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
})

konstaConfig Konsta UIのために必要な追加のバリアントとヘルパーユーティリティを含む、デフォルトの(またはカスタムの)Tailwind CSS設定を拡張します。

主なコンポーネントを設定する必要があります。グローバルパラメータ(例えばを設定できます。 theme).

Konsta UI Reactコンポーネントを使用するには、 App をアプリ全体にラップする必要があります。 src/App.js:

import { App } from 'konsta/react';
import './App.css';

function MyApp({ Component, pageProps }) {
  return (
    // Wrap our app with App component
    <App theme="ios">
      <Component {...pageProps} />
    </App>
  );
}

export default MyApp;

例えば

Konsta UI Reactコンポーネントを使用して、Reactアプリケーションでコンポーネントを使用できるようになりました。

例えば、以下のように開いてみてください。 src/App.js 必要なコンポーネントをすべてインストールした後、ライブリロードが同期されていない場合は、すべてを再起動してみてください。

// Konsta UI components
import {
  Page,
  Navbar,
  Block,
  Button,
  List,
  ListItem,
  Link,
  BlockTitle,
} from 'konsta/react';

function App() {
  return (
    <Page>
      <Navbar title="My App" />

      <Block strong>
        <p>
          Here is your React & Konsta UI app. Let's see what we have here.
        </p>
      </Block>
      <BlockTitle>Navigation</BlockTitle>
      <List>
        <ListItem href="/about/" title="About" />
        <ListItem href="/form/" title="Form" />
      </List>

      <Block strong className="flex space-x-4">
        <Button>Button 1</Button>
        <Button>Button 2</Button>
      </Block>
    </Page>
  );
}

export default App;

その後、ReactとCapacitorで作られたモバイルアプリを確認してみてください。

以下のページが表示されるはずです。

まとめ

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_1__を共有し、UIの統一性を維持する簡単な方法を提供します。さらに、Capgoの追加により、アプリにリアルタイム更新を追加することが容易になり、ユーザーは常に最新の機能とバグ修正にアクセスできるようになります。リアルタイム更新をアプリに追加する方法について学びたい場合は、次の記事を参照してください。

Building Mobile Apps with ReactとCapgoから続けて進んでください。

Capacitor

あなたが使用している場合 ReactとCapacitorでモバイルアプリを構築する __CAPGO_KEEP_0__と接続してCI/CDの自動化を計画する Capgo CI/CD Capgo CI/CDの製品ワークフロー Capgo Native Builds Capgo Native Buildsの製品ワークフロー Capgo Integrations Capgo Integrationsの製品ワークフロー CI/CDの実装詳細 CI/CDの統合 GitHub Actionsの統合 GitHub の実装詳細についてのアクション統合の説明です。

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