モバイル・アプリケーション開発: 第 1 回: Android での PhoneGap と Dojo Mobile

この連載では、単純なモバイル・アプリケーションを作成するところから始め、最終的には Android 機器から Web サービスを利用するところまでを説明します。Eclipse と PhoneGap を使用して、HTML と JavaScript だけを使ってハイブリッド・モバイル・アプリケーションを作成する方法と、Mobile Dojo を使用してこのアプリケーションにネイティブ・アプリケーションの感覚をもたらす方法を学んでください。第 1 回となる今回の記事では、PhoneGap と Mobile Dojo を組み合わせて、標準的な Android アプリケーションのような外観と振る舞いを持つ Android 用ハイブリッド・モバイル・アプリケーションを素早く作成する方法を学びます。

Bryce Curtis, Mobile and Emerging Technologies, IBM

Photo of Dr. Bryce A. CurtisDr. Bryce Curtis は、Software Group Technology Center で新たな技術に取り組む Master Inventor です。50 を超える特許を取得し、多数の著書を出版している彼は、現在 PhoneGap オープンソース・プロジェクトに IBM を代表して関わっています。IBM での勤務年数は 27 年を超え、そのなかでモバイル、コラボレーティブ・ビデオ会議、ウィジェットとマッシュアップ、テレフォニー、音声認識および音声合成、仮想リアリティー、3D オーディオなど、数々の技術に取り組んできました。彼は、ジョージア工科大学で電気工学およびデジタル信号処理の博士号を取得しました。



Gill Woodcock, Software Services Consultant, IBM

Photo of Gill WoodcockGill Woodcock は、英国ハーズリーの Software Group Lab Services に勤務するソフトウェア・サービス・コンサルタントです。彼女はインフラストラクチャー、デスクトップ、モバイル、組み込みソリューションの領域で活躍しています。世界中の IBM の顧客と協力して、ソリューションの設計および実装に豊富な経験を積んできました。現在は、WebSphere Feature Pack for Web 2.0 and Mobile を含め、IBM モバイル技術の採用を可能にする Mobile Leadership チームに参加しています。



Todd Kaplinger, Senior Software Enginer, IBM

Photo of Todd KaplingerTodd Kaplinger は、WebSphere Technology Institute に在籍するシニア・ソフトウェア・エンジニアであり、IBM Master Inventor の肩書きを持っています。Web 2.0 and Mobile Feature Pack V1.1 では、リリース・アーキテクトを勤めています。Dojo、JSP、Servlet、PHP などの Web ベースの技術を専門とする彼は、最近では新たな Web 2.0 技術と企業に与えるその影響に注目しています。他の WebSphere プロジェクトでも主任アーキテクトを務め、JSR 154 Servlet 2.5 仕様では IBM 代表として Servlet Expert Group に参加しました。



2011年 10月 21日

はじめに

人々がモバイル機器を使って、家族や友人と連絡を取っている姿、写真を撮ってソーシャル Web サイトに投稿している姿、レストランの場所を探している姿、あるいは最新のニュース・ヘッドラインをチェックしている姿は、至るところで目にします。モバイル機器とひと口に言っても、その形とスタイルはさまざまです。例えば携帯電話が実行するオペレーティング・システムには、Apple の iOS、Google の Android、Research In Motion の Blackberryなど、さまざまな種類があります。さらには、大きなディスプレイを装備しているもの、物理キーボードを備えているもの、3G、4G、または WiFi ネットワークで動作するものもあります。携帯電話に加速度センサー、位置センサー、さらには支払い機能が備わっている場合もあります。電話の機能すら持たないモバイル機器もあります。それは、携帯電話よりも大きなディスプレイを持ち、データ専用のネットワーク接続をするタブレットです。

以上のような違いはあるにせよ、モバイル機器はいずれもモバイル・アプリケーションを実行するという点では同じです。モバイル・アプリケーションには、以下の 2 つのタイプがあります。

ネイティブ・アプリケーション

このタイプのアプリケーションは、機器にインストールされるバイナリー実行可能プログラムであり、ソフトウェア開発キット (SDK) を使用して作成され、アプリケーション・ストアを介して配布されます。SDK はモバイル・オペレーティング・システムごとに用意されているため、オペレーティング・システムによって SDK も変わってきます。

例えば、iOS 用のアプリケーションを作成するとしたら、iOS SDK と iOS 用の開発ツールをダウンロードしてインストールし、Objective-C プログラミング言語を使ってアプリケーションのコードを作成します。一方、Android アプリケーションを開発するには、Android SDK を使用し、コードを Java 言語で作成します。このように、モバイル・アプリケーションを作成するには、それぞれの SDK の使い方を覚えて、サポートされるプログラミング言語を使用して作成しなければなりません。各プラットフォームに固有の SDK を習得するのは難しいことから、モバイル・アプリケーションの開発にはかなりの手間がかかります。

Web アプリケーション

