このチュートリアルでは、新しい React アプリケーションから始め、Capacitorを使用してネイティブモバイル開発に移行します。オプションとして、Tailwind CSSを使用した改善されたモバイルUIのために Konsta UI を追加することもできます。

Capacitorを使用すると、Reactのウェブアプリケーションを大幅な修正や新しいスキル（React Nativeのような）を学ぶことなく、容易にネイティブモバイルアプリに変換できます。

わずか数ステップで、ほとんどのReactアプリケーションをモバイルアプリに変換できます。

このチュートリアルでは、最初に新しいReactアプリを作成し、その後Capacitorを組み込んでネイティブモバイルアプリの領域に移行するプロセスをガイドします。また、オプションとして Konsta UI を使用して、Tailwind CSSでモバイルUIを強化することもできます。

Capacitorについて

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

Capacitorを使えば、複雑なセットアップや急な学習曲線なしに、素晴らしいネイティブモバイルアプリが手に入ります。そのシンプルなAPIと合理化された機能性により、プロジェクトに統合するのが容易になります。信じてください、Capacitorで完全に機能するネイティブアプリを達成するのがどれほど容易かに驚かされることでしょう！

Reactアプリの準備

Reactアプリケーションを始める方法はいくつかありますが、このチュートリアルではブランクのReactアプリケーションを提供する最も簡単な方法を選びます。

npx create-react-app my-app

ネイティブモバイルアプリを作成するためには、プロジェクトのエクスポートが必要です。したがって、Reactプロジェクトをビルドしてエクスポートするために使用できる簡単なスクリプトをpackagejsonに追加しましょう：

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

これで、何も心配せずに npm run build を実行できるようになり、プロジェクトのルートで新しい出力フォルダーを見つけることができるはずです。

このフォルダーは後でCapacitorによって使用されますが、今のところ正しくセットアップする必要があります。

Reactアプリに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

この時点で、Reactプロジェクト内に新しい ios および android フォルダーがあることを確認できるはずです。

それらは本物のネイティブプロジェクトです！

後でAndroidプロジェクトにアクセスするには、Android Studioをインストールする必要があります。iOSの場合はMacが必要で、Xcodeをインストールする必要があります。

さらに、プロジェクト内には、同期時に使用される基本的なCapacitor設定が含まれた capacitorconfigts ファイルが見つかるはずです。注意すべき点は、webDirがビルドコマンドの結果を指している必要があることです。現在は不正確です。

これを修正するために、capacitorconfigjson ファイルを開き、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 は、すべてのウェブコードをネイティブプラットフォームの適切な場所に同期させ、アプリで表示できるようにします。

さらに、syncコマンドはネイティブプラットフォームを更新し、プラグインをインストールすることがあるため、新しい Capacitorプラグイン をインストールした場合は、再び npx cap sync を実行する時です。気づかないうちに、実際に完了しましたので、デバイス上でアプリを見てみましょう！

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

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では、実際のデバイスにアプリをデプロイするためにサインインアカウントを設定する必要があります。まだこれを行っていない場合、Xcodeがプロセスをガイドします（繰り返しになりますが、Developer Programに登録している必要があります）。その後、接続されたデバイスでアプリを実行するためにプレイボタンを押すだけで、上部でデバイスを選択できます。以下がその例です：

おめでとうございます！あなたは成功裏にReactウェブアプリをモバイルデバイスにデプロイできました。以下がその例です：

しかし、開発中にはこれを行うためのより迅速な方法もあります。

Capacitorライブリロード

今や、すべての現代的なフレームワークでホットリロードに慣れているでしょうが、良いニュースは、最小限の労力でモバイルデバイス上でも同じ機能を持つことができるということです！

Capacitorアプリが特定のURLからコンテンツを読み込むことによって、あなたのネットワーク上でライブリロードが可能なローカルホストされたアプリケーションへのアクセスを有効にします。

最初のステップは、ローカルIPアドレスを見つけることです。Macを使用している場合、ターミナルで次のコマンドを実行することでこれを見つけることができます：

ipconfig getifaddr en0

Windowsの場合は、次を実行します：

ipconfig

その後、IPv4アドレスを探します。

Capacitorにサーバーからアプリを直接読み込むよう指示するために、capacitorconfigtsファイルに別のエントリを追加します：

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ポートを使用しました。

これで、これらの変更をネイティブプロジェクトにコピーして適用できます：

npx cap copy

copyコマンドはsyncと似ていますが、ネイティブプロジェクトを更新せずにwebフォルダーに加えた変更のみをコピーします。

その後、Android StudioまたはXcodeを使ってアプリを再デプロイできます。その後、Reactアプリ内で何かを変更すると、アプリが自動的にリロードされ、変更が表示されます！

念のため、カメラなどの新しいプラグインをインストールする場合は、ネイティブプロジェクトの再ビルドが必要です。これはネイティブファイルが変更されるためであり、即座には行えません。

構成で正しいIPとポートを使用することを忘れないでください。上記のコードブロックはデモ用にデフォルトのReactポートを示しています。

Capacitorプラグインの使用

前にも何度か言及したCapacitorプラグインを使ってみましょう。これを行うために、次のコマンドを実行してかなりシンプルなプラグインをインストールできます：

npm i @capacitor/share

Shareプラグインに特別なものはありませんが、ネイティブの共有ダイアログを表示することができます！これを行うために、パッケージをインポートし、アプリからshare()関数を呼び出すだけで済みます。src/Appjsを以下のように変更しましょう：

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;

前述のように、新しいプラグインをインストールするときは、同期操作を行い、その後アプリをデバイスに再デプロイする必要があります。これを行うには、以下のコマンドを実行します：

npx cap sync

ボタンをクリックすると、美しいネイティブ共有ダイアログがアクションで見ることができます！

npm i konsta

// 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: [],
})

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