Capacitor のインストール
新しいCapacitorアプリケーションを作成したり、既存のWebプロジェクトにCapacitorを追加することができます。これはCLIまたはVS Code extension を使用して行うことができます。
ビルドするプラットフォームの環境設定 を確認するのを忘れないようにしましょう。
新しいCapacitorアプリケーションを作成する
capacitor/create-app` パッケージを使うと、Capacitor アプリケーションを素早く作成することができます。空のディレクトリで以下のコマンドを実行すると、新しい Capacitor アプリケーションの足場ができます。
npm init @capacitor/app
既存のウェブアプリケーションにCapacitorを追加する
Capacitorは、最新のJavaScriptウェブアプリにドロップできるように設計されています。ただし、既存のアプリケーションでCapacitorを使用するためには、プロジェクトに次の3つの要件が必要です：
package.jsonファイルdistやwwwなどのビルドされたウェブ資産を格納する別のディレクトリ- ウェブアセットディレクトリのルートにある
index.htmlファイル
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`) をネイティブプロジェクトにコピーし、ネイティブプロジェクトの依存関係をインストールします。
どのフォルダをコピーするかは、npx cap initで作成されるCapacitor Config ファイル内の webDir 変数を変更 することでカスタマイズすることができます。
次に進むべき道
環境が整い、プロジェクトの構成が適切に設定されれば、準備は完了です! より具体的なドキュメントが必要な場合は、以下のリンク先を参照してください。