このタイプのアプリケーションは、モバイル Web ブラウザーにロードされます。ネイティブ・アプリケーションとは異なり、Web アプリケーションのコードは機器のオペレーティング・システムに関係なく、Web 技術 (HTML、JavaScript、および CSS) を使用して作成されます。機器によって異なるプログラミング言語を学ぶ必要はありません。HTML と JavaScript はデスクトップ・ブラウザーにロードされる Web ページを作成するために使用されていることから、Web 開発者にとって使い慣れた技術です。ほとんどのモバイル・ブラウザーはデスクトップ・ブラウザーと同じ Web ページをレンダリングできますが、多くの Web サイトでは、コンテンツを少なくしてロード時間を短くしたモバイル・バージョンを用意しています (これは、モバイル機器の画面サイズは小さく、ネットワーク接続速度も劣るためです)。

Web アプリケーションを「実行」するには、モバイル Web ブラウザーに URL を入力します。これによってロードされる Web ページが、Web アプリケーションへのエントリー・ポイントです。Web アプリケーションはアプリケーション・ストアを介して配布されるのではありません。Web アプリケーションは単なるリンクであるため、他の Web ページや E メールに組み込むことや、さらにはハード・コピーに記載することもできます。

ネイティブ・アプリケーションと Web アプリケーションにはそれぞれに利点と欠点があり、どちらが良いかについては多くの議論が行われてきました。この議論に終止符を打つべく、ネイティブ・アプリケーションの利点と Web アプリケーションの利点を組み合わせようとしているのが、新たなハイブリッド・アプリケーションです。

ハイブリッド・アプリケーションは Web アプリケーションと同じように Web 技術を使用してプログラミングされる一方、ネイティブ・アプリケーションとしてパッケージ化されます。ハイブリッド・アプリケーションを作成する場合、複数の機器のオペレーティング・システムを対象にした 1 つのバージョンを、多くの開発者にとって使い慣れたプログラミング言語を使って作成することができます。しかも、ハイブリッド・アプリケーションは実際にネイティブ・アプリケーションなので、現在 Web アプリケーションでは利用できない機器の機能に JavaScript からアクセスすることができます。さらに、ネイティブ・アプリケーションとまったく同じようにアプリケーション・ストアで配布してインストールすることもできます。

PhoneGap は、ハイブリッド・アプリケーション作成用によく使われているツールキットです。このオープンソースのモバイル・フレームワークには、加速度センサーやカメラといった機器の機能を利用するための JavaScript API が組み込まれています。

この記事では、PhoneGap と Dojo Mobile という 2 つのツールキットを使用してハイブリッド・モバイル Android アプリケーションを開発する方法を紹介します。Android のエミュレーターとツールを使ってアプリケーションをテストする方法、そしてタブレットを含む Android 機器でアプリケーションを実行する方法を学んでください。

前提条件

この記事では、読者が Eclipse 開発環境、HTML、JavaScript、および CSS について、ある程度理解していることを前提とします。また、以下のソフトウェアが必要です。

  • Windows、OSX、または Linux オペレーティング・システム
  • JDK (Java Development Kit) 5 または JDK 6 (JRE では不十分です)
  • Eclipse 開発環境 (例えば、Eclipse Helios V3.6 以降) または IBM Rational Application Developer V8
  • Android SDK およびプラットフォーム (r12 以降)
  • Eclipse 用 ADT (Android Development Tool) プラグイン
  • PhoneGap SDK (V1.0.0 以降)
  • Dojo Toolkit (V1.6 以降)

これらのソフトウェアをダウンロードするには、「参考文献」でそれぞれのリンクを参照してください。


開発環境を構築する

開発環境を構築するには、以下のステップを行う必要があります。

  1. JDK と、Eclipse または Rational Application Developer をインストールする
  2. Android SDK をダウンロードする
  3. Eclipse 用 ADT プラグインをダウンロードしてインストールする
  4. Android 用に Eclipse を構成する
  5. 必要な Android プラットフォームをインストールする
  6. 新規 AVD (Android Virtual Device) を作成する
  7. PhoneGap SDK をダウンロードする
  8. Dojo Toolkit をダウンロードする

JDK と、Eclipse または Rational Application Developer をインストールする

最初のタスクとして、JDK 5 以降がインストールされていることを確認してください。インストールされていない場合は、Java SE JDK をダウンロードします (「参考文献」を参照)。

この記事の内容を実践するには、Eclipse または IBM RAD (Rational Application Developer) のいずれかを使用することができます。Windows または Linux を使用している場合は、RAD を使用することができます。OSX を使用している開発者は Eclipse を使用することができます。

