久しぶりにCordova(PhoneGap)を触っているけれども、あらゆる動作が簡単なコマンドラインで実行できるおかげで本当に使いやすくなった

Pocket

Cordova(PhoneGap)を試していた時は、今よりも大分使いにくいものだったという印象がある。

新しいプロジェクトを作るときも、~/dev_tools/phonegap-2.2.0/lib/ios/bin/create ...みたいな感じで各デバイスのライブラリパスから同じ名前のコマンドを実行させる形だったので、「え、これ、マルチプラットフォームとかどうやるのよ」と、ユーザーを相当悩ませる感じの仕組みだった。

そのためか、PhoneGap BuildMonacaというビルドツールが大変便利で、むしろこういうビルドツールがないとやってられない状況にあったと思う。

(知らない人向けに)Cordova(PhoneGap)とは

HTML+JavaScriptでiOSやAndroidといったスマートフォン向けのアプリを開発するためのライブラリ。歴史は長く、2012年代にかなりいろんなサイトで特集されて盛り上がっていた記憶がある。

Cordova(PhoneGap)という呼び方をしている理由は、このライブラリの経緯のややこしさに原因がある。PhoneGapを開発していたNitobi社を2011年にAdobe社が買収し、そのソースコードをAdobe社がApache財団に寄贈した。Apache財団が管理するPhoneGapはCordovaと名称が改められるのだが、Adobe社での呼び方はPhoneGapのままであり、それゆえ、Apache財団がこのライブラリを配布する場合はCordovaと呼び、Adobe社が配布する場合はPhoneGapと呼ばれているのである。

CLIが整備されて使いやすくなった

そんなCordova(PhoneGap)を最近また触ってみたところ、node.jsを用いたCLIが整備されており、かなり開発しやすい感じになっていた。そもそも、「プラットフォーム毎のプロジェクトをcreate → 開発」より、「汎用的なプロジェクトを作成 → 対応デバイス向けのライブラリをインジェクション」の方がマルチプラットフォーム向けの開発がしやすいのは当然で、しかしこのかなり大掛かりな変更を行えたのは凄いなと思える。

開発の流れ

  1. cordova create myappでプロジェクトを作成。
  2. (とりあえずiOSアプリを作るとして)cordova platform add iosでiOS向けライブラリをインジェクション。

これでiOS向けアプリの下準備が終わり。実際の開発では、

  • cordova serveでWebサーバを起動してプレビューしながら画面開発。
  • cordova emulate iosでiOSシミュレータを起動して動作確認。

といった形で開発を進めることになる。また、標準のライブラリではカバーしきれないものについてはcordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.gitといった形でプラグインを適時追加していく。かなり使いやすい仕組みになった。

wwwディレクトリを直接触りながら開発する場合はcordova serveを使えば良いのだが、通常の開発ではあまり機会がないだろう。基本的にはyeomanmiddlemanを利用して、SassやCoffeeScriptで書いたコードをブラウザで確認しつつ、wwwディレクトリにビルドしてiOSシミュレータで確認するワークローをとる。

JSフレームワークとしてAngularJSを利用する場合はGruntやBowerが使えると便利なので、自然とyeomanを選択することになるだろう。

参考:Web App with dream team; AngularJS, Cordova, Yeoman & Topcoat

環境の準備

node.jsの環境が必要なので、ない場合は整えておこう。nodebrewを利用してnode.jsのバージョン管理をできるようにしておくと便利だ。

参考:Node.js超初心者勉強会 in 大阪 まとめ(node.jsの導入の仕方が簡潔にまとめられている)

Cordovaのセットアップは本家ドキュメントに詳しい。

参考:Apache Cordova Documentation Command Line Interface

さいごに

いつもと口調が違うのは、13年ぶりの大雪が降って気分が変わったからですかね :)

そんなわけで、最近またCordova(PhoneGap)を触っているので、勉強会があったら是非お誘い下さいー。お便り待ってます!