Capacitor のインストール
Capacitor アプリケーションを作成するには 2 つの方法があります。 @capacitor/create-app パッケージを使ってゼロから Capacitor アプリケーションを作成する方法と、 すでに存在する Web プロジェクトに Capacitor を追加する方法です。
ビルドするプラットフォームの環境設定を確認するのを忘れないようにしましょう。
新しいCapacitorアプリケーションを作成する
capacitor/create-app` パッケージを使うと、Capacitor アプリケーションを素早く作成することができます。空のディレクトリで以下のコマンドを実行すると、新しい Capacitor アプリケーションの足場ができます。
npm init @capacitor/app
既存のウェブアプリケーションにCapacitorを追加する
Capacitorは最新のJavaScriptウェブアプリケーションにドロップできるように設計されています。しかし、既存のアプリケーションでCapacitorを使用するには、プロジェクトに次の3つの要件が必要です。
プロジェクトに必要なもの...
package.jsonファイルdistやwwwなどのビルドされたウェブ資産を格納する別のディレクトリ- ウェブアセットディレクトリのルートにある
index.htmlファイル
info
Capacitorを正しくインジェクションするには、index.html ファイルに <head> タグが含まれている必要があります。もし
がない場合、Capacitorプラグインは動作しません。
Capacitorのインストール
アプリのルートに、Capacitorの主なnpmディペンデンシーであるコアJavaScriptランタイムとコマンドラインインターフェース(CLI)をインストールします。
npm i @capacitor/core
npm i -D @capacitor/cli
Capacitorの設定を初期化する
次に、CLIアンケートを使ってCapacitorを初期化します。
npx cap init
CLIは、アプリ名やアプリに使用するパッケージIDなどから、いくつかの質問をします。
AndroidとiOSのプロジェクトを作成する
Capacitorコアランタイムがインストールされたら、AndroidとiOSプラットフォームをインストールします。
npm i @capacitor/android @capacitor/ios
プラットフォームを package.json に追加したら、以下のコマンドを実行してネイティブアプリケーション用の Android と iOS プロジェクトを作成します。
npx cap add android
npx cap add ios
ウェブコードをネイティブプロジェクトに同期させる
ネイティブプロジェクトを作成したら、以下のコマンドを実行して、Webアプリケーションをネイティブプロジェクトに同期させることができます。
npx cap sync
npx cap syncはビルドしたウェブアプリケーション(デフォルトはwww`) をネイティブプロジェクトにコピーし、ネイティブプロジェクトの依存関係をインストールします。
info
どのフォルダをコピーするかは、npx cap initで作成されるCapacitor Config ファイル内の webDir 変数を変更することでカスタマイズすることができます。
次に進むべき道
環境が整い、プロジェクトの構成が適切に設定されれば、準備は完了です! より具体的なドキュメントが必要な場合は、以下のリンク先を参照してください。