Dojo Mobile 1.6 の紹介

そして 1.7 で追加される新機能を覗いてみる

Dojo Toolkit をモバイル Web 開発フレームワークへと拡張した Dojo Mobile について学びましょう。この記事では実際的な例に沿って、Dojo Mobile のウィジェットおよびコンポーネントをアプリケーションに組み込んで使用する方法、そして PhoneGap を使用して Web アプリケーションをネイティブ・アプリケーションの中にラップする方法を説明します。そして最後に、このフレームワークの次のバージョンで追加される新機能の一部を一足先に紹介します。

Joe Lennon, Lead Mobile Developer, Core International

Photo of Joe LennonJoe Lennon は、アイルランドのコーク出身の 24 歳のソフトウェア開発者です。彼は Apress から出版予定の『Beginning CouchDB』の著者で、IBM developerWorks の技術記事やチュートリアルにも度々貢献しています。余暇は、サッカー、ガジェットの研究、そして Xbox 360 のゲームで楽しんでいます。彼の連絡先は、彼の Web サイト www.joelennon.ie です。


developerWorks 貢献著者レベル

2011年 7月 15日

はじめに

現在、モバイル Web を利用する人が急激に増加しています。多くの人々がスマートフォンをはじめとするモバイル機器を使いこなして Web を閲覧するようになっているなか、モバイル用に最適化された Web サイトや Web アプリケーションに対する要求はますます高まっています。その一方で、プラットフォームの数は増え続けていることから (iOS、Android、Blackberry OS、webOS、Windows Phone、Symbian、Bada など)、複数のオペレーティング・システムをターゲットとしたネイティブ・アプリケーションを開発するのは容易なことではありません。

いくつかの主要な JavaScript フレームワーク (Dojo、jQuery、および Sencha) では、モバイル Web アプリケーションの開発ツールキットの需要が急増したのに伴い、いち早くタッチ操作に十分対応したフレームワークを提供しています。これらのフレームワークを PhoneGap のようなネイティブ・コンパイル・ツールキットと組み合わせれば、ネイティブ開発に代わる優れた手法になります。なぜなら、Web 開発者が使い慣れた言語とフレームワークを使ってネイティブ・アプリケーションを構築できるだけでなく、数多くのプラットフォームにも比較的容易にアプリケーションをデプロイできるようになるからです。

この記事では、Dojo Toolkit の拡張版である Dojo Mobile について学びます。まずはモバイル Web アプリケーションとネイティブ・アプリケーションの違いを説明した後、例に沿って Dojo Mobile ウィジェットをアプリケーションに組み込んで使用する方法を説明します。さらにこの記事では、PhoneGap を使ってネイティブ・アプリケーションを構築する方法を学ぶこともできます。記事で使用するソース・コードは、ここからダウンロードすることができます。


モバイル Web アプリケーションとネイティブ・アプリケーションの違い

モバイル・アプリケーションを開発するのにネイティブ・プラットフォームを使用するか、それとも Web プラットフォームを使用するかについての議論は、この先しばらくは続きそうです。いずれの方法にしても利点と欠点があります。多くの場合、どちらの手法を選ぶかは、アプリケーションの要件と個人的な好みによって決まります。

モバイル Web アプリケーションではなく、ネイティブ・アプリケーションを作成する理由にはどんなものがあるのでしょうか。表 1 に、ネイティブ・アプリケーションを作成する場合の利点と欠点を要約します。

表 1. ネイティブ・アプリケーションの利点と欠点
利点欠点
コードの動作速度が速くなります。コードは機器のオペレーティング・システム上でそのまま動作するため、アプリケーションとオペレーティング・システムを仲介するブラウザー・アプリケーションが不要になります。複数の異なる機器をターゲットとする場合、同じアプリケーションでも、プラットフォームごとにまったく異なるバージョンを用意しなければなりません。これは、プラットフォームによって SDK のプログラミング言語および API が異なるためです。
アプリケーション・ストアを利用できることから、単純かつコスト効果に優れた配布モデルになります。アプリケーション・ストアを介してネイティブ・アプリケーションを配布するには、通常、サード・パーティーの承認が必要になります。このことから、市場に出すまでに (アプリケーションに承認が得られない場合は尚更のこと) 大幅な時間がかかる可能性があります。
ネイティブ SDK には、その機器に固有の機能が豊富に揃っています。さらに、通常は詳細なドキュメントとサンプルが完備されています。ささいなインクリメンタル更新だとしても、更新するには承認プロセスを踏まなければなりません。このプロセスは、重要な更新をユーザーに提供しにくくします。

次に、モバイル Web アプリケーションの利点と欠点を表 2 にまとめます。

表 2. モバイル Web アプリケーションの利点と欠点
利点欠点
複数のプラットフォームをターゲットとした 1 つのアプリケーションを作成すればよく、機器ごとに異なるアプリケーションを作成する必要はありません。ブラウザーが使用するアプリケーションを Web で配布する場合、ネイティブ・アプリケーションによって実行される機器の機能 (カメラ、マイクなど) の多くは、利用することができません。ただし、この状況は将来変わる可能性があります。
サード・パーティーのアプリケーション・ストアを利用して配布しなくても、Web でアプリケーションをデプロイすることができます。アプリケーションを配布するためのインフラストラクチャーを用意する必要があります。これは、アプリケーション・ストアを利用する場合よりも手間と費用がかかる可能性があります。
アプリケーションから得た収入をすべて確保することができます (アプリケーションを有料にする場合)。ネイティブ・アプリケーションに匹敵するほどの動作速度を実現することはできません。それは、モバイル Web アプリケーションはオペレーティング・システムによって実行されるのではなく、ブラウザーにレンダリングされるためです。

