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の使用方法について学ぶことができます。