Cordovaとは

Cordovaとはスマートフォンアプリを開発するための手法の一つである、ハイブリッドアプリを制作するためのフレームワークです。

ハイブリッドアプリとは

ハイブリッドアプリとはネイティブアプリ（デバイスにインストールして動作する）とWebアプリ（Webブラウザ上で動作する）を掛けあわせたものになります。
スマートフォンのネイティブアプリではWebViewと呼ばれる仕組みでWebブラウザを組み込むことができるため、Webアプリをそのブラウザで表示して動作させます。

いまのところiPhoneがWebkit、AndroidがWebkitから分岐したBlinkなので、のクロスプラットフォーム性が高いことも大きなメリットです。
また、HTML・CSS・JavaScriptを使えるため、Web制作者にとっては敷居が低い開発方法です。

もちろん、App StoreやPlay Storeに登録することができます。

デバイスの機能をどうやって使うのか

HTML・CSS・JavaScriptではデバイスの機能、例えばカメラ・バイブレーション・加速度センサーを扱うAPIがありません。
そこでCordovaではプラグインという形でJavaScriptからデバイスの機能を操作するためのAPIを提供しています。
これにより、デバイスの機能も簡単に扱うことができるようになっています。

ということで、そろそろ本題の開発環境のセットアップに入っていきます。

Cordovaの開発環境のセットアップ

Cordovaを使うためにはJavaとNode.jsが必要です。また、ビルドやデバッグをするためにXcodeとAndroid SDKが必要になります。まずはそれらをインストールしましょう。

この記事ではインストーラーでの説明を行っていきますので、HomebrewやChocolateyなどのパッケージ管理システムを使っている場合には、適宜そちらからインストールしてください。

JDKのインストール

JDK（Java SE Development Kit）はOracleのサイトからダウンロードしてください。
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

インストールが正しくされているか、Pathが通っているかを確認するためにjava -versionをコマンドラインで実行しましょう。インストールしたバージョンが表示されれば大丈夫です。

（この記事を書いた時点ではバージョン1.8.0_73でした。）

Node.jsのインストール

CordovaではNode.jsで作られたコマンドラインを使用し、プロジェクトの管理を行います。
https://nodejs.org/

サイトを見るとLTSとStableがありますが、ざっくり説明するとLTSはバージョンが古いけど2年半はサポートしていきますよ。というもので、Stableは最新版だけど、次のバージョンが出たらサポートしませんよ。というものです。

最新版を使っていきたい人はStableを選択し、それ以外の人はLTSを選択するといいでしょう。

（この記事を書いた時点ではバージョン5.6.0 Stableをインストールしました。）

こちらもnode -vをコマンドラインで実行してバージョンを表示し、確認しましょう。

Android SDKのインストール

Android SDKはアプリのビルドやAndroidエミュレータを使うために必要になります。
http://developer.android.com/intl/ja/sdk/index.html#Other

Mac版はインストーラーが付属していないため、
ダウンロー後に解凍したファイルは「/Users/[Username]/Library/Android/sdk」にでも移動してください。
あとでAndroidコマンドが使えるようこの場所にPathを通します。

Windowsはexeファイルがインストーラーになっているため、そちらをダウンロードして実行すると簡単です。

Pathの設定

インストールしただけではSDK ToolsへのPathが通っていないため、以下のような形で設定します。
ディレクトリパスは環境ごとに違うため、sdkファイルをインストールした場所に合わせて変更してください。

Mac

.bash_profileファイルがない場合は作成してください。

Windows

Android SDK ManagerでBuild-toolsなどをインストールする

最後にSDK Managerから必要なコンポーネントをインストールします。
SDK ManagerはコマンドラインからAndroid sdkを実行すると起動します。

ここでエラーが表示されてSDK Managerが起動しなかった場合はPathの設定が間違っている可能性が高いため、もう一度設定を確認してみてください。

基本的には起動した際に選択されているものをそのままインストールする形で大丈夫ですが、スマートフォンだけを対象にする場合はAndroid TVやWearのシステムイメージファイルはサイズが大きいので除いてもいいでしょう。

ちなみにシステムイメージファイルはエミュレータで使用するものです。
エミュレータの設定に関しては、あとで説明します。

Xcodeのインストール

XcodeはiOSのアプリをビルドするために必要になります。App Storeで配布されていますので、App Storeを開きXcodeを検索してインストールしてください。
ダウンロード・インストールまで終わるとLaunchpadに登録されますので、起動してコンポーネントのインストールもしてください。

ちなみにWindowsでは使えないため、iOS向けのアプリ開発はCordovaでもできません。悲しい。

Cordovaのインストール