モバイル Web アプリケーションの利点も、ネイティブ・アプリケーションの利点も手に入れたいとしたら、幸い、この 2 つの中間を取る手法があります。それは、PhoneGap などのプラットフォームを使用して、モバイル Web アプリケーションを機器に固有のネイティブ・ラッパーでラップし、該当する機器の API にアクセスするための JavaScript API を提供するという手法です。この手法では、各種のアプリケーション・ストアにモバイル Web アプリケーションをネイティブ・アプリケーションとして登録することもできます。詳細については、「PhoneGap によるネイティブ・デプロイメント」で説明します。


Dojo Mobileの概要

Dojo Toolkit の拡張版である Dojo Mobile は、スマートフォンやタブレットなどのモバイル機器用に最適化された一連のウィジェット (コンポーネント) を提供します。これらのコンポーネントは、それぞれの機器に固有のコンポーネントをモデルとしているため、スマートフォン・アプリケーションを使い慣れている人々にとってネイティブなルック・アンド・フィールになっています。Dojo Mobile のコンポーネントはテーマを使用して完全にカスタマイズすることができるので、例えば、iOS ユーザーと Android ユーザーにそれぞれ別のスタイル一式を適用することもできます。

Dojo Mobile は、コンポーネントを集めた Dijit ライブラリーと同じように機能します。ある特定のタイプのウィジェットをアプリケーションで使用するには、まず、dojo.require を使って該当するクラスをアプリケーションのメイン JavaScript ブロックに読み込みます。その後、ウィジェットをアプリケーションに追加するには、通常の HTML タグに dojoType 属性を設定した宣言型を使用することも、JavaScript コードを使用したプログラムによる方法を使用することもできます。

ご想像の通り、Dojo Mobile は iOS 機器と Android 機器で快適に動作します。これは主に、これらのプラットフォームで使用可能な WebKit ブラウザーが理由となっています。Dojo Mobile のメリットは、まともな WebKit ブラウザーを提供する他のプラットフォーム (BlackBerry OS 6 や HP webOS など) にももたらされます。WebKit 以外のブラウザーでは、Dojo Mobile アプリケーションはグレースフルにデグレードするため、古いデスクトップ・ブラウザー (Microsoft Internet Explorer を含む) でも動作することが可能です。デフォルトで組み込まれているのは CSS3 スタイル設定だけですが、以下のたった 1 行のコードを使用することで、WebKit 以外のブラウザー用に互換モジュールを追加することができます。

dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");

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

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

次のセクションでは、「Hello, World」アプリケーションを作成する手順をとおして、Dojo Mobile の導入方法を説明します。


Dojo Mobile の導入

Dojo Mobile 開発は、至って簡単に始めることができます。ダウンロードしなければならないものは一切なく、必要なすべてのものは、Google の CDN (Content Delivery Network) を使用してリモートでロードすることができます。Dojo アプリケーションの基本構造の概略をリスト 1 に示します。

リスト 1. Dojo Mobile HTML 文書の基本構造
<!doctype html>
<html>
    <head>
        <meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,
user-scalable=no">
        <meta name="apple-mobie-web-app-capable" content="yes">
        <title>My Dojo Mobile App</title>
        <link rel="stylesheet"  
href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/mobile/themes
/iphone/iphone.css">
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" 
djConfig="parseOnLoad: true"></script>
        <script>
            dojo.require("dojox.mobile.parser");
            dojo.require("dojox.mobile");
            dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");
        </script>
    </head>
    <body>
        <!-- Dojo Widgets Go Here -->
    </body>
</html>

リスト 1 のコードをファイルに保存し、そのファイルを Web ブラウザーで開くと、コンテンツがないグレーの背景が表示されます。これではほとんど役に立たないので、これからアプリケーションにコンテンツを追加します。この記事の例で使用するのは標準的に提供されていない Dojo Mobile クラスなので、dojo.require を使って読み込む必要があります。それには、行 dojo.require("dojox.mobile"); の後に、リスト 2 の行を追加します。

リスト 2. Dojo Mobile クラスを読み込む
dojo.require("dojox.mobile.ScrollableView");
dojo.require("dojox.mobile.FlippableView");
dojo.require("dojox.mobile.IconContainer");

これで、「Hello, World」アプリケーションのメイン・コードを追加することができます。この記事の例では、Dojo Mobile で宣言型構文を使用します。つまり、通常の HTML タグに、実行時に構文解析される特殊な Dojo Mobile 属性を設定して使用するということです。コードの <body> セクションに、リスト 3 のコードを追加してください。

リスト 3. Dojo Mobile ウィジェットを使用する
<div dojoType="dojox.mobile.ScrollableView" selected="true">
    <h1 dojoType="dojox.mobile.Heading" fixed="top">Hello, World!</h1>
    <h2 dojoType="dojox.mobile.RoundRectCategory">First Section</h2>
    <div dojoType="dojox.mobile.RoundRect">
        This is a nice standard rounded rectangular label.
    </div>
    <h2 dojoType="dojox.mobile.RoundRectCategory">Second Section</h2>
    <ul dojoType="dojox.mobile.RoundRectList">
        <li dojoType="dojox.mobile.ListItem">List Item 1</li>
        <li dojoType="dojox.mobile.ListItem">List Item 2</li>
        <li dojoType="dojox.mobile.ListItem">List Item 3</li>
        <li dojoType="dojox.mobile.ListItem">List Item 4</li>
        <li dojoType="dojox.mobile.ListItem">List Item 5</li>
    </ul>
