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

このチュートリアルでは、まず新しい Reactアプリから始めます。次に、__CAPGO_KEEP_0__を使用してネイティブモバイル開発に移行します。オプションで、Konsta UIも追加できます。 app and transition to native mobile development using Capacitor. Optionally, you can also add Konsta UI for an improved mobile UI with Tailwind CSS.

Capacitorは、ReactのWebアプリケーションを、重大な変更や新しいスキルであるReact Nativeを学ぶことなく、簡単にネイティブモバイルアプリケーションに変換できるようにします。

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

このチュートリアルでは、Reactアプリケーションの新しいプロジェクトから始め、Capacitorを取り入れてネイティブモバイルアプリケーションに進むプロセスを指示します。さらに、オプションで Konsta UI を使用して、Tailwind CSSでモバイルUIを強化できます。

Capacitorについて

CapacitorJSはゲームチェンジャーです!あなたは、任意のWebプロジェクトに__CAPGO_KEEP_0__を組み込むことができ、Webビューにアプリケーションをwrapし、ネイティブのXcodeとAndroid Studioプロジェクトを生成します。さらに、プラグインはJSブリッジを通じてネイティブデバイスの機能にアクセスできます。

Capacitorを使用すると、複雑なセットアップや急激な学習曲線なしで、素晴らしいネイティブモバイルアプリケーションを取得できます。APIと機能性がstreamlinedされたCapacitorにより、プロジェクトに簡単に組み込むことができます。信じられないほど、Capacitorを使用して完全に機能するネイティブアプリケーションを実現するのは、容易です!

Reactアプリケーションを準備する

このチュートリアルでは、Reactアプリケーションを始める最も簡単な方法を使用します。

npx create-react-app my-app

ネイティブモバイルアプリケーションを作成するには、 プロジェクトのエクスポート。 したがって、package.jsonに、Reactプロジェクトをビルドおよびエクスポートするためのシンプルなスクリプトを含めることができます。 package.jsonに、Reactプロジェクトをビルドおよびエクスポートするためのシンプルなスクリプトを含めることができます。 問題なく実行できます。プロジェクトのルートディレクトリに新しいフォルダが表示されるはずです。 このフォルダは後で__CAPGO_KEEP_0__によって使用される予定ですが、現在は正しく設定する必要があります。

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

__CAPGO_KEEP_0__をReactアプリに追加する npm run build ウェブアプリをネイティブモバイルコンテナにパッケージ化するには、最初のいくつかのステップを実行する必要がありますが、その後は単に1つのコマンドを実行するだけです。

Capacitor

Adding Capacitor to Your React App

__CAPGO_KEEP_0__ sync __CAPGO_KEEP_1__

__CAPGO_KEEP_0__ 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をインストールする必要があります。. For iOS, you need a Mac and should install 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 ウェブ code をネイティブ プラットフォームの適切な場所に同步します。

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

ネイティブ アプリをビルドおよびデプロイする

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

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

nativeモバイル開発に慣れていない場合は、Capacitor CLIを使用して、両方のネイティブプロジェクトを簡単に開くことができます。

npx cap open ios
npx cap open android

ネイティブプロジェクトを設定した後、実機にアプリをデプロイするのは簡単です。Android Studioでは、設定を変更することなく実機にアプリをデプロイできます。ここに例があります:

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

Congratulations!

react-mobile-app

Capacitor Live Reload

__CAPGO_KEEP_0__ 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__の正しいIPアドレスとポート番号を使用してください。 ファイル名:, この例ではデフォルトの React ポートを使用しました。

これらの変更を適用するには、native プロジェクトにコピーする必要があります:

npx cap copy

コマンドは copy ですが、web フォルダと設定のみをコピーし、native プロジェクトを更新せずに実行します。 syncAndroid StudioまたはXcodeを使用してアプリをもう一度デプロイしてください。その後、Reactアプリに何か変更を加えた場合、 アプリは自動的に再読み込みされ、変更が表示されます! ただし、native プロジェクトの再構築が必要になる場合があります。これは、native ファイルが変更されたため、オンザフライで行うことはできません。

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

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

codeを正しく設定する必要があります。設定のcodeブロックは、デモ用にデフォルトのReactポートを表示しています。

Capacitor プラグイン

実際に使用するプラグインを確認してみましょう。何度も言及した Capacitor プラグインの使用方法をご紹介します。実行するには、次のコマンドを実行して簡単なプラグインをインストールします。

npm i @capacitor/share

__CAPGO_KEEP_0__は素敵な機能ではないですが、native shareダイアログを表示します。 Shareプラグインプラグインをインストールした後は、packageをimportし、関数を呼び出すだけです。アプリのsrc/App.jsを次のように変更してみましょう。 share() プラグインをインストールする際には、sync操作を実行し、再度アプリをデバイスにデプロイする必要があります。次のコマンドを実行してください。 ボタンをクリックすると、native shareダイアログが実際に機能します! react-__CAPGO_KEEP_0__-share

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

__CAPGO_KEEP_0__

モバイルデバイスに適したボタンの見た目を作るには、UIコンポーネントライブラリであるReactを使用してスタイリングを追加できます。

Konsta UIを追加

私は years 年間で Ionic.

を使用して、最高のクロスプラットフォームアプリケーションを構築し、数年間で最高の選択肢でした。しかし、今ではそれを推奨しません。Reactと統合するのは非常にハックであり、すでに

tailwindcss を使用している場合、Reactと統合することは実際には価値がありません。

iOSとAndroidの特定のスタイリングに適応する素晴らしいモバイルUIが必要な場合は、Konsta UIを推奨します。

npm i konsta

必要なのは tailwind.config.js tailwind

// 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 デフォルトの (またはカスタムの) Tailwind CSS 設定に追加する追加のバリアントとヘルパー ユーティリティを使用して Konsta UI を拡張します。

主なアプリケーションを設定する必要があります。 App コンポーネントを設定する必要があります。例えば、グローバル パラメータ (例えば theme).

アプリケーションの全体をラップする必要があります。 App Example Page 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 ライブ リロードがインストールしたすべての必要なコンポーネントの後で同期されていない場合、再起動を試してください。必要な作業を完了した後、React と __CAPGO_KEEP_0__ で構築されたモバイル アプリケーションを表示することができます。

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

If the live reload is out of sync after installing all the necessary components, try restarting everything. Once you have done that, you should see a mobile app with a somewhat native look, built with React and Capacitor!

protectedTokens

まとめ

Capacitorは既存のWebプロジェクトに基づいてネイティブアプリケーションを構築するための優れたオプションであり、codeを簡単に共有し、UIの統一性を維持するための簡単な方法を提供します。

さらに Capgoを追加することで、実行中の更新を簡単に追加できます。最新の機能やバグ修正に常にアクセスできるようにすることができます。

CapgoをReactアプリに追加する方法を学びたい場合は、次の記事を参照してください。