Cordova 開発に関する Tips

前回、Apache Cordova というフロントエンド技術だけでモバイルアプリが作れるフレームワークを紹介した。

今回はこの Cordova に関する予備知識集。cordova@6.5.0 時代の話。

config.xml について

config.xml は、npm パッケージにおける package.json 的なモノで、対象の Cordova プロジェクトに関する情報を記載しておくモノになる。例えば以下のような情報が記録できる。

Cordova プラグインについてはまだ解説していないが、$ cordova platform add ios で iOS プラットフォームを追加したのと同じ要領で、Cordova アプリで使用するプラグインを導入できる。

config.xml に書き込む

プラットフォームもプラグインも、コマンドの末尾に --save オプションを付ければ、その情報が config.xml に追記される。remove (rm) した場合は config.xml から削除される。

# プラットフォームのインストール・アンインストール時に config.xml に書き込む
$ cordova platform add ios --save
$ cordova platform rm ios --save

# プラグインのインストール・アンインストール時に config.xml に書き込む
$ cordova plugin add cordova-plugin-console --save
$ cordova plugin rm cordova-plugin-console --save

--save オプションを付けずに追加してしまったプラグイン情報を、後から config.xml に書き込みたいという場合は、以下のコマンドでインストール済みのプラグインを追記できる。

# インストール済みのプラットフォームを追記する
$ cordova platform save

# インストール済みのプラグインを追記する
$ cordova plugin save

config.xml から Cordova プロジェクトを復元する

逆に、config.xml に書かれた情報を基にプラグインを復元したりする場合は、以下のコマンドを叩くと良い。

$ cordova prepare

例えば ./platforms/ フォルダがない状態で、config.xml に <engine name="ios" spec="^4.4.0" /> と記述があれば、$ cordova prepare コマンドを叩いた時に ./platforms/ios/ フォルダを復元してくれる。この辺は npm install だと思えば分かりやすいだろうか。

2017-07-11 追記 : cordova@7.0.0 になり、デフォルトで --save オプションが適用されるようになった。また、config.xml と同時に package.json にもプラットフォームやプラグインの情報が追記されるようになった。もし両者で競合する設定情報が書かれていた場合は package.json に記載の内容が勝つようだ。

config.xml がエントリポイントを決める

config.xml に書かれている <content src="index.html" /> という記述が、アプリを起動した時に最初に開く HTML を指定している。これは ./www/ 直下の index.html ということになる。何か理由があってエントリポイント (最初に開く、起点となるファイル) を変更したい場合は、ココを設定すれば良い。

Cordova プロジェクトをバージョン管理する際は・除外していいフォルダ・いけないフォルダ

Cordova プラグインを入れてビルドを繰り返したりしていると、./platforms/ や ./plugins/ フォルダの中がコロコロ変わる。これらはバージョン管理すべきなのだろうか。

結論からいうと、./platforms/ と ./plugins/ はバージョン管理対象外で良い。これらのフォルダの中身は config.xml に記載があれば cordova prepare で復元できるからだ。

反対に削除してはいけないのは、./www/ フォルダ自身。cordova コマンドは、実行時にカレントディレクトリに www/ フォルダが存在するか否かで Cordova プロジェクトかどうかを判断しているからだ。仮に ./www/ 配下に何のファイルもない場合であっても、./www/ フォルダ自体がないと cordova コマンドが上手く叩けなくなる。その場合は ./www/ フォルダを生成し直してやれば良い。Git 管理する際は .gitkeep でも入れておけばよかろう。

というワケで、.gitignore には以下のモノを入れておくと良いだろう。

# Mac
.DS_Store

# Node
npm-debug.log
/node_modules

# Cordova
/platforms
/plugins

エントリポイントで cordova.js を読み込むこと

$ cordova create コマンドで生成された ./www/index.html のソースを見て見ると、以下のような行がある。

<script type="text/javascript" src="cordova.js"></script>

この cordova.js というファイル、./www/ 配下には存在しない。ではどこにあるかというと、$ cordova build 時に生成され、./www/ 配下の資材が ./platforms/ios/www/ 配下にコピーされた時に、このフォルダに一緒に格納されるのである。

この cordova.js は何をしているのかというと、主に Cordova プラグインが提供する API を叩くためのモノで、プラットフォームごとの差異を吸収しているのがこのファイルになる。

Cordova プラグインを入れていると、./platforms/ios/www/cordova.js と同時に ./platforms/ios/www/cordova_plugins.js というファイルも配置されるが、こちらの cordova_plugins.js は cordova.js 内で読み込まれるので、HTML 側での読み込みは不要。

cordova emulate は cordova build もしている

$ cordova emulate で iOS シミュレータを起動するとき、実は内部的に $ cordova build コマンドが実行されており、iOS アプリがビルドされている。従って $ cordova build && cordova emulate などと叩く必要はない。

ついでに、$ cordova build コマンドは $ cordova prepare && cordova compile と同等である。

なぜだか急にビルドがコケるようになったら

なぜか急に $ cordova build が失敗するようになったら、プラットフォームを一度消して再度追加してみると上手く行くことが多い。大抵はプラグイン周りのインストールに問題が出たり、その辺のゴミが影響していることが多いからだ。コンソール出力されるエラーログだけでは原因特定は困難なので、まずは以下のコマンドを叩いてキレイキレイするといいかも。

# プラットフォームを入れ直す。add の際にプラグイン類も再インストールされる
$ cordova platform rm ios
$ cordova platform add ios

こちらの記事も参考のこと。

Cordova・PhoneGap・Ionic…？

Cordova に関する調べ物をしていると目につくのが「PhoneGap」という単語。これは Cordova の歴史にも関係してきている。元々 Nitobi Software (ニトビ・ソフトウェア) という会社が「PhoneGap」という名前でこのフレームワークを開発していて、アドビがニトビを買収し、現在は「Adobe PhoneGap」という製品として提供されている。そのソースコードを Apache に提供しオープンソース化したのが「Cordova」というワケだ。

つまり「Cordova ≒ PhoneGap」で、プラグインが共用できたり、PhoneGap のソースコード上に Cordova の文字が出てきたりすることもある。逆に Cordova 内で PhoneGap の文字を見ることはほとんどないので、どうも Apache Cordova から逆輸入して Adobe PhoneGap 開発を進めた部分があるっぽい。

Ionic (アイオニック) は、Cordova を拡張するフレームワークで、AngularJS を組み合わせることでより柔軟な開発が可能になるもの。AngularJS には ngCordova というモジュールがあり、Cordova プラグインを AngularJS のモジュールとしてラップしているのでより扱いやすかったりする。

Cordova を内包したフレームワークとしては Monaca というものもあり、OnsenUI という UI フレームワークと組み合わせてハイブリッドアプリを実装しやすくしてくれる。

正直この辺の「フレームワークをラップしたフレームワーク」みたいなのって、中で何してるのか分からなくて段々気持ち悪くなってくるので、よほど敷かれたレールからはみ出す気がない場合でなければ、あんまり使いたくない気がする。

ざっと以上。Cordova 開発は色々と謎が多いので、あれこれ調べながら作ることになるだろう。