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

このチュートリアルでは、React、Capacitor、Konsta UIを使用してモバイルアプリを構築する方法を紹介します。最終的には、Capacitorを使用してReact.jsのWebアプリをネイティブモバイルアプリに変換し、Konsta UIを使用してネイティブUIを実装することができます。

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 コマンド

を実行するだけになります。まず、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

The React.jsプロジェクトにiOSとAndroidのディレクトリが現在表示されます。 Androidプロジェクトにアクセスするには、 Android Studio をインストールしてください。iOSの場合はMacが必要で、

Xcode をインストールしてください。次に、プロジェクトを更新してください。 __CAPGO_KEEP_0__.

__CAPGO_KEEP_0__ 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を配置するため、

アプリを実行できるようにします。

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

Xcode Building and Deploying Your Native Apps、iOSアプリとAndroidアプリが必要 Android Studioアプリをアプリストアで配信する場合、iOSにはApple Developer Program、AndroidにはGoogle Play Consoleに登録する必要があります。

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の場合、ターミナルで実行することで行うことができます。Windowsの場合、実行し、IPv4アドレスを探してください。 ipconfig getifaddr en0 ターミナルで ipconfig を実行し、IPv4アドレスを探してください。

Capacitorにアプリを直接サーバーから読み込ませるように指示するには、ファイルのパラメータに別のものを追加する必要があります。 capacitor.config.ts __CAPGO_KEEP_0__ファイル:

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とポートを使用してください。 npx cap copy を実行して、変更をnativeプロジェクトに適用してください。

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

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

Capacitor プラグイン

Capacitor プラグインを使用する方法については、簡単なものから始めてみましょう。Share プラグインをインストールしてみましょう。 __CAPGO_KEEP_0__, というダイアログを表示します。

npm i @capacitor/share

Capgo を使用するには、パッケージをインポートし、関連する関数をアプリから呼び出してください。Capgo のアプリを使用することを検討してください。 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;

Konsta UI を実装する: より美しいモバイル UI npx cap sync.

より美しいモバイル UI の体験を得るために、Konsta UI を使用します。iOS と Android に特化したスタイリングを提供し、簡単に使用できます。

Konsta UI を使用するには、React パッケージをインストールしてください。

ファイルを次のように変更してください。

npm i konsta

Konsta UI に必要な追加のバリアントとユーティリティを追加するために、現在の Tailwind CSS 設定を補完します。 tailwind.config.js 主な App コンポーネントを設定して、グローバルパラメータを設定してください。

// 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 Implementing Konsta UI: Better-looking Mobile UI

For a better-looking mobile UI experience, we’ll use Konsta UI. It provides iOS and Android-specific styling, and it’s easy to work with. theme. App を主なアプリケーションに Wrap する src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import {App} from 'konsta/react';
import './index.css';
import MyApp from './App';

ReactDOM.render(
  <React.StrictMode>
    <App theme="ios">
      <MyApp />
    </App>
  </React.StrictMode>,
  document.getElementById('root')
);

Konsta UI React コンポーネントを使用して、React.js ページで作業してください。 Open src/App.js を開き、以下のように変更してください。

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

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

      <Block strong>
        <p>
          Welcome to your React & Konsta UI app.
        </p>
      </Block>
      
      <List>
        <ListItem href="/about" title="About" />
      </List>

      <Block strong>
        <Button>Click Me</Button>
      </Block>
    </Page>
  );
}

すべてが正しく行われている場合、React と Konsta UI の間で、モバイルアプリにネイティブの見た目を与えるための、手間のない統合を確認することができます。

結論

Capacitor は、既存の Web プロジェクトに基づいてネイティブアプリを構築するための、滑らかな手段を提供し、code を簡単に共有し、UI に一貫性を持たせる方法を提供します。

Capacitor などの技術を利用して、React.js Web アプリからモバイルアプリを構築することは、以前以上に簡単になりました。 Web 開発スキルを高め、インプレッシブなネイティブモバイルアプリを作成してください。ハッピーコーディング!

モバイルアプリ開発プロセスを高速化する方法についてさらに学びたい場合は、無料アカウントを今すぐ登録してください。 Building Mobile Apps with Pure React.js と __CAPGO_KEEP_0__ から続けてください。

既存のプロジェクトに Capacitor を使用している場合

If you are using React.jsとCapacitorでモバイルアプリを構築する native mediaとinterfaceの動作を計画し、__CAPGO_KEEP_0__に接続する @capgo/capacitor-live-activitiesを使用する @capgo/capacitor-live-activitiesのnative機能を使用する @capgo/capacitor-live-activities @capgo/capacitor-live-activitiesの実装詳細を使用する @capgo/capacitor-video-playerを使用する @capgo/capacitor-video-playerのnative機能を使用する @capgo/capacitor-video-player @capgo/capacitor-video-playerの実装詳細を使用する、そして @capgo/capacitor-native-navigationを使用する @capgo/capacitor-native-navigationのnative機能を使用する.

Capacitorを使用した純粋なReact.jsとCapacitorでモバイルアプリを構築する