テクてくLotus 技術者夜会 Lotus モバイルアプリケーション開発 - dojox.mobileのご紹介 2010/11/19 Yamato Software Development Lab Lotus Technology Development 神山 淑朗 2010 IBM Corporation
dojox.mobile とは モバイルWebアプリケーションを開発するためのJavaScriptウィジェット群 軽量な UI ウィジェットを提供 ネイティブデバイスへのアクセスは dojox.mobile のスコープ外 デバイスに特化 もしくはデバイスに依らないルック アンド フィールを持った アプリケーションの開発を可能に dojo-1.5に同梱 dojo 1.3, 1.4でも動作 iphone および Android 向けのテーマを提供 サーバーのテクノロジーには依存しない HTML/JavaScript/CSSによる実装 2010 IBM Corporation
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> <Heading>ViewA</Heading> <RoundRectList> <ListItem moveto=viewb>item 1</ListItem> <ListItem moveto=viewc>item 2</ListItem> <ListItem moveto=viewd>item 3</ListItem> <View id=viewb> <Heading moveto="viewa">viewb</heading> <RoundRectList> <ListItem>Video</ListItem> <ListItem>Maps</ListItem> <ListItem>Phone</ListItem> スライド
ウィジェットの軽量化 モバイルアプリケーションにおけるパフォーマンスは非常に重要 モバイルデバイスはデスクトップPCに比べると非力 モバイルユーザーは急いでいる人 待ちきれない人が多い dojo モジュールへの依存を可能な限り排除 イメージを使用しない UI パーツは DOM と CSS3 で構成 アプリケーションのアイコンのみイメージを使用 CSSスプライトのサポート 通常の dojo では必須となっているコア モジュールでさえも一部非依存に Templated, Container, Contained, dojo.query や dojo.parser など HTTPリクエストの数を減らすために アプリケーションの アイコンイメージは１つのファイルに集約 これらはイメージではない webkitmobile ビルドオプションを利用可能 (PC ブラウザのサポートが不要な場合) IE や Firefox 専用のコードをビルド時に除くことで dojo のコードサイズを減らすことができ る
dojox.mobile ウィジェット (iphone テーマ) ナビゲーションボタン 付き見出し タブ コンテナ 角丸 リスト アイコン コンテナ エッジトゥエッジ リスト 角丸 リスト (高さ可変) スイッチ 角丸矩形領域
dojox.mobile ウィジェット (Android テーマ) エッジトゥエッジ リスト ボタン付きリスト タブ コンテナ タブ内のエッジトゥエッジ リスト
クロスブラウザのサポート CSS3をサポートしないブラウザ 例えばIEや旧バージョンのFirefox 向けに互換モジュ ール dojox.mobile.compat を提供することで デスクトップ ブラウザでも表示可能 互換モジュールはwebkitベースのブラウザではロードする必要なし 典型的な使い方 としては 次のようにdojo.requireIf()を使って条件に従ってロードする dojo.require("dojox.mobile"); dojo.requireif(!dojo.iswebkit, "dojox.mobile.compat"); 互換モジュールはサブクラスせずにメインモジュールのメソッドを直接上書きする方式 互換モジュールの手法 ボタンやグラデーション等は画像で実現 アニメーションはdojo.fxを使用
アニメーション サポートしているビュー遷移時のアニメーション: 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を使っているが スタイルを独自にカスタマイズしてデバイスに中立な ルックアンドフィールを実現している http://www-10.lotus.com/ldd/mowiki.nsf/startpage.xsp
事例 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.の米国およびその他の国における商標です 他の会社名 製品名およびサービス名等はそれぞれ各社の商標 2010 IBM Corporation