さて、いよいよCordovaのインストールです。実はこれが一番簡単で早く済みます。(ヽ´ω`)
https://cordova.apache.org/#getstarted

公式サイトの通りですが、npm install -g cordovaをコマンドラインで実行するとインストールされます。-gというのはグローバル領域にインストールするという意味で、これによりどのディレクトリにいてもCordovaコマンドを使用できるようになります。

なお、npmを使ってインストールしますが、バージョンが古いとCordovaのリポジトリがNot Foundになるようですので、もしインストールが失敗する場合には以下のコマンドでnpmのバージョンを上げましょう。

npm update -g npm

（この記事を書いた時点ではバージョン3.7.2でした。）

ちなみに、npmとはNode.jsのモジュールを管理するためのツールです。CordovaもNode.jsのモジュールの一つとして配布されています。

これでようやくCordovaでアプリをビルドする準備ができました。

Cordovaプロジェクトの作成

Cordovaのプロジェクトはコマンドラインで作成します。
プロジェクトを作りたいディレクトリをコマンドライン上で開いた状態で以下のコマンドを実行してみましょう。
cordova create {folderName} {com.example.appid} {appName}

{}で囲われた部分は適宜変更してください。{folderName}は作成するプロジェクトフォルダの名前、{com.example.appid}はアプリID、{appName}はアプリ名です。

アプリIDはドメインを逆から記述するような形になります。公開しないのであれば、com.example.helloworldといったIDでも大丈夫です。

プロジェクトが作成されると、以下のような形でフォルダ・ファイルが作成されます。
[folderName]
├ [hooks]
├ [platforms]
├ [plugins]
├ [www]
└ config.xml

このwwwフォルダの中にHTML・CSS・JavaScriptファイルを配置してアプリを構築していきます。

Cordovaにプラットフォームを追加する

CordovaでiOSやAndroid向けのアプリを作るためには、プラットフォームとしてそれらを追加する必要があります。

プラットフォームはコマンドライン上でcordova createで作成したプロジェクトフォルダを開き、以下のコマンドを実行します。
cordova platform add {platformName}

例えば、iOSとAndroidを追加する場合にはこのようになります。
cordova platform add ios
cordova platform add android

また手っ取り早くブラウザで確認することもありますので、browserも追加しておくといいでしょう。
cordova platform add browser

もし、プラットフォームを削除したい場合にはaddをrmに変更して実行してください。
cordova platform rm browser

追加したプラットフォームを確認したい場合にはplatformsフォルダの中を見るか、以下のコマンドで一覧を表示することができます。
cordova platform ls

ブラウザで確認する

アプリをとりあえず確認したいときには以下のコマンドを実行するとブラウザでサクッと簡単にできます。
cordova serve browser

コマンドを実行するとhttp://localhost:8000 というアドレスが発行されますので、ここにアクセスし、Platformsの中からbrowserを選択してください。

デフォルトではCordovaくん？が表示されます。

ブラウザでの確認ではデバイス特有の機能が使えなかったり、実際の見た目とはもしかしたら微妙に異なる可能性がありますので、スマートフォンの実機で確認する方法もあります。

スマートフォンの実機でアプリを確認する

Android

データ転送ケーブルを繋いでUSBデバッグをONにした状態で以下のコマンドを実行してください。
cordova run android

設定 > 開発者向けオプション > デバッグに該当の設定があります。

もし、開発者向けオプションが見つからない場合は非表示になっていると思いますので、設定 > 端末情報にあるビルド番号を連続でタップして表示してください。

iOS

iPhoneで確認する場合には、Provisioning Profileを取得しXcode上で実行します。Provisioning Profileが有料で登録しなければいけませんが、実はいま時点で登録していないためこのあたりのサイトさんを参考にしてください(｀；ω；´)
iPhone(iOS)アプリを実機でテストする方法【初心者向け】

エミュレータでアプリを確認する

Android

Androidでエミュレータを起動するためには、Android SDKでシステムイメージをインストールし、Android AVDを使ってエミュレータの作成をします。

ここでは「Intel x86 Atom_64 System Image」と動作を高速化するために「Intel x86 Emulator Accelerator（HAXM Installer）」をインストールします。

「Intel x86 Emulator Accelerator（HAXM Installer）」はインストーラーのダウンロードなので、SDK>extras>intel>Hardware_Accelerated_Execution_Managerに入っているインストーラーを実行してインストールしてください。

Intel x86 Emulator Acceleratorのインストールが終わったら、コマンドラインでandroid avdを実行してください。

AVD Managerが起動しますので、Device DefinitionsからNexus 5などエミュレーションしたいデバイスに近いものを選択してCreate AVDをクリックしてください。

このとき、Memory OptionsのRAMがIntel x86 Emulator Acceleratorをインストールしたときに設定したメモリーより少ないと起動しませんので、気をつけてください。

作成したデバイスをAndroid Virtual Devicesから選択し、Startをクリックするとエミュレーターが起動します。

エミュレータでホーム画面まで表示された段階でcordova emulate androidを実行するとアプリがインストールされて起動します。

iOS

iOSではXcodeをインストールした時点で一通りのエミュレータが設定されますので、cordova emulate ios を実行すると、エミュレータが起動しアプリも起動します。

エミュレータの種類を指定して起動したい場合には、

といった形で指定することができます。

おわりです

環境のセットアップでインストールするものが多く少し大変ですが、それが終わってしまえば中身はWebアプリを作るような形で構築していけますので、Web制作者にはありがたいですね。

ということで今回はここまで。
ではでは ( ͡° ͜ʖ ͡° )ﾉｼ