RAD は Eclipse の IBM バージョンと、Java EE をサポートするために追加された IBM ツール (IBM Web 2.0 Feature Pack を含む) で構成されています。RAD を使用する場合は、バージョン 8 以降が必要です。RAD には IBM の JDK が組み込まれており、デフォルトではこれが使用されますが、この JDK には Android アプリケーションを作成および署名するために必要な Java パッケージが含まれていません。デフォルトの JDK の代わりに Java SE JDK を使用するには、C:/Program Files/IBM/SDP/eclipse.ini (RAD をインストールしたディレクトリーにある eclipse.ini) をリスト 1 に記載する情報で置き換える必要があります。

リスト 1. Windows での RAD に使用する eclipse.ini の内容
-startup
plugins/org.eclipse.equinox.launcher_1.1.1.R36x_v20101122_1400.jar
--launcher.library
plugins/org.eclipse.equinox.launcher.win32.win32.x86_1.1.2.R36x_v20101222
--launcher.defaultAction
openFile
--launcher.XXMaxPermSize
256M
-showsplash
org.eclipse.platform
--launcher.XXMaxPermSize
256m
--launcher.defaultAction
openFile
-install
C:/Program Files/IBM/SDP
-vmargs
-Dosgi.requiredJavaVersion=1.5
-Xms40m
-Xmx512m

Eclipse を使用する場合には、バージョン 3.6 以降が必要です。この連載の後のほうでは Web サービスを作成するので、Eclipse IDE for Java EE Developers をダウンロードしてください (「参考文献」を参照)。ただし、Android アプリケーションだけを作成するとしたら、Eclipse IDE for Java Developers だけで十分間に合います。

Eclipse と RAD は非常に似通っています。この記事で Eclipse について言及する場合、その内容は Eclipse と RAD のどちらにも当てはまります。一方、スクリーン・ショットの図は、Windows で実行中の RAD の画面をキャプチャーしたものです。

Android SDK をダウンロードする

Android アプリケーションを作成するには、Android SDK (「参考文献」を参照) を使用する必要があります。Android SDK は、Android アプリケーションをコンパイル、ビルド、エミュレート、デバッグするためのコマンドライン・プログラムを集めたものです。

Windows にインストールする場合には、zip パッケージをダウンロードして、C:\ (C ドライブのルート・ディレクトリー) に解凍するのが最も簡単な方法です。r12 インストーラーにはいくつかの問題があり、Java を検出することはできません。また、名前にスペースが含まれるディレクトリーへのインストールにも対応できません。

ADT プラグインをダウンロードしてインストールする

Android では、アプリケーション開発を大幅に簡易化する Eclipse プラグインを提供しています。Eclipse との統合によって迅速な開発環境を実現する、この ADT (Android Development Toolkit) プラグイン (「参考文献」を参照) をインストールするには、以下の手順に従ってください。

  1. Eclipse のメニューから、「Help (ヘルプ)」 > 「Install New Software… (新規ソフトウェアのインストール…)」 > 「Add…(追加…)」の順に選択します。
  2. ソフトウェアの名前と URL ロケーションを指定します (図 1 を参照)。名前には「Android ADT Eclipse Plugin」、ロケーションには「https://dl-ssl.google.com/android/eclipse/」と入力します。
    図 1. Android ADT プラグインをインストールする
    Android ADT プラグインをインストールする
  3. Developer Tools (開発ツール)」を選択し、この項目配下のすべての項目のチェック・ボックスが図 1 のように選択されていることを確認した後 「Next (次へ)」をクリックします。
  4. 図 2 の画面では「Next (次へ)」をクリックし、その次の画面で使用条件の条項に同意して「Finish (完了)」をクリックすることで、すべての項目をインストールします。
    図 2. インストールの詳細
    インストールの詳細

インストールが完了したら、Eclipse を再起動します。

Android 用に Eclipse を構成する

Android 用に Eclipse を構成するには、まず、以下の方法で「Preferences (設定)」ダイアログを表示します。

  • Windows の場合には、「Window (ウィンドウ)」 > 「Preferences (設定)」 > 「Android」の順に選択します。
  • OSX の場合には、「Eclipse」 > 「Preferences (設定)」 > 「Android」の順に選択します。

SDK の場所を指定するために、「Browse… (参照…)」をクリックして、Android SDK が配置されているディレクトリーを選択します (図 3 を参照)。

図 3. Eclipse で SDK の配置場所を指定する
Eclipse で SDK の配置場所を指定する

Apply (適用)」をクリックした後、「OK」をクリックします。

デバッグを支援するための Android 「LogCat」ビューを、以下のようにして Eclipse IDE に追加します。

  • Window (ウィンドウ)」 > 「Show View (ビューの表示)」 > 「Other… (その他…)」の順に選択します。
  • Android」 > 「LogCat」の順に選択します。
図 4. 「LogCat」ビュー
「LogCat」ビュー

Android プラットフォームをインストールする

Android の特定のバージョン用に Android アプリケーションをコンパイルするためには、そのバージョンに対応する Android プラットフォームをダウンロードしてインストールしなければなりません。このプラットフォームには、ライブラリー・ファイルとエミュレーターが組み込まれています。

