アプリの作成

このガイドでは、JS/HTML Cordovaアプリケーションを作成し、cordova コマンドラインインターフェイス (CLI) を使用してさまざまなネイティブモバイルプラットフォームにデプロイする方法を説明します。Cordovaコマンドラインの詳細なリファレンスについては、CLIリファレンスを参照してください。

Cordovaプロジェクトスペースの作成

ターミナルで、Cordovaのプロジェクトを作成するディレクトリに移動します。

次のコマンドは、ソースコード、リソースファイル、設定、およびビルド成果物が配置される新しいプロジェクトディレクトリを作成することに注意してください。

cordova create hello com.example.hello HelloWorld

上記のコマンドは、Cordovaアプリに必要なディレクトリ構造を持つ「hello」という名前のプロジェクトディレクトリを作成します。

デフォルトでは、cordova create スクリプトは、アプリのランディングページがプロジェクトの www/index.html ファイルであるスケルトンWebベースアプリケーションを生成します。

関連項目

• Cordova createコマンドのリファレンスドキュメント
• Cordovaプロジェクトのディレクトリ構造
• Cordovaプロジェクトテンプレート

プラットフォームの追加

後続のすべてのコマンドは、プロジェクトのディレクトリまたはサブディレクトリ内で実行する必要があります。

cd hello

アプリのターゲットとするプラットフォームを追加します。「ios」と「android」プラットフォームを追加し、それらが config.xml と package.json に保存されるようにします。

cordova platform add ios
cordova platform add android

現在のプラットフォームセットを確認するには

cordova platform ls

プラットフォームを追加または削除するコマンドを実行すると、プロジェクトの *platforms* ディレクトリのコンテンツに影響します。このディレクトリでは、指定された各プラットフォームがサブディレクトリとして表示されます。

注：CLIを使用してアプリケーションをビルドする場合、/platforms/ ディレクトリ内のファイルを *編集しないでください*。このディレクトリ内のファイルは、アプリケーションのビルドを準備するとき、またはプラグインが再インストールされるときに定期的に上書きされます。

関連項目

• Cordova platformコマンドのリファレンスドキュメント

ビルドの前提条件をインストールする

アプリをビルドして実行するには、ターゲットとする各プラットフォーム用のSDKをインストールする必要があります。または、開発にブラウザを使用している場合は、プラットフォームSDKを必要としない `browser` プラットフォームを使用できます。

プラットフォームを構築するための要件を満たしているかどうかを確認するには

$ cordova requirements
Requirements check results for android:
Java JDK: installed .
Android SDK: installed
Android target: installed android-19,android-21,android-22,android-23,Google Inc.:Google APIs:19,Google Inc.:Google APIs (x86 System Image):19,Google Inc.:Google APIs:23
Gradle: installed

Requirements check results for ios:
Apple macOS: not installed
Cordova tooling for iOS requires Apple macOS
Error: Some of requirements check failed

関連項目

• Androidプラットフォームの要件
• iOSプラットフォームの要件

アプリのビルド

デフォルトでは、cordova create スクリプトは、開始ページがプロジェクトの www/index.html ファイルであるスケルトンWebベースアプリケーションを生成します。初期化は、www/js/index.js で定義されている deviceready イベントハンドラの一部として指定する必要があります。

*すべて* のプラットフォーム用にプロジェクトをビルドするには、次のコマンドを実行します。

cordova build

必要に応じて、各ビルドのスコープを特定のプラットフォーム（この場合は「ios」）に制限できます。

cordova build ios

関連項目

• Cordova buildコマンドのリファレンスドキュメント

アプリのテスト

モバイルプラットフォーム用のSDKには、多くの場合、デバイスイメージを実行するエミュレータがバンドルされているため、ホーム画面からアプリを起動し、多くのプラットフォーム機能とどのように対話するかを確認できます。アプリを再構築し、特定のプラットフォームのエミュレータ内で表示するには、次のようなコマンドを実行します。

cordova emulate android

cordova emulate を実行すると、最新のアプリが準備、再構築、およびエミュレータに再デプロイされます。

または、ハンドセットをコンピュータに接続して、アプリを直接テストできます。

cordova run android

このコマンドを実行する前に、各プラットフォームの手順に従って、テスト用のデバイスを設定する必要があります。

関連項目

