モバイル・アプリケーションpublic.dhe.ibm.com/software/dw/jp/websphere/was/was8_web20mo… · モバイル・デバイスとFeaturePack for Web 2.0 & Mobile モバイル・アプリケーションの種別

© 2011 IBM Corporation

モバイル・アプリケーション

2011年12月15日日本アイ・ビー・エム株式会社

Web2.0 and Mobile アプリケーションセミナー

日本アイ・ビー・エムシステムズ・エンジニアリング株式会社近藤仁（[email protected]）


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によるハイブリッド・モバイル・アプリケーション開発



3

モバイル・デバイスとFeaturePack for Web 2.0 & Mobile



4

WASエンタープライズ環境へのMobileチャネルの追加

FP forWeb2.0 & Mobile

Java EE

BPM

SOA

WebSphereが提供する既存基盤を利用するお客様に向け、標準技術を用いて我々のプラットフォームをモバイルデバイスへ拡げよう

- Greg Truty (モバイル,REST,Webサービスランタイムチーフアーキテクト)



5

モバイルのトレンド

モバイル

–日に36万台のiOSデバイス、30万台のAndroidデバイスがアクティベート

– 2013年までにはモバイルデバイスはPCの出荷台数を超過する

–コンシューマー利用だけでなく、ビジネスでの利用も増加

メリット

–いつもで必要な時に、必要な情報にアクセス可能

– PCよりも安価

– GPSやカメラなどの機能を標準で利用可能

モバイル採用時の考慮点

–マルチ・デバイス対応

–モバイルに適したアプリケーション

[source] http://www.m2ri.jp/newsreleases/main.php?id=010120101216500

出典：(株) ＭＭ総研 [ 東京・港 ]



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の対象



7

モバイル・デバイスとPCの違い

Webブラウザーが稼働共通項目

高速なCPUと大量メモリーCPU能力／メモリー・・・ PCよりも低スペック

GPS、カメラ、モーションセンサーなどが標準で搭載HW

LANや無線LAN無線LAN ・・・利用可能な場所が限られる

3G通信・・・通信速度が速くない、切断の可能性通信

マウスとキーボードタッチ操作・・・マウスの様にピンポイント指定は難しい

ソフトキーボード・・・入力効率が落ちる操作

10インチ以上で高解像度スマートフォン・・・ 4インチ程度で小さい

タブレット・・・ 6～10インチ程度でPCよりは少し小さい画面サイズ

PCモバイル・デバイス

モバイルには、画面サイズや操作性、データ通信量及びHW能力に制約がある

モバイル用アプリケーション



8

モバイル・アプリケーションの種別



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)

パフォーマンスパフォーマンス



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通知のみ同右



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



12

FeaturePack for Web 2.0 & MobileとDojoモバイル



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・ゲージ機能の拡張

その他機能



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



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で表現



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)



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・独自のモバイル用テーマ



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>



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の例)



20

Viewと表示画面遷移の関係①

<body>

<View id=ViewA>

<View id=ViewB>

<Heading>PageA</Heading>

<Heading moveTo="ViewA">PageB</Heading>

<RoundRectList>

<ListItem moveTo=ViewB>Item 1</ListItem>



<RoundRectList>

<ListItem>Video</ListItem>

<ListItem>Maps</ListItem>

<ListItem>Phone</ListItem>

ViewA

ViewB

–複数Viewを切り替えする形で複数ページを持つアプリケーションを実装

DEMO



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”> ・・略



22

【参考】 Dojoモバイル－画面遷移時のエフェクト

– ４つの標準的な画面遷移

• 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属性で遷移時のエフェクトを指定



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の例)



24

Dojoモバイル－その他のWidget

Switch

IconContainerとIconItem

ProgressIndicator

SpinWheelとDatePicker

OpenerOverlay

Button

Slider

CheckBox•フォーム部品

•表示

RadioButton

TextBox

TextArea

ToggleButton

ComboBox

ToolTipPageIndicator

Dojo Campusにて全てのWidgetを確認可能

•インジケーター

•アイコン

•表示領域

RoundRect

ホバー

オープン



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([対象ノード],[登録イベント],[関数])



26

その他機能 1/2

ビジネス・チャートの拡張

– Dojo Chart の全てのチャートをモバイル向

けに拡張、適化

– 小さな画面サイズに適合したテーマを提供

– タッチ操作サポート

– インタラクティブな説明

Geo Charting - dojox.geo.charting

– ベクター地図表示コンポーネント

•タッチ操作でズーム機能を実装

– Dojo data storeを利用し、地図の色分け

マッピングが可能に

– 地図要素のツールチップ表示

その他のDijit– ほとんどは”Just Work”レベルだがDialog, Rich Text Editorを除きモバイルデバイスに対応

DEMO



27

その他機能 2/2

ゲージ機能の拡張

– Dojo Gaugeをモバイル向け（Webkitモバ

