はじめに

現在、モバイル 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 に、ネイティブ・アプリケーションを作成する場合の利点と欠点を要約します。

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

モバイル 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 機器、そして BlackBerry OS 6 機器で快適に動作します。これは主に、これらのプラットフォームで使用可能な WebKit ブラウザーが理由となっています。Dojo Mobile のメリットは、まともな WebKit ブラウザーを提供する他のプラットフォーム (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、BlackBerry のルック・アンド・フィールを対象とした組み込みテーマ
• CSS3 に対応しない機器およびブラウザーとの互換性
• 習得しやすい完全に宣言型の構文
• 広範なモバイル対応インターフェースのオプションを提供する、豊富に揃った UI ウィジェットとコンポーネント

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

上に戻る

Dojo Mobile 1.7 の導入

この記事を執筆している時点で入手できる最新の Dojo 安定版バージョンは、1.6.1です。この状況で Dojo Mobile 1.7 を導入するには、Subversion リポジトリーから、Dojo Toolkit の最新 nightly リリースをダウンロードする必要があります。svn コマンドライン・ツールは、Mac OS X および Linux オペレーティング・システムには通常、事前にインストールされています。Windows を使用しているとしたら、最初にこれらのツールをダウンロードしてインストールしなければならないことになるはずです。詳細については、Subversion サイトにアクセスしてください。

Subversion がインストールされていて、コマンドライン・ベースのツールを使用していることを前提とすれば、以下のコマンドを使用して、Dojo の最新 nightly リリースをチェックアウトすることができます。このコマンドは Dojo Toolkit ソース・コードをすべてダウンロードするため、ある程度時間がかかることを覚悟してください。

$ svn checkout http://svn.dojotoolkit.org/src/view/anon/all/trunk dojo-toolkit-readonly

チェックアウトが完了すると、dojo-toolkit-readonly という名前のディレクトリーが新たに作成され、そこに Dojo Toolkit の完全なソース・コードがダウンロードされているはずです。このディレクトリーを Web サーバー上の任意の場所にコピーまたは移動して、HTML 文書内で使用できるようにします。ディレクトリーの名前は短い名前 (dojo-toolkit など) に変更してください。これで、Dojo を使用する準備は完了です。

お望みであれば、Dojo Toolkit の必要な部分だけをダウンロードすることもできますが、まずはソース・コード全体をダウンロードしてから、必要ないものを破棄するほうが簡単な場合もあります。Dojo のソース・コードは圧縮も、縮小化もされていないため、本番アプリケーションで使用することはお勧めしません。Dojo アプリケーションのパフォーマンスを向上させるために独自のカスタム Dojo ビルドを作成する方法については、「参考文献」を参照してください。

Dojo アプリケーションの基本構造の概略をリスト 1 に示します。Dojo Mobile 1.7 で新しく追加された deviceTheme クラスは、使用している機器に合った適切なテーマを自動的に判断してロードします。したがって、ユーザーのブラウザーを判別して該当する CSS ファイルを提供するという手間が省かれます。

<!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>
        <script src="dojo-toolkit/dojo/dojo.js" djConfig="parseOnLoad:
true"></script>
        <script>
            dojo.require("dojox.mobile.parser");
            dojo.require("dojox.mobile");
            dojo.require("dojox.mobile.compat");
                dojo.require("dojox.mobile.deviceTheme");
        </script>
    </head>
    <body>
        <!-- Dojo Widgets Go Here -->
    </body>
</html>

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

dojo.require("dojox.mobile.ScrollableView");
dojo.require("dojox.mobile.SwapView");
dojo.require("dojox.mobile.IconContainer");
dojo.require("dojox.mobile.Button");
dojo.require("dojox.mobile.SpinWheelDatePicker");
dojo.require("dojox.mobile.SpinWheelTimePicker");

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

<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>

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

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

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

上に戻る

ウィジェット

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

View

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

var myView = new dojox.mobile.View({
    selected: true
}, "myView");
myView.startup();

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

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

ScrollableView

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

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

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

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

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

SwapView (旧 FlippableView)

SwapView ウィジェットは、Dojo Mobile 1.7 で非推奨となった旧称 FlippableView に代わるウィジェットです。SwapViewでは、画面の左または右にスワイプすると他の SwapView オブジェクトと入れ替えられるコンテナー・オブジェクトを作成することができます。ビューの順番は、コードの配置順によって決まります。図 4 に、SwapView ウィジェットの例を示します。

2 つのビューを入れ替えるサンプル SwapView を作成するには、リスト 5 のコードを使用することができます。

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

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

Heading

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

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

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

<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 オブジェクトを作成するには、リスト 7 に記載する構文を使用します。

<div dojoType="dojox.mobile.RoundRect" shadow="true">
    This is a simple RoundRect object with some content in it.
</div>

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

RoundRectCategory と RoundRectList

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

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

<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>

EdgeToEdgeCategory と EdgeToEdgeList

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

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

<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 の例を示します。

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

<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 ウィジェットの一例です。

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

<button dojoType="dojox.mobile.Button" class="mblBlueButton" 
style="width: 100px">Click me!</button>

独自のボタン・スタイルを作成するには、CSS を使用して、class 属性でクラス名をボタンに割り当ててください。これまで Dojo Mobile 1.6 を使用していた場合には、バージョン 1.7 の Button クラスでは以下の点が変更されていることに注意してください。

• Button クラスは _base.js から除外されたため、(この記事に記載した例で行ったように) dojo.require を使用して明示的に Button クラスを読み込む必要があります。
• ボタンにクラス名を指定するための手段としては、以前は btnClass 属性を使用していましたが、現在は class 属性を使用するようになっています。バージョン 1.7 で btnClass を使用しようとすると、ボタンが期待するように表示されません。

Switch

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

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

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

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

TabBar

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

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

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

<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>

TabBar クラスは、dojo.require を使用して明示的に読み込む必要があります。これを行わないと、意味が曖昧なエラー・メッセージを受け取ることになります。ただし、TabBarButton クラスについては、明示的に読み込む必要はありません。

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

Carousel

Dojo 1.7 で新しく追加された Carousel ウィジェットでは、指によるスワイプ操作、またはナビゲーション・コントロール・ウィジェットを使用して、一連の画像をスライドさせて表示させられるカルーセルを作成することができます。図 14 は、Carousel ウィジェットの一例です。

Carousel コンポーネントを使用するには、一連の画像項目を 1 つのストアとして設定した ItemFileReadStore オブジェクトを定義する必要があります。リスト 13 に一例として、JavaScript コード・ブロック内に定義した JSON オブジェクトを示します。

var json = {
    items: [
        {src:"images/pic1.jpg"},
        {src:"images/pic2.jpg"},
        {src:"images/pic3.jpg"},
        {src:"images/pic4.jpg"},
        {src:"images/pic5.jpg"},
        {src:"images/pic6.jpg"},
        {src:"images/pic7.jpg"},
        {src:"images/pic8.jpg"},
        {src:"images/pic9.jpg"},
        {src:"images/pic10.jpg"}
    ]
};

JSON オブジェクトを定義した後は、ItemFileReadStore オブジェクト、そしてカルーセル自体を定義することができます (リスト 14 を参照)。

<span jsId="store1" dojoType="dojo.data.ItemFileReadStore" data=
"json"></span> <div dojoType="dojox.mobile.Carousel" height="280px" 
store="store1" numVisible="1" title="Photo Gallery"></div>

リスト 14 のコードは、図 14 に示したようなフォト・ギャラリー Carousel を作成するために使用することができます。一度に表示する画像の数は、numVisible 属性で定義します。

SpinWheel

SpinWheel コンポーネントは、ユーザーがホイール・インターフェースから値を選択できるウィジェットです。iPhone ユーザーであれば、このスピン式の日付ピッカー・コンポーネントや同様のコントロールを使うのに違和感がないはずです。SpinWheel コンポーネントは、カスタム・ホイールを作成するために使用することができます。あるいは、SpinWheelDatePicker ウィジェットまたは SpinWheelTimePicker ウィジェットを使用して、日付ピッカー、時刻ピッカーをそれぞれ作成することもできます。図 15 に、この両方のウィジェットを示します。

SpinWheelDatePicker と SpinWheelTimePicker は、どちらも簡単に作成することができます。デフォルトでは、この 2 つのウィジェットは基本フレームワークに含まれていないため、それぞれに関連する dojox.mobile.SpinWheelDatePicker クラスと dojox.mobile.SpinWheelTimePicker クラスを明示的に読み込む必要がありますが、実際にピッカーを作成するのは、これ以上簡単にできないほど簡単です。リスト 15 のコードでは、ID がそれぞれ spin1、spin2 に設定された日付ピッカーと時刻ピッカーが作成されます。

<div id="spin1" dojoType="dojox.mobile.SpinWheelDatePicker"></div>
<div id="spin2" dojoType="dojox.mobile.SpinWheelTimePicker"></div>

当然のことながら、各ホイールから値を読み込むことができなければ、SpinWheel はほとんど役に立ちません。日付ピッカーの最初のホイールの現行値は、以下のように slots 属性と getValue 関数を使用するだけで取得することができます。

dijit.byId("spin1").slots[0].getValue()

SpinWheel クラスと SpinWheelSlot クラスを使用して、カスタム・テーマを作成することもできます。ホイール・スロットにはテキストと画像を含めることができるため、極めて柔軟にカスタマイズすることが可能です。詳細については、Dojo Mobile 開発者向けテストを参照してください。

上に戻る

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」を選択し (図 16 を参照)、次に右側の「PhoneGap-based Application (PhoneGap ベースのアプリケーション)」を選択します。
6. 「Choose (選択)」をクリックし、プロジェクトの名前を入力します (この例での名前は、「HelloNative」です)。

Xcode の「Groups & Files (グループおよびファイル)」セクション (通常はウィンドウの右側) で、www フォルダーを展開します。このフォルダー内で、この記事の最初のほうで Subversion から Dojo 1.7 をチェックアウトしたときに作成した dojo-toolkit ディレクトリーを見つけてください。本番アプリケーションでは、通常はカスタム Dojo パッケージをビルドして、必要なファイルだけを含めます。詳細については「参考文献」を参照してください。

Dojo 1.7 では、Dojo 1.6 でのように dijit サブディレクトリーを削除することはできません。これは、最新バージョンでは Dijit クラスへの依存関係があるためです。アプリケーションのサイズを小さくする必要がある場合には、依存関係が削除されないようにするためのカスタム Dojo ビルドを作成してください。

dojo-toolkit フォルダーを www フォルダー内にドラッグ・アンド・ドロップしようとするとわかるように、フォルダーのドラッグ・アンド・ドロップ操作は機能しません。代わりに、www フォルダーをダブルクリックして「Finder (ファインダー)」に開いてから、dojo-toolkit フォルダーを www フォルダー内にコピーします。コピーしたフォルダーは、Xcode 内ですぐに表示されない場合もあります。その場合には、www フォルダーをいったん折り畳んでから展開することで、表示を最新の状態にします。PhoneGap に組み込まれた Dojo 1.7 であれば、そのままアプリケーションのビルドに取り掛かることができます。

index.htmlファイルを開きます。このファイルには、リスト 16 のようなコードが含まれています。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width; initial-scale=1.0, 
maximum-scale=1.0, user-scalable=no" />

    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    
    <!-- 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.0.9.6.min.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);
    */
    
	/* If you are supporting your own protocol, the var invokeString will contain 
any arguments to the app launch. See http://iphonedevelopertips.com/cocoa/launching-your
-own-application-via-a-custom-url-scheme.html for more details -jm */
	/*
	function handleOpenURL(url)
	{
		// TODO: do something with the url passed in.
	}
	*/

    function onBodyLoad()
    {
        document.addEventListener("deviceready",onDeviceReady,false);
    }
    
    /* When this function is called, PhoneGap has been initialized and is ready 
to roll */
    /* If you are supporting your own protocol, the var invokeString will contain any
arguments to the app launch. See http://iphonedevelopertips.com/cocoa/launching-your-
own-application-via-a-custom-url-scheme.html for more details -jm */

    function onDeviceReady()
    {
        // do your thing!
        navigator.notification.alert("PhoneGap is working")
    }
    
    </script>
  </head>
  <body onload="onBodyLoad()">
  <h1>Hey, it's PhoneGap!</h1>
	  <p>Don't know how to get started? Check out <em><a
     href="http://github.com/phonegap/phonegap-start">PhoneGap Start</a>
     </em>  	

  </body>