</div>

リスト 3 で定義しているのは、メインのアプリケーション・インターフェースを構成する ScrollableView です。標準の View クラスと ScrollableView クラスとの違いは、標準の View クラスは標準ブラウザー Chrome を使用してページをスクロールしますが、ScrollableView クラスは独自のスクロール・メカニズムを使用するところにあります。このスクロール・メカニズムでは、アプリケーションでヘッダーとフッターを固定し、ネイティブ・アプリケーションの場合と同様に、ヘッダーとフッターのその間でコンテンツをスクロールできるようになっています。

ScrollableView の中に含まれる Heading は、「Hello, World!」というテキストを表示するタイトル・バーです。このオブジェクトに属性 fixed="top" を設定すると、Dojo Mobile はヘッダーを画面の最上部に固定し、その下にある他のコンテンツをスクロールします。RoundRectCategory オブジェクトは、角丸のリストまたは単一項目のグループ・ヘッダーを定義します。これらのカテゴリーの最初の項目の後には、1 つの RoundRect ボックスが続きます。ここには、静的テキストが表示されます。このボックスの後には、別のカテゴリー・ヘッダーと RoundRectList オブジェクトが続きます。ここに含まれるのは、一連の ListItem オブジェクトです。このコードによる最終結果は、図 1 のようになります。

図 1. 「Hello, World」アプリケーション
2 つのセクションを表示する iPhone での画像。最初のセクションにはテキストが表示され、2 番目のセクションにはリスト項目が表示されています。

次のセクションでは、Dojo Mobile に用意されたさまざまなウィジェットとコンポーネントについて探ります。


ウィジェット

Dojo Mobile には、スマートフォンやタブレットなどのモバイル機器専用に設計および最適化された多種多様なウィジェットが用意されています。これらのウィジェットの種類は、レイアウト・コンポーネント (ビュー) からリスト、ナビゲーション・バー、タブ・バー、ボタン、そしてフォーム・ウィジェットまで多岐にわたります。このセクションではさまざまなウィジェットの動作を説明し、基本的なサンプル・コードを記載します。このセクションの図に示す画面は、iPhone テーマを使用した iOS 機器で撮ったものなので、Android テーマを使用している場合の画面とは異なる場合があります。

View

View は、機器の画面で使用可能なスペース全体を占めるコンテナー・ウィジェットです。アプリケーションのページには複数の View オブジェクトが含まれることもありますが、そのうち、アクティブな状態になっているオブジェクトは常に 1 つだけです。ユーザーは通常、ツールバー・ボタンとタブ・バー・ボタンを使用してビューからビューへとナビゲートします。この場合、ビュー間での移動には、さまざまな遷移を使用することができます。図 2 に、空の View の例を示します。

図 2. 空の View オブジェクト
空のグレーのボックス

View オブジェクトを作成するには、dojox.mobile.View クラスを使用します。このクラスは Dojo の基本 SDK に含まれているので、dojo.require を使って明示的に読み込む必要はありません。View オブジェクトを使用するときには、selected 属性を使って、アプリケーションの起動時にビューを表示するかどうか (つまり、起動ビュー) を定義します。以下のコードは、上記の View を宣言型で作成する場合に必要なコードです。

<div dojoType="dojox.mobile.View" selected="true"></div>

別の方法として、JavaScript を使用してプログラムによって View を作成することもできます。リスト 4 に、この方法で図 2 の View を作成する場合のコードを記載します。

リスト 4. View を作成する
var myView = new dojox.mobile.View({
    selected: true
}, "myView");
myView.startup();

リスト 4 は、HTML のどこかに id 属性の値が myView に設定されたブロック要素があることを前提とします。DOM 内では、その要素に View オブジェクトをバインドします。

この後のウィジェットの説明では、ウィジェットを宣言型のみで使用する方法を説明します。プログラムの構文で Dojo Mobile ウィジェットを使用する場合についての詳細は、Dojo API を参照してください。

ScrollableView

ScrollableView ウィジェットも View ウィジェットと同じように、他のウィジェットを配置できるコンテナーとして機能します。両者の主な違いは、コンテンツが画面の高さに収まりきらない場合、ScrollableView では画面をタッチして指を上下 (または、水平スクロールを使用している場合は左右) に動かすことによって、ヘッダー・オブジェクトやフッター・オブジェクトを固定したままコンテンツをスクロールできるという点です。標準 View オブジェクトを使用するとしたら、画面全体がスクロールされるため、ヘッダーとフッターは定位置に固定されません。図 3 に一例を示します。

図 3. 空の ScrollableView オブジェクト
右側にスクロール・バーがある空のグレーのボックス

上記に示した空の ScrollableView オブジェクトを作成する方法は、図 2 の空の View オブジェクトを作成したときの方法とほとんど同じです。空の ScrollableView の場合、コードは以下のようになります。

<div dojoType="dojox.mobile.ScrollableView" selected="true"></div>

