この記事では、Dreamweaver CS6とPhoneGap Buildサービスを利用して、HTML5/CSS/JavaScriptの実装によるモバイルアプリケーションを開発する方法をチュートリアル方式で紹介します。

なおチュートリアルの後半で紹介する、Android端末向けのエミュレート機能を利用する際は、事前にAndroid SDKのインストールが必要です。

またiPhone実機で動作を確認する場合はiOSデベロッパプログラムへの登録(有料)、証明書の取得、検証機の登録、プロビジョニングプロファイルの準備が必要となります。

PhoneGap Buildとは

PhoneGap Buildはアドビが提供しているWebサービスで、HTML/CSS/JavaScriptによって開発したソースプログラムを元に、PhoneGapを利用して複数のモバイル・プラットフォーム(iOS, Android, WindowsPhone, BlackBerry etc.)向けの実行モジュールを生成するWebサービスです。

DreamweaverではCS5.5にてPhoneGapを利用する機能が提供されていましたが、2012年5月にリリースされたDreamwever CS6からはPhoneGap Buildサービスとの連携機能もサポートされるようになりました。

なお、PhoneGap Buildサービスを利用するにあたり、事前に下記のPhoneGap Buildの公式サイトでアカウントを作成する必要があります。

また、PhoneGap Buildサービスを利用した開発の場合、開発環境は常時インターネットに接続されている必要があります。

Dreamweaver CS6からのPhoneGap Buildサービスの利用方法

まずはAndroid端末を使って、最短かつ最小限の手順で、ブランクプロジェクトの生成からモバイルアプリが動作するまでの流れを体験してみましょう。

Dreamweaver CS6で新規サイトを定義

最初にDreamweaver CS6を起動し、ワークスペースを「モバイルアプリケーション」に切り替えます。すると、画面左上にPhoneGap Buildサービス/PhoneGap Buildの設定パネルが表示されます。

メニューより[サイト]→[新規サイト]を選択してサイト設定ダイアログを表示します。

PhoneGap Buildサービスに接続/ネイティブアプリのビルド

次に画面上の「PhoneGap Buildサービス」タブで「電子メール(PhoneGap Buildのアカウント)」と「パスワード」を入力して、PhoneGap Buildサービスへログインします。

まだこの段階ではローカルサイトフォルダ上にファイルが存在しないので、PhoneGap Buildサービス上で新規プロジェクトを作成するかどうかの確認を求められます。

ここで「新規プロジェクトとして作成」を選択した状態で「続行」をクリックすると、ローカルサイトフォルダにPhoneGap Buildサービスから3つのファイル(config.xml、index.html、ProjectSetting)がダウンロードされます。

続けて、PhoneGap Buildサービスタブに表示された各プラットフォーム向けのモジュールが順次ビルドされていきます。

ビルドが完了したら各プラットフォームのところに「Build Complete」と表示されます。

Android端末へのインストールと実行

ビルドができたら、Android端末にインストールしてみましょう。「Android」のところに表示されている「QRコードの表示」ボタンをクリックしてダウンロード用のQRコードを表示し、それをAndroid端末のQRコードリーダーアプリで読み取ります。正しく読み取れたらPhoneGap Buildサービスからプログラムがダウンロードされるので、案内にしたがってインストールしてください。

インストールが完了するとAndroid端末上に「PhoneGapBuild」という名前のアイコンが現れるので、これをタップするとインストールしたアプリの画面が表示されます。

以上の手順で、ブランクプロジェクトの生成からモバイルアプリの実行までを簡単に体験できます。

Androidエミュレータでの実行

Androidを搭載したスマートフォンの実機を持っていない場合でも、Android SDKをインストールすることでDreamweaver CS6からAndroidエミュレータを起動して動作を検証することができます。

※本記事ではインストールの手順は割愛します。

Androidのエミュレート機能をDreamweaver CS6から呼び出すには、PhoneGap Buildの設定パネルにおいてAndroid SDKをインストールしたパスを指定してください。

設定したらPhoneGap Buildタブに戻り、Androidアプリケーションのエミュレートボタン(図10)をクリックしてAndroidのエミュレート機能を呼び出します。

次の画面で「起動」ボタンをクリックするとエミュレータが起動します。

エミュレータ上に表示されたアイコンのうち、「PhoneGapBuild」というアプリを起動するとブランクプロジェクトから生成されたアプリが起動します。

iPhone端末での実行

続いて、iPhone端末へのインストールと実行の手順を説明します。すでにiPhoneやiPad向けアプリを開発する環境が整っているのであれば、証明書とプロビジョニングプロファイルをPhoneGap Buildサービスに登録すればiOS用のモジュールを実機にインストールして動作を検証できます。