</html>

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

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

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

<link rel="stylesheet"  href="dojo-toolkit/dojox/mobile/themes/iphone/iphone.css">
<script src="dojo-toolkit/dojo/dojo.js" djConfig="parseOnLoad: true"></script>

リスト 17 のコードは、必要な Dojo の CSS ファイルと JavaScript ファイルを読み込みます。このコードの下にはインライン <script> ブロックがあるので、そこに、関連する Dojo クラスを読み込むためのリスト 18 のコードを追加します。

dojo.require("dojox.mobile.parser");
dojo.require("dojox.mobile");
dojo.require("dojox.mobile.ScrollableView");

リスト 18 のコードは Dojo Mobile パーサーと基本クラス、そして ScrollableView コンテナー・ウィジェットを読み込みます。この場合、互換性の層は必要ありません。ターゲットとする機器は iOSであり、iOSは確実に WebKit を使用するためです。

JavaScript 関数 onDeviceReady を見つけて、「do your thing!」のコメントの下にある以下の行を削除します。これにより、アプリケーションを実行するたびにアラート・ダイアログが表示されることがなくなります。

navigator.notification.alert("PhoneGap is working")

最後に追加しなければならないコードは、リスト 19 に示すウィジェットそのものです。index.html 内の開始 <body> 要素と終了 <body> 要素の間に以下のコードを追加して、PhoneGap によって追加されたデフォルト・コードを削除してください。

