メインコンテンツまでスキップ
Version: v5

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 ファイル
  • distwww などのビルドされたウェブ資産を格納する別のディレクトリ
  • ウェブアセットディレクトリのルートにある 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 変数を変更することでカスタマイズすることができます。

次に進むべき道

環境が整い、プロジェクトの構成が適切に設定されれば、準備は完了です! より具体的なドキュメントが必要な場合は、以下のリンク先を参照してください。

iOS を使い始める

Androidをはじめよう

開発者ワークフローガイド