ScrollableView は、ビューに固定したヘッダーまたはフッターを追加する場合に限って使用することをお勧めします。それ以外の場合には、通常の View クラスを使用してください。

通常の View クラスとは異なり、ScrollableView は基本クラスに含まれていません。そのため、dojo.require を使って明示的に読み込まなければならなくなります。

FlippableView

FlippableView ウィジェット (バージョン 1.7 で SwapView に名前が変更される予定) では、画面を左または右方向にスワイプすると他の FlippableView オブジェクトと入れ替えられるコンテナー・オブジェクトを作成することができます。ビューの順番は、コードでの配置順によって決まります。図 4 に、FlippableView ウィジェットの例を示します。

図 4. FlippableView ウィジェット
テキストの上に左方向を指す緑色の矢印が表示されたボックス

2 つのビューを入れ替えるサンプル FlippableView を作成するには、リスト 5 のコードを使用することができます。Dojo 1.7 を使用する場合は、FlippableView への参照を SwapView に変えてください。

リスト 5. 2 つのビューを使用した FlippablView を作成する
<div dojoType="dojox.mobile.FlippableView" selected="true">View 1</div>
<div dojoType="dojox.mobile.FlippableView">View 2</div>

FlippableView は基本クラスには含まれていないので、dojo.require を使用して読み込む必要があります。

Heading

Heading ウィジェットは、アプリケーションの一番上に表示するナビゲーション・バーを作成するために使用することができます。通常、Heading オブジェクトではタイトルを表示します。さらに、アプリケーションをナビゲートするための簡単な手段を提供するために、「戻る」ボタンやツールバー・ボタンなどのナビゲーション要素を Heading オブジェクトに追加することもできます。

HeadingScrollableView コンテナーと一緒に使用すると、Heading ウィジェットはアプリケーションの最上部に固定され、それ以外のアプリケーションの部分がスクロールするようになります。つまり、ユーザーが常にナビゲーションを使用できるようになるということです。図 5 に、タイトル、「Back (戻る)」ボタン、ツールバー・ボタンを完備した Heading オブジェクトの例を示します。

図 5. Heading ウィジェットの例
My App というタイトルと、「Back (戻る)」ボタンおよび「Edit (編集)」ボタンを表示するヘッダー・バー

図 5 の Heading ウィジェットを作成するためのコードは、リスト 6 のとおりです。

リスト 6. Heading ウィジェットの作成
<h1 dojoType="dojox.mobile.Heading" label="My App" back="Back"   
  moveTo="back">
    <div dojoType="dojox.mobile.ToolBarButton" label="Edit"
      class="mblColorBlue" style="width:25px;float:right">
    </div>
</h1>

お気付きかもしれませんが、「Back (戻る)」ボタンは、実際には Heading 要素自体に定義されます。ボタンに表示するテキストを定義するのは、back 属性です。moveTo 属性には、ユーザーが「Back (戻る)」ボタンをタップしたときにアクティブにする View オブジェクトの ID を指定します。さらに、「Back (戻る)」ボタンのタップ操作によって別のビューにナビゲートする際に使用する画面遷移のエフェクトを、transition 属性を使って定義することもできます。デフォルトのエフェクトはスライドですが、他にもフェード、フリップ、未使用という選択肢があります。

追加のナビゲーション・ボタンは、ToolBarButton ウィジェットで定義することができます。図の左側に示された「Back (戻る)」ボタンとはスタイルが異なるボタンを使いたい場合、あるいはボタンを右側に表示したい場合には、Heading 要素の中に ToolBarButton オブジェクトを追加すればよいのです。

RoundRect

RoundRect クラスでは、静的 HTML や別の Dojo Mobile ウィジェットを配置できる、単純な角丸コンテナーを作成することができます。図 6 に、RoundRect ウィジェットの例を示します。

図 6. RoundRect コンテナーの使用
「This is a simple roundrect object with some content in it. (これは中にコンテンツが含まれた単純な RoundRect オブジェクトです。)」というテキストを囲むフレーム

図 6の RoundRect オブジェクトを作成するには、リスト 7 に記載する構文を使用します。

リスト 7. RoundRect オブジェクトを作成する
<div dojoType="dojox.mobile.RoundRect" shadow="true">
    This is a simple RoundRect object with some content in it.
</div>

RoundRect は単純明快なクラスです。このクラスが受け入れる唯一のプロパティー、shadow は、デフォルトでは false に設定されます。このプロパティーは、コンテナーにドロップ・シャドウを付けるかどうかを定義するだけに過ぎません。

RoundRectCategoryRoundRectList

モバイル機器にデータを表示する場合、リストは極めて重要な表示方法となります。縦の表形式の構造を使用すれば、一連のさまざまなリスト項目を表示することができます。これらのリスト項目は、例えばナビゲーションのために情報を表示するなど、さまざまな目的で使用することができます。Dojo Mobile で作成できるリストのタイプは 2 つあり、いずれのタイプにも、カテゴリー・ウィジェットが関連付けられています。2 つのタイプのうちの 1 つ、RoundRectList は、最初のリスト項目と最後のリスト項目の角を丸くして、両端に隙間を設けたリストを作成します。図 7 に、iPhone に表示された RoundRectCategoryRoundRectList を示します。

図 7. RoundRectList
リストの見出しと 3 つのリスト項目