<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 ツールバーがないこと、そしてアプリケーションが機器の画面全体を占めていることに気付くはずです (図 17 を参照)。

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

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

別のプラットフォームにアプリケーションをデプロイするプロセスも、通常はここで概説した方法と同じく簡単ですが、アプリケーションを Android 上で動作させるためには、多少の調整が必要になる場合もあります。必要な情報はすべて、PhoneGap Web サイトから入手することができます。アプリケーションを配布することを予定している場合には、必ずカスタム Dojo ビルドを作成してください。そうでないと、アプリケーション・バイナリーのサイズが必要以上に大きくなってしまいます。

上に戻る

まとめ

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

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

上に戻る

ダウンロード

ダウンロード形式について

参考文献

学ぶために

• Dojo Toolkit の詳細を学んでください。
  
  
• Dojo Mobile の機能についての説明を読んでください。
  
  
• dojox.mobile の公式資料にアクセスしてください。
  
  
• Dojo Toolkit のデモを見てください。
  
  
• Dojo Mobile 1.7 ナイトリー・ビルド・テストを調べてください。
  
  
• Dojo Mobile のデモで多種多様なサンプル・ウィジェットを体験してください。
  
  
• TNW の「Developers: build mobile and web apps quicker with Dojo Mobile」で、Dojo Mobile のビデオの数々を見てください。
  
  
• 「Comment lines: Going mobile with the Dojo Toolkit」(developerWorks、2011年3月): モバイル・プラットフォームをターゲットとして Dojo Toolkit を使用する方法を学んでください。
  
  
• developerWorks のブログ投稿「Building mobile apps with the Dojo framework」を読んでください。
  
  
• 「Comment lines: Mobile apps and the web」(developerWorks、2011年3月) では、急速に広がりつつあるモバイル・コンピューティングの分野について説明し、エンタープライズ・モバイルのニーズに対応するために新たな Web 標準を利用する方法を検討しています。
  
  
• 「Introducing The Dojo Toolkit」は、Dojo Toolkit の優れた入門書です。
  
  
• 「Introduction to the Dojo toolkit, part 1: Setup, core, and widgets」も、Dojo toolkit の入門書として役立ちます。
  
  
• 「Dojo 1.5: Ready to power your web app」では、Dojo 1.5 のいくつかの新機能について詳しく探っています。
  
  
• 「Introduction to the Dojo Toolkit: Tutorial」は、Ajax Matters による初歩的なチュートリアルです。
  
  
• 「Dojo を使って Web アプリケーションを国際化する」(developerWorks、2008年8月) では、Web サイトや Web アプリケーションでネイティブ言語をサポートするための作業を Dojo Toolkit の i18n 機能を利用して行う方法を説明しています。
  
  
• 「Dojo Toolkit を使って Web サービスを利用する」(developerWorks、2010年9月) では、Dojo Toolkit を使って Web ページ上でサービスを利用する方法を説明しています。
  
  
• 『Dojo: Using the Dojo JavaScript Library to Build Ajax Applications』(James E. Harmon 著) は、Dojo とそのウィジェットを同梱してますます大きくなっていくライブラリーについて、豊富なサンプルを用いて詳細に説明している開発者向けガイドです。
  
  
• 『Getting StartED with Dojo』(Kyle Hayes、Peter Higgins 共著) は、JavaScript の紹介から始まり、Dojo とそこに用意された Web インターフェース、効果、ウィジェットなどを作成するためのツール一式を案内している入門書です。
  
  
• 「カスタム Dojo アプリケーションを作成する」(developerWorks、2008年12月) は、Dojo に関する情報が満載された記事です。
  
  
• 「Develop HTML widgets with Dojo」(developerWorks、2006年10月): Dojo の拡張性について検討しています。
  
  
• 「Using the Dojo Toolkit with WebSphere Portal」(developerWorks、2007年11月): Dojo Toolkit を WebSphere Portal アプリケーションにインストールして構成し、利用する方法を説明しています。
  
  
• PhoneGap の「Get Started Guide」を利用してください。
  
  
• developerWorks Web development ゾーンでは、多種多様な Web ベースのソリューションを話題にした記事を揃えています。
  
  

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

