Pure React.jsとCapacitorを使用したモバイルアプリケーションの作成

React.jsウェブアプリケーションをCapacitorを使用してネイティブモバイルアプリケーションに変換し、Konsta UIでネイティブユーザーインターフェースを強化する方法に関するガイド。

このチュートリアルでは、React、Capacitor、およびKonsta UIを使用してモバイルアプリケーションを作成する方法を説明します。最後には、ReactjsウェブアプリをCapacitorを使ってネイティブモバイルアプリに変換し、Konsta UIを使用してネイティブUIを実装する方法を学ぶことができます。

Capacitorは、Reactjsウェブアプリをネイティブモバイルアプリに簡単に変換できるようにします。新たな戦略を学ぶことや、大幅な変更は必要ありません。React Nativeのようなこともありません。

プロセスは数ステップで簡単であり、あなたのReactjsアプリはフル機能のモバイルアプリになります。それでは、この旅に参加してください。

Capacitorの概要

CapacitorJSはゲームチェンジャーです。ウェブプロジェクトにシームレスに統合され、ネイティブWebViewにアプリをラップし、ネイティブのXcodeおよびAndroid Studioプロジェクトを生成します。また、プラグインを通じて、JSブリッジを介してカメラなどのデバイスのネイティブ機能にアクセスできます。

Capacitorは、手間や急な学習曲線なしにネイティブモバイルアプリケーションを作成するための簡単な方法を提供します。シンプルなAPIと合理化された機能により、プロジェクトに組み込みやすくなっています。

Reactjsアプリのセットアップ

Reactアプリケーションを開始する最も簡単な方法を見てみましょう。npmパッケージマネージャーを使用して新しいReactアプリを作成します。

npx create-react-app my-app

プロジェクトをネイティブモバイルアプリに変換するには、アプリのエクスポートが必要です。

次に、CapacitorをReactアプリに統合する方法を理解しましょう。

ReactjsアプリへのCapacitorの統合

初期セットアップ手順は少し詳細ですが、その後はネイティブアプリラッパーの更新がsyncコマンドを実行するだけの簡単な手順になります。

最初に、開発依存関係としてCapacitor CLIをインストールし、プロジェクト内で設定します。設定中は、名前とバンドルIDのデフォルト値を受け入れて「エンター」を押します。

次に、コアパッケージと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

iosおよびandroidディレクトリがReactjsプロジェクトに表示されるようになりました。

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

次に、capacitorconfigjsonファイルのwebDirを以下のように更新します。

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

ビルドコマンドを実行して、プロジェクトをCapacitorと同期させます。

npm run build
npx cap sync

npm run buildコマンドはあなたのReactjsプロジェクトをビルドし、npx cap syncはネイティブプラットフォームの正しい場所にウェブコードを整列させ、アプリ内で実行できるようにします。

運が良ければエラーがなければ、あなたのReactjsアプリはデバイスでの起動の準備が整っているはずです！

ネイティブアプリのビルドとデプロイ

iOSアプリを開発するにはXcodeが必要で、AndroidアプリにはAndroid Studioが必要です。アプリをアプリストアで配布する予定がある場合は、iOS用のApple Developer ProgramおよびAndroid用のGoogle Play Consoleに登録する必要があります。

Capacitor CLIは両方のネイティブプロジェクトを開くプロセスを簡素化します。

npx cap open ios
npx cap open android

ネイティブプロジェクトが設定されたら、接続されたデバイスにアプリをデプロイするのは簡単なプロセスです。

Android Studioでは、すべてが読み込まれるのを待ち、その後接続されたデバイスにアプリをデプロイします。

Xcodeでは、実際のデバイスにアプリをデプロイするために署名アカウントを確立します。その後、単に再生ボタンを押して連結されたデバイスでアプリを実行することができます。

すべてが順調であれば、あなたはReactを変換したことになります。jsウェブアプリをネイティブモバイルアプリケーションに変換！

Capacitorライブリロード

現代の開発フレームワークは通常ホットリロードを備えており、幸運なことにCapacitorでもあなたのモバイルデバイス上で同じことができます！

Capacitorアプリを特定のURLからコンテンツを読み込ませることで、ローカルホストされたアプリケーションをネットワーク上でライブリロード可能にすることができます。

まず、ローカルIPアドレスを特定します。Macの場合、ターミナルでipconfig getifaddr en0を実行します。Windowsの場合はipconfigを実行し、IPv4アドレスを探します。

その後、capacitorconfig.tsファイルに別のパラメータを追加して、Capacitorにサーバーからアプリを直接読み込むよう指示します：

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を実行して、これらの変更をネイティブプロジェクトに適用します。

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

新しいプラグイン（カメラなど）がインストールされると、ネイティブプロジェクトの再ビルドが必要になることに注意してください。これは、ネイティブファイルが変更され、即座に更新できないためです。

Capacitorプラグインの使用

Capacitorプラグインの使用方法を簡単に見てみましょう。ネイティブシェアダイアログを表示するシンプルなShareプラグインをインストールします：

npm i @capacitor/share

これを使用するには、パッケージをインポートし、アプリから適切なshare()関数を呼び出します。App.jsを考慮してください：

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;

新しいプラグインをインストールした後、npx cap syncを使用してReactプロジェクトを再度同期するのを忘れないでください。

Konsta UIの実装：より良いモバイルUI

より良いモバイルUIエクスペリエンスのために、Konsta UIを使用します。iOSおよびAndroid特有のスタイリングを提供し、扱いやすいです。

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などのグローバルパラメータを設定するために、主要なAppコンポーネントを設定します。src/index.jsでメインアプリをAppでラップします：

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

React.jsページでKonsta UI Reactコンポーネントを使用しましょう。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>
  );
}