上記の例で定義しているのは、「List Heading」というラベルを設定した RoundRectCategory と、3 つの ListItem オブジェクトが含まれる RoundRectList オブジェクトです。リスト 8 に、このウィジェット一式を作成するために必要なコードを記載します。

リスト 8. RoundRectCategory ウィジェットと RoundRectList ウィジェットを作成する
<h2 dojoType="dojox.mobile.RoundRectCategory">List Heading</h2>
<ul dojoType="dojox.mobile.RoundRectList">
    <li dojoType="dojox.mobile.ListItem">List Item 1</li>
    <li dojoType="dojox.mobile.ListItem">List Item 2</li>
    <li dojoType="dojox.mobile.ListItem">List Item 3</li>
</ul>

EdgeToEdgeCategoryEdgeToEdgeList

EdgeToEdgeListRoundRectList の同類です。その使い方はまったく同じと言ってよいほどですが、EdgeToEdgeList の場合にはビューの全幅にまたがるリストを作成します。図 8 に一例を示します。

図 8. EdgeToEdgeList
画面全幅にまたがるリストの見出しと 3 つのリスト項目

EdgeToEdgeList のコードは前の例とほぼ同一で、RoundRect の参照が EdgeToEdge に置き換えられるだけです (リスト 9 を参照)。

リスト 9. EdgeToEdge ウィジェットを作成する
<h2 dojoType="dojox.mobile.EdgeToEdgeCategory">List Heading</h2>
<ul dojoType="dojox.mobile.EdgeToEdgeList">
    <li dojoType="dojox.mobile.ListItem">List Item 1</li>
    <li dojoType="dojox.mobile.ListItem">List Item 2</li>
    <li dojoType="dojox.mobile.ListItem">List Item 3</li>
</ul>

上記の 2 つのリストは、人のリストを表示する場合に使用されるのが通常です。人のリストは通常、姓の先頭文字でグループ化されます。

IconContainer

IconContainer ウィジェットは、タップ操作によってそれぞれ個別のコンテナーを開くことができる一連のアイコンを定義するために使用します。IconItem オブジェクトは、IconItem の内部にネストされたコンテナーを (同じビュー上に) 開くことも、指定した ID のコンテナーにアクティブな View を実際に移動させることもできます。図 9 に、3 つのアイコンを持つ IconContainer の例を示します。

図 9. IconContainer の例
それぞれに「core」というロゴが入った 3 つのボックスを示す画面

上記の IconContainer を作成するには、リスト 10 のコードを使用します。

リスト 10. IconContainer ウィジェットを作成する
<ul dojoType="dojox.mobile.IconContainer">
    <li dojoType="dojox.mobile.IconItem" label="Icon 1" 
      icon="appicon.png" moveTo="view1"></li>
    <li dojoType="dojox.mobile.IconItem" label="Icon 2" 
      icon="appicon.png" moveTo="view2"></li>
    <li dojoType="dojox.mobile.IconItem" label="Icon 3"     
      icon="appicon.png" moveTo="view3"></li>
</ul>

IconContainer クラスは _base.js には含まれていないため、dojo.require で明示的に読み込まなければなりません。ただし、IconItem クラスはその限りではないので、このクラスを dojo.require で読み込まないようにしてください。dojo.require で読み込もうとすると、アプリケーションを実行するときにエラーが発生します。

これらの特定のウィジェットには他にも多くの細かい注意点がありますが、それについては、この記事では触れません。詳細については、「参考文献」にリンクを記載している Dojo Mobile のデモおよび API を参照してください。

Button

Button クラスでは、単純なボタン・オブジェクトを作成することができます。ボタン・オブジェクトを作成した後は、dojo.connect を使用して、このウィジェット上での「クリック」といったイベントを扱うコードを作成することができます。図 10 は、Button ウィジェットの一例です。

図 10. Button ウィジェット
「Click me!」と示されたボタン

このボタンを作成するためのコードは、このボタンと同様に単純です (リスト 11 を参照)

リスト 11. Button ウィジェットを作成する
<button dojoType="dojox.mobile.Button" btnClass="mblBlueButton" 
style="width: 100px">Click me!</button>

独自のボタン・スタイルを作成するには、CSS を使用して、btnClass 属性でクラス名をボタンに割り当ててください。

Switch

Switch オブジェクトは、2 つのプロパティーの間でオブジェクトの値を切り替えることのできるトグル・コントロールです。デフォルトでは、スイッチの値は ON または OFF に設定されます。スイッチの値を変更するには、目的の値をタップするか、スイッチを目的の値に向かってスライドさせます。図 11 は、2 つのスイッチを表示する Switch ウィジェットの例です。この図では、一方のスイッチは OFF 位置にあり、もう一方は ON 位置にあります。

図 11. Switch の例
Switch オブジェクトの例

以下のコードによって Switch オブジェクトを作成されます。

<div dojoType="dojox.mobile.Switch" value="off"></div>

Switch ウィジェットが受け入れる追加プロパティーには、leftLabelrightLabel があります。これらのプロパティーは、オンの状態、オフの状態で表示する値をそれぞれ定義します。デフォルトのラベルは、ON と OFF です。Switch の値が変更されたときに起動される onStateChanged イベントは、dojo.connect を使用してバインドすることができます。

TabBar

