テクてくLotus 技術者夜会
© 2010 IBM
Corporation
Lotus モバイルアプリケーション開発
dojox.mobileのご紹介
-2010/11/19
Yamato Software Development Lab
Lotus Technology Development
神山 淑朗
© 2010 IBM Corporation
dojox.mobile とは？
モバイルWebアプリケーションを開発するための
JavaScript
ウィジェット群
dojo-1.5に同梱（dojo 1.3, 1.4でも動作）
軽量な UI ウィジェットを提供
ネイティブデバイスへのアクセスは dojox.mobile のスコープ外
デバイスに特化、もしくはデバイスに依らないルック・アンド・フィールを持った
アプリケーションの開発を可能に
iPhone および Android 向けのテーマを提供
サーバーのテクノロジーには依存しない
HTML/JavaScript/CSSによる実装
dojox.mobile モジュール
dojox.mobile モジュールは dojo 1.5 に含まれている
dojo 1.5 のダウンロード
http://www.dojotoolkit.org/download/
SDK 版にはサンプルも含まれる
dojox/mobile/tests/index.html
dojo 1.3, 1.4 でも動作
dojo 1.5 モジュールから
以下のファイルをコピーして利用
dojox/mobile.js
dojox/mobile フォルダ
(mobile フォルダ以下すべて。
build フォルダは不要。）
dojox.mobile のサンプル
dojox.mobile の機能
ウィジェット
エッジトゥエッジ・リスト
角丸リスト
スイッチ
アイコン・コンテナ
タブ・コンテナ
ボタン
CSS3 機能を最大限活用して WebKit ベースのモバイルブラウザ向けに最適化
アニメーション, グラデーション, 角丸の長方形
CSS3 未対応の PC ブラウザもサポート
互換表示用モジュール
アニメーション
テーマ
プログレス・インジケータ
ブラウザの「戻る」・「進む」 ボタンのサポート
ビュー遷移の際にスクロールの位置をキープ
ビューのナビゲーションの基本構造
<body>
<View id=ViewA>
<View id=ViewB>
スライド
<Heading>ViewA</Heading>
<Heading moveTo="ViewA">ViewB</Heading>
<RoundRectList>
<ListItem moveTo=ViewB>Item 1</ListItem>
<ListItem moveTo=ViewC>Item 2</ListItem>
<ListItem moveTo=ViewD>Item 3</ListItem>
<RoundRectList>
<ListItem>Video</ListItem>
<ListItem>Maps</ListItem>
<ListItem>Phone</ListItem>
ウィジェットの軽量化
dojo モジュールへの依存を可能な限り排除
通常の dojo では必須となっているコア・モジュールでさえも一部非依存に （Templated,
Container, Contained, dojo.query や dojo.parser など）
イメージを使用しない
UI パーツは DOM と CSS3 で構成
アプリケーションのアイコンのみイメージを使用
CSSスプライトのサポート
HTTPリクエストの数を減らすために、アプリケーションの
アイコンイメージは１つのファイルに集約
webkitMobile ビルドオプションを利用可能 (PC ブラウザのサポートが不要な場合)
IE や Firefox 専用のコードをビルド時に除くことで、dojo のコードサイズを減らすことができ
る
モバイルアプリケーションにおけるパフォーマンスは非常に重要
• モバイルデバイスはデスクトップPCに比べると非力
• モバイルユーザーは急いでいる人、待ちきれない人が多い…
これらはイメージではない
dojox.mobile ウィジェット (iPhone テーマ)
ナビゲーションボタン
付き見出し
角丸 リスト
角丸 リスト
エッジトゥエッジ・リスト
(高さ可変)
タブ・コンテナ
アイコン・コンテナ
スイッチ
角丸矩形領域
dojox.mobile ウィジェット (Android テーマ)
クロスブラウザのサポート
CSS3をサポートしないブラウザ（例えばIEや旧バージョンのFirefox）向けに互換モジュ
ール（ dojox.mobile.compat）を提供することで、デスクトップ・ブラウザでも表示可能
互換モジュールはwebkitベースのブラウザではロードする必要なし。典型的な使い方
としては、次のようにdojo.requireIf()を使って条件に従ってロードする。
互換モジュールはサブクラスせずにメインモジュールのメソッドを直接上書きする方式
互換モジュールの手法：
ボタンやグラデーション等は画像で実現
アニメーションはdojo.fxを使用
dojo.require("dojox.mobile");
dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");
アニメーション
サポートしているビュー遷移時のアニメーション:
スライド, フリップ, フェード
Webkit ベースのブラウザ向けには:
アニメーションは CSS3 機能で実現
dojo.fx などの JavaScript ベースのアニメーションに比べてスムーズに動作
CSS3 未対応のブラウザ向けには:
アニメーションは dojo.fx (dojox.mobile.compat) で実現
事例：OpenNTF.org モバイルドキュメント
(*1)
• XPagesモバイルコントロール(*2)を使って作成されたDomino文書をモバイルデバイ
スで閲覧可能にするアプリケーション
• XPagesモバイルコントロールはdojox.mobileを使って表示画面を構築
*1 http://i.openntf.org
*2 http://mobilecontrols.openntf.org/
事例：Lotus Products Wikis
• Lotus製品に関する文書をモバイルデバイスで閲覧可能にするアプリケーション
• dojox.mobileを使っているが、スタイルを独自にカスタマイズしてデバイスに中立な
ルックアンドフィールを実現している。
事例：WebSphere CEA (Communications Enabled Applications)
サードパーティコールを使って電話をかけ、友人と画面を共有しながら
一緒に買い物をするデモ。
http://www.youtube.com/watch?v=XUds_2NCPrA
http://www.youtube.com/watch?v=HIp4S4zTzMk&NR=1
まとめ
dojox.mobileはモバイルWebアプリケーションを開発するときに利
用できるJavaScriptウィジェット群です。
ネイティブ・アプリケーションと遜色ない操作性とルックアンドフィ
ールを持つアプリケーションを実現できます。
CSSのスタイルにより、各デバイスで標準的なデザインに切り替
えることができます。
IEやFirefoxなどのデスクトップブラウザでも動作するので、モバ
イルデバイス以外からの利用や動作確認が可能です。
© IBM Corporation 2010. All Rights Reserved. ワークショップ、セッション、および資料は、IBMまたはセッション発表者によって準備され、それぞれ独自の見解を反映したものです。それらは情報提供の目的のみで提供されており、いかなる参加者に 対しても法律的またはその他の指導や助言を意図したものではなく、またそのような結果を生むものでもありません。本プレゼンeーションに含まれている情報については、完全性と正確性を帰するよう 努力しましたが、「現状のまま」提供され、明示または暗示にかかわらずいかなる保証も伴わないものとします。本プレゼンテーションまたはその他の資料の使用によって、あるいはその他の関連によっ て、いかなる損害が生じた場合も、IBMは責任を負わないものとします。 本プレゼンテーションに含まれている内容は、IBMまたはそのサプライヤーやライセンス交付者からいかなる保証または表明を引 きだすことを意図したものでも、IBMソフトウェアの使用を規定する適用ライセンス契約の条項を変更することを意図したものでもなく、またそのような結果を生むものでもありません。 本プレゼンテーションでIBM製品、プログラム、またはサービスに言及していても、IBMが営業活動を行っているすべての国でそれらが使用可能であることを暗示するものではありません。本プレゼンテ ーションで言及している製品リリース日付や製品機能は、市場機会またはその他の要因に基づいてIBM独自の決定権をもっていつでも変更できるものとし、いかなる方法においても将来の製品または 機能が使用可能になると確約することを意図したものではありません。本資料に含まれている内容は、参加者が開始する活動によって特定の販売、売上高の向上、またはその他の結果が生じると述 べる、または暗示することを意図したものでも、またそのような結果を生むものでもありません。 パフォーマンスは、管理された環境において標準的なIBMベンチマークを使用した測定と予測に基づいています。ユーザーが経験する実際のスループットやパフォーマンスは、ユーザーのジョブ・ストリ ームにおけるマルチプログラミングの量、入出力構成、ストレージ構成、および処理されるワークロードなどの考慮事項を含む、数多くの要因に応じて変化します。したがって、個々のユーザーがここで 述べられているものと同様の結果を得られると確約するものではありません。 記述されているすべてのお客様事例は、それらのお客様がどのようにIBM製品を使用したか、またそれらのお客様が達成した結果の実例として示されたものです。実際の環境コストおよびパフォーマン ス特性は、お客様ごとに異なる場合があります。 IBM、IBM ロゴ、ibm.com、[当該情報に関連し商標リスト中に掲載されたＩＢＭブランドがあれば追加する]、および[当該情報に関連し商標リスト中に掲載されたＩＢＭの製品名称があれば追加する] は、 世界の多くの国で登録されたInternational Business Machines Corporationの商標です。
他の製品名およびサービス名等は、それぞれIBMまたは各社の商標である場合があります。 現時点でのIBM の商標リストについては、www.ibm.com/legal/copytrade.shtmlをご覧ください。
Adobe, Adobeロゴ, PostScript, PostScriptロゴは、Adobe Systems Incorporatedの米国およびその他の国における登録商標または商標です。
IT Infrastructure Libraryは英国Office of Government Commerceの一部であるthe Central Computer and Telecommunications Agencyの登録商標です。
Intel, Intelロゴ, Intel Inside, Intel Insideロゴ, Intel Centrino, Intel Centrinoロゴ, Celeron, Intel Xeon, Intel SpeedStep, Itanium, Pentium は Intel Corporationまたは子会社の米国およびその他の国にお ける商標または登録商標です。
Linuxは、Linus Torvaldsの米国およびその他の国における登録商標です。
Microsoft, Windows, Windows NT および Windowsロゴは Microsoft Corporationの米国およびその他の国における商標です。 ITILは英国Office of Government Commerceの登録商標および共同体登録商標であって、米国特許商標庁にて登録されています。 UNIXはThe Open Groupの米国およびその他の国における登録商標です。
Cell Broadband Engineは、米国およびその他の国におけるSony Computer Entertainment, Inc.の商標であり、同社の許諾を受けて使用しています。 JavaおよびすべてのJava関連の商標およびロゴは Sun Microsystems, Inc.の米国およびその他の国における商標です。
他の会社名、製品名およびサービス名等はそれぞれ各社の商標。
