PhoneGapの概要と歴史

PhoneGapとは、ハイブリッドアプリのフレームワークです。つまり、HTML5コンテンツをラッピングして、いろんなデバイスやOSでネイティブアプリとしてインストール可能なアプリケーションを作成できる技術です。元々は2009年にiPhoneDevCamp（ハッカソンのようなイベント）で生まれ、Nitobiという会社によって開発されました。2011年にアドビがNitobiを買収し、同時にPhoneGapのソースコードをApache Foundationに寄付して、Apache Cordovaというオープンソースプロジェクトが作られました。

現在では、Cordovaという下層のフレームワークの上に、アドビのサービスに連携するPhoneGapのレイヤーが乗っています。しかし使い方はほぼ同じであるため、PhoneGapとCordovaは大体同じものという認識で問題ありません。

ゼロ（環境設定）からHello Worldまで

PhoneGap/Cordovaは、Node.jsで使うコマンドラインアプリケーションです。ゼロから始める手段は下記の通り：

1. Node.jsをインストールして、ターミナルで使えることを確認します：

> node -v
v0.10.13
>

2. Node.jsのパッケージマネージャー npm（上記ステップでインストールされます）を利用して

cordova

をインストールします：

> npm install -g cordova
npm http GET https://registry.npmjs.org/cordova
npm http 200 https://registry.npmjs.org/cordova
...
>

※ Macでは、多くの場合には

sudo

> sudo npm install -g cordova
Password: 
npm http GET https://registry.npmjs.org/cordova
npm http 200 https://registry.npmjs.org/cordova
...
>

3.

cordova create

のコマンドを使って、新規プロジェクトを作ります。コマンドのパラメータとして、フォルダ名、アプリID、アプリ名を渡します。

> cordova create testapp com.example.test "Test App"
Creating a new cordova project with name "Test App" 
and id "com.example.test" at location "~/testapp"
>

4. 新規プロジェクトのフォルダに移動します：

> cd testapp/
>

5.

cordova platform add

のコマンドで、作りたいアプリのプラットフォームをプロジェクトに追加します。この例ではAndroidを使います：

> cordova platform add android
Creating android project...
...

6. デバイスをマシンに接続して、アプリのビルドと動作確認します。

> cordova run android
Generating config.xml from defaults for platform "android"
Preparing android project
...

cordova run ...

cordova build

cordova emulate

cordova help

注意：ビルドを行うためには、各プラットフォームの仕組みが必要となります。例えばAndroidの場合はAndroid SDK、iOSの場合はXCodeのインストールが完了している必要があります。SDK不要のビルド方法については後ほど説明します。

PhoneGapアプリの構成について

cordova create

1. ルートにある

   config.xml

   は、アプリのメタデータ（アプリ名など）を定義します

2. /www

   フォルダはHTMLアプリのソースです。

   cordova create

   によって参考用のサンプルコードが作成されますが、編集・削除・上書きを自由にします。このフォルダの

   index.html

   がアプリの初期画面になります。

上記2点以外のコンテンツは、編集する必要は通常ありません。

ところで、新規プロジェクトに生成される参考用の

index.html

cordova.js

script

cordova.js

cordova.js

プラグインについて

標準のHTMLでは、デバイスの機能（カメラロール、ノーティフィケーションなど）にアクセスできない場合があります。その際は、PhoneGapプラグインを使います。基本的な手順は：

1. Pluginレポジトリでプラグインを探します。この例ではノーティフィケーションのプラグインを使います。
2. ターミナルで

   cordova plugin add [ID]

   で追加します：

   > cordova plugin add org.apache.cordova.dialogs
   Fetching plugin "org.apache.cordova.dialogs" via plugin registry
   ...

3. アプリソースのJSから、プラグインのAPIを呼びます：

   navigator.notification.prompt("hoge");