Android プラットフォームをインストールするには、Eclipse で Android SDK and AVD Manager (Android SDK および AVD マネージャー) を開きます。この画面を使用して、アプリケーションで使用する Android SDK バージョンおよびエミュレーターを管理します。

Window (ウィンドウ)」 > 「Android SDK and AVD Manager (Android SDK および AVD マネージャー)」の順に選択してください (図 5 を参照)。

図 5. Android を構成するためのメニュー項目
Android を構成するためのメニュー項目

アプリケーションを実行する際のベースとする Android のバージョンに必要な SDK プラットフォームをインストールします。

このサンプル・アプリケーションでは、GPS 測位サービスを使用するので、Google API をベースとしたプラットフォームを選択してインストールしてください。この例では、「Google APIs by Google Inc., Android API 8, revision 2」を選択します (図 6 を参照)。GPS を使用しないのであれば、「Android Repository (Android リポジトリー)」カテゴリーにリストアップされているプラットフォームをインストールするので構いません。

Windows インストール環境の場合には、Android フォンの接続をサポートするための「Google USB Driver package (Google USB ドライバー・パッケージ)」を選択してください。

Install Selected (選択項目をインストール)」を選択します。

図 6. Android SDK and AVD Manager (Android SDK および AVD マネージャー)
Android SDK and AVD Manager (Android SDK および AVD マネージャー)

各パッケージに関して、「Package Description & License (パッケージ記述およびライセンス)」の内容を確認し、受諾してから「Install (インストール)」をクリックします (図 7 を参照)。

図 7. インストールする Android パッケージ
インストールする Android パッケージ

Android SDK and AVD Manager (Android SDK および AVD マネージャー) によって、選択したパッケージがダウンロードされ、インストールされます。

仮想 Android 機器を作成する

アプリケーションで使用するエミュレーター・インスタンスを作成、管理する際にも、Android SDK and AVD Manager (Android SDK および AVD マネージャー) を使用します。

新しい AVD を作成するには、「Virtual devices (仮想機器)」ページで「New… (新規…)」を選択します。図 8 に示すように、名前、ターゲット、SD カードのサイズを指定し、スキンとしては「HVGA」を選択します。

図 8. 新規 AVD を作成する
「Create new AVD (新規 AVD の作成)」ウィンドウのスクリーン・ショット。この画面では、「Name (名前)」として「AVD1」、「Target (ターゲット)」として「Google APIs (Google, Inc.) - API Level 8」、「SD Card (SD カード)」の「Size (サイズ)」には「20 MiB」、「Skin (スキン)」の「Built-in (ビルトイン)」には「HVGA」が、それぞれ指定されています。

Create AVD (AVD を作成)」をクリックします。

PhoneGap SDK をダウンロードする

PhoneGap は、Android、iOS、Blackberry、Palm、Symbian、Windows Phone を含め、さまざまなプラットフォームをサポートしているオープンソースのハイブリッド・モバイル・アプリケーション・フレームワークです。PhoneGap を使用すれば、標準的な Web 技術 (HTML、JavaScript、CSS) を使用してクロスプラットフォームのモバイル・アプリケーションを簡単に作成できるだけでなく、加速度センサーやカメラといった機器の機能に JavaScript からアクセスすることもできます。サポートされる機能については、「参考文献」に記載されているリンクを参照してください。リンク先のページに、PhoneGap に関する最新情報が提供されています。

PhoneGap には、機器の機能の多くにアクセスするための一連の JavaScript API が用意されています。一般的な Web アプリケーションでは、モバイル Web ブラウザーからこれらの機能にアクセスすることはできません。機器の機能へのアクセスを可能にしているのは、Web アプリケーションをラップするネイティブ・ラッパーです。PhoneGap は Web アプリケーションのコードと機器のブラウザー・レンダラーを組み合わせて、ネイティブ・アプリケーションを生成します。このアプリケーションは、アプリケーション・ストアにデプロイすることも、機器にインストールすることもできます。

PhoneGap API の一部として組み込まれている機能を使用すれば、機器の加速度センサー、音声の録音機能、カメラによる動画や写真の撮影機能、コンパス、ジオロケーション機能、ネットワーク機能、通知機能、連絡先情報、ファイル、そしてストレージにアクセスすることができます。詳しい情報とサンプルについては、PhoneGap API リファレンス (「参考文献」を参照) を調べてください。

PhoneGap をダウンロードしておいてください (「参考文献」を参照)。後で (「新規 Android プロジェクトを作成する」のセクション)、PhoneGap のコードを Android プロジェクトにコピーします。

Dojo をダウンロードする

Dojo Toolkit は、Web ブラウザーにロードされて実行される Web サイトおよびアプリケーションを迅速に開発できるように設計されたオープンソースの JavaScript ツールキットです。

モバイル Web ブラウザーにはデスクトップ・ブラウザーほどの能力がないことから、Dojo には Dojo Mobile というモバイル・バージョンが含まれています。モバイル Web ブラウザー用に最適化された Dojo Mobile は、モバイル・アプリケーションにネイティブ・アプリケーションのようなスタイルを設定するために使える多数の UI ウィジェットとテーマを提供します。

