Cordova の CLI をインストールして使ってみる

Cordova の CLI をインストールして使ってみる.md

僕はネイティヴアプリというものを作ったことがない。フロントエンドアプリ開発についても趣味レベル止まり。前から作りたいと思っていた。
主な仕事はサーバ運用、バックエンドプログラム開発（それも Hadoop を用いた集計基盤開発。最もフロントエンド開発から遠い。）であった。

ネイティヴアプリを作るきっかけが欲しい。と思っていた。
どうせなら、今後流行りそうなハイブリッドアプリ開発フレームワークを利用して作ってみようと思い立った。

そこで出会ったのが Cordova。
早速やってみることにした。

日本語の書籍もいくつかあるらしいが、僕はまずは本家を参考にするという鉄則があるので、以下のドキュメントを実践し、Cordova の世界に足を踏み入れようと思う。
http://cordova.apache.org/docs/en/5.0.0/guide_cli_index.md.html#The%20Command-Line%20Interface

上記のガイドは、Cordova を用いたアプリケーションの作成方法とデプロイ方法を説明したもの。
これを実践してみる。 cordova command-line interface(CLI) を用いる。

5.0.0 が最新っぽかった（2015/08/14現在）ので、Cordova 5.0.0 を対象とする。

このドキュメントは、フロントエンド、アプリ開発の知識がない僕が Cordova を使ってアプリを作っていく日記のようなもの。

間違っている点があればご指摘お願いいたします。

Cordova とは

オープンソースなハイブリッドモバイルアプリフレームワーク。
Apache Software Foundation のトップレベルプロジェクトである。

開発者は HTML5、CSS3、JS を用いてアプリを開発し、Cordova を用いてそのアプリを様々なプラットフォーム(iphone、android、windows phone、etc...)向けのアプリへビルドする。

メリット