JavaScriptで定義されたプラグインのAPIが呼ばれると、各OSの対応するネイティブコードが各デバイスの機能を呼び出す仕組みになっています。その際、デバイス機能がAndroid/iOSなどで仕組みが違っていても、プラグインのインターフェイスは共通なのでPhoneGapアプリのソースを別バージョンに分ける必要がありません。しかしデバイス側の機能がプラットフォームによって実装が変わる場合もあります。その場合は、アプリの動作を各OSの挙動に合わせる必要があったりしますので、各プラグインのドキュメンテーションにある「Quirks（方言）」セクションに目を通しましょう。

クラウドで行うアプリ作成サービス「PhoneGap Build」

 アプリのビルドを行う際に、各プラットフォームのSDKが必要と説明しましたが、それが難しい場合もあります。例えばiOSのSDKはMacでしか動きませんので、Windowsでは利用不可能です。

この場合、アドビのクラウドビルドサービスPhoneGap Buildの利用をオススメします。Android、iOS、そしてWindows 8アプリをSDKの準備なしでビルドできます。PhoneGap Buildの使い方で前述の解説と異なるところは主に次の２点です。

1. cordova

   ではなく

   phonegap

   コマンドを使用
2. クラウド側で実行するコマンドに

   remote

   というキーワードを追加

具体的には次のような流れで利用できます：

> sudo npm install -g phonegap
...
> phonegap create test com.example.test2 Test
...
> cd test
> phonegap remote build android

初回はPhoneGap Buildのユーザ名、パスワードを要求されます。既存のAdobe IDでログインするか、アドビのWebサイトでAdobe IDを新規作成（無料）してください。その後、アプリがクラウド側でビルドされます。アプリの確認、インストールなどをPhoneGap Buildサイトでできます。

まとめ

PhoneGap/Cordovaは非常に軽量なフレームワークです。HTML5コンテンツのアプリ化に特化しており、他フレームワークとの競合も少なく、比較的導入し易いフレームワークだと言えます。HTMLコンテンツからモバイルアプリまでの最短経路だと思いますので、ぜひお試しください！

Node.js＋Photoshop Generator

PhotoshopがNode.jsのサーバを組み込むようになりました。最新版のPhotoshopではNode.jsを使ったアプリをプラグインとして起動できるので、Node.jsアプリからPhotoshopの内蔵的なDOMを直接いじれます。PhotoshopでできることとNode.jsでできることが一緒になった、というかんじです。開発と設計の詳細については私のブログ「Node.js＋Photoshop: Generatorの設計と使い方」を参照してください。

HTML5 カスタムパネル

CCバージョンのアップデートから６つのアドビツールが共通の拡張パネルに対応しますが、そのフォーマットは“純”HTML5です。設計については、各ツールが拡張パネルのためにCEFを実装するので、コンテンツの表示はモダンなブラウザと変わりません。

そして任意のHTML5・CSS・JavaScriptコンテンツを決まったフォーマット（コンテンツ＋マニフェストをZipする）にパッケージすると、そのコンテンツをツール内のパネルとして使えます。パネルのJavaScriptがツールの内面DOMにもアクセスできるので、基本的にツールを自由にカスタマイズできます。パッケージの仕方とか設計の詳細についてはこちら。

Bracketsとその拡張

最後に、ツールの拡張だけではなく、開発ツールをHTML5で作ることも増えていますが、その代表的な事例はBracketsです。BracketsとはHTML5・CSS・JavaScriptの開発専用にデザインされたコードエディターですが、ツール自体がHTML5でできているので、もちろん拡張する際もHTML5を用います。と言っても、ツールがオープンソースなので、自分用にフォークすることも当然自由です。

Bracketsのエディターとしての特徴については、こちらも私のブログ「Brackets・Edge Codeの使い方」で詳しく書いています。拡張の開発と配布についてはAdobe Developer Connection [ADC]の「初めてのBrackets拡張機能の作成」でも紹介されています。

まとめ

日常的に使うツールの進化は、アップデートを待つのではなく、自分の仕事に合わせるように拡張することがこれからますます増えていきます。しかし、HTML5を使って拡張することは、HTML5開発者には嬉しい話だと思います。

自分でやる作業の自動化などもできるし、会社のワークフローを改善する仕事の可能性も出てきます。少なくともアドビのツールの拡張はたいていHTML5ベースになるので、Web開発者は一度目を通すべきでしょう。