Andy Hall

ハイブリッドアプリ開発といえばこれ!PhoneGap/Cordova事始め

phonegap-banner

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をインストールして、ターミナルで使えることを確認します:

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

※ Macでは、多くの場合には sudoが必要です。エラーが出た場合は、次のコマンドを使ってください:

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

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

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

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

cordova run ...を実行するとアプリのビルドの後、接続されたデバイスにアプリがインストールされ、起動されます。デバイスが接続されていない場合、Cordovaがエミュレータを起動しようとします。また、 cordova build cordova emulateなどのコマンドで、個別に各ステップを行えます。利用可能コマンドを確認するには、 cordova helpを実行してください。

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

PhoneGapアプリの構成について

cordova createコマンドによって作られるフォルダの中身を確認しましょう: pg-folder

  1. ルートにある config.xml は、アプリのメタデータ(アプリ名など)を定義します
  2. /wwwフォルダはHTMLアプリのソースです。 cordova create によって参考用のサンプルコードが作成されますが、編集・削除・上書きを自由にします。このフォルダの index.html がアプリの初期画面になります。

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

ところで、新規プロジェクトに生成される参考用の index.htmlを確認してみると、 cordova.jsを指している scriptタグがあります。 cordova.jsは、フレームワークが動的に生成しますので、ソースにそのファイルを置く必要はありません。しかし、既存のHTMLをPhoneGapアプリに使う時は、 cordova.jsを指すスクリプトタグを追加しましょう。

プラグインについて

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

  1. Pluginレポジトリでプラグインを探します。この例ではノーティフィケーションのプラグインを使います。
  2. ターミナルで cordova plugin add [ID]で追加します:
  3. アプリソースのJSから、プラグインのAPIを呼びます:

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

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

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

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

  1. cordovaではなく phonegapコマンドを使用
  2. クラウド側で実行するコマンドに remoteというキーワードを追加

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

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

まとめ

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

Powered byNTT Communications

tag list

アクセシビリティ イベント エンタープライズ デザイン ハイブリッド パフォーマンス ブラウザ プログラミング マークアップ モバイル 海外 高速化 Angular2 AngularJS Canvas Chrome Cordova CSS de:code ECMAScript Edge Firefox Google Google I/O 2014 HTML5 Conference 2013 html5j IoT JavaScript Microsoft Node.js PhoneGap Polymer React Safari SkyWay TypeScript UI UX W3C W3C仕様 Webアプリ Web Components WebGL WebRTC WebSocket