Apache Cordova はオープンソースのモバイル開発フレームワークです。開発者はHTML5、CSS3、JavaScriptといった標準的なWeb技術を利用してクロスプラットフォーム開発を行えます。アプリケーションは各プラットフォーム向けにカプセル化されたコンテナ上で動作し、標準に準拠したAPIバインディングを通じてセンサー、ローカルデータ、ネットワーク状態といったデバイス機能を呼び出します。
単一のコードベースで複数プラットフォームに対応可能で、無料かつオープンソースです。
以下のようなケースに該当する場合は、Apache Cordovaを選択できます。
- モバイル開発者で、複数のプラットフォーム向けアプリを同一コードで配信し、各プラットフォーム固有の言語やツールチェーンで重複開発したくない場合；
- Web開発者で、Webアプリをパッケージ化し、各種アプリストアから配布したい場合；
- モバイル開発者で、ネイティブコンポーネントとWebView（専用ブラウザウィンドウ）を組み合わせたハイブリッド開発を行い、Webコードからデバイス下位APIにアクセスする必要がある、またはプラグインを作成してネイティブコードとWebViewの相互呼び出し経路を構築したい場合。
Cordovaアプリは複数のコンポーネントから構成されます。下図はCordovaアプリのアーキテクチャを俯瞰した概要図です。
WebView（ウェブビュー）
Cordova機能を搭載したWebViewはアプリの画面全体を描画できます。一部プラットフォームではコンポーネントとしてハイブリッドアプリに埋め込み、ネイティブUI部品と並行して利用可能です。
Web App（ウェブアプリ）
こちらに業務ロジックのコードを配置します。アプリ本体はWebページとして実装され、既定のエントリーファイルはローカルの index.html です。ページから必要なCSS、JavaScript、画像、メディアファイルなどを読み込みます。アプリ全体はネイティブコンテナ内部のWebView上で実行され、最終的にパッケージされて各アプリストアへ配布されます。
コンテナには極めて重要なファイル、config.xml が存在します。このファイルにはアプリの基本情報や各種実行パラメータ（画面の縦横切り替えの許可設定など）が定義されています。
Plugins（プラグイン）
プラグインはCordovaエコシステムの中核要素です。Cordovaとネイティブコードが相互通信するための橋渡しを担い、各種デバイス標準APIをカプセル化することでJavaScriptからネイティブコードを呼び出せるようにします。
Apache Cordova公式はコアプラグイン群を保守しており、バッテリー状態、カメラ、連絡先といったデバイス基本機能へアクセスするインターフェースを提供します。
公式コアプラグイン以外にも、全プラットフォームに対応していない拡張機能を実装した多数のサードパーティ製プラグインが存在します。プラグイン検索サイトまたはnpmからCordovaプラグインを探すか、『プラグイン開発ガイド』に従って自作することも可能です。代表的な用途として、Cordovaと独自のネイティブコンポーネントとの通信実装が挙げられます。
注意：新規Cordovaプロジェクトには、最新版の既定ルールにより初期状態でプラグインが一切含まれません。コアプラグイン、サードパーティプラグインを問わず、明示的に手動でインストールする必要があります。
CordovaはUIコントロールやMV系フロントエンドフレームワークを提供せず、Webコードを実行するランタイム環境のみを提供します。画面部品やフロントエンドアーキテクチャフレームワークを利用したい場合は、自身で選定しプロジェクトへ組み込む必要があります。
2種類の開発フロー
Cordovaにはモバイルアプリを構築するための2つの主流なワークフローが用意されています。多くの場面でどちらのフローでも目的を達成可能ですが、それぞれ長所が存在します。
クロスプラットフォームワークフロー（CLIコマンドラインツール）
対象プラットフォームが多く、プラットフォーム固有のカスタマイズ開発が少ないケースに適しています。中心となるツールは cordova CLI です。CLIは高レベルなツールで、複数プラットフォーム向けプロジェクトを一括ビルドでき、下位スクリプトの詳細を隠蔽します。共通のWebリソースを各プラットフォームサブディレクトリへコピーし、プラットフォーム設定を自動処理、ビルドスクリプトを実行してインストーラーを生成。同時にプラグイン管理のための統一されたコマンドラインインターフェースを提供します。
プラットフォーム専用ワークフロー
単一プラットフォームに絞って開発し、プロジェクトの下位層を深く改変する必要がある場合に適しています
代表的な利用シナリオ：アプリ内に独自ネイティブコンポーネントとCordova WebViewを混在させる開発
プラットフォームSDK内のプロジェクトファイルを直接編集する必要がある場合は、こちらのフローを選択してください。
このワークフローは各プラットフォーム固有の下位スクリプトを基盤とし、独立したPlugmanツールでプラグインを管理します。複数プラットフォーム開発に利用すること自体は可能ですがコストが高くなります。高レベルツールによる一括管理がないため、各プラットフォームごとに個別ビルド、プラグイン設定の保守を行う必要があります。
一度CLIモードからプラットフォームSDK＋下位スクリプトモードへ切り替えると、元に戻せません。
CLIはクロスプラットフォーム共通のソースコードを保持しており、ビルド実行時にプラットフォームディレクトリ内のコードを上書きします。プラットフォームディレクトリのファイルへ加えた変更を維持したい場合は、下位スクリプトモードへ移行する必要があります。このモードでは共通Webソースを参照せず、プラットフォームディレクトリ内の独立したコードを直接使用します。
Cordovaのインストール
インストール手順は選択する開発フローに依存します。
ここではクロスプラットフォームCLIワークフローを例に説明します。
Cordovaコマンドラインツール（CLI）はnpmパッケージとして配布されています。
以下の手順でcordova CLIをインストールします。
- Node.jsをダウンロードしインストールします。インストール完了後、ターミナルから
nodeとnpmコマンドを直接実行できるようになります。 - （任意）Gitを未導入の場合はGitクライアントをダウンロード・インストールします。インストール後、コマンドプロンプト（ターミナル）で
gitコマンドを実行可能になります。Gitリポジトリからリソースを取得する際、Cordova CLIとnpmがgitを呼び出します。 - Node.jsに付属するnpmツールでcordovaモジュールをインストールします。npmが自動的にダウンロード処理を実行します。
nodejsのインストール
nodejsのインストールは簡単で、Windows環境の場合はmsiファイルをダウンロードし、ダブルクリックで起動し基本的に次へを選択するだけで完了します。インストール後
CMDターミナルを開き、正常にインストールできたか確認します
2つのコマンドを実行し、両方ともバージョン番号が出力されて初めて成功とみなします（下図のようにバージョンが表示されます）
node -v
npm -v
Node.jsのインストールが完了したら、続いてcordovaをインストールします
macOS / Linux環境：
npm install -g cordovamacOS、Linux利用者の注意点：/usr/local/share など権限制限のあるディレクトリへツールをインストールする場合、npmコマンド実行時に sudo を付加する必要がある場合があります。
ただしnvm / naveといったバージョン管理ツールを使用している、または現在の作業ディレクトリに書き込み権限がある場合は sudo 不要です。
また推奨事項：sudo とnpmを併用することは極力避け、権限トラブルやパッケージインストール異常を防止してください。
nvm（Node Version Manager）またはnaveバージョン管理ツールでNode.jsとnpmを管理すれば、パッケージ導入時にsudoを利用する必要がほとんどなくなります。
Windows環境：
C:\>npm install -g cordova引数 -g はcordovaをグローバルインストールするオプションです。この引数を省略すると、現在のフォルダ配下の node_modules サブフォルダ内にのみインストールされます。
インストール完了後、ターミナルで引数なしの cordova を実行し、ヘルプ情報が正常に表示されれば導入成功です。
インストール処理時に「added 217 packages in 14s」と表示されます
インストール完了確認
cordova -vバージョン番号（例：13.0.0）が出力されれば準備完了です。
動作環境とバージョンサポート
| Cordova CLI バージョン | サポートするNode.js最低バージョン |
|---|---|
| 13.x | >=20.17.0 |
| 12.x | >=16.13.0 |
| 11.x | >=12.0.0 |
| 10.x | >=10.0.0 |
| 9.x | >=6.0.0 |
インストールが完了したので、これよりCordovaの学習を開始します。
概要とインストール