Dojo Mobile はじめの一歩: 第1回:Hello, Dojo Mobile!

2011年6月に、WebSphere Application Server V8.0のリリースと同時にそのアドオンパッケージであるFeature Pack for Web 2.0 and Mobile 1.1.0が公開されました。その目玉の1つがDojo Toolkit 1.7の機能を先行取り込みしたDojo Mobile (dojox.mobile)の提供です。
この連載では、Feature Pack for Web 2.0 and Mobile 1.1.0に含まれるDojo Mobileの概要と使用方法を紹介します。第1回ではDojo Mobileにはじめて触れる方を対象に、基本事項について説明します。

湯元 孝治, ISE Webプラットフォーム開発, IBM

湯元 孝治, 日本アイ・ビー・エム システムズ・エンジニアリング株式会社所属。
日本IBM入社後、WebSphereの技術営業を経て、現在はWebSphere Application ServerやWebSphere Virtual Enterpriseの技術支援に従事。
日本IBMラグビー部(IBM Rugby Football Club BigBlue)所属。



近藤 仁, ISE Webソリューション開発, IBM

近藤 仁, 日本アイ・ビー・エム システムズ・エンジニアリング株式会社所属。
WebSphere DataPowerをはじめとするESB製品や、Webアプリケーション開発の技術支援に従事。



2011年 9月 14日

はじめに

2011年6月に、WebSphere Application Server V8.0のリリースと同時にそのアドオンパッケージであるFeature Pack for Web 2.0 and Mobile 1.1.0が公開されました。その目玉の1つがDojo Toolkit 1.7の機能を先行取り込みしたDojo Mobile (dojox.mobile)の提供です。
モバイル端末の利用がビジネスエリアでも大きく広がる中、アプリケーションとしては次々とリリースされる端末の動作差異に対応しながら、モバイル端末ならではの特徴を活かしたUIの実装が求められています。Dojo Mobileが提供する、クロスプラットフォームに対応したウィジェット(UI部品)やテーマ(UI部品のルック&フィール)により、モバイル向けに最適化されたWebアプリケーションをスピーディーに開発することができます。

この連載では、Feature Pack for Web 2.0 and Mobile 1.1.0に含まれるDojo Mobileの概要と使用方法を紹介します。第1回ではDojo Mobileにはじめて触れる方を対象に、以下の基本事項について説明します。

  • Dojo MobileおよびFeature Pack概要
  • Dojo Mobileの実行環境と開発環境
  • Dojo Mobile組み込み時のポイント

続く第2回では実際にサンプルアプリケーションの開発を行っていくなかで、以下のポイントについて解説します。

  • Dojo Mobileによるレイアウト
  • Dojo Mobileにおける各ウィジェットの動作と使い方
  • パッケージングと実行

モバイルWebアプリケーションとDojo Mobile

あなたは普段スマートフォンやタブレット上でスケジューラーなどのアプリケーションを利用していますか? これらのモバイル端末上で稼動するアプリケーションの形態としては、おおまかにOS上で直に稼動するネイティブ・アプリケーションとWebブラウザ上で稼動するWebアプリケーションに区分できます。それぞれの利点と欠点については既にdeveloperWorks上に優れた記事がありますので、そちらの記事をご参照頂くとして、Feature Pack for Web 2.0 and MobileおよびDojo MobileがスコープとするのはWebアプリケーションとしての提供形態である後者になります。
Dojo Mobileは、主としてiOSやAndroid、Black Berry OSなどで広く利用されるWebKitベースのブラウザを対象とした、多機能なウィジェットを提供するDojo Toolkitのライブラリ群の1つです。
Dojo Toolkitは、多様なUI部品やウィジェットを提供するのみならず、柔軟なイベント処理機構や国際化対応機能などにより、リッチなWebアプリケーションの開発を支援するオープンソースのJavaScriptライブラリ群です。Dojo Toolkitはコア・ライブラリ(Dojo)、ウィジェットライブラリ(Dijit)、拡張ライブラリ(DojoX)から構成されますが、Dojo Mobile (dojox.mobile)は、拡張ライブラリのDojoXの一部です。Dojo MobileはDojo Toolkit 1.5からパッケージに組み込まれ、その後のバージョンアップに伴い、新しいウィジェットが追加されるなど、進化を続けています。
従来のデスクトップ環境では、ふんだんにJavaScriptやFlash等の高機能UI部品を使うことでリッチなWebアプリケーションを構築することができます。一方、モバイル環境では、端末の限られたリソースと回線速度を考慮しなければなりません。このためできるだけモジュールを小さくし、画像を最適化し、非同期読み込み等による効率化を考える必要があります。Dojo Mobileでは、モバイル端末向けに設計、最適化されたウィジェットが用意されており、iOSやAndroid等のネイティブ・アプリケーションに類似したユーザビリティーを容易に実現することができます。また、他のモジュールに依存せず単体で稼動する軽量なモジュールと、画像ファイルを利用しないCSS3によるサイズの小さいUI部品により、モバイル端末の制約に適合したリッチな表現を実現できます。


