開発者ドキュメント

コンデンサ:モバイルでのWebアプリの実行

Capacitor は、Ionicの背後にあるチームによって構築されたプロジェクトであり、JavaScript Webアプリケーションを取得して、iOS、Android、デスクトップ(Electron経由)、またはWebプラットフォームで実行するための優れた方法です。 ネイティブデバイスのSDKにアクセスできるようになり、Cordovaの代わりになることを目指しています。 この記事では、Create React App で構築されたIonicアプリケーションがあると想定しますが(そうです、その通りです!)、実装は異なる場合があります。

まず、本番ビルドをデバイスで実行できるように、アプリケーションをビルドしましょう。

$ npm run build

次に、Capacitorをインストールするには、プロジェクトフォルダー内のターミナルで次のコマンドを実行して、必要なパッケージをインストールします。

$ npm install --save @capacitor/core @capacitor/cli

$ npx cap init

次に、プロジェクトに関するいくつかの情報を求められます。 これは単なる例であるため、各プロンプトのデフォルトを使用してください。

次に、次のようなものが表示されます。

🎉   Your Capacitor project is ready to go!  🎉

Add platforms using "npx cap add":

  npx cap add android
  npx cap add ios
  npx cap add electron

ここから、ビルド先のプロジェクトを選択できます。 例としてiosを使用します。

$ npx cap add ios

ええと、これをデフォルト設定で実行すると、このエラーが発生します!

[error] Capacitor could not find the web assets directory "/repos/ionic-react/www".
    Please create it, and make sure it has an index.html file. You can change
    the path of this directory in capacitor.config.json.
    More info: https://capacitor.ionicframework.com/docs/basics/configuring-your-app

これは、Capacitorを新しいIonicプロジェクトに追加するときに発生する可能性のある一般的なエラーです。 新しく作成されたcapacitor.config.jsonを更新して、buildディレクトリを指すようにします。

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

コマンドを再度実行すると、CapacitorはプロジェクトにiOSアプリケーションを追加し、Xcode内で次のコマンドを使用して開くことができます。

$ npx cap open ios

Xcode内から[再生]ボタンをクリックすると、デバイスでアプリケーションを開くことができます。

アプリに変更を加える

アプリケーションの開発を続けているので、プラットフォームフォルダーを削除して毎回再追加する必要はありません。 幸い、cap copyを使用して、JavaScriptをビルドし、ファイルをiOSプロジェクトにコピーできます。

$ npm run build

$ npx cap copy

これにより、buildフォルダー内のファイルを使用してビルドが更新されます。 Xcode内からアプリケーションを再起動すると、行った変更でアプリケーションが更新されることがわかります。

以上です! Capacitorを使用できるようになったので、公式ドキュメントをチェックアウトして、プラグインとさまざまなデバイスSDKまたはWebAPIの使用方法について学ぶことができます。

モバイルバージョンを終了