TabBar ウィジェットは、TabBarButton がタップされるとビューをアクティブまたは非アクティブにするという方法で、アプリケーションの View オブジェクトを切り替えるために使用します。TabBar ウィジェットでは iconBase 属性を使用して画像のスプライト描画を定義することができるので、TabBarButton ごとに異なるアイコンを表示することができます。これは、アプリケーションの最下部で TabBar をナビゲーション・コンポーネントとして使用する場合に役立ちます (図 12 を参照)。

図 12. アイコンを表示する TabBar
アルバム・アイコンとカレンダー・アイコンを表示する TabBar

あるいは、barType 属性として segmentedControl を指定した TabBar コンポーネントを使用することもできます。通常、この設定で作成されるタブ・バーは、アプリケーション上部にあるメイン Heading ウィジェットの下に配置すると最も効果的です。図 13 に、このタイプの TabBar の例を示します。

図 13. barType 属性を segmentedControl に設定した TabBar
アイコンの代わりに「Album」sおよび「Events」というテキストを表示する TabBar

図 13 の TabBar を作成するためのコードは、リスト 12 のとおりです。

リスト 12. TabBar ウィジェットを作成する
<ul dojoType="dojox.mobile.TabBar" barType="segmentedControl">
    <li dojoType="dojox.mobile.TabBarButton" moveTo="view1" 
      selected="true">Albums</li>
    <li dojoType="dojox.mobile.TabBarButton" 
      moveTo="view2">Events</li>
</ul>

TabBarButton クラスには、ボタンの外観をカスタマイズするために使用できるさまざまな構成オプションがあります。その例を挙げると、アイコンの位置、使用するアイコンの種類、ビューを変更するときに使用する遷移、遷移の完了時に呼び出すコールバック関数などを指定できます。詳細については、Dojo API を参照してください。


PhoneGap によるネイティブ・デプロイメント

アプリケーションをモバイル Web にデプロイすることが、次第に一般的になっています。モバイル・ブラウザーと HTML5 が進化するのに伴い、モバイル Web はモバイル・アプリケーションを配布する、より強力な方法になってきています。その一方、アプリケーションを関連するプラットフォーム・アプリケーション・ストアにそのまま登録したいという場合もよくあります。そのような場合には、各プラットフォームのネイティブ SDK を使用して複数の異なるアプリケーションを開発する代わりに、PhoneGap を使用することで、モバイル Web アプリケーションをネイティブ・パッケージに組み込むことができます。

PhoneGap は、アプリケーションの配布形態が無料、有料、オープンソース、あるいはハイブリッド・ライセンスのどれであるかに関わらず、どのアプリケーションの中でも無料で使用できるオープンソースのプロジェクトです。PhoneGap 自体は、MIT ライセンスおよび BSD オープンソース・ライセンスの下で配布されています。どちらのライセンスにするかは、状況に応じて選択することができます。

PhoneGap には、6 つのプラットフォームにネイティブなアプリケーションを構築するために使用できる SDK が組み込まれています。6 つのプラットフォームとは、具体的には iOS、Android、Blackberry、webOS、Windows Mobile、および Symbian です。PhoneGap の導入手順は、プラットフォームによって異なります。このセクションではその一例として、iOS にデプロイするのがいかに容易であるかを明らかにします。別のプラットフォームを使用する方法については、「参考文献」を参照してください。

これから PhoneGap を使用して、iOS 機器上でネイティブに動作する基本的な Dojo アプリケーションを作成します。ネイティブ iOS アプリケーションを作成するには、OS X 10.6 Snow Leopard および Xcode がインストールされた Mac が必要です。Xcode は、Apple の Developer Center または Mac App Storeからダウンロードすることができます。必ず、iOS SDK をダウンロードしてください。そうでないと、iOS アプリケーションを作成することはできません。

以下に、Xcode と iOS SDK がインストールされているという前提で手順を説明します。

  1. 最新バージョンの PhoneGap をダウンロードします。これは zip ファイルとして配布されます。
  2. ファイルを解凍して、ファイルに含まれる iOS ディレクトリーを開きます。ディレクトリーには、PhoneGapLibInstaller.pkg というパッケージが 1 つあるはずです。
  3. PhoneGapLibInstaller.pkg を起動して、PhoneGap を Xcode にインストールします。
  4. インストーラーによるインストールが完了したら、Xcode を起動して、新規プロジェクトを作成します。
  5. 左側のプロジェクト・タイプのグループから、「User Templates (ユーザー・テンプレート)」グループに含まれる「PhoneGap」を選択し (図 14 を参照)、次に右側の「PhoneGap-based Application (PhoneGap ベースのアプリケーション)」を選択します。
  6. Choose (選択)」をクリックし、プロジェクトの名前を入力します (この例での名前は、「HelloNative」です)。
図 14. Xcode 内に PhoneGap プロジェクトを作成する
3 つのセクションで構成された画面。左側には 1 つのセクション、右側には上下に 2 つのセクションがあります。その下には、「Cancel (キャンセル)」ボタンと「Choose (選択)」ボタンがあります。

Xcode の「Groups & Files (グループおよびファイル)」セクション (通常はウィンドウの右側) で、www フォルダーを展開して index.html ファイルを開きます。このファイルには、リスト 13 のようなコードが含まれています。

リスト 13. デフォルトの PhoneGap iOS index.html ファイル
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <!-- Change this if you want to allow scaling -->
    <meta name="viewport" content="width=default-width; user-scalable=no" />

    <meta http-equiv="Content-type" content="text/html; charset=utf-8">

    <title>HelloNative</title>
    
    <!-- iPad/iPhone specific css below, add after your main css >
    <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" 
