A one day, single-track online event celebrating the future of cross-platform app development

DocsプラグインCLI

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 init

CLI はいくつかの質問をしてきます。まず、アプリの名前と、アプリに使用するパッケージ ID を尋ねてきます。

最後に、ウェブアセットをどのディレクトリに構築するかを尋ねてきます。Angular ではwww、React ではbuild、Vue ではdistとなります。もし、今すぐに分からなければ、後で capacitor.config.ts ファイルでこの値を更新することができます。

npx cap コマンドは、Capacitor がプロジェクトのコマンドラインでローカルに実行される方法です。Capacitor CLI についての詳細を参照してください。

次の作業

iOS でのはじめかた ›

Android でのはじめかた ›

開発ワークフローのガイド ›

Previous
<- 環境設定
Next
Ionic フレームワークとの連携 ->
Contribute ->