Feature Pack for Web 2.0 and Mobileについて

WebSphere Application Serverでは、追加ライセンスなしに使用できる拡張モジュールとして、Javaバッチ機能を提供する Feature Pack for Java Batch やSIPを利用したコラボレーション機能を実現する Feature Pack for Communication Enabled Application など、様々な Feature Packを提供してきました。最新バージョンのWebSphere Application Server V8.0では、過去のFeature Packを標準機能として取り込んでおり、Feature Pack for Web 2.0 and MobileとFeature Pack for Dynamic Scriptingの2つをアドオンとして提供しています。

Feature Pack for Web 2.0 and Mobileは、従来はFeature Pack for Web 2.0 として提供されていましたが、Dojo MobileをはじめとするDojo Toolkitの最新モジュールをいち早く取り込み、またモバイルWebアプリケーションを開発するための様々な機能が追加されたことを受け、Feature Pack for Web 2.0 and Mobile という名称に変更されました。
Feature Pack for Web 2.0 and Mobileで提供されるDojo Toolkit はバージョン1.7の機能の一部を前倒しで取り込んだ独自バージョンであり、IBM の高機能GUIコンポーネント製品であるILOG Visualizationで培われたダイアグラム表示やグラフ表示を利用できるモジュールが追加提供されます。
さらに、Dojo Toolkitに加え、モバイルWebアプリケーションの構築をサポートする以下3つのRESTサービスが提供されます。

  • Analyticsサービス(appsvcs-analytics.ear):Dojoクライアントで生成されたイベントをサーバー側で記録するRESTサービスです。モバイルアプリケーション単体では実装困難なアクセス解析や監査等の目的で利用することができます。
  • Graphics Conversionサービス(appsvcs-graphics.ear):モバイル端末向けに画像のフォーマット変換、拡大/縮小を実施できるRESTサービスです。
  • Optimizerサービス(appsvcs-optimizer.ear):キャッシュや通信データ圧縮を利用してDojoモジュールの配信を最適化するRESTサービスです。

加えてFeature Pack for Web 2.0 and Mobileは既存のJava EE環境とDojo Toolkitにより実現されるリッチなWeb UIをつなぐアダプターの機能を提供します。これによりブラウザ上で稼動するWeb UIはRESTインターフェースを介して直接Java EE環境のリソースを利用することができます。


Dojo Mobileの実行環境

ここではDojo Mobileを実行するための環境とFeature Packに含まれるDojo Mobileの利用方法についてご紹介します。
Dojoの実行環境はDojo ToolkitがサポートするOS上のWebブラウザになります。(※) Dojoで提供される各機能を利用するには、Webブラウザでのページ表示時にDojo ToolkitのJavaScriptファイルにアクセスできることが前提となります。Dojo Mobileを利用される場合、必ずしもWebSphere Application ServerおよびFeature Packを導入する必要はありません。バージョンやビルドにより内容に差異はありますが、dojotoolkit.orgからDojo ToolkitをダウンロードのうえWebサーバーやアプリケーション内に配置するか、CDNで提供されるDojoのURIを指定することでDojo Mobileのウィジェットを利用することができます。
当記事ではFeature Packで提供されるDojo Toolkit 1.7ベースのDojo Mobileを前提とするため、Webアプリケーション自体にDojoを含める形でサンプルアプリケーションの解説を行います。

