20111031 mobileweb at tdc

© 2011 IBM Corporation

®

iPhone/iPad/AndroidiPhone/iPad/Android 対応対応WebWeb アプリケーション勉強会（実践アプリケーション勉強会（実践編）編）@@ 東北デベロッパーズコミュニティ東北デベロッパーズコミュニティ 2011 年 10 月 31 日

日本アイビーエム株式会社･･須江信洋 ([email protected])


2

目次

モバイル・アプリケーションのアーキテクチャ考察モバイル Web アプリケーションツールキット : Dojo mobileWebSphere Application Server のモバイル対応モバイル Web アプリケーション開発の実践PhoneGap によるハイブリッド・アプリケーション


3

モバイル・アプリケーションのアーキテクチャ考察


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

モバイル・デバイス PC

画面サイズ

スマートフォン・・・ 4 インチ程度で小さいタブレット・・・ 6 ～ 10 インチ程度で PC よりは少し小さい

10 インチ以上で高解像度

操作タッチ操作・・・マウスの様にピンポイント指定は難しいソフトキーボード・・・入力効率が落ちる

マウスとキーボード

通信無線 LAN ・・・利用可能な場所が限られる3G 通信・・・通信速度が速くない

LAN や無線 LAN

HWCPU 能力／メモリー・・・ PC よりも低スペックGPS 、カメラ、モーションセンサーなどが標準で搭載

高速な CPU と大量メモリー

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

4

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

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


モバイル向けアプリケーションのタイプ

5

モバイルの Web ブラウザーで実行モバイルの Web ブラウザーで実行

Maintenance Cost (TCO)Maintenance Cost (TCO)

Portability (cross-device reuse)Portability (cross-device reuse)

Richness of Mobile Presentation / ServicesRichness of Mobile Presentation / Services

Webアプリケーション

デスクトップとモバイル共用の Web クライアント（ HTML 、 JavaScript ）

デバイス特有の機能が利用できない制限がある

Webアプリケーション

デスクトップとモバイル共用の Web クライアント（ HTML 、 JavaScript ）

デバイス特有の機能が利用できない制限がある

AppStore からダウンロード＆導入AppStore からダウンロード＆導入

ネイティブ・モバイル・アプリケー

ション

各モバイル専用のアプリケーション開発方法で作成されたモバイル・アプリ

ケーション

各モバイル向けの表現、特有の機能が利用可能。

高パフォーマンス

ネイティブ・モバイル・アプリケー

ション

各モバイル専用のアプリケーション開発方法で作成されたモバイル・アプリ

ケーション

各モバイル向けの表現、特有の機能が利用可能。

高パフォーマンス

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

モバイル専用の Webクライアント

（ HTML5 、 JavaScript ）

オフラインでも使用できる

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

モバイル専用の Webクライアント

（ HTML5 、 JavaScript ）

オフラインでも使用できる

ハイブリッド・モバイル・アプリ

ケーション

Web 技術（ HTML5 、 JavaScript ）を活用した各モバイルでのみ稼働するアプリケーショ

ン

デバイス特有の機能も利用可能

ハイブリッド・モバイル・アプリ

ケーション

Web 技術（ HTML5 、 JavaScript ）を活用した各モバイルでのみ稼働するアプリケーショ

ン

デバイス特有の機能も利用可能

WAS Feature Pack for Web 2.0 & Mobile

WAS Feature Pack for Web 2.0 & Mobile


【参考】各タイプでの比較

比較項目 Webハイブリッ

ドネイティ

ブ

開発方法の覚えやすさ Easy Easy Hard

パフォーマンス Slow Moderate Fast

対象デバイスに関する知識 None Some Lots

開発にかかる時間 Short Short Long

コンパイル／配置／実行のサイクル Short Short Long

アプリのポータビリティー High High None

各デバイス固有の機能 No Most All

導入用パッケージの作成 No Yes Yes

拡張性（ Extensible ） No Yes Yes

6


ネイティブ・アプリとモバイル Web アプリでの開発方法比較

iPhone / iPadネイティブ・アプリ

Androidネイティブ・アプリ

モバイル Webアプリ

実行環境 iOS Android OSブラウザ

(Webkit 系 )

開発言語 Objective-CJava

(NDK では C 言語も可 )HTML5 / CSS3 / JavaScript

サーバー側は任意

開発環境 XCode （ Mac OS X ） Android SDK （ Eclipse ）任意

アプリ配布

Apple Store 経由、又はEnterprise Program 加入

Apple Store は Apple の審査あり

ネットワーク /USB 経由など自由に配布可能不要

アプリ間連携個別対応汎用の仕組み (Intent) URL

エミュレーター

XCode に付属割とサクサク動作

