Capacitor をインストール
このガイドでは、既存のフロントエンド・ウェブ・アプリケーションに Capacitor をインストールする方法を説明します。
新しいアプリをつくりはじめる場合は、選択した JavaScript フレームワークのドキュメントを使用してから、このガイドに従って Capacitor を統合することをお勧めします。
また、
npm init @capacitor/appで新しい基本アプリを作成することもできます。
Capacitor は、ネイティブ・モバイル・ランタイムと Web アプリ用の API レイヤーを提供します。このアプリには、特定の UI コントロールのセットは付属していません。モバイルコンポーネントフレームワーク（Ionic Frameworkなど）を使用することをお勧めします。
はじめる前に
ビルドするプラットフォームに合わせて 環境が設定されている ことを確認してください。
プロジェクトの要件
Capacitor は、最新の JavaScript ウェブアプリケーションに組み込むことができるように設計されています。プロジェクトは、以下の要件を満たす必要があります:
package.jsonファイルがあること。- Web アセット用のディレクトリがあること。
- Web アセットディレクトリのルートに
index.htmlファイルがあり、<head>タグがあること。
アプリへの Capacitor の追加
アプリのルートに Capacacitor をインストールします:
npm install @capacitor/core @capacitor/cli次に、CLI の質問票を使って、Capacitor を初期化します:
npx cap initCLI はいくつかの質問をしてきます。まず、アプリの名前と、アプリに使用するパッケージ ID を尋ねてきます。
最後に、ウェブアセットをどのディレクトリに構築するかを尋ねてきます。Angular ではwww、React ではbuild、Vue ではdistとなります。もし、今すぐに分からなければ、後で
capacitor.config.ts ファイルでこの値を更新することができます。
npx capコマンドは、Capacitor がプロジェクトのコマンドラインでローカルに実行される方法です。Capacitor CLI についての詳細を参照してください。
