Capacitor のインストール
Capacitor の使用を開始するには、既存のフロントエンドプロジェクトに Capacitor を追加する方法(推奨)と、新しいプロジェクトを開始する方法の 2 つがあります。Capacitor は主に既存のフロントエンドプロジェクトにドロップインするように設計されていますが、新しく始めたいのであれば、シンプルな開始プロジェクト構造が用意されています。
Capacitor は Native なモバイルランタイムと Web アプリ用の API レイヤを提供します。ゲームなどを作成している場合を除き、必要になる可能性の高い特定の UI コントロールは 付属していません 。
そのため、お好みのモバイルフロントエンドフレームワーク(Ionic Frameworkなど)で Capacitor プロジェクトを開始することを強くお勧めします。
はじめる前に
構築するプラットフォームに
Dependencies がすべてインストールされていることを確認してください。最も重要なのは、Mac を使って iOS 用にビルドする予定の場合、新しいプロジェクトを始める前に必ず
pod repo update を使って CocoaPods をアップデートすることです。
既存の Ionic アプリに Capacitor を追加する
既存の Web アプリに Capacitor を追加する
Capacitor は既存の JS ウェブアプリにドロップインするように設計されており、有用なパッケージです。開始するには、 package.json ファイルとすべての Web アセットを含むフォルダが必要です。
Web アプリケーションに Capacitor を追加するには、次のコマンドを実行します:
cd my-app
npm install @capacitor/core @capacitor/cliそして、あなたのアプリ情報をつかって Capacitor を初期化します。
Note: npx は、グローバルインストールを回避するためにローカルバイナリ/スクリプトを実行する、npm5 以降で使用可能な新しいユーティリティです。
npx cap initこのコマンドを実行すると、アプリケーション名とアプリケーション ID(Android のパッケージ名と iOS のバンドル識別子)の入力を求められます。
--web-dir フラグを使用して、Web アセットフォルダ(デフォルトは www )を設定します。
次に、必要な Native・プラットフォームをインストールします:
npx cap add android
npx cap add ios🎉 Capacitor があなたのプロジェクトにインストールされました。 🎉
Optional: 新規プロジェクトの開始
Capacitor には stock project 構造が用意されているので、新しく始めて UI とフロントエンドのフレームワークを別々に追加したいという場合に便利です。
作成には以下を実行ください:
npx @capacitor/cli createこのコマンドを実行すると、アプリケーション名とアプリケーション ID(Android のパッケージ名と iOS のバンドル識別子)の入力を求められます。
これにより、UI ライブラリを持たない非常にシンプルな起動アプリケーションが作成されます。
次のアクション
PWA Elements を含む 必要な依存関係 がインストールされていることを確認してから、 Developer Workflow Guide に進んで、Capacitor アプリケーションの構築方法を確認してください。