href="ipad.css" type="text/css" />        
    <link rel="stylesheet" media="only screen and (max-device-width: 480px)" 
href="iphone.css" type="text/css" />        
    -->
    <!-- If you application is targeting iOS BEFORE 4.0 you MUST put json2.js 
from http://www.JSON.org/json2.js into your www directory and include it here -->
    <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
    <script type="text/javascript" charset="utf-8">


    // If you want to prevent dragging, uncomment this section
    /*
    function preventBehavior(e) 
    { 
      e.preventDefault(); 
    };
    document.addEventListener("touchmove", preventBehavior, false);
    */
    
    function onBodyLoad()
    {
        document.addEventListener("deviceready",onDeviceReady,false);
    }
    
  /* When this function is called, PhoneGap has been initialized and is ready to roll */
    function onDeviceReady()
    {
        // do your thing!
    }
    
    </script>
  </head>
  <body onload="onBodyLoad()">
      
  </body>
</html>

ここからは、このネイティブ・アプリケーションに「Hello, World」アプリケーションで提供したのと同じ関数を組み込んでいきます。最初のステップは、実際に Dojo 自体を読み込むことです。index.html ファイルで、以下の行を見つけてください。

<script type="text/javascript" charset="utf-8"  src="phonegap.js"></script>

この行の下に、リスト 14 に記載する行を追加します。

リスト 14. Dojo を読み込む
<link rel="stylesheet"
 href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/mobile/themes
 /iphone/iphone.css">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" 
djConfig="parseOnLoad: true"></script>

リスト 14 のコードは、Google CDN から Dojo の CSS ファイルと JavaScript ファイルを読み込みます。PhoneGap を使用してモバイル Web アプリケーションをネイティブにデプロイする場合、実際のアプリケーションには当然、Dojo のローカル・コピーを含める必要があります。そうでないと、ユーザーはオフラインの場合にアプリケーションを使用することができなくなってしまいます。また、機器でローカルに Dojo を使用できるようにすれば、アプリケーションの実行速度は大幅に向上します。

JavaScript 関数 onDeviceReady を見つけて、「do your thing!」のコメントの下にリスト 15 のコードを追加します。

リスト 15. Dojo Mobile パーサーを読み込む
dojo.require("dojox.mobile.parser");
dojo.require("dojox.mobile");
dojo.require("dojox.mobile.ScrollableView");

リスト 15 のコードは Dojo Mobile パーサーと基本クラス、そして ScrollableView コンテナー・ウィジェットを読み込みます。この場合、互換性の層は必要ありません。ターゲットとする機器は iOS であり、これは確実に WebKit を使用するためです。最後に、ウィジェット自体のコードを追加する必要があります。index.html 内の開始 <body> 要素と終了 <body> 要素の間に、リスト 16 のコードを追加してください。

リスト 16. ウィジェットを追加する
<div dojoType="dojox.mobile.ScrollableView" selected="true">
    <h1 dojoType="dojox.mobile.Heading" fixed="top">Hello, World!</h1>
    <h2 dojoType="dojox.mobile.RoundRectCategory">First Section</h2>
    <div dojoType="dojox.mobile.RoundRect">
        This is a nice standard rounded rectangular label.
    </div>
    <h2 dojoType="dojox.mobile.RoundRectCategory">Second Section</h2>
    <ul dojoType="dojox.mobile.RoundRectList">
        <li dojoType="dojox.mobile.ListItem">List Item 1</li>
        <li dojoType="dojox.mobile.ListItem">List Item 2</li>
        <li dojoType="dojox.mobile.ListItem">List Item 3</li>
        <li dojoType="dojox.mobile.ListItem">List Item 4</li>
        <li dojoType="dojox.mobile.ListItem">List Item 5</li>
    </ul>
</div>

index.html ファイルを保存した後 (「File (ファイル)」 -> 「Save (保存)」)、Xcode の左上にある「Overview (概要)」ツールバー・オプションが「Simulator (シミュレーター)」ターゲットに設定されていることを確認してください。これで、「Build and Run (ビルドして実行)」を選択すれば、アプリケーションを起動することができます (「Build (ビルド)」 -> 「Build and Run (ビルドして実行)」)。Xcode は準備に多少の時間を費やしてから、iOS Simulator アプリケーショを起動します。しばらくして初のネイティブ Dojo アプリケーションが開始されると、画面の最下部に Safari ツールバーがないこと、そしてアプリケーションが機器の画面全体を占めていることに気付くはずです (図 15 を参照)。

図 15. ネイティブ Dojo の「Hello, World」アプリケーション
「Hello, World」アプリケーションのタイトルと、テキストが表示されている最初のセクション、そしてリスト項目が表示されている 2 番目のセクションからなる画面

シミュレートされた iPhone でホーム・ボタンを選択してアプリケーションを終了すると、アプリケーションは機器のホーム画面上に、デフォルトの PhoneGap アプリケーション・アイコンと「HelloNative」という名前によって表示されます (図 16 を参照)。

図 16. iPhone のホーム画面に表示されたネイティブ・アプリケーションのアイコン
iPhone のホーム画面に表示されたネイティブ・アプリケーションのアイコン

シミュレーターで別のアプリケーション (Safari や連絡先など) を開いてホーム・ボタンをダブルタップすると、iOS のマルチタスク・メニューが開きます。すると、再びアプリケーションのアイコンが表示されるので、素早く簡単に、他のアプリケーションとの間で切り替えることができます。