※ Feature Packに含まれるDojo Mobile 1.7の対応OSはiOS4.x、Android2.2/2.3/3.0、BlackBerry OS6となります。


Feature Pack for Web 2.0 and Mobileの導入

Feature PackはWebSphere Application Serverの導入後、以下の流れで導入・更新を行います。

  1. IBMの提供サイトより対象のWebSphere Application Server向けのパッケージ(zipファイル)をダウンロードし、任意のディレクトリに展開します。
  2. WebSphere Application Server V8.0の場合、IBM Installation Managerにより導入を行います。IBM Installation Managerの設定でリポジトリーの追加を行い、展開したzipのrepository.configを指定します。これによりIBM Installation ManagerのインストールアイコンよりFeature Pack for Web 2.0 and Mobileを選択して導入することができます。V7.0以前の場合はzipに含まれるインストーラから導入を行います。
  3. ご利用の前にIBM Installation Managerの更新アイコンから更新の有無を確認し、最新の修正モジュールを適用されることをお勧めします。

Feature Pack for Web 2.0 and Mobileの導入が完了すると、WebSphere Application Serverのインストールディレクトリ配下にweb2mobilefep_1.1という名称のディレクトリが生成されます。こちらのディレクトリにDojo Toolkit本体(ajax-rt_1.Xディレクトリ下)やサンプルアプリケーション(samplesディレクトリ下)、その他のFeature Pack提供機能を含むjarファイルなどが配置されています。
samplesディレクトリには、Dojo Mobileを利用する上で参考となるサンプルアプリケーション、Web 2.0 and Mobile Showcase Sample (showcase.ear)が含まれます。こちらのearファイルを管理コンソールから対象のアプリケーションサーバーに導入し、ブラウザから導入サーバーの /Web20MobileShowcaseにアクセスすると、Feature Packで提供される各機能の動作を確認することができます。
Dojo Mobileで提供される各ウィジェットについては、「Mobile Showcase」のアイコンをクリックすることでウィジェット一覧のページが表示されますので、そこで動作を確認することができます。また、ウィジェットの動作だけでなく、右上のSourceボタンからソースコードを表示することもできますので、実際にコーディングを行う際は参考にしてください。


Dojo Mobileの開発環境

Dojo Mobileの対象となるクライアントはモバイル端末に組み込まれているWebKitベースのモバイル・ブラウザです。デスクトップ環境で開発を行う際もWebKitベースのSafariやGoogle Chromeを利用するとベースとなるレンダリング・エンジンやJavaScriptエンジンを合わせることができます。また、開発時に無償で利用できる様々なデバッグツールが提供されます。
Google Chromeに含まれるChrome Developer Toolsは、FirefoxにおけるFirebugのようにWebブラウザ上で稼動するデバッグツールであり、Google Chrome上で以下のような機能を提供します。

  • ページ要素ライブ編集:ElementパネルにてDOMの要素ツリーベースで、適用されるCSSや関連付けされたJavaScriptイベント等を確認・編集できます。
  • JavaScriptデバッガー:Scriptパネルにて提供されるJavaScriptのデバッグツールで、条件指定付きの高機能なブレークポイントや変数値等の状況表示機能が提供されるコード・デバッガーです。第2回でご紹介するDojo Toolkitのパッケージング時にjsファイルの圧縮を行った場合も、ScriptパネルのPretty Print機能を利用することで、コードをわかりやすく可視化した上でのデバッグが可能です。
  • リソース使用監視:Profileパネルで提供されるCPUやメモリ利用量の監視ツールです。
  • 処理時間計測:Timelineパネルにて提供されるロード時間、レンダリング時間、外部リソース取得時間や処理実行時間を計測・表示するツールです。ページのボトルネック判定に役立ちます。
  • 外部リソース確認:Resourceパネルにて提供されるCookie、HTML5のストレージ機能、フレーム等のページ外のリソース状況を確認するための機能です。