• Androidエミュレータのセットアップ
• Cordova runコマンドのリファレンスドキュメント
• Cordova emulateコマンドのリファレンスドキュメント

プラグインの追加

デフォルトで生成されたアプリを変更して標準のWebテクノロジーを利用できますが、アプリがデバイスレベルの機能にアクセスするには、プラグインを追加する必要があります。

*プラグイン* は、ネイティブSDK機能用のJavascript APIを公開します。プラグインは通常npmでホストされており、プラグイン検索ページで検索できます。 Apache Cordovaオープンソースプロジェクトによって提供される重要なAPIがいくつかあり、これらはコープラグインAPIと呼ばれます。

カメラプラグインを package.json に追加して保存するには、カメラプラグインのnpmパッケージ名を指定します。

$ cordova plugin add cordova-plugin-camera
Fetching plugin "cordova-plugin-camera@~2.1.0" via npm
Installing "cordova-plugin-camera" for android
Installing "cordova-plugin-camera" for ios

プラグインは、ディレクトリまたはgitリポジトリを使用して追加することもできます。

**注**：CLIは、各プラットフォームに適したプラグインコードを追加します。概要で説明されているように、下位レベルのシェルツールまたはプラットフォームSDKを使用して開発する場合は、Plugmanユーティリティを実行して、各プラットフォームに個別にプラグインを追加する必要があります。（詳細については、Plugmanを使用したプラグインの管理を参照してください。）

現在インストールされているプラグインを表示するには、plugin ls（または plugin list、または plugin のみ）を使用します。それぞれが識別子で表示されます。

$ cordova plugin ls
cordova-plugin-camera 2.1.0 "Camera"

関連項目

• Cordova pluginコマンドのリファレンスドキュメント
• Cordovaプラグイン検索ページ
• コープラグインAPI

*マージ* を使用した各プラットフォームのカスタマイズ

Cordovaを使用すると、多くの異なるプラットフォームにアプリを簡単にデプロイできますが、カスタマイズを追加する必要がある場合があります。その場合、トップレベルの platforms ディレクトリ内のさまざまな www ディレクトリにあるソースファイルを変更したくありません。これらのファイルは、トップレベルの www ディレクトリのクロスプラットフォームソースで定期的に置き換えられるためです。

代わりに、トップレベルの `merges` ディレクトリは、特定のプラットフォームにデプロイするアセットを指定する場所を提供します。 `merges` 内の各プラットフォーム固有のサブディレクトリは、`www` ソースツリーのディレクトリ構造をミラーリングしているため、必要に応じてファイルを上書きまたは追加できます。たとえば、 `merges` を使用してAndroidデバイスのデフォルトのフォントサイズを大きくする方法は次のとおりです。

• www/index.html ファイルを編集し、追加のCSSファイル（この場合は overrides.css）へのリンクを追加します。

    <link rel="stylesheet" type="text/css" href="css/overrides.css" />
  

• 必要に応じて、空の `www/css/overrides.css` ファイルを作成します。これは、Android以外のすべてのビルドに適用され、ファイルが見つからないエラーを防ぎます。

• `merges/android` 内に `css` サブディレクトリを作成し、対応する `overrides.css` ファイルを追加します。たとえば、`www/css/index.css` 内で指定された12ポイントのデフォルトフォントサイズをオーバーライドするCSSを指定します。

    body { font-size:14px; }
  

プロジェクトを再構築すると、Androidバージョンはカスタムフォントサイズを備えますが、他のバージョンは変更されません。

また、 `merges` を使用して、元の `www` ディレクトリに存在しないファイルを追加することもできます。たとえば、アプリは、`merges/ios/img/back_button.png` に保存されている *戻るボタン* グラフィックをiOSインターフェイスに組み込むことができます。一方、Androidバージョンは、対応するハードウェアボタンから戻るボタンイベントをキャプチャできます。

Cordovaとプロジェクトの更新

cordova ユーティリティをインストールした後、次のコマンドを実行することで、いつでも最新バージョンに更新できます。

npm update -g cordova

特定のバージョンをインストールするには、この構文を使用します。

npm install -g cordova@3.1.0-0.2.0

現在実行されているバージョンを確認するには、cordova -v を実行します。最新のリリースされたcordovaバージョンを見つけるには、次を実行できます。

npm info cordova version

ターゲットにしているプラットフォームを更新するには

cordova platform update android --save
cordova platform update ios --save