Android SDK に付属激重 PC のブラウザ

実機テスト iOS Developer Program への登録が必要 (\10,800/ 年 ) 端末の設定変更のみ URL 通知のみ

7


モバイル Web アプリケーションツールキット :Dojo Mobile

8


Dojo

概要– JavaScript の高機能なツールキット– Dojo Foundation が提供（オープンソース）

機能– Core ： Dojo の基本的な機能（ UI 関連除く）を提供– Dijit ： UI 関連の機能を提供– dojox ：先進的な機能を提供

メリット– リッチな UI を実現可能– 標準ライブラリーが非常に充実している– ブラウザ間の表示／動作の違いの吸収– JavaScript をより容易に記述できる– 画面パーツの国際化対応– 画面部品のコンポーネント化の方式を提供

9

dojo

Core

Dijit

dojox

●Dojo の各モジュールの位置づけ

Internet Explorer Mozilla Firefox

ユーザーアプリケーション


Internet Explorer

DOJO


Mozilla Firefox

DOJO


●Dojo による仕様の違いの吸収


テーマ

テーマ– Dijit を利用するには、 Dojo のテーマを読み込む必要がある– テーマとは、画面パーツの見た目（色使いやアイコンなど）を規定している CSS ファ

イル– Claro （ Dojo 1.5 から）、 Tundra 、 Soria 、 Nihilo の 4種類が用意されている

適用方法– <style> タグで CSS のインポート

– <body> 要素の class 属性にテーマ名を指定

10

<style type="text/css"> @import "/dijit/themes/claro/claro.css"; </style>

<body class="claro"> … </body>

Tundra

Soria

Nihilo

Claro


データ・アクセス： dojo.data

dojo.data–データ・フォーマットに捉われない一貫性のあるデータ・アクセス

• データストアがデータ・ソースのデータ・フォーマットを隠蔽･

11

要求

データ・ソースファイル - JSON - XML - CSVWeb サービスなど

データ・ストアデータを読み込む JavaScript オブジェクト

no name dpt place

0100 川中 ISE 幕張

0200 山中 SWG 箱崎

0300 野中 ATS 幕張

属性 (Attribute)

アイテム(Item)

値 (Value)

アイデンティティ(Identity)

• dojo.data.ItemFileReadStore• dojo.data.ItemFileWriteStore• dojox.data.CsvStore• dojox.data.XmlStoreなど

dojo.data API dojo.data.api.Read dojo.data.api.Write dojo.data.api.Identity dojo.data.api.Notification


表の表示：データグリッド

Dojo による表の表示： dojox.grid.DataGrid– 操作可能な表が、簡単に表示– データは、 dojo.data による読み込み

操作

12

<span dojoType="dojo.data.ItemFileWriteStore" jsId="store1" url="json/datagrid.json"></span> <table dojoType="dojox.grid.DataGrid" jsId="dgrid1" store="store1" query="{ id: '*' }" singleClickEdit="true" selectionMode="extended" columnReordering="true" style="width:100%;height:350px" rowSelector="20px">

・データの昇順・降順ソート

・データの検索、検索結果表示

・項目の選択、複数選択

・セルの結合されたテーブル表示

・カラムの順序変更 ( ドラッグアンドドロップ )

・元データにないカラムの追加

・データの直接編集、削除、追加

・データの昇順・降順ソート

・データの検索、検索結果表示

・項目の選択、複数選択

・セルの結合されたテーブル表示

・カラムの順序変更 ( ドラッグアンドドロップ )

・元データにないカラムの追加

・データの直接編集、削除、追加


Dojo 1.6 － HTML5 対応

パーサーが HTML5 に対応– Dojo 1.5までの方式もサポート（ Dojo 2.0 では deprecate となる）– HTML5 を Validation 可能– HTML5 の Data-Attribute をサポート

HTML5 の Data-Attribute サポート • Dojo 2.0 での標準となる記述方法• 属性名を data-dojo-* とする

– Dojo宣言

– Widget の使用

13

<script src="dojo.js" data-dojo-config="parseOnLoad: true, isDebug: true"></script>

<div data-dojo-type="dijit.Dialog" data-dojo-props='title:"My Dialog", onFocus:function(){ /* a focus event handler */ }' data-dojo-id="myDialog"></div>


Dojo 1.6 －ガント・チャート

ガント・チャート： dojox.gantt.GanttChart– 操作可能なガントチャートを簡単に表示可能– コードのイメージ

14