一方で、サーバーサイドの開発までをカバーする統合開発環境としては、IBMから提供されるRational Application Developer V8.0.3よりDojo Mobile向けの開発機能が提供されます。2011年8月現在はベータ版となりますが、以下の各機能を利用し、Dojo Mobileを利用したWebアプリケーションの開発からシミュレーターを利用してのテスト、デバッグ、パッケージングまでを単一の開発ツールで実施することができます。

  • リッチページ・エディターでのDojo Mobileサポート:Dojo MobileのウィジェットをWYSIWYG方式のグラフィカルエディター上でドラッグ&ドロップ等の操作によりレイアウトすることができます。後述するメタタグやdojo.require宣言など必要なコードが一括生成されます。
  • Dojo Mobile 構文サポート:他のDojoモジュール同様にコンテンツ・アシストやプロパティー・エディターによるプロパティー値の変更ができます。APIを都度確認する手間を省き、品質の高いコーディング作業に貢献します。
  • モバイル・ブラウザー・シミュレーター:iPhoneやiPad、各Androidデバイス等、多様なモバイル端末のシミュレーターとして開発中のページの動作確認が行えます。複数デバイスのシミュレーター表示を並べて比較することもできます。
  • JSONエディター:AJAXによるデータ連携等で利用するJSONフォーマットファイルのフォーマッティングや構文サポートを行ってくれるエディターです。
  • CSS3 構文サポート:CSS3のコンテンツ・アシストや構文チェックを行ってくれます。

Rational Application Developerのような統合開発環境が入手できなくとも、Chrome Developer Toolsを利用することでJavaScriptロジックのステップバイステップのデバッグやAJAX利用時のリクエスト/レスポンスデータ確認など、有用な機能を使って開発効率を上げることができます。
一方でコーディング時のアシスト機能など細かな点まで手が届き、HTMLやJavaScript等のクライアントサイドでのコード開発だけでなく、サーバーサイドでの各種開発までまとめてサポートする統合開発環境は、多様なメンバーを含む大規模開発時などに特に有用です。


シミュレーターによるモバイルWebアプリケーション動作確認

モバイルWebアプリケーション開発においては、実際に対象クライアントとなるモバイルデバイスでどのようにレイアウトされるのか、動作するのかを逐次確認する必要があります。開発時に常時利用可能な対象端末を準備できない場合はデスクトップ環境で実行可能なシミュレーターを利用して動作確認を行うことができます。主要なシミュレーターとしてはオンライン上で利用できるものやインストールして使用できるものなど様々なタイプのものが提供されています。ここでは2011年8月現在入手可能な主だったシミュレーターをご紹介します。

  • Android Emulator:Android SDKに含まれるAndroid向けのシミュレーターで、AndroidのバージョンごとにSDカード等のディスクイメージやハードウェア・イベントのエミュレートなど多種の機能が提供されます。
  • iPhone / iPad Simulator:Apple社から提供されるiOS SDKに含まれるシミュレーターです。動作にはMac OS Xを前提とします。
  • TestiPhone:オンラインで提供されるiPhoneシミュレーターで、ポインティング・デバイスによりタッチスクリーンの動作をシミュレートすることができます。同様のオンライン・サービスでiPadをシミュレート可能なiPadPeek等があります。
  • Black Berry Simulators:RIM社より提供されるBlack Berry OSのバージョン別シミュレーターです。

いずれのツールを利用するにしても、シミュレーターと実際の端末での動作は若干異なることがありますし、タッチイベントの快適さなどのユーザビリティーを検証する上でも、最終的には対象の端末による動作確認の実施をお勧めします。