別のプラットフォームにアプリケーションをデプロイするプロセスも、通常はここで概説した方法と同じく簡単ですが、アプリケーションを Android 上で動作させるためには、多少の調整が必要になる場合もあります。必要な情報はすべて、PhoneGap Web サイトから入手することができます。


Dojo Mobile 1.7 の新機能

近いうちにリリースされる予定の Dojo Mobile バージョン 1.7 では、さまざまな改善が予定されています。例えば、このバージョンには以下の改善内容が盛り込まれることになります。

  • 新規モジュール、dojox.mobile.deviceTheme の追加。このモジュールは使用されているモバイル機器を自動的に検出し、その機器に適切な Dojo Mobile テーマをロードします。
  • Blackberry 機器に特化して設計された新しいテーマの追加。
  • スクロール可能な一連の画像を表示できる新しいウィジェット Carousel の追加。ヘッダーに表示されるナビゲーション・コントロールが、画像のグループをトラバースする代替手段となります。図 17 に、このカルーセルの一例を示します。
    図 17. Carousel ウィジェット
    実際の Carousel ウィジェット。
  • 新規ウィジェット、SpinWheel の追加。これは、ネイティブ iPhone アプリケーションでお馴染みのポップアップ・スピナー UI コンポーネントを模倣したウィジェットです。一例を図 18 に示します。
    図 18. 実際の SpinWheel/DatePicker ウィジェット
    実際の SpinWheel/DatePicker ウィジェット。これは、iPhone のカレンダー機能です。
  • さまざまなフレーバーの SpinWheel コンポーネント。これには SpinWheelDatePickerSpinWheelTimePicker のほかにも、SpinWheelSlot オブジェクトを使って自由に構成できるコンポーネントも含まれます。
  • RoundRectList ウィジェットと EdgeToEdgeList ウィジェットのデータ駆動型バージョン。それぞれ RoundRectDataListEdgeToEdgeDataList という名前が付けられています。
  • CSS3 によるアニメーション (animation と transition) サポートの改善。
  • Button クラスは基本モバイル・フレームワークからは外されているため、dojo.require("dojox.mobile.Button") を使用して明示的に読み込む必要があります。
  • FlippableView ウィジェットは SwapView という名前に変更されます。

WebSphere Application Server Feature Pack for Web 2.0 and Mobile V1.1.0

WebSphere Application Server Feature Pack for Web 2.0 and Mobile V1.1.0 に含まれる IBM Dojo 1.7 Toolkit には、この記事で取り上げたすべての Dojo 1.6 機能に加え、IBM Dojo 1.7 Toolkit でしか提供されていない機能が数多く組み込まれています。このフィーチャー・パックはさらに、新たなモバイルのリッチ・インターネット・アプリケーション (RIA) のビルディング・ブロックと Dojo ベースのダイアグラム・コンポーネントも提供します。このフィーチャー・パックを付属の Rational ツールとともに用いると、リッチな Web のモバイル・アプリケーションの作成は大幅に簡易化され、元々デスクトップ・ブラウザー用に開発された WebSphere アプリケーションは、モバイル機器に対応するように簡単に変更されてデプロイされます。

この最新バージョンには、dojox.mobile アプリケーションで使用できる個別の関連 Dojo プロジェクトもあります。

  • データに結合されたフォーム。JSON モデルを使用した自動フォーム生成機能を備えています。
  • OpenLayers Map ウィジェット。前のバージョンの Google Maps ウィジェットを補完するウィジェットです。
  • モバイルに適した一連のチャートおよびゲージ。ブラウザー・プラグインは一切不要です。
  • 改善されたタッチ・イベント層。ユーザーのタッチ操作へのより正確な応答性を実現します。

Dojo Mobile 1.7 のリリースが迫ってきており、新機能および変更内容のすべてに関する詳細がすぐにでも正式に発表されるはずです。


まとめ

Web アプリケーションは、ネイティブ・モバイル・アプリケーション開発に代わる合理的かつ強力な手段として急速に広がりつつあります。この記事では、Dojo Mobile などのモバイル HTML5 フレームワークが、モバイル機器専用の UI コンポーネントやウィジェットを設計する厄介な作業を取り除き、開発プロセスにどのように付加価値をもたらすかを説明しました。Dojo Mobile には、機器の種類に合わせて異なるテーマも用意されているほどです。

モバイル Web アプリケーションを構築した後は、素晴らしい PhoneGap SDK を利用することで、アプリケーションを複数のターゲット・プラットフォームにネイティブにデプロイすることができます。さらに、カメラやマイクなどのネイティブ機器の機能を使用することも可能になります。モバイル Web の未来は明るいだけではありません。それはすでに、現実となっています。


謝辞

この記事のレビューをし、貢献してくださった IBM WebSphere Application Server Feature Pack for Web 2.0 and Mobile V1.1.0 チームの Christopher Mitchell 氏、Lizet Ernand 氏、Todd Kaplinger 氏、Yoshiroh Kamiyama 氏に感謝いたします。


ダウンロード

内容ファイル名サイズ
Article source codedojomobile.source.zip3KB

参考文献

学ぶために

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

議論するために

コメント

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=710833
ArticleTitle=Dojo Mobile 1.6 の紹介
publish-date=07152011