© 2011 IBM Corporation ® iPhone/iPad/Android iPhone/iPad/Android 対対 対対 Web Web 対対対対対対対対対対対 対対対対 () 対対対対対対対対対対対 対対対対 () @ @ 対対対対対対対対対対対対対対対 対対対対対対対対対対対対対対対 2011 年 10 年 31 年 年年年年 年年年年年年年年年 ・・ 年年 年年 ([email protected])
© 2011 IBM Corporation
®
iPhone/iPad/AndroidiPhone/iPad/Android 対応対応WebWeb アプリケーション勉強会(実践アプリケーション勉強会(実践編)編)@@ 東北デベロッパーズコミュニティ東北デベロッパーズコミュニティ 2011 年 10 月 31 日
日本アイ ビー エム株式会社・ ・須江 信洋 ([email protected])
© 2011 IBM Corporation
2
目次
モバイル・アプリケーションのアーキテクチャ考察モバイル Web アプリケーションツールキット : Dojo mobileWebSphere Application Server のモバイル対応モバイル Web アプリケーション開発の実践PhoneGap によるハイブリッド・アプリケーション
© 2011 IBM Corporation
3
モバイル・アプリケーションのアーキテクチャ考察
© 2011 IBM Corporation
モバイル・デバイスと PC の違い
モバイル・デバイス PC
画面サイズ
スマートフォン ・・・ 4 インチ程度で小さいタブレット ・・・ 6 ~ 10 インチ程度で PC よりは少し小さい
10 インチ以上で高解像度
操作タッチ操作 ・・・ マウスの様にピンポイント指定は難しいソフトキーボード ・・・ 入力効率が落ちる
マウスとキーボード
通信無線 LAN ・・・ 利用可能な場所が限られる3G 通信 ・・・ 通信速度が速くない
LAN や無線 LAN
HWCPU 能力/メモリー ・・・ PC よりも低スペックGPS 、カメラ、モーションセンサーなどが標準で搭載
高速な CPU と大量メモリー
共通項目 Web ブラウザーが稼働
4
モバイルには、画面サイズや操作性、データ通信量及び HW 能力に制約がある
モバイル用アプリケーション
© 2011 IBM Corporation
モバイル向けアプリケーションのタイプ
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
© 2011 IBM Corporation
【参考 】 各タイプでの比較
比較項目 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
© 2011 IBM Corporation
ネイティブ・アプリとモバイル 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
© 2011 IBM Corporation
モバイル Web アプリケーションツールキット :Dojo Mobile
8
© 2011 IBM Corporation
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 による仕様の違いの吸収
© 2011 IBM Corporation
テーマ
テーマ– 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
© 2011 IBM Corporation
データ・アクセス : 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
© 2011 IBM Corporation
表の表示 : データグリッド
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">
・データの昇順・降順ソート
・データの検索、検索結果表示
・項目の選択、複数選択
・セルの結合されたテーブル表示
・カラムの順序変更 ( ドラッグアンドドロップ )
・元データにないカラムの追加
・データの直接編集、削除、追加
・データの昇順・降順ソート
・データの検索、検索結果表示
・項目の選択、複数選択
・セルの結合されたテーブル表示
・カラムの順序変更 ( ドラッグアンドドロップ )
・元データにないカラムの追加
・データの直接編集、削除、追加
© 2011 IBM Corporation
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>
© 2011 IBM Corporation
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>
© 2011 IBM Corporation
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
© 2011 IBM Corporation
16
Dojo モバイル - 特徴
可能な限り dojo のモジュールとの依存性を排除– dojo の必要のないモジュールをロードしないようにするため
イメージ(画像)は使用していない– UI パーツは CSS3 を利用して描画– アプリケーション・アイコンのみイメージ使用
CSS sprite をサポート– アプリケーション・アイコン・イメージを 1つのまとめて HTTP リクエストを削減
webkitMobile のビルド・オプション ( PC のブラウザーで表示が必要ない場合)
– カスタム・ビルド時に dojo core のサイズを削減
モバイル専用 : 最小限のパーサー– dojox.mobile.parser は、たった 80 行で構成されている– モバイルには、十分な機能を持った小さなパーサー
軽量でモバイルに適した Widgetパフォーマンスはとても重要である ・モバイルデバイスは、 PCほど処理能力が高くない ・モバイルユーザーの利用パターンは、 PCユーザーとは同じでない
これらは、イメージではない
© 2011 IBM Corporation
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>
モバイル・デバイスでの表示指定
モバイル用の表示テーマを指定
モバイル専用のパーサーを指定
© 2011 IBM Corporation
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 を利用してカスタマイズ可能
© 2011 IBM Corporation
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>
© 2011 IBM Corporation
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
© 2011 IBM Corporation
21
Dojo モバイル - その他の Widget
TabBar EdgeToEdgeCategory と EdgeToEdgeList
ImageView ProgressIndicator
SpinWheel と DatePicker
IconContainer と IconItem
© 2011 IBM Corporation
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
© 2011 IBM Corporation
23
【デモ 】 スマートフォンとタブレットの自動切り替え
1つのアプリケーションで、横の表示をスマートフォンとタブレットで自動切り替え
スマートフォン タブレット(& PC ブラウザー)
独立したスクロール
© 2011 IBM Corporation
WAS のモバイル対応
24
© 2011 IBM Corporation
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
© 2011 IBM Corporation
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 日メディア出荷開始
© 2011 IBM Corporation
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
© 2011 IBM Corporation
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
© 2011 IBM Corporation
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 パワーが必要になるグラフ・レイアウト処理 をサーバー側でも実行可能
© 2011 IBM Corporation
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
© 2011 IBM Corporation
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
© 2011 IBM Corporation
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 ・ゲージ機能の拡張
その他機能
© 2011 IBM Corporation
33
Web 2.0 and Mobile Showcase サンプルの画面
Web 2.0 & Mobile の新機能サンプル・アプリ
Dojo モバイル
モバイル・アプリケーション・サービス
ILOG Dojo Diagrammer
© 2011 IBM Corporation
34
【参考 】 サンプルの画面
Mobile Showcase (iPad 表示 ) Charts (iPad 表示 )
Business Process DiagramDiagram Editor
© 2011 IBM Corporation
35
モバイル・アプリケーション・サービス
Analytics サービス
・モバイル端末は、デバッグが
難しい
・操作の記録を残したい
・クライアントのログをサーバーに記録
サンプル・アプリケーション・ファイルアップロード
・ディレクトリー情報表示
・ Dojo クライアントとREST サービスのサンプル・コードが欲しい
Graphics Conversion サービス・画像のフォーマット変換、拡大/縮小
・ SVG ファイルを表示できない
・画像のサイズが大きすぎる
Optimizer サービス・ Dojo モジュールの配布を最適化
・ Dojo のロードを高速化したい
・受信するデータ量を減らした
い
© 2011 IBM Corporation
36
モバイル・アプリケーション・サービス - 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
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 からのみ変換可能
ファイル取得
© 2011 IBM Corporation
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 による通信データの圧縮
© 2011 IBM Corporation
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 サービスのサンプル
© 2011 IBM Corporation
40
その他機能 1/2
ビジネス・チャートの拡張
– Dojo Chart の全てのチャートをモバイル向け( Webkit モバイル)に拡張、及び最適化を実施
– 小さな画面サイズに適合したテーマを提供
– スクロールなどの操作でタッチ操作をサポート
– インタラクティブな説明
– Smart label レイアウト
– チャートタイトルの表示
Geo Charting - dojox.geo.charting
– ベクター地図表示コンポーネント•PC 、モバイルで、ズーム操作をタッチ操作で実施可能
– Dojo data store の情報を、地図の色分けにマッピング可能
–地図要素のツールチップ表示が可能
© 2011 IBM Corporation
41
その他機能 2/2
ゲージ機能の拡張
– Dojo Gauge をモバイル向け( Webkit モバイル)に拡張及び最適化を実施
–新しいハイクオリティーなゲージスタイルを提供
–ゲージをタッチ操作可能
ILOG Dojo Diagrammer
– モバイル向けに拡張、最適化を実施
– ダイアグラムをタッチ操作可能– スペックに合わせて、グラフ・レ
イアウト処理の実行地点を選択可能
•クライアント( Dojo )で実行•サーバーで実行
© 2011 IBM Corporation
42
IBM ILOG Dojo Diagrammer
Dojo で各種ダイアグラムを表示するフレームワーク– Web ブラウザーのみでダイアグラムを表示可能– 操作可能なダイアグラム–最適な自動レイアウト
利用形態–産業施設の監視
• 電話通信網監視、電力網監視– エンタープライズ・ビジネス
• BPM 、 BAM 、 BPM モデリングツール、 デシジョン・ツリー、 PERT図、ワークフロー
– エンタープライズ・ダッシュボード• 組織図、 BP モニタリング
– ソフトウェア・マネージメント• UML図
– インダストリアル・エンジニアリング• 各種プロセス図、
セマンティック・デザイン・ダイアグラム
© 2011 IBM Corporation
43
ILOG Dojo Diagrammer の機能
ダイアグラムの表示
ダイアグラムの操作/その他機能
ノード
リンク
Overview
サブグラフ
ツールチップ
・マウス及びキーボートによる各種操作
・ノードの移動
・サブグラフの展開/折り畳み
・ノード/リンクの選択
・ダイアグラムの拡大/縮小
・ノード内の文字編集
・ダイアグラム・エディター
・印刷
© 2011 IBM Corporation
44
グラフ・レイアウトの指定
指定されたアルゴリズムによりノードの配置を自動決定
<div dojoType="ibm_ilog.graphlayout.tree.TreeLayout" jsId="myLayout"/>
<div id="canvas" dojoType='ibm_ilog.diagram.widget.Diagram' nodeLayout="myLayout" automaticNodeLayout="true" ... >
</div>
グラフ・レイアウト・アルゴリズムのサンプル
© 2011 IBM Corporation
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 ブラウザー側処理の軽減
重い処理
© 2011 IBM Corporation
モバイル Web アプリケーション開発の実践
46
© 2011 IBM Corporation
モバイル Web アプリケーション開発における考慮点
デバイス毎の差異–画面解像度や処理能力 ( メモリ、 CPU)–ブラウザ
• 特に Android は苦労が多いそうですネットワーク
–特に 3G 通信時は注意が必要• 通信速度、帯域幅の制限• 回線断
–Web ページのキャッシュ機能が貧弱• 例えばMobile Safari では「戻る」でも通信が発生
開発・デバッグ環境–開発時は PC のブラウザで代替可能–ブラウザのメモリリークなどで苦労することも
• ネィティブアプリケーションのブラウザ・コンポーネントや PhoneGapを利用することで、ネィティブのデバッグ環境 (XCode の Shark など ) が利用可能
47
© 2011 IBM Corporation
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
© 2011 IBM Corporation
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>
<ListItem moveTo=ViewB>Item 2</ListItem>
<ListItem moveTo=ViewB>Item 3</ListItem>
<RoundRectList>
<ListItem>Video</ListItem>
<ListItem>Maps</ListItem>
<ListItem>Phone</ListItem>
Slide
FlippableViewの場合
© 2011 IBM Corporation
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>
© 2011 IBM Corporation
デモと解説: BigBlue
51
サンプル・アプリケーションはこちらからダウンロードできます
http://www.ibm.com/developerworks/jp/websphere/library/was/was8_dojomobile/2.html
© 2011 IBM Corporation
52
【参考】 RAD によるモバイル Web アプリケーションの開発
2. テスト1. 開発
エディターや RAD ( Rational Application Developer )などによる開発
RAD モバイル対応リッチ・ページ・エディター( Beta版)
実機、もしくはシミュレーターによるテスト及びデバッグ
RAD モバイル・ブラウザー・シミュレーター( Beta版)
© 2011 IBM Corporation
WYSIWYG エディターで、ターゲット・デバイスでの見え方を確認
しながらコーディング
パレットからdojox.mobile を含む
Dojo ウィジェットを配置可能
フォーカスされたウィジェットをビジュアルに
参照、変更するためのプロパティ
コーディングを支援するコード・アシスト機能
【参考】リッチ・ページ・エディターでの開発
53
© 2011 IBM Corporation
デバイス・テストを可能にするブラウザー上
でのシミュレーター
複数デバイスの配置や、
回転(ローテーション)も可能
【参考】モバイル・ブラウザー・シュミレーターでのテスト
54
© 2011 IBM Corporation
【参考 】 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
© 2011 IBM Corporation
56
PhoneGap によるハイブリッド・アプリケーション
© 2011 IBM Corporation
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. 公開・各ネイティブ・アプリケーションの公開方式で公開
© 2011 IBM Corporation
PhoneGap が提供する JavaScript API
58
http://docs.phonegap.com/en/1.1.0/index.html
© 2011 IBM Corporation
PhoneGap デモ
59
© 2011 IBM Corporation
PhoneGap Plugins による拡張
Native 機能へのブリッジを独自に追加できる
60
http://wiki.phonegap.com/w/page/36752779/PhoneGap%20Plugins
© 2011 IBM Corporation
IBM Mobile Technology Preview(MTP)
ハイブリッド・フレームワーク : PhoneGap軽量 AP サーバーランタイム : WAS8.5 Liberty Profile(α)通知サービス (Notifications): REST(Comet) / Android 連携サンプル・アプリケーション
61
http://ibm.co/ibmmobile
© 2011 IBM Corporation
サンプル (Mysurance) のアーキテクチャ
Dojo mobile で実装PhoneGap の Plugin として
Nofification を追加
62
© 2011 IBM Corporation
63
まとめ/参考資料
© 2011 IBM Corporation
64
まとめ
Dojo mobile でモバイル・アプリケーション開発が容易に–ネィティブよりも開発や配布が容易–クロス・プラットフォーム対応–Dojo が提供する豊富な API を活用
WAS のモバイル対応–Dojo mobile に加え、以下を提供
• モバイルをサポートする REST サービス• 多彩なサンプル・アプリケーション• ILOG Dojo Diagrammer による高度な UI
PhoneGap によるハイブリッド化–ネィティブと同様に配布可能–JavaScript からデバイス固有機能を利用可能
© 2011 IBM Corporation
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/
© 2011 IBM Corporation
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 ライセンスの拡張を発表
© 2011 IBM Corporation
67
Web 2.0 & Mobile FP の導入 ( WAS V8 の場合) 1 /2
1.サイトからダウンロード–下記ページの「 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 用モジュールをダウンロード–ダウンロードしたモジュールを適当なディレクトリーに解凍
ダウンロード
© 2011 IBM Corporation
68
Web 2.0 & Mobile FP の導入 ( WAS V8 の場合) 2 /2
2. IBM Installation Manager からインストール–ダウンロードしたモジュールをリポジトリーとして指定–トップ画面からインストールを選択–Web 2.0 & Mobile FP を選択してインストール–(オプション)トップ画面から更新を選択し、修正が出ていないか確認
© 2011 IBM Corporation
69
Web 2.0 and Mobile Showcase サンプルの実行方法
1.アプリケーション・サーバーを構成–サンプルを稼働させるアプリケーション・サーバーを構成
• Web 2.0 & Mobile FP を導入済みであること
2.デプロイ–以下の showcase.ear ファイルを管理コンソールからデプロイ
• WAS V8 導入ディレクトリ内のweb2mobilefep_1.1/samples/web20mobileshowcaseSample/showcase.ear
–デプロイ時のパラメータはデフォルトから変更なし
3.実行–エンタープライズ・アプリケーションを開始して、以下の URL にア
クセス• http://hostname:port/Web20MobileShowcase/
© 2011 IBM Corporation
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