Dojo Mobileを利用したモバイルWebアプリケーション開発の流れ

次回以降のサンプルアプリケーション開発を行う前の事前知識として、Dojo Mobileを利用してWebアプリケーション開発を行う際の決まりごとを説明します。

DojoにおいてUIパーツを提供するDijit利用時とほぼ同様に以下のポイントに沿ってWebアプリケーションへの組み込みを行います。

  • 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">
            <!-- ② -->
            <script src="dojo-toolkit/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
            <!-- ③ -->
            <script>
                dojo.require("dojox.mobile");
                dojo.require("dojox.mobile.parser");
                dojo.require("dojox.mobile.compat");
                dojo.require("dojox.mobile.deviceTheme");
            </script>
        </head>

    ① 必要なメタタグの宣言: モバイル向けに特にviewportおよびapple-mobile-web-app-capable、apple-mobile-web-app-status-bar-style等のメタタグを指定することができます。viewportは表示領域や許可する拡大・縮小率の指定を行います。widthやheightにdevice-widthを指定することで各デバイスの表示領域に合わせて表示させることができます。
    apple-mobile-web-app-capableはiOS 2.1以降で有効になるApple独自のメタタグ指定で、contentをyesとすることでフルスクリーン表示を許可します。


    ② ロードするdojo.jsの指定: Dojo Toolkitにおいて全モジュールのベースとなるスクリプト、dojo.jsを指定します。


    ③ dojo.requireによる使用モジュールの宣言: 使用するモジュールを宣言します。特にDojo Mobileのウィジェットを組み込む場合は以下がポイントとなります。

    (ア) dojox.mobileおよびdojox.mobile.parserを宣言します。dojox.mobile.parserはモバイル向けの軽量パーサーで通常のパーサーに比べ格段にロード時間が短くなります。

    (イ) dojox.mobile.compatを指定することで各ウィジェットの表示にCSS3を利用し軽量化を図ることができます。CSS3に対応しないブラウザでも表示可能なようにするためには、以下のようにWebKitベースの場合のみcompatを利用するような宣言を行うことができます。
    dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");

    (ウ) deviceThemeはDojo Mobile 1.7より導入された機能で表示デバイスごとにネイティブに近いThemeを自動選択させることができます。deviceThemeを利用しない場合、以下のように個別指定を行います。

    <link rel="stylesheet" href="dojox/mobile/themes/iphone/iphone.css">

  • Dojo ウィジェット利用時の決まり事

    Dojoのウィジェットを組み込みする場合、宣言的呼出かプログラマティック呼出のいずれかの手法を用います。いずれの手法においても、ベースに含まれないウィジェットを利用する場合は、全て前述のdojo.requireで使用を宣言しておく必要があります。こちらの記事に詳細がありますので、これらの使い方をご存知でない方はご一読ください。

  • 宣言的呼出: HTML要素にdojoType属性を指定する形でウィジェットを配置します。
    <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>
  • プログラマティック呼出: JavaScriptコードでウィジェットを生成し、特定のHTML要素にバインドする形で配置します。
    var myView = new dojox.mobile.View({
        selected: true
    }, "myView");
    myView.startup();

※ 国際化対応モジュールのdojo.i18nはDojo Mobile向けに利用することができません。国際化対応が必要な場合サーバーサイドでの実装を考慮する必要があります。


まとめ

第1回では、Dojo MobileおよびFeature Pack for Web 2.0 and Mobile 1.1.0の概要からDojo Mobileで開発を行う上で前提となる実行環境や開発環境の話、そしてDojo MobileをWebアプリケーションに組み込むうえで押さえておくべきポイントまでご紹介しました。
次回は実際にDojo Mobileを利用したWebアプリケーションの開発を行う中でDojo Mobileで提供される様々なウィジェットを体験して頂きます。

参考文献

コメント

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=WebSphere
ArticleID=757241
ArticleTitle=Dojo Mobile はじめの一歩: 第1回:Hello, Dojo Mobile!
publish-date=09142011