証明書とプロビジョニングプロファイルの登録

まず、証明書(.p12ファイル)とプロビジョニングプロファイルをPhoneGap Buildサービスへ登録しましょう。WebブラウザでPhoneGap Buildサイトを開いてログインしてください。

ログインに成功すると、アプリケーション一覧の表示画面があらわれます。ブランクプロジェクトのアプリケーション名は「PhoneGap Build Application」になっているはずなので、そのアプリケーション名をクリックします。

次に、選択したアプリケーションの設定画面へのリンクや各プラットフォームの毎のQRコード、ダウンロードボタンが配置された画面を表示します。そこでアプリケーション横の「Edit」ボタンをクリックして設定画面を表示してください。

次の画面で「Signing」ボタンをクリックします。

Android、iOS、BlackBerryなどのプラットフォームごとの設定キー一覧画面が表示されるので、iOSのプルダウンをクリックして「add a key...」を選択します。

証明書とプロビジョニングの登録ウィンドウが表示されるのでtitle(プルダウンメニューに表示される任意の文字)、証明書ファイル(.p12ファイル)、プロビジョニングプロファイル、証明書に対するパスワードをそれぞれ入力し、最後に「create」ボタンをクリックします。

登録が完了すると自動的にPhoneGap Buildにログインしているアカウントの設定画面にジャンプしてしまうので、画面上部のメニューから「Apps」をクリックし、一覧から「PhoneGap Build Application」を選択して編集画面を表示させ、Android、iOS、BlackBerryごとの設定キー選択画面まで戻って、登録した設定を選択してください。その後、アプリのリンク(Editing 'PhoneGap Build Application')をクリックします。

続いて、再びアプリケーションごとの操作パネル画面を表示します。しばらく待つと今度はiOSのエリアにもQRコードが表示されるようになります。

iPhone端末へのインストールと実行

表示されたQRコードをiPhoneで読み取れば、PhoneGap Buildサービスからプログラムをダウンロードできます(QRコードの読み取りには、別途QRコードリーダアプリのインストールが必要です)。ダウンロードしたら、そのまま案内にしたがってインストールを実行ししてください。

インストールが完了すると、Android端末の時と同様に実機上に図20のように「PhoneGapBuild」という名前のアイコンができます。これをタップすれば、アプリが起動して画面が表示されます。

PhoneGap標準APIの利用

ここまではPhoneGap Buildサービスが用意したブランクプロジェクトに手を加えることなくAndroid実機、エミュレータ、そしてiPhone実機における動作確認までの流れを説明してきました。最後に、PhoneGapの標準APIを呼び出すコードを追加したサンプルを紹介したいと思います。

ここでは、PhoneGapが提供しているスマートフォンの機能を呼び出すAPIのうち、Accelerometer(加速度センサー)とCamera機能をつかって、スマートフォンを振るとカメラ機能を呼び出すサンプルプログラムを作ってみます。

※なお、APIはすべてのプラットフォームをサポートしている訳ではありません。各プラットフォームのサポート状況はPhoneGapのドキュメントでサポート状況を確認ください。

index.htmlの内容

Dreamweaver CS6の画面より、ファイルパネルからindex.htmlファイルをダブルクリックして開きます。

このファイルはとてもシンプルで、画面を構成するHTMLタグと、画面の動きに関するJavaScriptから構成されています。<script>タグでphonegap.jsが指定されていますが、このファイルは実際にローカルに存在するわけではありません。PhoneGap Buildサービスがモジュールを作成する際に自動で用意されるようです。

JavaScriptは、<body>タグで画面ロード時にコールする"onBodyLoad()"ファンクションを定義し、その中でスマートフォンの機能呼び出しが可能になったときにコールされる"deviceready"イベントを登録しています。そして"deviceready"イベント発生時には"onDeviceReady()"ファンクションがコールされるように実装されています。

index.htmlにコードを追加

ここで、サンプルプログラムに以下の実装を追加していきます。

  1. onDeviceReady()ファンクション - watchForShake()ファンクションをコールします。
  2. watchForShake()ファンクション - JavaScriptでaccelerometer APIを呼び出しています。
  3. onShakeHandler()ファンクション - JavaScriptでcamera APIを呼び出しています。
  4. cameraGetPictureOnSuccess()ファンクション - カメラAPIコールの後処理を行います。
  5. onError()ファンクション - カメラAPIコール時にエラーが発生した場合の処理を行います。

サンプルコード:index.html