以下に、Dojo Mobile に備わっている主要な機能をいくつか挙げます。

  • Dojo Mobile パーサーによって軽量化された、ウィジェットのロード処理
  • ハイエンドの iOS 機器および Android 機器でネイティブ・アプリケーションのようなエクスペリエンスを提供する CSS3 によるアニメーション (animation と transition)
  • iOS および Android 両方のルック・アンド・フィールを対象とした組み込みテーマ
  • CSS3 に対応しない機器およびブラウザーとの互換性
  • 習得しやすい完全に宣言型の構文
  • 豊富に揃ったウィジェット。次のバージョンである Dojo Mobile 1.7 ではさらに追加されます。

この記事のサンプル・アプリケーションには、Dojo 1.6 をダウンロードする必要があります (「参考文献」を参照)。


新規 Android プロジェクトを作成する

開発環境の構築が完了したところで、単純な Android アプリケーションの作成に取り掛かります。

Eclipse で、「File (ファイル)」 > 「New (新規)」 > 「Other… (その他…)」の順に選択し、表示される画面で「Android」 > 「Android project (Android プロジェクト)」の順に選択し、「Next (次へ)」をクリックしてください。この操作によって、図 9 に示すダイアログが表示されます。

図 9. 新規 Android プロジェクト
「New Android project (新規 Android プロジェクト)」ウィンドウのスクリーン・ショット。「Project name (プロジェクト名)」には「AndroidPhoneGap」、「Build Target (ビルド・ターゲット)」には「Google APIs」、「Application name (アプリケーション名)」には「Android PhoneGap」、「Package name (パッケージ名)」には「com.ibm.swgs」、そしてアクティビティー名として「App」が指定されています。

図 9 に示されているように、プロジェクト名を入力してビルド・ターゲットを選択し、アプリケーション名、パッケージ名、アクティビティー名のそれぞれを入力してください。「Finish (完了)」をクリックすると、プロジェクトが作成されます。

PhoneGap ライブラリーを追加する

単純な Android アプリケーションは用意できました。次は PhoneGap アプリケーションを作成しますが、それにはまず、PhoneGap ライブラリーを追加しなければなりません。ファイルは 2 つあります。1 つは、アプリケーションから呼び出す PhoneGap API が含まれている JavaScript ファイル、もう 1 つは PhoneGap API のネイティブ実装がふくまれているネイティブ JAR ファイルです。

  1. AndroidPhoneGap」プロジェクトのツリー・ビューを展開します (図 10 を参照)。 :
    図 10. PhoneGap ライブラリーが含まれる Android プロジェクト
    PhoneGap ライブラリーが含まれる Android プロジェクト
  2. \assets\www という名前のディレクトリーを作成します。\libs ディレクトリーがない場合には \libs ディレクトリーを作成します。
  3. ダウンロードしてある PhoneGap を解凍し、Android サブディレクトリーを見つけます。
  4. Android 用の 3 つの PhoneGap ライブラリー・ファイルを、以下の Eclipse プロジェクト・フォルダーにコピーします。
    • phonegap-1.0.0.jar を \libs\phonegap-1.0.0.jar にコピーします。
    • phonegap-1.0.0.js を \assets\www\phonegap-1.0.0.js にコピーします。
    • xml/plugins.xml を \res\xml\plugins.xml にコピーします。

PhoneGap JAR ファイルは、プロジェクトにコピーするだけでなく、プロジェクトのビルド・パスにもコピーする必要があります。

  1. Project (プロジェクト)」 > 「Properties (プロパティー)」 > 「Java Build Path (Java のビルド・パス)」 > 「Libraries (ライブラリー)」 > 「Add JARs…(Jar 追加)」の順に選択します。
  2. phonegap-1.0.0.jar にナビゲートして、このファイルをプロジェクトに追加します (図 11 を参照)。
図 11. PhoneGap の JAR ファイルを追加する
PhoneGap の JAR ファイルを追加する

サンプル Android アプリケーションが PhoneGap を使用するように準備するための最後のステップは、App.java の変更です。PhoneGap アプリケーションは HTML と JavaScript で作成されるため、App.java がこのアプリケーションの HTML ファイルをロードするようにしなければなりません。それには、loadUrl() を使用してファイルを指定します (リスト 2 を参照)。App.java を編集するには、図 10 に示したツリー・ビューで App.java をダブルクリックしてください。

リスト 2. App.java
Package com.ibm.swgs;
import android.os.Bundle;
import com.phonegap.*;
public class App extends DroidGap //Activity
{
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        //setContentView(R.layout.main);
        super.loadUrl("file:///android_asset/www/index.html");
    }
}

PhoneGap アプリケーションを作成する

