© 2011 IBM Corporation
モバイル・アプリケーション
2011年12月15日日本アイ・ビー・エム株式会社
Web2.0 and Mobile アプリケーションセミナー
日本アイ・ビー・エム システムズ・エンジニアリング株式会社近藤 仁([email protected])
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
2
Agenda
モバイル・デバイスとFeaturePack for Web 2.0 & Mobileモバイル・アプリケーションの種別
FeaturePack for Web 2.0 & Mobile– Dojoモバイル
– モバイルWebアプリケーションの開発
IBM Mobile Technology Preview– PhoneGapによるハイブリッド・モバイル・アプリケーション開発
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
3
モバイル・デバイスとFeaturePack for Web 2.0 & Mobile
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
4
WASエンタープライズ環境へのMobileチャネルの追加
FP forWeb2.0 & Mobile
Java EE
BPM
SOA
WebSphereが提供する既存基盤を利用するお客様に向け、標準技術を用いて我々のプラットフォームをモバイルデバイスへ拡げよう
- Greg Truty (モバイル,REST,Webサービスランタイム チーフアーキテクト)
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
5
モバイルのトレンド
モバイル
–日に36万台のiOSデバイス、30万台のAndroidデバイスがアクティベート
– 2013年までにはモバイルデバイスはPCの出荷台数を超過する
–コンシューマー利用だけでなく、ビジネスでの利用も増加
メリット
–いつもで必要な時に、必要な情報にアクセス可能
– PCよりも安価
– GPSやカメラなどの機能を標準で利用可能
モバイル採用時の考慮点
–マルチ・デバイス対応
–モバイルに適したアプリケーション
[source] http://www.m2ri.jp/newsreleases/main.php?id=010120101216500
出典:(株) MM総研 [ 東京・港 ]
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
6
日本のモバイル・デバイスとFP for Web 2.0 & Mobile
ガラケー日本の今までの携帯電話
OS : 各端末独自OS
アプリケーション : i-modeなど各キャリア毎のコンテンツ
スマートフォンiPhoneのような高機能携帯電話
OS : iOS、Android、BlackBerry
アプリケーション : 各OS専用アプリケーション/Webブラウザー
タブレットiPadのようなスマートフォンより大きな画面を持った端末
OS : iOS、Android
アプリケーション : 各OS専用アプリケーション/Webブラウザー
FP for Web 2.0 & Mobileの対象外
FP for Web 2.0 & Mobileの対象
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
7
モバイル・デバイスとPCの違い
Webブラウザーが稼働共通項目
高速なCPUと大量メモリーCPU能力/メモリー ・・・ PCよりも低スペック
GPS、カメラ、モーションセンサーなどが標準で搭載HW
LANや無線LAN無線LAN ・・・ 利用可能な場所が限られる
3G通信 ・・・ 通信速度が速くない、切断の可能性通信
マウスとキーボードタッチ操作 ・・・ マウスの様にピンポイント指定は難しい
ソフトキーボード ・・・ 入力効率が落ちる操作
10インチ以上で高解像度スマートフォン ・・・ 4インチ程度で小さい
タブレット ・・・ 6~10インチ程度でPCよりは少し小さい画面サイズ
PCモバイル・デバイス
モバイルには、画面サイズや操作性、データ通信量及びHW能力に制約がある
モバイル用アプリケーション
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
8
モバイル・アプリケーションの種別
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
9
モバイル向けアプリケーションのタイプ
モバイルのWebブラウザーで実行モバイルのWebブラウザーで実行
ポータビリティポータビリティ((マルチデバイス対応マルチデバイス対応))
モバイル特有の表現、機能の利用モバイル特有の表現、機能の利用
AppStoreからダウンロード&導入AppStoreからダウンロード&導入
モバイル Webアプリケーション
モバイル専用のWebクライアント
(HTML、JavaScript)
モバイル Webアプリケーション
モバイル専用のWebクライアント
(HTML、JavaScript)
ハイブリッド・モバイル・アプリケーション
Web技術を活用した各モバイルでのみ稼働する
アプリケーション
ハイブリッド・モバイル・アプリケーション
Web技術を活用した各モバイルでのみ稼働する
アプリケーション
WAS Feature Pack for Web 2.0 & Mobile
WAS Feature Pack for Web 2.0 & Mobile
IBM MobileTechnology Preview
IBM MobileTechnology Preview
ネイティブ・モバイル・アプリケーション
各モバイル専用の開発方法で作成されたアプリ
ケーション
ネイティブ・モバイル・アプリケーション
各モバイル専用の開発方法で作成されたアプリ
ケーション
メンテナンスコストメンテナンスコスト(TCO)(TCO)
パフォーマンスパフォーマンス
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
10
ネイティブ・アプリとモバイルWebアプリでの開発方法比較
iOS Developer Programへの登録が必要(¥10,800/年)
Androidは端末の設定変更のみ
各SDKに付属
Apple Store経由、又はEnterprise Program加入
(Apple StoreはAppleの審査あり)
Android Market
XCode (Mac OS X)
Android SDK (Eclipse)
Objective-C
Java
iOS
Android OS
ネイティブ・モバイル
アプリ(iPhone / iPad ,Android)
モバイルWebアプリ
ハイブリッド・モバイル
アプリ
実行環境ブラウザ
(Safari/Chrome)各OS +
ハイブリッド・ランタイム
開発言語HTML / CSS / JavaScript
Dojo等のライブラリもHTML / CSS / JavaScript
Dojo等のライブラリも
開発環境 任意
XCode (Mac OS X)
Android SDK (Eclipse)
+ ハイブリッド・ツール
アプリ配布 不要 同右
エミュレーター PCのブラウザ 同右
実機テスト URL通知のみ 同右
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
11
【参考】 各タイプでの比較
NoneHighHighアプリのポータビリティー
HardModerateEasyアプリの更新
比較項目 Web ハイブリッド ネイティブ
開発方法の覚えやすさ Easy Easy Hard
パフォーマンス Slow Moderate Fast
対象デバイスに関する知識 None Some Lots
開発にかかる時間 Short Short Long
コンパイル/配置/実行のサイクル Short Short Long
各デバイス固有機能の利用可否 No Most All
導入用パッケージの作成 No Yes Yes
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
12
FeaturePack for Web 2.0 & MobileとDojoモバイル
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
13
FeaturePack for Web 2.0 & Mobileのモバイル機能
Dojoモバイル - dojox.mobileDojoでモバイル・アプリを作成する機能
モバイル・アプリケーション・サービス
モバイル・アプリからも利用できる各種RESTサービス
・Analytics サービス・Graphics Conversion サービス・Optimizer サービスなど
Web 2.0 and Mobile Showcase サンプル
Web 2.0 & Mobile FPの新機能サンプル・アプリコードも参照可能
ILOG Dojo Diagrammerのモバイル対応
Dojo のWidgetのモバイル対応・ビジネス・チャートの拡張・Geo Charting・ゲージ機能の拡張
その他機能
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
14
Dojoモバイル - dojox.mobile
Dojoモバイル - dojox.mobile
–モバイルWebアプリケーションに 適化されたUIや機能を提供
• タッチ操作が可能なUIを提供
• テーマ(CSSの集合)の提供によりネイティブの様なUIを作成可能
• テーマの切り替えによるクロスプラットフォーム対応
–サーバーの機能を使用せずに、クライアントのDojoだけで実現
– Dojo 1.5から採用
• Dojo 1.6、Dojo 1.7で機能拡張
–対応モバイルOS (Dojo 1.7)• iOS(iPhone&iPad) 4.x• Android 2.2、2.3、3.0• BlackBerry 6
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
15
Dojoモバイル - 特徴
可能な限りdojoのモジュールとの依存性を排除– 小限のモジュール構成
イメージ(画像)を使用せず軽量化– UIパーツはCSS3を利用して描画– イメージの利用も可能:CSS spriteをサポート
• アプリケーション・アイコン・イメージを1つのまとめてHTTPリクエストを削減
モバイル専用 : 小限のパーサー– dojox.mobile.parser は、たった80行で構成されている
オプション:デスクトップブラウザー(CSS3に対応しないブラウザー)向けの互換性も提供– dojox.mobile.compat– イメージの利用、アニメーションにはdojo.fxの利用
Dojo Build Systemにおけるモバイル専用オプション (PCのブラウザーで表示が必要ない場合)– ビルド時にwebkitMobile=trueを指定することでビルド後のdojo coreのサイズを削減
軽量でモバイルに適したWidgetパフォーマンスはとても重要である
・モバイルデバイスは、PCほど処理能力が高くない
イメージではなく、CSSで表現
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
16
Dojoモバイル - 典型的な利用方法
モバイル・デバイス向け表示指定 –viewport指定による表示領域のスケーリング
モバイル専用の軽量パーサーを読み込む –dojox.mobile.parserのロード
モバイル用のテーマ選択機能 – 実行デバイス向けテーマを自動選択<head>
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="dojo.js" data-dojo-config="parseOnLoad: true"></script>
<script>
dojo.require("dojox.mobile.parser");
dojo.require("dojox.mobile");
dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");
dojo.require("dojox.mobile.deviceTheme");
</script>
</head>
モバイル・デバイスでの表示指定
モバイル用の表示テーマ選択機能
モバイル専用のパーサー
およびモジュール指定
非WebKitブラウザでの表示対応
require([ "dojox/mobile/parser",
"dojox/mobile",
"dojox/mobile/deviceTheme" ],function(parser,mobile){//Optional});
Dojo1.7から可能な非同期ロード方式(AMD)
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
17
Dojoモバイル - モバイル用テーマ
各モバイルでネイティブ・アプリの様な見た目を提供
テーマの切り替えだけで、ルックアンドフィールを一括変換
<link rel="stylesheet" type="text/css" href="dojox/mobile/themes/iphone/iphone.css"></link>実行デバイスによる自動判断も可(Dojo 1.7での新機能)
• dojox.mobile.deviceThemeをロード
iPhonedojox/mobile/themes/iphone/iphone.css
iPaddojox/mobile/themes/iphone/ipad.css
Androiddojox/mobile/themes/android/android.css
Blackberrydojox/mobile/themes/blackberry/blackberry.css
Customdojox/mobile/themes/custom/custom.css・独自のモバイル用テーマ
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
18
Dojoモバイル - View
モバイルで使用するレイアウト・コンポーネント
–表示されるページのベースとなり、他のWidgetやタグを配置するコンテナー
View・基本となるViewコンポーネント・画面全体がタッチ・スクロール
<div data-dojo-type="dojox.mobile.View" >
<!-- コンテンツ -->
</div>
ScrollableView・タッチ・スクロールしないヘッダー、
フッターを含めることができるView
ヘッダー
<div data-dojo-type=
"dojox.mobile.ScrollableView“
><!-- コンテンツ --></div>
SwapView・タッチ操作で左右画面を移動可能なView
・Dojo 1.6までのFlippableView
<div data-dojo-type=
"dojox.mobile.SwapView"
><!-- コンテンツ --></div>
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
19
Dojoモバイル - View間の遷移をナビゲートするWidget
Heading・画面上部に表示するナビゲーションバー(ヘッダー)
<h1 data-dojo-type=“dojox.mobile.Heading” label=“My App”
back=“Back” moveTo=“ViewID”><!-- ボタン等の配置 -->
</h1>
RoundRectCategoryとRoundRectList・アイテムのリスト表示(角丸のリストバー)
<h2 data-dojo-type=“dojox.mobile.RoundRectCategory”>List Heading</h2><ul data-dojo-type=“dojox.mobile.RoundRectList”>
<li data-dojo-type=“dojox.mobile.ListItem” moveTo=“ViewA”> >List Item 1</li><--! 略 -->
</ul>
ListItem
RoundRectListRoundRectCategory
TabBar・タブ形式のナビゲーションバー
EdgeToEdgeCategoryとEdgeToEdgeList・アイテムのリスト表示(画面幅一杯のリストバー)
<ul id="tab" data-dojo-type="dojox.mobile.TabBar"
fixed="top“>
<li data-dojo-type="dojox.mobile.TabBarButton"
icon1="images/tab-icon-1.png" moveTo=“ViewID"/></ul>
ListItem
EdgeToEdgeListEdgeToEdgeCategory
moveTo属性で遷移先のViewのIDを指定
(RoundRectの例)
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
20
Viewと表示画面遷移の関係①
<body>
<View id=ViewA>
<View id=ViewB>
<Heading>PageA</Heading>
<Heading moveTo="ViewA">PageB</Heading>
<RoundRectList>
<ListItem moveTo=ViewB>Item 1</ListItem>
<ListItem moveTo=ViewB>Item 2</ListItem>
<ListItem moveTo=ViewB>Item 3</ListItem>
<RoundRectList>
<ListItem>Video</ListItem>
<ListItem>Maps</ListItem>
<ListItem>Phone</ListItem>
ViewA
ViewB
–複数Viewを切り替えする形で複数ページを持つアプリケーションを実装
DEMO
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
21
Viewと表示画面遷移の関係②
–別HTMLに配置したViewへの遷移
–Viewのネストによるグルーピング
DojoのOO記法と組合わせモジュール化
促進
policyView.html
policy group
policy List View
policy Detail View
policy Coverage View
claimView.html
claims group
claims List View
claims Detail View
billingView.html
billing group
bill pay View
view bill View
mobile.html:Main View<li data-dojo-type="dojox.mobile.ListItem" url=“views/policyView.html">
<div data-dojo-type="dojox.mobile.View" id="policyRoot"><div id=“policyList” data-dojo-type=
“dojox.mobile.ScrollableView” selected=“true”> ・・略
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
22
【参考】 Dojoモバイル - 画面遷移時のエフェクト
– 4つの標準的な画面遷移
• Slide• Slide (Reverse)• Flip• Fade
– 16の新しい拡張画面遷移
・Dissolve・Flip2・Cover・Cover (Reverse)・Reveal・Reveal (Reverse)・Slide Vertical・Slide Vertical (Reverse)
・Cover Vertical・Cover Vertical (Reverse)・Swirl・Swirl (Reverse)・Zoom Out・Zoom In・Scale Out・Scale In
transition属性で遷移時のエフェクトを指定
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
23
Dojoモバイル - データストアとの連携
RoundRectDataList/ EdgeToEdgeDataList・データストアの内容をリストで表示
・moveTo等の属性をデータストアで指定
要求
データ・ソース・ファイル
- JSON- XML- CSV
・Webサービス などデータ・ストアデータを読み込むJavaScriptオブジェクト
dojo.data APIvar store = new dojo.data.ItemFileWriteStore({url: “MyStore.json"});
Dojo coreのデータストアと連携したWidget
Carousel
<div id="car" data-dojo-type="dojox.mobile.Carousel"
store="store“ title=“Photo Gallery"></div>
•複数ページのアルバム表示
•データストアで画像指定も可
スワイプ
<ul data-dojo-type="dojox.mobile.RoundRectDataList"
id="list" store="store">
(RoundRectの例)
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
24
Dojoモバイル - その他のWidget
Switch
IconContainerとIconItem
ProgressIndicator
SpinWheelとDatePicker
OpenerOverlay
Button
Slider
CheckBox•フォーム部品
•表示
RadioButton
TextBox
TextArea
ToggleButton
ComboBox
ToolTipPageIndicator
Dojo Campusにて全てのWidgetを確認可能
•インジケーター
•アイコン
•表示領域
RoundRect
ホバー
オープン
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
25
25
モバイル端末特有のイベント –dojo.touch
Simple Example:<script type="text/javascript">
define(["dojo/on", "dojo/touch"], function(on, touch){
on(node, touch.press, function(e){});
on(node, touch.move, function(e){});
on(node, touch.release, function(e){});
on(node, touch.cancel, function(e){});
}
</script>
デバイス非依存のモバイル端末特有なイベントを提供:"press | move | release | cancel" タッチデバイスではW3C Touch Events Specificationに準拠:"touchstart | touchmove | touchend | touchcancel" 非タッチデバイスではマウスイベントに関連付け:"mousedown | mousemove | mouseup | mouseleave“dojox.gestureではタップやスワイプ動作、表示面のローテートなどのイベントを実装(Experimental)
注:dojo.onはイベントとリスナファンクションを関連付けする関数
-> dojo.on([対象ノード],[登録イベント],[関数])
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
26
その他機能 1/2
ビジネス・チャートの拡張
– Dojo Chart の全てのチャートをモバイル向
けに拡張、 適化
– 小さな画面サイズに適合したテーマを提供
– タッチ操作サポート
– インタラクティブな説明
Geo Charting - dojox.geo.charting
– ベクター地図表示コンポーネント
•タッチ操作でズーム機能を実装
– Dojo data storeを利用し、地図の色分け
マッピングが可能に
– 地図要素のツールチップ表示
その他のDijit– ほとんどは”Just Work”レベルだがDialog, Rich Text Editorを除きモバイルデバイスに対応
DEMO
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
27
その他機能 2/2
ゲージ機能の拡張
– Dojo Gaugeをモバイル向け(Webkitモバ
イル)に拡張及び 適化
– 新しいゲージスタイルを提供
– ゲージをタッチ操作可能
ILOG Dojo Diagrammer
– モバイル向けに拡張、 適化
– ダイアグラムをタッチ操作可能に
– スペックに合わせて、グラフ・レイアウト処理の実行箇所を選択可能に
•クライアント(ブラウザ側)で実行
•サーバーで実行
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
28
モバイルWebアプリケーションの開発
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
29
モバイルWebアプリケーションの開発
2. テスト1. 開発
・エディターやRAD(Rational Application Developer)などによる開発
・実機、もしくはシミュレーターによるテスト・Chrome Developer Tools等でのデバッグ
開発環境の基本情報についてはリッチ・クライアントWebアプリケーションのセッション資料参照
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
30
Rational Application Developerでのモバイル向け開発機能
リッチページ・エディターWYSIWYGエディターで、ターゲット・
デバイスでの見え方を確認しながらコーディング
リッチページ・エディターdojox.mobileを含むDojo
ウィジェットをD&D
プロパティ・エディターフォーカスされた
ウィジェットの構成を確認、変更
リッチページ・エディターDojoを含むJavaScript、
HTML,CSSのコンテンツアシスト
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
31
モバイル・ブラウザ・シミュレーターデバイス・テストを可能にする
ブラウザー上でのシミュレーター
複数デバイスの配置や、回転(ローテーション)が可能
Rational Application Developerでのモバイル向け開発機能
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
32
http://maqetta.org/ (プレビュー版(2011/11現在))Dojo Toolkit をベースとしたオープンソースの開発ツール
ブラウザ上で動作し、開発クラウドとして利用可能
Dojo Mobileにも対応し、ブラウザ上のシミュレータや
Viewの切り替え機能
【参考】 Maqetta
パレットからドラッグ&ドロップでdojox.mobileを含む
部品を挿入
モバイル・デバイスの画面イメージ
を確認しながら編集
アウトライン機能で複数のViewを
遷移可能
プロパティ・シートで表示や動作をカスタマイズ
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
33
IBM Mobile Technology PreviewとPhoneGap
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
34
PhoneGapによるハイブリッド・モバイル・アプリケーション開発
– Apache Incubator Callback Project として受諾・管理されるオープンソース・ソフトウェア
• IBM Mobile Technology Previewにバージョン1.0が同梱
• iOS,Android,BlackBerry OS,WebOS,WindowsPhone,Symbian,Badaサポート
– Webアプリケーションをネイティブ・アプリケーションとして稼働させるためのランタイム
• 単一のコードで複数のデバイスに対応可能
• dojox.mobile等のJavascriptライブラリとの連携もOK• PhoneGapのAPIにより、デバイス特有の機能も利用可能(加速度計、GPS、カメラ・・)• Webアプリより高パフォーマンスに
• コンテンツはネイティブアプリとしてパッケージしても、Web経由でダウンロードさせてもよい
PhoneGapランタイム
Webアプリケーション(HTML、CSS、Dojo)
ネイティブ・アプリケーション
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
35
PhoneGap –JavaScript API
加速度計 カメライメージ/ビデオ/オーディオ
キャプチャ
コンパス 通信状態 アドレス帳
デバイス情報 ネイティブイベント ファイルシステム
GPS オーディオ 通知、ビープ音、バイブ
ストレージ(Web Storage準拠)
http://docs.phonegap.com/en/
未提供機能のAPIはプラグインを開発することで追加できる(ネイティブコード)
– 現状提供中のプラグイン-> https://github.com/phonegap/phonegap-plugins
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
36
PhoneGap
1. 開発
・HTML、CSS、JavaScriptでWebアプリケーションを作成
・phonegap.jsをインクルード
-デバイス特有の機能をPhoneGapのAPI経由で利用できるように
・devicereadyイベントを登録
-PhonGap JavaScript APIが利用可能な状態になると発行
・PhoneGap JavaScript APIは非同期実行
-コールバック関数を登録
<head><script type="text/javascript" src="phonegap.js"></script><script type="text/javascript">
// onload時にdevicereadyイベントの登録function loader() {
document.addEventListener('deviceready',run,false);}// deviceready時にコールバック関数を登録function run() // GPSセンサー:position.coordsは経緯度、方向などの情報保持
var win = function(position) {var coords = position.coords;// GoogleMapデータの取得var url = http://maps.google.com/maps/api/staticmap?center=
+ coords.latitude + "," + coords.longitude + "&zoom=13&size=320x480&maptype=roadmap&key=MyGoogleMapsAPIKey&sensor=true";
document.getElementById('map').setAttribute('src',url);};var fail = function(e) {
alert('Can¥'t retrieve position.¥nError: ' + e);};navigator.geolocation.getCurrentPosition(win, fail);
} </script>
</head><body onload="loader();">:
GPSセンサーの利用例(部分)
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
37
PhoneGap –ネイティブ化、公開
2. ネイティブ化・ターゲットの端末に合わせてPhoneGapでビルド・ターゲット端末の開発環境が必要
- iOSの場合なら、XCode (Mac OS X)が必要
-以下はAndroidの例:Eclipse + Android SDK
PhoneGapで提供されるjsおよびjarファイルを配置
assets/wwwにWebリソースを配置
DroidGapを継承、
onCreateで配置した起点htmlをロード
Androidエミュレータでのテスト
3. 公開・各ネイティブ・アプリケーションの公開方式で公開
エクスポート
パッケージング
DEMO
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
38
【参考】FP for Web2.0 & Mobile モバイル・アプリケーション・サービス
Analyticsサービス
・モバイル端末は、デバッグが難しい
・操作の記録を残したい
・クライアントのログをサーバーに記録
サンプル・アプリケーション・フィアルアップロード
・ディレクトリー情報表示
・DojoクライアントとRESTサービスのサンプ
ル・コードが欲しい
Graphics Conversionサービス・画像のフォーマット変換、拡大/縮小
・SVGファイルを表示できない
・画像のサイズが大きすぎる
Optimizerサービス・Dojoモジュールの配布を 適化
・Dojoのロードを高速化したい
・受信するデータ量を減らしたい
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
39
【参考】モバイル・アプリケーション・サービス - Analyticsサービス
Analyticsサービス
Dojoクライアントで生成されたイベントを
サーバー側で記録するRESTサービス
Analyticsサービス
ログ
イベント
dojox.analytics を使用してイベントを送信
・dojoクライアント・コード内で任意のタイミング、任意の内容で情報を送信可能
PC、モバイルで使用可能
appsvcs-analytics.ear
ログの出力先の設定
・web.xmlで指定
REST インターフェース
・イベント・リストの報告・/appsvcs-analytics/rest/analytics/logger・GET or POST
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
40
【参考】モバイル・アプリケーション・サービス - Graphics Conversion サービス
Graphics Conversion サービスPC、モバイルで使用可能
appsvcs-graphics.ear画像のフォーマット変換、
拡大/縮小を行うRESTサービス
Graphics Conversionサービス
フォーマット変換拡大/縮小
既存画像ファイル
新規画像ファイル
画像のURLと変換指定
新規画像のURLもしくは、画像データ
作業用ディレクトリの設定・web.xmlで指定
REST インターフェース・画像の変換・/appsvcs-graphics/rest/graphics/convert/binaryResponse・/appsvcs-graphics/rest/graphics/convert/urlResponse・GET
変換元フォーマットGIF、JPEG、PNG、SVG
変換後フォーマットGIF、JPEG、PNG、SVG、(GFX、PDF、TIFF)*
* SVGからのみ変換可能
ファイル取得
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
41
【参考】モバイル・アプリケーション・サービス - Optimizer サービス
Optimizer サービスPC、モバイルで使用可能
appsvcs-optimizer.earDojoのモジュールを 適化して
配信を行うRESTサービス
Dojoの 適化された配信
Optimizerサービス
適化Dojo モジュール
Optimizerサービス経由でDojoを読み込む
・/appsvcs-optimizer/rest/optimizer/dojo/dojo.js
各種指定を設定・Dojoのディレクトリー、キュッシュ機関などを設定・web.xmlで指定
・HTTPキャッシング・webkitMobileオプションを指定したモジュールの使用・gzipによる通信データの圧縮
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
42
【参考】モバイル・アプリケーション・サービス - サンプル
File Uploaderサンプル・アプリケーション Directory Listing サンプル・アプリケーション
サンプル・アプリケーションは、コード実装のサンプルです。実動サーバーでの稼働を目的としていません。
Fileアップロードを受け付けるRESTサービスのサンプル
File Upload
PC、モバイルで使用可能appsvcs-fileuploader.ear
multipart/form-data エンコード
dojox.form.Uploaderによるクライアント・サンプル
multipart/form-dataによる複数ファイル送信を受け付けるRESTサービスのサンプル
dojox.data.FileStore を利用したサンプル
PC、モバイルで使用可能appsvcs-directorylisting.ear
Directory Listing
dojox.data.FileStoreを利用して、ディレクトリー情報を取得/表示するサンプル
ディレクトリー情報要求を受け付け、返すRESTサービスのサンプル
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
43
まとめ
FP for Web 2.0 & Mobile によりWebSphere基盤をモバイルWebアプリケーションの世界へ拡張
– Dojoモバイル
• ネイティブ・アプリケーションの様なUI• タッチ操作対応、軽量化などモバイルに 適化
• モバイルをサポートするRESTサービス
• 多彩なサンプル・アプリケーション
IBM Technology Previewはハイブリッド・モバイル・アプリケーション構築のためのツール、ランタ
イムを提供
– PhoneGap• コードは従来のHTML+CSS+JavaScriptで• ネイティブ特有の機能が利用できる
• ネイティブアプリケーションとして公開
© 2011 IBM Corporation
IBM Proposal Template – Value Driven Proposals
44
関連リンク集
WAS Feature Pack for Web 2.0 and Mobile 製品サイト– http://www-01.ibm.com/software/webservers/appserv/was/featurepacks/web20-mobile/
WAS Feature Pack for Web 2.0 and Mobile Infocenter– http://publib.boulder.ibm.com/infocenter/wasinfo/v8r0/index.jsp?topic=/com.ibm.websphere.web20fepmobile.multiplatform.doc/info/ae/ae/welco
me_fepweb.html
IBM Mobile Technology Preview– http://www-01.ibm.com/software/webservers/appserv/was/featurepacks/web20-mobile/
The Dojo Toolkit 公式サイト– http://dojotoolkit.org/
DojoCampus– http://docs.dojocampus.org/
WebSphere ライブ 「Dojo Mobileを用いたWAS上のスマートフォン用Webアプリケーション」– http://www-06.ibm.com/software/jp/websphere/events/livestream/was_ondemand.html#sec7
developerWorks記事 「Dojo Mobile 1.7 の紹介」– http://www.ibm.com/developerworks/jp/web/library/wa-getstarteddojo/
developerWorks記事 「Dojo Mobile はじめの一歩」– http://www.ibm.com/developerworks/jp/websphere/library/was/was8_dojomobile/1.html
WebSphere Application Server V8 アナウンスメント・ワークショップ資料– http://www.ibm.com/developerworks/jp/websphere/library/was/was8_ws/
Dojo道場– http://codezine.jp/article/corner/397
PhoneGap– http://phonegap.com/