• Dojo Toolkit をダウンロードしてください。この記事ではバージョン 1.6.1 を使用しました。
  
  
• PhoneGap の最新バージョンをダウンロードしてください。
  
  
• 開発者 Dojo Mobile テストを調べてください。
  
  
• Dojo Toolkit API マニュアルにアクセスしてください。
  
  
• WebSphere Application Server Feature Pack for Web 2.0 and Mobile V1.1.0 をダウンロードしてください。
  
  
• IBM - Dojo Extension sample: Dojo Extension Feature Set を使用して、IBM WebSphere Portlet Factory モデルに Dojo JavaScript Toolkit が提供する機能を利用させることができます。
  
  
• Subversion をこのプロジェクトの Web サイトから入手してください。
  
  
• IBM のソフトウェアを無料で試してみてください。試用版をダウンロードして、オンライン・トライアルにログインし、Sandbox 環境の製品を操作することも、クラウドを介して IBM 製品にアクセスすることもできます。100 を超える IBM 製品の試用版のなかから選べます。
  
  

議論するために

• 今すぐ developerWorks で自分のプロフィールを作って、Dojo およびモバイル・アプリケーション開発に関するウォッチ・リストをセットアップしてください。developerWorks コミュニティーとずっとつながっていられます。
  
  
• Web 開発に興味を持つ他の developerWorks メンバーを見つけてください。
  
  
• Web のトピックを専門とする developerWorks グループに参加して、知識を共有してください。
  
  
• Roland Barcia が彼のブログで Web 2.0 とミドルウェアについて語っています。
  
  
• developerWorks のメンバーが共有する Web 関連のブックマークをフォローしてください。
  
  
• Web 2.0 Apps フォーラムで、素早く回答を得てください。
  
  
• Ajax フォーラムで、素早く回答を得てください。
  
  

著者について

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

この記事を評価する

コメント

上に戻る

目次

• はじめに
• モバイル Web アプリケーションとネイティブ・アプリケーションの違い
• Dojo Mobile の概要
• Dojo Mobile 1.7 の導入
• ウィジェット
• PhoneGap によるネイティブ・デプロイメント
• まとめ
• ダウンロード
• 参考文献
• 著者について
• コメント