ここまでで PhoneGap アプリケーションを作成する準備が整いました。Android で、アセット・ディレクトリーの下にあるファイルを参照するには、file:///android_asset で指定します。リスト 2 で loadUrl() に指定したように、index.html ファイルを assets/www の下に作成する必要があります。

index.hml を作成したら、この新規ファイルにリスト 3 の内容を入力します。

リスト 3. index.html
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
</head>
<body onload='document.addEventListener("deviceready", deviceInfo, false);'>
<script>
function deviceInfo() {
    document.write("<h1>This is Phonegap 1.0.0 running on "+device.platform+" 
    "+device.version+"!</h1>");
}
</script>
</body>
</html>

index.html の内容について簡単に説明しておくと、PhoneGap API を呼び出すには、deviceready イベントを待機しなければなりません。このイベントが、PhoneGap のネイティブ部分が初期化されて使用できる状態にあることを示すからです。リスト 3 では onload コールバックが deviceready を登録しています。このコールバックが起動されると、機器の OS とバージョンが出力されるようにしています。

PhoneGap が使用するネイティブの機能はパーミッションによって保護されているため、AndroidManifest.xml を修正して、これらネイティブの機能の uses-permission タグを含める必要があります。また、support-screens タグ、android:configChanges プロパティー、および com.phonegap.DroidGap アクティビティー・タグを指定する必要もあります (リスト 4 を参照)。

リスト 4. AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.ibm.swgs"
   android:versionCode="1"
   android:versionName="1.0">
<supports-screens
     android:largeScreens="true"
     android:normalScreens="true"
     android:smallScreens="true"
     android:resizeable="true"
     android:anyDensity="true"
 />
 <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
 <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
 <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
 <uses-permission android:name="android.permission.INTERNET" />
 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<application android:icon="@drawable/icon" android:label="@string/app_name">
   <activity android:name=".App"
       android:label="@string/app_name"
       android:configChanges="orientation|keyboardHidden">
     <intent-filter>
       <action android:name="android.intent.action.MAIN" />
       <category android:name="android.intent.category.LAUNCHER" />
     </intent-filter>
   </activity>
   <activity android:name="com.phonegap.DroidGap" android:label="@string/app_name" 
        android:configChanges="orientation|keyboardHidden">
     <intent-filter>
     </intent-filter>
   </activity>
</application>
</manifest>

アプリケーションを Android エミュレーターで実行する

PhoneGap アプリケーションは、実行可能な状態になりました。「Run (実行)」 > 「Run As (実行)」 > 「Android Application (Android アプリケーション)」の順に選択すると、図 12 のような画面が表示されるはずです。

図 12. Android エミュレーター
Android エミュレーターと「This is PhoneGap 1.0.0 running on Android 2.2! (Android 2.2 で実行中の PhoneGap 1.0.0 です!)」というメッセージのスクリーン・ショット

Eclipse はアプリケーションのビルドから、エミュレーターの起動、そしてエミュレーターにアプリケーションをインストールして実行するところまで、すべて自動的に行います。

エミュレーターが立ち上がるまでには数分かかります。開発を円滑に行うには、開発セッションが完了するまでエミュレーターを立ち上げたままにしておいてください。そうしておけば、Eclipse は新しいエミュレーターを起動する代わりに、実行中のエミュレーターを自動的に使用します。


アプリケーションを Android フォンで実行する

Android フォンをお持ちの場合は、実際の Android フォンで PhoneGap アプリケーションを実行することができます。ただし、Android フォンを開発のために用いるには、以下の手順に従って USB デバッグ機能を有効にする必要があります。

  1. ホーム画面に進んでメニューを選択します。
  2. Settings (設定)」 > 「Applications (アプリケーション)」 > 「Development (開発)」の順に選択します。
  3. 「USB debugging (USB デバッグ機能)」を有効にします。
  4. さらに、Android マニフェストでアプリケーションがデバッグ可能であることを宣言する必要があります。それには、AndroidManifest.xml ファイルを編集して、<application> 要素に android:debuggable="true" を追加します。
  5. Android フォンを USB で開発用マシンに接続します。
  6. アプリケーションを実行するには、「Run As (実行)」 > 「Android Application (Android アプリケーション)」の順に選択します。

    エミュレーターまたは実際の機器のどちらをターゲットにするかを選択するよう求めるプロンプトが出されるので、Android フォンを選択します (図 13 を参照)。

    図 13. 機器を選択する
    機器を選択する

Android フォンへのアプリケーションのダウンロードおよびインストールが完了すると、アプリケーションが起動します (図 14 を参照)。

図 14. Android フォンで実行中のアプリケーション
Android フォンで実行中のアプリケーション

DDMS (Dalvik Debug Monitor Server) を使用する

ADT プラグインには、デバッグ用の DDMS (Dalvik Debug Monitor Server) パースペクティブが組み込まれています。アプリケーションのフローを追跡してデバッグするのに役立つ DDMS は、エミュレーターでも、実際の機器でも使用することができます。

DDMS パースペクティブを起動するには、Eclipse で「Window (ウィンドウ)」 > 「Open Perspective (パースペクティブを開く)」 > 「Other... (その他…)」 > 「DDMS」の順に選択します。図 15 に一例を示します。

図 15. Eclipse 内の DDMS ウィンドウ
Eclipse 内の DDMS ウィンドウ

DDMS を起動するもう 1 つの方法として、Android SDK が配置されている以下の場所からコマンドを使用することもできます。

  • Windows の場合: C:\android-sdk-windows\tools\ddms.bat
  • OSX の場合: .../android-sdk-mac-86/tools/ddms
図 16. スタンドアロンのデバッガー
スタンドアロンのデバッガー

DDMS からは、以下の操作を行うことができます。

  • ログ・コンソールの表示
  • 機器で実行されているプロセスのステータスの表示
  • スレッド情報の表示
  • プロセスのヒープ使用量の表示
  • ガーベッジ・コレクションの強制実行
  • オブジェクトのメモリー割り当ての追跡
  • メソッドのプロファイル作成
  • 機器のファイルシステムの操作
  • 機器のスクリーン・キャプチャーの取得
  • 電話操作のエミュレーション

詳細については、DDMS の資料 (「参考文献」を参照) を調べてください。


Dojo を使用してプロジェクトを拡張する

Dojo は、モバイル・アプリケーションにさまざまなメリットをもたらす JavaScript ツールキットです。Dojo には、ネイティブ・モバイル・アプリケーションを模倣したテーマが用意されており、アプリケーション・ユーザー・インターフェース (UI) の開発を容易にする UI コンテナーおよびウィジェットもあります。

Dojo を使用できるようにセットアップする

Dojo を使用するには、サンプル・プロジェクトに Dojo をコピーする必要があります。

以下のディレクトリーを作成します (図 17 を参照)。

  • \assets\www\libs
  • \assets\www\libs\dojo
  • \assets\www\libs\dojo\dojo
  • \assets\www\libs\dojo\dojox

以下の Dojo ファイルをコピーします。

  • dojox\mobile.js を \assets\www\libs\dojo\dojox ディレクトリーにコピーします。
  • dojox\mobile ディレクトリーを \assets\www\libs\dojo\dojox ディレクトリーにコピーします。
  • dojo\dojo.js を \assets\www\libs\dojo\dojo ディレクトリーにコピーします。
図 17. Dojo が追加された Android プロジェクトのツリー・ビュー
Dojo が追加された Android プロジェクトのツリー・ビュー

Dojo をロードするには、index.html を編集してリスト 5 に記載する行を含める必要があります。行を追加する場所は、<head> セクションの phonegap-1.0.0.js スクリプト・タグの前です。

リスト 5. Dojo を index.html に追加する
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,
minimum-scale=1,user-scalable=no"/>
<link rel="stylesheet" href="libs/dojo/dojox/mobile/themes/android/android.css" 
type="text/css" media="screen" title="no title" charset="utf-8">
<script type="text/javascript" src="libs/dojo/dojo/dojo.js" djConfig="parseOnLoad:true">
</script>

phonegap-1.0.0.js スクリプト・タグの後に、require 文を含むリスト 6 の内容を Dojo モバイル・パーサーのために挿入します。

リスト 6. モバイル Dojo をロードするように index.html を変更する
<script type="text/javascript">
  dojo.require("dojox.mobile.parser");
  dojo.require("dojox.mobile");
</script>

アプリケーションを更新する

index.html 内の既存の <body> タグを、リスト 7 に記載する 2 つの単純な <div> セクションが含まれる新しい <body> タグで置き換えます。

リスト 7. index.html の本体を変更する
<body>
<!-- ACCIDENT TOOLKIT PAGE -->
<div dojoType="dojox.mobile.View" id="accHelp" selected="true">
    <h1 dojoType="dojox.mobile.Heading">Accident</h1>
    <div class="text">If you are in an accident, you should first move to a safe 
    location. Below are some additional actions you can take:</div>
    <ul dojoType="dojox.mobile.RoundRectList">
        <li dojoType="dojox.mobile.ListItem" 
            onclick="window.location='geo:0,0?q=police';">Call the Police</li>
        <li dojoType="dojox.mobile.ListItem"
            onclick="window.location='geo:0,0?q=towing';">Call for a Tow Truck</li>
        <li dojoType="dojox.mobile.ListItem" moveTo="accInfo" transition="slide"
            onClick="itemClicked();">Exchange Driver Info</li>
        <li dojoType="dojox.mobile.ListItem" moveTo="accInfo" transition="slide"
            onClick="itemClicked();">Record Accident Location</li>
        <li dojoType="dojox.mobile.ListItem" moveTo="accInfo" transition="slide"
            onClick="itemClicked();">Take Photos of Accident</li>
    </ul>
</div>
<!-- EXCHANGE DRIVER INFO PAGE -->
<div dojoType="dojox.mobile.View" id="accInfo">
    <h1 dojoType="dojox.mobile.Heading" back="Accident" moveTo="accHelp"
        onClick="console.log('Going back');">Driver</h1>
    <h2 dojoType="dojox.mobile.RoundRectCategory">Other Driver Info</h2>
</div>
</body>

最後の <div> タグの後に、リスト 8 に示す単純な itemClicked() 関数を追加します。これは、コンソールにログを記録するための JavaScript 関数です。

リスト 8. オンクリック・ハンドラー
<script>
function itemClicked() {
  console.log("itemClicked()");
}
</script>

エミュレーターで実行する

サンプル・アプリケーションを Android アプリケーションとして実行するには、プロジェクトを右クリックして、「Run as (実行)」 > 「Android Application (Android アプリケーション)」の順に選択します。

図 18. エミュレーターで実行中のアプリケーション
エミュレーターで実行中のアプリケーション

Dojo アプリケーションの各画面は、dojoType='dojox.mobile.View' を指定した div 要素で定義します (リスト 9 を参照)。初期画面を識別するのは、selected='true' 属性です。

画面のタイトルは、<h1 dojoType='dojox.mobile.Heading'> タグで定義します。

リスト 9. 画面とタイトルを定義する
<div dojoType="dojox.mobile.View" id="accHelp" selected="true">
    <h1 dojoType="dojox.mobile.Heading">Accident</h1>
</div>

画面上の最後の 3 つのリスト項目に示されている「>」に注意してください。これは、別の Dojo 画面がロードされることを示します。

選択可能な項目リストを表示するには、各リスト項目のタグに dojoType='dojox.mobile.ListItem' を指定します (リスト 10 を参照)。これは、ネイティブ選択リストとしてレンダリングされます。表示する div は moveTo 属性で指定し、その div をビューに移動させる方法は transition 属性で指定します。

リスト 10. 新しい画面をロードするリスト項目
<li dojoType="dojox.mobile.ListItem" moveTo="accInfo" transition="slide"
    onClick="itemClicked();">Exchange Driver Info</li>

上記のコードにより、「Exchange Driver Info (ドライバー情報の交換)」を選択すると、現在の div が非表示になり、id='accInfo' を持つターゲット div が表示されます。「Driver (ドライバー)」画面は、ビューにスライドして表示されます (図 19 を参照)。

図 19. ドライバー情報の画面
ドライバー情報の画面

リスト項目の用途は、他の画面をロードする以外にもあります。例えば、onclick ハンドラーを使用して、最寄りの警察署の検索結果を示す Google マップを表示することもできます。この場合のコードはリスト 11 のとおりです。

前の画面に戻るには、タイトルにある「Accident (事故)」ボタンを選択します。

リスト 11. Google マップをロードするリスト項目
<li dojoType="dojox.mobile.ListItem" 
    onclick="window.location='geo:0,0?q=police';">Call the Police</li>

モバイル機器の多くは geo: プロトコルをサポートしています。URI を geo:lat,lng?q=query の形でロードすることによって、ネイティブの Google マップ・サービスが表示されます。

エミュレーター上で「Call the Police (警察に通報)」を選択すると、最寄りの警察署の地図が表示されます (図 20 を参照)

図 20. 最寄りの警察署の検索結果
最寄りの警察署の検索結果

現在地は、DDMS の「Emulator Control (エミュレーター制御)」に入力する緯度と経度によって異なります。図 21 に、位置の設定を示します。

図 21. DDMS での位置の設定
DDMS での位置の設定

実際の Android フォンで実行する

Android フォンが接続されている場合には、「アプリケーションを Android フォンで実行する」セクションの説明に従って、実際の Android フォンでアプリケーションを実行してください。図 22 に示されているように、表示される画面はエミュレーターでの画面と同様です。警察の検索では、現在地の近くにある警察署が返されます。

図 22. 実際の Android フォンで実行中のアプリケーション
実際の Android フォンで実行中のアプリケーション

まとめ

今回の記事では、PhoneGap と Mobile Dojo を組み合わせて、標準的な Android アプリケーションのような外観と振る舞いを持つ Android 用ハイブリッド・モバイル・アプリケーションを短時間で作成する方法を学びました。このアプリケーションを短時間で作成できた理由は、Java ではなく、HTML とJavaScript を使用したからです。Web コードがモバイル・オペレーティング・システムによって変わることがなければ、このハイブリッド・アプリケーションを最小限の作業で簡単に iOS や Blackberry にも適用することができます。

この連載の第 2 回では、Dojo と PhoneGap を使って保険のモバイル・アプリケーションを作成します。お見逃しなく。

参考文献

学ぶために

製品や技術を入手するために

議論するために

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development
ArticleID=765692
ArticleTitle=モバイル・アプリケーション開発: 第 1 回: Android での PhoneGap と Dojo Mobile
publish-date=10212011