var projectDev = new dojox.gantt.GanttProjectItem({ // ガントチャート全体の情報を設定});var taskRequirement = new dojox.gantt.GanttTaskItem({ // タスクの項目 1 の設定});var taskAnalysis = new dojox.gantt.GanttTaskItem({ // タスクの項目 2 の設定});projectDev.addTask(taskRequirement);projectDev.addTask(taskAnalysis);var ganttChart = new dojox.gantt.GanttChart({ height: 400, width: 1200, withResource: true}, "gantt");ganttChart.addProject(projectDev);ganttChart.init();

<div class="ganttContent"> <div id="gantt"></div></div>


15

Dojo モバイル－ dojox.mobile

Dojo モバイル－ dojox.mobile

–モバイルに最適化されたモバイル Web アプリケーションを作成可能–タッチ操作が可能な UI を作成可能–ネイティブ・アプリケーションの様な 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


16

Dojo モバイル－特徴

可能な限り dojo のモジュールとの依存性を排除– dojo の必要のないモジュールをロードしないようにするため

イメージ（画像）は使用していない– UI パーツは CSS3 を利用して描画– アプリケーション・アイコンのみイメージ使用

CSS sprite をサポート– アプリケーション・アイコン・イメージを 1つのまとめて HTTP リクエストを削減

webkitMobile のビルド・オプション（ PC のブラウザーで表示が必要ない場合）

– カスタム・ビルド時に dojo core のサイズを削減

モバイル専用：最小限のパーサー– dojox.mobile.parser は、たった 80 行で構成されている– モバイルには、十分な機能を持った小さなパーサー

軽量でモバイルに適した Widgetパフォーマンスはとても重要である・モバイルデバイスは、 PCほど処理能力が高くない・モバイルユーザーの利用パターンは、 PCユーザーとは同じでない

これらは、イメージではない


17

Dojo モバイル－必須の処理

モバイル・デバイス向け表示指定モバイル専用のパーサーを読み込むモバイル用テーマを読み込む

<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">

<title>My Dojo Mobile App</title>

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

<script src="dojo/dojo.js" djConfig="parseOnLoad: true"></script>

<script>

dojo.require("dojox.mobile.parser");

dojo.require("dojox.mobile");

dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");

</script>

</head>

モバイル・デバイスでの表示指定

モバイル用の表示テーマを指定

モバイル専用のパーサーを指定


18

Dojo モバイル－モバイル用テーマ

モバイル用テーマ• 各モバイルでネイティブ・アプリの様な見た目を提供• テーマの切り替えだけで、各デバイスに対応

iPhone dojox/mobile/themes/iphone/iphone.css

iPad dojox/mobile/themes/iphone/ipad.css

Android dojox/mobile/themes/android/android.css

Blackberry dojox/mobile/themes/blackberry/blackberry.css

Customdojox/mobile/themes/custom/custom.css ・独自のモバイル用テーマ・ LESS を利用してカスタマイズ可能


19

Dojo モバイル－ View

モバイルで使用するレイアウト・コンポーネント–表示されるページのベースとなるコンポーネント

• 他のコンポーネントを配置するためのベース

View ・基本となる View コンポーネント・画面全体がスクロール

<div dojoType="dojox.mobile.View"

selected="true"></div>

ScrollableView ・ヘッダー、フッターはスクロールしない View

スクロールしない

<div

dojoType="dojox.mobile.ScrollableView"

selected="true"></div>

FlippableView ・タッチ操作で左右画面を移動可能な View ･ Dojo 1.7 から SwapView に名称変更

<div

dojoType="dojox.mobile.FlippableView"

selected="true">View 1</div>


20

Dojo モバイル－基本的な Widget

Heading ・画面上部に表示するナビゲーションバー

<h1 dojoType="dojox.mobile.Heading" label="My App" back="Back" moveTo="back"> <div dojoType="dojox.mobile.ToolBarButton" label="Edit" class="mblColorBlue" style="width:25px;float:right"></div></h1>

RoundRect ・コンテンツを表示するための単純な角丸コンテナー

<div dojoType="dojox.mobile.RoundRect" shadow="true"> This is a simple RoundRect object with some content in it.</div>

RoundRectCategory と RoundRectList ・アイテムのリスト表示

<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>

Button と Switch ・ボタンとスイッチ

<button dojoType="dojox.mobile.Button" btnClass="mblBlueButton" style="width: 100px">Click me!</button>

<div dojoType="dojox.mobile.Switch" value="on"></div>

ListItem

RoundRectListRoundRectCategory


21

Dojo モバイル－その他の Widget

TabBar EdgeToEdgeCategory と EdgeToEdgeList

ImageView ProgressIndicator

SpinWheel と DatePicker

IconContainer と IconItem


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


23

【デモ】スマートフォンとタブレットの自動切り替え

１つのアプリケーションで、横の表示をスマートフォンとタブレットで自動切り替え

スマートフォンタブレット（＆ PC ブラウザー）

独立したスクロール


WAS のモバイル対応

24


WebSphere Application Server (WAS) とは

Java EE に準拠した Web アプリケーション・サーバーワールドワイドおよび日本において高いシェア

– 世界中で 19,000 社以上が WAS を採用– 世界の上位 100 社のうちの 90% が WAS を採用

( 対象： Fortune の Global 500 Index 掲載企業 )

1998 年の出荷開始から、 13 年の歴史を持つ製品 1998 年以来 700件の特許を取得 9,000 以上の ISV アプリケーションが WAS 上で稼動 Java EE や Web サービス等の業界標準技術にいち早く対応幅広いプログラミング・モデルに対応柔軟かつ強力な運用管理機能を提供高いスケーラビリティと可用性を提供多くの大規模サイトで高いパフォーマンスを実証

25


WAS 13 年の歴史　

26

1999

2000

2001

2002

2008

WebSphere ソフトウェア製品群の発表

Java ベースの Web アプリケーションの開発・展開・管理

EJB を投入

Java 2マルチ OS サポート1998

2003

J2EE 1.3JDK1.3分散環境の新しいトポロジーWS-I Basic Profile 1.0

WAS V2.0WAS V3.0

WAS V3.5WAS V4.0

WAS V5.0

WAS V5.1

JDK1.4JSFPME最新の WS*

WAS V1.1

WAS V6.1

2004

2005

WAS V6.0 2006

J2EE 1.4 HA 機能拡張SOA 対応新メッセージングエンジン混合バージョンセル全エディション J2EE, PME サポート最新の WS*

WAS V6.1Feature Pack

JDK 5SIP サポートPortlet サポートスクリプト拡張開発ツール (AST)最新の WS*

2007

J2EE 1.2

J2EE 1.3

J2EE 1.4

Java EE 6

WAS V8 登場 !

2011 年J2EE 1.2Web サービスサポート動的キャッシュリソースアナライザー

20112011

信頼性・管理機能の強化信頼性・管理機能の強化

業界標準技術への対応業界標準技術への対応

WAS V7Java EE 5

2009

2010

WAS V7Feature Pack

Java EE 5 / JDK 6 柔軟な管理ランタイム・プロビジョニングコードと Fix の集中管理Java 高速化 ( 参照圧縮 )

6 月 18 日ダウンロード開始 7 月 22 日メディア出荷開始


27

WAS V8.0 の特徴

開発生産性の向上開発生産性の向上運用の効率化運用の効率化 & & 信頼性の向上信頼性の向上

セキュリティーセキュリティー & & 管理機能の向上管理機能の向上

オープンソースからエンタプライズへ

開発者向け無償の WAS ランタイム提供

開発・テストサイクルの短縮

幅広いプログラミング・モデル

–Java EE 6–Web 2.0 & Mobile –OSGi アプリケーション–SCA–Java バッチ–XML–SIP & CEA–Dynamic Scripting

統合開発ツールアプリケーション・アダプ

ター

パフォーマンスの向上トランザクションの強化スケーラビリティと高可用

性導入と保守の簡素化

– Installation Manager

–集中インストール・マネージャー

問題判別機能の拡張–新しいロギングとトレース

様々な環境をサポート–オンプレミスとクラウド–フレキシブル・マネジメン

ト柔軟な価格体系による

TCO削減 Feature Pack

管理コマンドの拡張–構成の複製が容易に

混合バージョン・セル OSGi アプリケーション

の管理機能強化セキュリティーの強化

–ハードニングの強化–Java EE 6 での拡張–SSO 強化： SAML サ

ポートマイグレーション・サ

ポート–構成のマイグレーショ

ン–Application Migration

Toolkit


28

Feature Pack とは

WAS に特定のテーマに沿った最新 / 拡張機能を追加 WAS に追加インストール無償で Web からダウンロード可能有効なサポート契約をお持ちのお客様には、 Feature Pack もサポート対象

Web 2.0 & Mobile

WAS V8CEA XML SCAOSGi Apps& JPA 2.0

Java Batch

Dynamic Scripting

Java EE 6

WAS V8

Web 2.0EJB 3.0 WebServices

WAS V6.1 EJB 3.0Web

Services

Web 2.0 CEA XML SCAOSGi Apps& JPA 2.0

WAS V7

Java Batch

Java EE 5

WAS V6.1 & 7.0

J2EE 1.4

WAS V6.1 WAS V7

Update


29

Web 2.0 & Mobile FP V1.1.0

WAS V8 と同時に出荷 WAS V6.1 ／ V7.0 ／ V8.0 サポート

新機能のハイライト– Dojo Toolkit 1.6 (+ 1.7一部先取り )– リッチ・インターネット・アプリケーション

(RIA)&Mobile Web ビルディング・ブロック• Touch 操作• デバイスに適した画面表示 API• ビジネスチャート、ゲージ、地図のモバイル対応• CSS3 と HTML5 準拠機能の利用と提供

–新しいダイアグラム・フレームワーク• ILOG Dojo Diagrammer

・トポロジー、組織図、処理フロー図などの表示・ CPU パワーが必要になるグラフ・レイアウト処理　をサーバー側でも実行可能


30

Web 2.0 & Mobile FP V1.1.0 のコンポーネント

IBM Dojo （ Ajax ツールキット）– モバイル対応

IBM Dojo 拡張機能 RPC アダプター Ajax Proxy

Web メッセージング JSON4J (WAS V6.1 ／ V7 向け )

Web Feed

JAX-RS (WAS V6.1 ／ V7 向け )

IBM ILOG Dojo Diagrammer

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

Dojo ＋ IBM 拡張

PC ブラウザー

Webメッセージング

JAX-RS

AjaxProxy

RPCアダプター

JavaEEアプリ

WebFeed

JSON4J

SIBus

FPの機能

外部Web サービス外部Web サービス

WAS with Web 2.0 & Mobile FP

Dojo（モバイル対応）

モバイル・ブラウザー

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

・サービス

ILOGDojo

Diagrammer


31

Web メッセージング

Web メッセージング– Ajax クライアントを使用して、株価や

インスタント・メッセージング（チャット）のようなリアルタイムに更新されるデータをプッシュ配信

– HTML5 Web Sockets には非対応

ブラウザーをサービス統合バス（ SIBus ）の Topic に接続し、サーバー側のイベントをブラウザーに配信

ブラウザーとサーバー間の通信にはComet モデルを採用

クライアントは、 Dojo のパーツとして提供

Bayeux MessageJSON

ブラウザー

Ajax Library

WebSphere Application Server

Enterprise Service Bus

Web メッセージング(Messaging Bridge)

Message Delivery

Subscribe Publish

Comet


32

Web 2.0 & Mobile FP のモバイル機能

Dojo モバイル - dojox.mobile

Dojo でモバイル・アプリを作成する機能


モバイル・アプリからも利用できる各種REST サービス・ Analytics サービス・ Graphics Conversion サービス・ Optimizer サービスなど

Web 2.0 and Mobile Showcase サンプルWeb 2.0 & Mobile FP の新機能サンプル・アプリ

ILOG Dojo Diagrammer のモバイル対応

Dojo の Widget のモバイル対応・ビジネス・チャートの拡張・ Geo Charting ・ゲージ機能の拡張

その他機能


33

Web 2.0 and Mobile Showcase サンプルの画面

Web 2.0 & Mobile の新機能サンプル・アプリ

Dojo モバイル


ILOG Dojo Diagrammer


34

【参考】サンプルの画面

Mobile Showcase (iPad 表示 ) Charts (iPad 表示 )

Business Process DiagramDiagram Editor


35


Analytics サービス

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

難しい

・操作の記録を残したい

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

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

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

・ Dojo クライアントとREST サービスのサンプル・コードが欲しい

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

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

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

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

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

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

い


36

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

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

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

Analyticsサービス

ログ

イベント

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

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

PC 、モバイルで使用可能

appsvcs-analytics.ear

ログの出力先の設定

・ web.xml で指定 REST インターフェース・イベント・リストの報告・ /appsvcs-analytics/rest/analytics/logger ・ GET or POST


37

モバイル・アプリケーション・サービス－ 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 からのみ変換可能

ファイル取得


38

モバイル・アプリケーション・サービス－ 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 による通信データの圧縮


39

モバイル・アプリケーション・サービス－サンプル

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


40

その他機能 1/2

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

– Dojo Chart の全てのチャートをモバイル向け（ Webkit モバイル）に拡張、及び最適化を実施

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

– スクロールなどの操作でタッチ操作をサポート

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

– Smart label レイアウト

– チャートタイトルの表示

Geo Charting - dojox.geo.charting

– ベクター地図表示コンポーネント•PC 、モバイルで、ズーム操作をタッチ操作で実施可能

– Dojo data store の情報を、地図の色分けにマッピング可能

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


41

その他機能 2/2

ゲージ機能の拡張

– Dojo Gauge をモバイル向け（ Webkit モバイル）に拡張及び最適化を実施

–新しいハイクオリティーなゲージスタイルを提供

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

ILOG Dojo Diagrammer

– モバイル向けに拡張、最適化を実施

– ダイアグラムをタッチ操作可能– スペックに合わせて、グラフ・レ

イアウト処理の実行地点を選択可能

•クライアント（ Dojo ）で実行•サーバーで実行


42

IBM ILOG Dojo Diagrammer

Dojo で各種ダイアグラムを表示するフレームワーク– Web ブラウザーのみでダイアグラムを表示可能– 操作可能なダイアグラム–最適な自動レイアウト

利用形態–産業施設の監視

• 電話通信網監視、電力網監視– エンタープライズ・ビジネス

• BPM 、 BAM 、 BPM モデリングツール、デシジョン・ツリー、 PERT図、ワークフロー

– エンタープライズ・ダッシュボード• 組織図、 BP モニタリング

– ソフトウェア・マネージメント• UML図

– インダストリアル・エンジニアリング• 各種プロセス図、

セマンティック・デザイン・ダイアグラム


43

ILOG Dojo Diagrammer の機能

ダイアグラムの表示

ダイアグラムの操作／その他機能

ノード

リンク

Overview

サブグラフ

ツールチップ

・マウス及びキーボートによる各種操作

・ノードの移動

・サブグラフの展開／折り畳み

・ノード／リンクの選択

・ダイアグラムの拡大／縮小

・ノード内の文字編集

・ダイアグラム・エディター

・印刷


44

グラフ・レイアウトの指定

指定されたアルゴリズムによりノードの配置を自動決定

<div dojoType="ibm_ilog.graphlayout.tree.TreeLayout" jsId="myLayout"/>

<div id="canvas" dojoType='ibm_ilog.diagram.widget.Diagram' nodeLayout="myLayout" automaticNodeLayout="true" ... >

</div>

グラフ・レイアウト・アルゴリズムのサンプル


45

サーバでのグラフ・レイアウト処理

サーバー側でグラフ・レイアウト処理を実施させる事が可能以下の様なケースで使用

–非常に大きなダイアグラムを生成する– モバイルなど CPU処理能力が低いクライアントを利用する

var treeLayout = new ibm_ilog.graphlayout.tree.TreeLayout();

graph.setNodeLayout(treeLayout);

var serverLayout = new ibm_ilog.graphlayout.ServerSideLayout(graph, url);

var deferred = serverLayout.layout();

サーバーのグラフ・レイアウト処理の呼び出し

Dojo

データ GFX GraphLayout非同期

も可能

サーバー側にグラフ・レイアウト用モジュールを配置・ dojo-diagrammer-server.war

Web ブラウザー WAS V8

RESTサービス

Web ブラウザー側処理の軽減

重い処理


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

46


モバイル Web アプリケーション開発における考慮点

デバイス毎の差異–画面解像度や処理能力 ( メモリ、 CPU)–ブラウザ

• 特に Android は苦労が多いそうですネットワーク

–特に 3G 通信時は注意が必要• 通信速度、帯域幅の制限• 回線断

–Web ページのキャッシュ機能が貧弱• 例えばMobile Safari では「戻る」でも通信が発生

開発・デバッグ環境–開発時は PC のブラウザで代替可能–ブラウザのメモリリークなどで苦労することも

• ネィティブアプリケーションのブラウザ・コンポーネントや PhoneGapを利用することで、ネィティブのデバッグ環境 (XCode の Shark など ) が利用可能

47


One Page Apps(Single Page Application)

1枚の HTML のみで構成される Web アプリケーション–http://en.wikipedia.org/wiki/Single-page_application–One Page Apps の作り方 (How to Build One Page Apps)

• http://yapcasia.org/2011/talk/21

一旦ダウンロードしてしまえば、スタンドアロンで利用できる–回線断に強い

• オフラインストレージとの組合せでより完全オフライン動作も可能–サーバーと通信せずに画面遷移可能–データの更新は Ajax を利用

One Page Apps はモバイルに適したアーキテクチャ–例えばユースケース単位で分割して One Page Apps として実装するの

が好ましい

48


49

Dojo モバイルによる One Page Apps

<body>

<View id=ViewA>

<View id=ViewB>

<Heading>ViewA</Heading>

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

<RoundRectList>

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



<RoundRectList>

<ListItem>Video</ListItem>

<ListItem>Maps</ListItem>

<ListItem>Phone</ListItem>

Slide

FlippableViewの場合


50

Dojo モバイルでのコーディング例

<div id="foo" dojoType="dojox.mobile.View" selected="true"> <h1 dojoType="dojox.mobile.Heading">Mobile Mashup</h1> <h2 dojoType="dojox.mobile.RoundRectCategory">Spaces</h2> <ul dojoType="dojox.mobile.RoundRectList"> <li id="item1" dojoType="dojox.mobile.ListItem" icon="images/i-icon-1.png" rightText="Off" moveTo="bar"> u1space </li> <li id="item2" dojoType="dojox.mobile.ListItem" icon="images/i-icon-2.png" rightText="Off" moveTo="bar"> u2space </li> <li id="item3" dojoType="dojox.mobile.ListItem" icon="images/i-icon-3.png" rightText="Off" moveTo="bar"> Wi-Fi </li> <li id="item4" dojoType="dojox.mobile.ListItem" icon="images/i-icon-4.png" rightText="VPN" moveTo="bar"> VPN </li> </ul></div>

<div id="bar" dojoType="dojox.mobile.View"> <h1 dojoType="dojox.mobile.Heading" back="Spaces" moveTo="foo"> u1space</h1> <h2 dojoType="dojox.mobile.RoundRectCategory">Applications</h2> <ul dojoType="dojox.mobile.RoundRectList"> <li dojoType="dojox.mobile.ListItem" rightText="Off"> Video </li> <li dojoType="dojox.mobile.ListItem" icon="images/i-icon-1.png" rightText="VPN"> Maps </li> <li dojoType="dojox.mobile.ListItem" rightText="Off"> Phone Number </li> </ul> </div>


デモと解説： BigBlue

51

サンプル・アプリケーションはこちらからダウンロードできます

http://www.ibm.com/developerworks/jp/websphere/library/was/was8_dojomobile/2.html


52

【参考】 RAD によるモバイル Web アプリケーションの開発

2. テスト1. 開発

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

RAD モバイル対応リッチ・ページ・エディター（ Beta版）

実機、もしくはシミュレーターによるテスト及びデバッグ

RAD モバイル・ブラウザー・シミュレーター（ Beta版）


WYSIWYG エディターで、ターゲット・デバイスでの見え方を確認

しながらコーディング

パレットからdojox.mobile を含む

Dojo ウィジェットを配置可能

フォーカスされたウィジェットをビジュアルに

参照、変更するためのプロパティ

コーディングを支援するコード・アシスト機能

【参考】リッチ・ページ・エディターでの開発

53


デバイス・テストを可能にするブラウザー上

でのシミュレーター

複数デバイスの配置や、

回転（ローテーション）も可能

【参考】モバイル・ブラウザー・シュミレーターでのテスト

54


【参考】 Rational Application Developer V8.0WebSphere Application Server の機能をフルに引き出す統合開発環境• WebSphere Application Server (WAS) 上のアプリケーション開発を強力にサ

ポート– WAS V8.0, V7.0, V6.1 のローカルテスト環境が同梱– WAS 上のアプリケーションの開発、実行、デバッグ、単体テスト、動的分析（ランタイム分析）

– 3世代の WAS をサポートすることで、 WAS のマイグレーションにも活用可能

Java, Java EE(EJB 3.1 など）の作成支援

WAS ローカルテスト環境でクイックなテ

ストビジュアルなWeb 開発

開発生産性

品質

使いやすさ

Java EE 開発を可視化

実行前にコード品質をチェック

55


56

PhoneGap によるハイブリッド・アプリケーション


57

PhoneGap によるハイブリット・アプリケーション化

PhoneGap–Web アプリケーションをネイティブ・アプリケーションとして稼働させ

るツール• 1つの Web アプリケーションで複数のデバイスに対応可能• dojox.mobile で作成したモバイル Web アプリケーションもネイティブ化可能• PhoneGap の API により、一部デバイス特有の機能も利用可能

PhoneGap ランタイム

Web アプリケーション（ HTML 、 CSS 、 Dojo ）

ネイティブ・アプリケーション1. 開発・ HTML 、 CSS で Web アプリケーションを作成・ dojox.mobile でモバイル Web アプリケーションを作成・デバイス特有の機能を PhoneGap の API （ JavaScript ）で作成

2. ネイティブ化・ターゲットの端末に合わせて PhoneGap でビルド・ターゲット端末の開発環境が必要 iPhone の場合なら、 XCode （ Mac OS X ）が必要

3. 公開・各ネイティブ・アプリケーションの公開方式で公開


PhoneGap が提供する JavaScript API

58

http://docs.phonegap.com/en/1.1.0/index.html


PhoneGap デモ

59


PhoneGap Plugins による拡張

Native 機能へのブリッジを独自に追加できる

60

http://wiki.phonegap.com/w/page/36752779/PhoneGap%20Plugins


IBM Mobile Technology Preview(MTP)

ハイブリッド・フレームワーク : PhoneGap軽量 AP サーバーランタイム : WAS8.5 Liberty Profile(α)通知サービス (Notifications): REST(Comet) / Android 連携サンプル・アプリケーション

61

http://ibm.co/ibmmobile


サンプル (Mysurance) のアーキテクチャ

Dojo mobile で実装PhoneGap の Plugin として

Nofification を追加

62


63

まとめ／参考資料


64

まとめ

Dojo mobile でモバイル・アプリケーション開発が容易に–ネィティブよりも開発や配布が容易–クロス・プラットフォーム対応–Dojo が提供する豊富な API を活用

WAS のモバイル対応–Dojo mobile に加え、以下を提供

• モバイルをサポートする REST サービス• 多彩なサンプル・アプリケーション• ILOG Dojo Diagrammer による高度な UI

PhoneGap によるハイブリッド化–ネィティブと同様に配布可能–JavaScript からデバイス固有機能を利用可能


65

参考資料

developerWorks 「 Dojo Mobile はじめの一歩 : 第 1回： Hello, Dojo Mobile!」– http://www.ibm.com/developerworks/jp/websphere/library/was/was8_dojomobile/1.html

developerWorks 「 Dojo Mobile 1.6 の紹介」– http://www.ibm.com/developerworks/jp/web/library/wa-dojomobile/

WebSphere ライブ「 Dojo mobile を用いた WAS 上のスマートフォン用 Web アプリケーション」

– http://www.ibm.com/software/jp/websphere/events/livestream/was_ondemand.html#sec7

WAS Feature Pack for Web 2.0 and Mobile 製品サイト– http://www.ibm.com/software/webservers/appserv/was/featurepacks/web20-mobile/

WAS Feature Pack for Web 2.0 ワークショップ資料– http://www.ibm.com/developerworks/jp/websphere/library/was/was_web20fep_ws/

Dojo道場– http://codezine.jp/article/corner/397

The Dojo Toolkit 公式サイト– http://dojotoolkit.org/

DojoCampus– http://docs.dojocampus.org/


66

WAS V8 のエディション比較

内容 WAS Express WAS (Base) WAS ND WAS for Developers

Java EE 6 サポート (EJB含む ) ○ ○ ○ ○

Feature Pack サポート ○ ○ ○ ○

導入可能プロセッサー数 PVU 480まで無制限無制限開発者用 PC

課金体系 PVU課金PVU /

ソケット課金 *1PVU課金

ユーザー課金/ 無償版

イントラネット 20ユーザーライセンス ○ × × ×

64bit モジュールの提供 × ○ ○ ○

複数サーバーの集中管理 × × ○ n/a

クラスター構成とフェイルオーバー

△Web サーバーから WAS への割り振り、および、セッションのフェイルオーバーは 2台

まで可能( セッション保管は DB のみ )

△Web サーバーから WAS

への割り振りは 25台まで、セッションのフェイル

オーバーは 5台まで可能 *1

( セッション保管は DB のみ )

○ n/a

サーバーとして利用可能開発用

*1: 2010 年 11 月に WAS Base ライセンスの拡張を発表


67

Web 2.0 & Mobile FP の導入（ WAS V8 の場合）１ /２

１．サイトからダウンロード–下記ページの「 Click here to get ...」から入手

• http://www.ibm.com/software/webservers/appserv/was/featurepacks/web20-mobile/

• Web 2.0 & Mobile FP V1.1.0 の WAS V8 用モジュールをダウンロード–ダウンロードしたモジュールを適当なディレクトリーに解凍

ダウンロード


68

Web 2.0 & Mobile FP の導入（ WAS V8 の場合）２ /２

２． IBM Installation Manager からインストール–ダウンロードしたモジュールをリポジトリーとして指定–トップ画面からインストールを選択–Web 2.0 & Mobile FP を選択してインストール–（オプション）トップ画面から更新を選択し、修正が出ていないか確認


69

Web 2.0 and Mobile Showcase サンプルの実行方法

１．アプリケーション・サーバーを構成–サンプルを稼働させるアプリケーション・サーバーを構成

• Web 2.0 & Mobile FP を導入済みであること

２．デプロイ–以下の showcase.ear ファイルを管理コンソールからデプロイ

• WAS V8 導入ディレクトリ内のweb2mobilefep_1.1/samples/web20mobileshowcaseSample/showcase.ear

–デプロイ時のパラメータはデフォルトから変更なし

３．実行–エンタープライズ・アプリケーションを開始して、以下の URL にア

クセス• http://hostname:port/Web20MobileShowcase/


70

Web 2.0 & Mobile FP での IBM Dojo の利用方法

Dojo モジュールをコピーする

WAS V8 導入ディレクトリ

IBM Dojo モジュール

①war フィアル

② IHS など静的コンテンツ配置場所

必要な部分をコピー

・外部から同じホスト名で認識される場所

・・・ IBM Atom ライブラリー・・・ IBM ゲージ・ウィジェット・・・ IBM ILOG Dojo Diagrammer

・・・ IBM OpenSearch ライブラリー・・・ IBM SOAP ライブラリー

・・・ Dojoユーティリティー・ツール

・・・ Dojo Dijit・・・ Dojo Core

・・・ Dojo dojox