<!DOCTYPE html> <html> <head> <title>Hello PhoneGap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> <meta charset="utf-8"> <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> <script type="text/javascript"> var watchID = null; var prevX = 1.0; var shakeCount = 0; function onBodyLoad() { document.addEventListener("deviceready", onDeviceReady, false); } function onDeviceReady() { watchForShake(5); } /** * シェイクゼスチャーを検知してカメラを起動する. * */ function watchForShake(threshold) { watchID = navigator.accelerometer.watchAcceleration( function (Accel) { if (true === Accel.is_updating){ return; } var diffX = Math.abs(Accel.x) - prevX; if (diffX >= threshold) { if(shakeCount>2) { shakeCount = 0; prevX = 0; // カメラAPIコール. onShakeHandler(); } else { shakeCount++; } } prevX = Math.abs(Accel.x); } , onError , {frequency : 250} ); } /** * カメラAPIコール. */ function onShakeHandler() { var optionParam = { quality : 60, destinationType : Camera.DestinationType.FILE_URI, sourceType : Camera.PictureSourceType.CAMERA, }; navigator.camera.getPicture( cameraGetPictureOnSuccess, onError, optionParam ); } /** * カメラAPIコール後処理. */ function cameraGetPictureOnSuccess(url) { camera_pic.src = url; camera_pic.style.display = 'block'; } /** * エラー処理(共通) */ function onError(message) { alert(message); } </script> </head> <body onload="onBodyLoad()"> <h1>Hey, it's PhoneGap!</h1> <img style="display:block;width:60%" id="camera_pic" /> </body> </html>

このindex.htmlを保存し、PhoneGap Buildサービスパネルの「アプリケーションを再ビルド」ボタンをクリックすると、PhoneGap Buildサービスが修正した内容でモジュールを再構築します。

ビルドが完了したら実機にインストールして動きを確認してみましょう。初期画面はブラングプロジェクトの時と変わりありません。

この状態で実機の画面を自分に向けて左右に振ってみましょう。カメラ機能が呼び出されて撮影できるようになります。撮影すると最初の画面に戻り撮影内容をプレビューします。

※本サンプルでは撮影した画像を保存する処理は実装していません。

同様の手順で、ぜひ他のAPIの呼び出しにも挑戦してみてください。

HTMLやCSS、画像を使ってアプリの完成度を上げる

上記のサンプルコードの実行画面では、どう操作したらカメラ機能を呼び出せるのか少々わかりづらいかもしれません。また、アプリのアイコンや起動時のスプラッシュ画面がPhoneGapのデフォルトの内容のままというのも気になります。そこで、HTMLタグやCSS、画像ファイルを追加したサンプルプログラムを用意しました。

本記事の上部にある「サンプルファイル」のリンクをクリックして、サンプルプログラム(phoneGapBuildAppSample.zip)をダウンロードしてください。ダウンロードしたら、任意のディレクトリに解凍します。これをDreamweaver CS6にサイト登録したのち、PhoneGap Buildを使ってビルドしてみてください。

※筆者はMac環境のDreamweaver CS6を使用してます。Windows環境での動作は確認していないのでご了承ください。
※サンプルプログラムはiPhoneをターゲットとして作成しております。

このサンプルプログラムを参考にして自分なりのカスタマイズをしてみてください。アプリのアイコンやスプラッシュ画面で使用する画像は、config.xmlファイル内で指定しています。アイコン、スプラッシュ画面の指定以外にも、config.xmlで設定出来る内容についてはPhoneGap Buildのサイトに掲載されているドキュメントを参照ください。

最後に

今回はDreamweaver CS6とPhoneGap Buildサービスを使ってモバイルアプリを作成し、実機で動かす方法を紹介しました。

PhoneGap Buildサービスを利用すれば、各プラットフォーム向けのモジュールを簡単に作成できます。一方で、たとえば実案件でクライアントの要望に応じる実装を検討していくときなどを考えると、PhoneGapの提供するAPIを利用するだけでは実現が難しいこともあるので注意も必要です。

すでにWebアプリやデスクトップアプリの開発経験がある方々には、今後XcodeやAndroid SDKを利用した本格的なモバイルアプリの開発に進んでいくためのファーストステップとして、本記事を参考にしていただければと思います。

あるいは、いざPhoneGapを触ろうとして、最初の一歩の段階でつまづいてしまう方もいるかもしれません。筆者自身、Dreamweaver CS5.5に関する書籍を参考にしながらDreamweaver CS6とPhoneGap Buildの環境の準備にチャレンジしたのですが、Dreamweaverのバージョンの違いによって、実際にスマートフォン上でプログラムを動かすまでに予想以上に手間取ってしまいました。

新しいスキルを学ぶ際に、開発環境の設定の難しさによってモチベーションを下げてしまうのはとても勿体ないことです。そのような状態に陥らないためにも、このチュートリアルが皆様のお役に立てることを願っています。