• プラットフォーム固有の開発言語(iOS なら C#, Android なら java?)に縛られることなく、モバイルアプリの開発ができる。
• プラットフォームがインストールされているデバイスへのアクセスが可能。

Basic Components

config.xml

アプリ、アプリで利用するパラメタを記述するファイル。
このファイルは W3C の Packaged Web App specification を参考に作られている。

Packaged Web App specification
http://www.w3.org/TR/widgets/

アプリケーション

Cordova において、アプリは web page である。
つまり、アプリは HTML、CSS、JS により作成される。
各プラットフォームにおいて、アプリは WebView として実行される。

プラグイン

Cordova に対するプラグインの作成が可能である。
プラグインは、アプリの JS から、ネイティブコードの実行を可能とするプログラムである。

プラグインレジストリから、サードパーティ製のプラグインを探すことが可能。

プラグインレジストリ
http://plugins.cordova.io/#/

早速使ってみる

まずはじめに、nodejs をインストールする必要がある。
というのも Cordova は nodejs 製のソフトウェアである。
この点はラッキーだ。
僕は以前から nodejs を用いたアプリ開発を趣味レベルで実践していたし、javascript は好きな言語だ（この辺りは、仕事で Perl を使っている影響が大きい気がする。Perl と javascript は「自由」という点で何か似ている。）

僕の環境は OS X 10.10.4 Yosemite x86_64 である。
https://nodejs.org/download/
より Mac 向けの pkg をダウンロードし、インストールする。

Cordova のインストール

次に、git client をインストールする。
https://git-scm.com/book/ja/v1/%E4%BD%BF%E3%81%84%E5%A7%8B%E3%82%81%E3%82%8B-Git%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB
を参考にした。

Cordova 自体は nodejs 製のソフトウェアである。
ゆえに、nodejs の package management system である npm を通してインストールする。

npm install -g cordova


ここまでは詰まることなくできた。

SDK のインストール

次に、対象となるプラットフォームの SDK をインストールする必要がある。
これが面倒臭そうだ。。。。
僕はネイティヴアプリを作ったことがない。
ゆえに、SDK もインストールしたことがない。

iOS

どんな SDK をインストールすれば良いか？はこちら。
http://cordova.apache.org/docs/en/5.0.0/guide_platforms_index.md.html#Platform%20Guides

今回試すプラットフォームは iOS とする。
以下のドキュメントに SDK のセットアップ方法が書かれている。
http://cordova.apache.org/docs/en/5.0.0/guide_platforms_ios_index.md.html#iOS%20Platform%20Guide

Create the App

アプリを作成する。

cordova create hello com.example.hello HelloWorld

create はサブコマンド名
hello はディレクトリ
com.example.hello はアプリ識別子（逆ドメイン表現）
HelloWorld はアプリのディスプレイのタイトル

コマンド実行後、hello ディレクトリができている。

% ls -r hello/*
hello/config.xml

hello/www:
js      index.html  img     css

hello/plugins:

hello/platforms:

hello/hooks:
README.md

Add Platforms

コマンドは hello ディレクトリ上にて実行する必要があるので、ディレクトリを移動する。

cd hello

プラットフォーム ios を追加する。

cordova platform add ios

追加できたらしい

% cordova platform add ios
Adding ios project...
iOS project created with cordova-ios@3.9.1
Discovered plugin "cordova-plugin-whitelist" in config.xml. Installing to the project
Fetching plugin "cordova-plugin-whitelist@1" via npm
Installing "cordova-plugin-whitelist" for ios

追加できたことを確認してみる。

% cordova platforms ls
Installed platforms: ios 3.9.1
Available platforms: amazon-fireos, android, blackberry10, browser, firefoxos, webos

できた。

同時に、platforms ディレクトリが作成されていた。

% ls www
css     img     index.html  js
% ls platforms/ios/www
cordova-js-src      css         js
cordova.js      img         plugins
cordova_plugins.js  index.html

www ディレクトリ上のファイルをソースとして、platforms/ios/www 上に対して、プラットフォーム向けのファイルが再作成されるという仕組みである。

当然、www ディレクトリ上のファイルだけを修正すべきである。platforms 上のファイルは編集すべきではない。

バージョン管理システムにおいても、www ディレクトリ上のファイルと merges ディレクトリ上のファイルだけを管理すべきである。

platforms 上のファイルは編集もすべきではない。と書かれている。
はい。絶対に編集しません！触らぬ神に祟りなしである。

Build the App

cordova build

あっさりビルドできた。

% cordova build
Running command: ....
...

** BUILD SUCCEEDED **

** BUILD SUCCEEDED **

これで、platforms ディレクトリ上に、プラットフォーム向けのコードが生成された。
ios だけを対象としてビルドしたい場合、以下のコマンドを叩く。

cordova build ios

Test the App on an Emulator or Device

SDK と一緒に配布されるエミュレータを用いてプラットフォーム向けのコードを実行する。
これを以下のコマンドを用いて実行する。

cordova emulate ios

ここでエラー。

% cordova emulate ios
Running command: /Users/***/git/git/hello/platforms/ios/cordova/run --emulator
ios-sim was not found. Please download, build and install version 3.0.0 or greater from https://github.com/phonegap/ios-sim into your path, or do 'npm install -g ios-sim'
Error: /Users/***/git/git/hello/platforms/ios/cordova/run: Command failed with exit code 2
    at ChildProcess.whenDone (/usr/local/lib/node_modules/cordova/node_modules/cordova-lib/src/cordova/superspawn.js:139:23)
    at ChildProcess.emit (events.js:110:17)
    at maybeClose (child_process.js:1015:16)
    at Process.ChildProcess._handle.onexit (child_process.js:1087:5)

ios にてコマンドラインからエミュレータを実行する場合、ios-sim という npm のパッケージが必要となるらしい。これをインストールする。

sudo npm install ios-sim -g

インストールできた。
再度、エミュレータを起動する。

% cordova emulate ios                    
Running command: ...
...
** BUILD SUCCEEDED **

No target specified for emulator. Deploying to iPhone-6 simulator
com.example.hello: 1811
** RUN SUCCEEDED **

できた。すんなり。感動した。
すんなりできる。
開発者にとってこれ以上の感動はない。

感想

所感としては、何だかんだ言って、プラットフォームの SDK に対する勉強はする必要がありそう。
故に、プラットフォーム向けアプリ開発の知識は不可欠であると思われる。
Cordova を使えばプラットフォーム向けのアプリを作れる。
が、その主目的は開発工数を減らすためであると思う。
Web の知識だけでアプリを作れるというのは幻想である気がする。
（Chef とかもそうだよね。開発者は横着して良いけど、勉強するという姿勢は忘れてはダメ。）

次は、アプリをデバイスへデプロイするまでをやってみよう。