イル）に拡張及び適化

– 新しいゲージスタイルを提供

– ゲージをタッチ操作可能

ILOG Dojo Diagrammer

– モバイル向けに拡張、適化

– ダイアグラムをタッチ操作可能に

– スペックに合わせて、グラフ・レイアウト処理の実行箇所を選択可能に

•クライアント（ブラウザ側）で実行

•サーバーで実行



28

モバイルWebアプリケーションの開発



29

モバイルWebアプリケーションの開発

2. テスト1. 開発

・エディターやRAD（Rational Application Developer）などによる開発

・実機、もしくはシミュレーターによるテスト・Chrome Developer Tools等でのデバッグ

開発環境の基本情報についてはリッチ・クライアントWebアプリケーションのセッション資料参照



30

Rational Application Developerでのモバイル向け開発機能

リッチページ・エディターWYSIWYGエディターで、ターゲット・

デバイスでの見え方を確認しながらコーディング

リッチページ・エディターdojox.mobileを含むDojo

ウィジェットをD&D

プロパティ・エディターフォーカスされた

ウィジェットの構成を確認、変更

リッチページ・エディターDojoを含むJavaScript、

HTML,CSSのコンテンツアシスト



31

モバイル・ブラウザ・シミュレーターデバイス・テストを可能にする

ブラウザー上でのシミュレーター

複数デバイスの配置や、回転（ローテーション）が可能

Rational Application Developerでのモバイル向け開発機能



32

http://maqetta.org/ (プレビュー版(2011/11現在))Dojo Toolkit をベースとしたオープンソースの開発ツール

ブラウザ上で動作し、開発クラウドとして利用可能

Dojo Mobileにも対応し、ブラウザ上のシミュレータや

Viewの切り替え機能

【参考】 Maqetta

パレットからドラッグ＆ドロップでdojox.mobileを含む

部品を挿入

モバイル・デバイスの画面イメージ

を確認しながら編集

アウトライン機能で複数のViewを

遷移可能

プロパティ・シートで表示や動作をカスタマイズ



33

IBM Mobile Technology PreviewとPhoneGap



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）

ネイティブ・アプリケーション



35

PhoneGap –JavaScript API

加速度計カメライメージ/ビデオ/オーディオ

キャプチャ

コンパス通信状態アドレス帳

デバイス情報ネイティブイベントファイルシステム

GPS オーディオ通知、ビープ音、バイブ

ストレージ(Web Storage準拠)

http://docs.phonegap.com/en/

未提供機能のAPIはプラグインを開発することで追加できる(ネイティブコード）

– 現状提供中のプラグイン-> https://github.com/phonegap/phonegap-plugins



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センサーの利用例(部分)



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



38

【参考】FP for Web2.0 & Mobile モバイル・アプリケーション・サービス

Analyticsサービス

・モバイル端末は、デバッグが難しい

・操作の記録を残したい

・クライアントのログをサーバーに記録

サンプル・アプリケーション・フィアルアップロード

・ディレクトリー情報表示

・DojoクライアントとRESTサービスのサンプ

ル・コードが欲しい

Graphics Conversionサービス・画像のフォーマット変換、拡大／縮小

・SVGファイルを表示できない

・画像のサイズが大きすぎる

Optimizerサービス・Dojoモジュールの配布を適化

・Dojoのロードを高速化したい

・受信するデータ量を減らしたい



39

【参考】モバイル・アプリケーション・サービス－ Analyticsサービス


Dojoクライアントで生成されたイベントを

サーバー側で記録するRESTサービス


ログ

イベント

dojox.analytics を使用してイベントを送信

・dojoクライアント・コード内で任意のタイミング、任意の内容で情報を送信可能

PC、モバイルで使用可能

appsvcs-analytics.ear

ログの出力先の設定

・web.xmlで指定

REST インターフェース

・イベント・リストの報告・/appsvcs-analytics/rest/analytics/logger・GET or POST



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からのみ変換可能

ファイル取得



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による通信データの圧縮



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サービスのサンプル



43

まとめ

FP for Web 2.0 & Mobile によりWebSphere基盤をモバイルWebアプリケーションの世界へ拡張

– Dojoモバイル

• ネイティブ・アプリケーションの様なUI• タッチ操作対応、軽量化などモバイルに適化

• モバイルをサポートするRESTサービス

• 多彩なサンプル・アプリケーション

IBM Technology Previewはハイブリッド・モバイル・アプリケーション構築のためのツール、ランタ

イムを提供

– PhoneGap• コードは従来のHTML+CSS+JavaScriptで• ネイティブ特有の機能が利用できる

• ネイティブアプリケーションとして公開



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/

Documents

モバイル・アプリケーションpublic.dhe.ibm.com/software/dw/jp/websphere/was/was8_web20mo… · モバイル・デバイスとFeaturePack for Web 2.0 & Mobile モバイル・アプリケーションの種別