• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
20111031 MobileWeb at TDC
 

20111031 MobileWeb at TDC

on

  • 2,160 views

 

Statistics

Views

Total Views
2,160
Views on SlideShare
2,159
Embed Views
1

Actions

Likes
1
Downloads
12
Comments
0

1 Embed 1

http://a0.twimg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ *Web 2.0 & Mobile FP の正式名称は、 WebSphere Application Server Feature Pack for Web 2.0 and Mobile です。 以降のページでは、 Web 2.0 & Mobile FP と省略します。
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ モバイル・デバイスと PC では、上記の様な違いあります。 スマートフォンの画面サイズは非常に小さいので、画面を設計する際には表示する情報量を考慮する必要があります。また、最近のモバイル機器はタッチ操作が主流となっています。タッチ操作はマウスの様にピンポイントを指定する事が難しいので、指定する領域はある程度大きくとる必要があります。文字入力もソフトキーボードが主流なので、 PC の様に大量のデータ入力をするのには向いていません。データ通信量、 HW 能力も PC より劣るので、アプリケーションを設計する際に考慮が必要です。その代り、 GPS やカメラ、モーションセンサーなどが標準搭載されていて利用可能です。 モバイル・デバイスも PC と同じように Web ブラウザーを標準で搭載しているので、 Web アプリケーションを利用する事が可能です。しかし、上記な様な制約があるため、より利用しやすいアプリケーションを構築するには PC とは違ったモバイル向けの UI (ユーザー・インターフェース)を作成する必要があります。
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ モバイル向けアプリケーションは、4つのタイプに分けられます。 Web アプリケーション HTML と JavaScript などで作成した PC 向けの Web アプリケーションをモバイルの Web ブラウザーから使用するタイプです。モバイル向けに別途開発しなくても済みますが、モバイルに最適化されていないのでモバイルでは表示/操作に支障がでる可能性があります。 モバイル Web アプリケーション HTML5 と JavaScript などで作成したモバイル向けの Web アプリケーションです。モバイル向けに調整してあるのでモバイルでも表示/操作に支障はありません。また、 HTML5 など最新の仕様を利用すればオフラインで稼働するアプリケーションも構築可能です。 ハイブリッド・モバイル・アプリケーション モバイルでのみ稼働するアプリケーションを作成しますが、 HTML5 や JavaScript などで作られたものをブリッジして活用する方法です。この方法はハイブリッド・モバイル・アプリケーション開発用のツールを使用します。アプリケーション開発者は Web クライアント技術で開発すればよいので開発の容易になります。また、デバイス特有の機能( GPS やカメラなど)を利用可能なツールもあります。実現するためのツールの1つとして PhoneGap があります。 PhoneGap については 67 ページを参照してください。 ネイティブ・モバイル・アプリケーション 各モバイル専用の方法でアプリケーションを作成します。デバイスの機能をフルに使用できパフォーマンスも良いです。ただし、 OS の種類によりアプリケーションの作成方法が全く違うためマルチデバイス対応には作業量が増えます。アプリケーションの配布方法も OS の種類により違うので注意が必要です。代表的なデバイスでの開発方法の違いについては、 42 ページを参照してください。 WAS Feature Pack for Web 2.0 & Mobile は、 Web アプリケーションとモバイル Web アプリケーションを対象としています。
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ 各タイプのアプリケーションを比較したものです。 Web は開発/公開が容易ですが、パフォーマンス重視やカメラの様な各デバイス固有の機能を使う場合はネイティブ・アプリケーションを選択します。ハイブリッドは両者の利点を生かせるタイプです。
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ iPhone/iPad ネイティブ・アプリと Android ネイティブ・アプリ、モバイル Web アプリの開発に関する比較です。ネイティブ・アプリは、それぞれの開発言語と専用の API での開発が必要です。特に iPhone/iPad に関しては、開発に Mac OS 環境が必須となります。 それに対して、モバイル Web アプリは通常の Web アプリ開発と同じスキルで開発する事が可能です。
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ Dojo は、 Dojo Foundation が提供する高機能な JavaScript ツールキットです。 IBM は、 Dojo Foundation の contributor です。 Dojo はオープンソースとして配布されていますが、 Web 2.0 & Mobile FP では製品の一部として同梱されています。 Web 2.0 & Mobile FP に同梱されている IBM Dojo モジュールは IBM のサポート対象となります。 Dojo の機能は、大きく3つのパッケージに分けられています。 Core Dojo の基本的な機能を提供します。 Core には、イベント処理、ドラッグ・アンド・ドロップ、データアクセスなどがあります。 Dijit 便利で高機能な UI 部品などを提供します。また、全体的な見た目を統一するためのテーマが提供されています。 dojox 各種チャートや画像/動画表示、モバイルなど先進的な機能を提供します。 Dojo についての詳細は、下記 Dojo Foundation のサイトを参照してください。 ・ http://http://dojotoolkit.org/ Dojo のコーディングについては、下記の過去資料も参照してください。 「 WAS Feature Pack for Web 2.0 ワークショップ資料」 http://www.ibm.com/developerworks/jp/websphere/library/was/was_web20fep_ws/ 「 Dojo on sMash 開発ガイド」 http://www.ibm.com/developerworks/jp/websphere/library/smash/smash_dojo_guide/
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ Dojo は、画面の見た目を統一するためにテーマと言う機能を採用しています。テーマは、 CSS の集合でテーマの指定を変更するだけで見た目を変更する事が可能です。 Dojo 1.6 では、 Claro 、 Tundra 、 Soria 、 Nihilo の 4 種類のテーマが用意されています。 Claro は Dojo 1.5 から追加されました。 適用方法は、初めに タグで使用するテーマの CSS フィアルを指定します。そして、そのテーマの名前を で指定します。
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ Dojo におけるデータ・アクセスの機能を提供しているのが dojo.data です。 dojo.data を利用することにより、データ・フォーマットに捉われず一貫性のあるデータ・アクセスが可能になります。 データを保持するコンテンツは、データ・ソースと呼ばれます。データ・ソースは JSON や XML などの静的ファイルのこともありますし、 Web サービスで外部に接続した先の外部アプリケーションのこともあります。そして、そのデータ・ソース毎に用意されているのが、データ・ストアです。このデータ・ストアがデータ・ソースの形式を隠蔽してくれるため、開発者はデータ・ソースの形式を意識せずに開発することが可能です。 また、データ・ストアからデータ・ソースにアクセスするための API として、 dojo.data API が規定されています。必ずしも全ての API が実装されているわけではなく、データ・ストアによってサポートされる API が異なります。
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ データグリッドを利用する事により Dojo で簡単に操作可能な表を表示する事が可能です。 表の表示には、 dojox.grid.DataGrid を使用します。他に、 dojox.grid.EnhancedGrid 、 dojox.grid.TreeGrid もあります。 表示するデータは、 dojo.data で読み込みます。読み込まれたデータは自動的にフォーマットされ表示されます。 表示された表は、上記の様な操作を行う事が可能です。
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ Dojo 1.6 では、パーサーが HTML5 へ対応しています。 HTML5 の文書を Validation できるようになりました。それに伴い Dojo の記述方式を HTML5 の Data-Attribute 方式に変更しました。 今までの方式も使用できますが、 Dojo 2.0 からは新方式が標準となります。 HTML5 では、 HTML のタグ内で独自の属性を使用する場合は、属性の名前を "data-" で始めるように定められています。これにより、パーサーやエディターなどは、独自方式の属性をエラーとして扱わないようになります。 Dojo では、 Dojo が使用する属性名を "data-dojo-" で始めるようにしています。例えば、 "dojoType" は "data-dojo-type" に、 "jsId " は "data-dojo-id" に変更になります。
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ Dojo 1.6 では、ガント・チャートの表示が可能となりました。 dojox.gantt.GanttChart を使用すると、簡単にガント・チャートが表示可能です。このガント・チャートは、期日や進捗率などの項目を操作する事も可能です。 コードは、上記の様に記述します。各種設定は、用意されているプロパティーに値をセットします。 デフォルトでの表示は、右側の図の様に表示されます。
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ Dojo モバイルは、 dojox.mobile パッケージに入っている機能で、モバイル Web アプリケーションを作成する事が可能となります。モバイルの標準 Web ブラウザーに最適化された機能で、タッチ操作が可能なネイティブ・アプリケーションの様な UI を作成可能です。また、テーマを切り替えるだけで、複数のモバイル・デバイス( OS )に対応可能です。 この機能は Dojo 1.5 から採用され、さらに機能拡張されています。 対応するモバイル OS は、上記の通りです。この情報は Dojo 1.7 での情報で、将来のバージョンアップに伴いサポート対象が更新される可能性があります。
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ Dojo モバイルの特徴です。 Dojo モバイルはモバイル向けに軽量でモバイルに適した Widget を提供します。モバイル・デバイスは、 PC より処理能力が低く利用パターン(短時間での利用)も違うのでパフォーマンスが重要です。 Dojo モバイルは、軽量でモバイルに適した Widget にするため上記の様な工夫がなされています。
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ Dojo モバイルを使用する場合は必ず上記のようなコードを記述します。 初めのモバイル・デバイスでの表示指定は、モバイルの画面の合わせて表示するために必要な指定です。この記述は Dojo モバイル特有の事項ではなく、モバイルの Web ブラウザーの仕様です。 次に、 Dojo が提供するモバイル用表示テーマの css ファイルを指定します。上記では、 iPhone 用のテーマを指定しています。モバイル用のテーマに関しては、次ページを参照してください。 dojo.require() では、必ず最初にモバイル用のパーサー( dojox.mobile.parser )を指定します。その後に dojox.mobile も指定します。最後の「 dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat"); 」は、 WebKit を使用していない Web ブラウザーを使用している場合でも表示できるようにする互換指定です。
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ Dojo 1.7 で提供されているモバイル用のテーマです。各モバイル用テーマはネイティブ・アプリケーションの様な見た目を提供します。あくまでも見た目なので iPhone で利用する場合に iPhone テーマ利用が必須と言うことではありません。 iPhone で Custom テーマを利用したり独自のテーマを作成する事も可能です。また、モバイル用の各テーマは LESS で作成されているので、一部を独自カスタマイズすることも可能です。なお、 iPad は iPhone のテーマで利用する事も可能です。 Custom は Dojo オリジナルの見た目です。どのモバイルでも使用可能なテーマとなっていますが、各デバイスのネイティブ・アプリケーションの見た目とは違っています。このテーマの一部(全体的な色遣いを緑系にするなど)を変更して独自のモバイル用テーマを作成する事も可能です。
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ View はモバイルで使用するレイアウト・コンポーネントです。表示のベースとなるコンポーネントで、このコンポーネント上に他のコンポーネントを配置します。現在、 View コンポーネントとして以下の 3 種類があります。 View は dojo.require() が必要ありませんが、 ScrollableView と FlippableView(SwapView) は dojo.require() が必要です。 View 基本となる View コンポーネントです。 ScrollableView View が画面全体がスクロールするに対して、 ScrollableView は、ヘッダー、フッターがスクロールしません。 FlippableView 画面を左または右方向にスワイプすると、他の FlippableView オブジェクトと入れ替えられます。 View 1 View 2 上記様なコードを作成すると、初め View 1 が表示され、スワイプすると View 2 が表示されます。書いた順番が、表示の順番になります。 Dojo 1.7 から、名前が SwapView に変わります。
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ 画面作成で使用する基本的な Widget です。
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ Dojo モバイルが提供する Widget の表示例です。その他にも入力用フォームなど様々な Widget があります。詳しくは、下記リファレンス・ガイドを参照してください。 http://dojotoolkit.org/reference-guide/dojox/mobile.html
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ Dojo モバイルでは、画面遷移を行う際のエフェクトを指定可能です。 これらのエフェクトは、サンプルの Mobile Showcase にあるので、そこで動きを確認してください。
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ スマートフォンとタブレットは、同じコードを利用しても上記の様に自動的に表示方法が変わります。
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ
  • 01. WAS V8.0 概要 WAS V8.0 アナウンスメント・ワークショップ WebSphere Application Server (WAS) は、 Java EE に準拠した Web アプリケーション・サーバーで、ワールドワイドおよび日本において常に高いシェアを保持しています。世界中では 19,000 社以上が WAS を採用しています。 WAS V1.1 が 1998 年に出荷されて以来 13 年間に渡って、 WAS は機能拡張を続けてきました。この間、数多くの特許が取得され、製品の実装に反映されています。 WAS は、 Java EE や Web サービス等業界標準技術にいち早く対応することで、開発生産性の向上を実現しています。さらに運用管理機能を充実させることで、 TCO も削減しています。 WAS はミッション・クリティカルなシステムにも安心して採用していただけるように、高い拡張性、可用性、パフォーマンスを提供しています。銀行のオンライン・バンキング・システムや証券会社のオンライン・トレーディング・システムにおいても WAS は数多く採用されている実績があります。
  • 01. WAS V8.0 概要 WAS V8.0 アナウンスメント・ワークショップ WAS13 年の歴史は、 Java SE 、 J2EE/Java EE 、 Web サービス (ws-*) といった業界標準技術への対応の歴史です。それと同時に、企業のアプリケーション基盤として安心して採用いただけるように、信頼性の向上と運用管理機能の強化も行ってきました。パフォーマンスについても、度重なる製品チューニングと機能強化により、バージョンが上がる度に性能が向上しています。 WAS V8.0 は、最新の Java EE 6 に対応しており、 2011 年 6 月 18 日にダウンロード開始、 7 月 22 日にメディア出荷開始となりました。 WAS V8.0 においても、業界標準技術への対応と運用管理機能の強化、パフォーマンスの向上が図られています。
  • 01. WAS V8.0 概要 WAS V8.0 アナウンスメント・ワークショップ WAS V8.0 は、次の 3 つのテーマにフォーカスして機能拡張を提供しています。 開発生産性の向上 運用の効率化と信頼性の向上 セキュリティーと管理機能の向上 移行のページではそれぞれのテーマごとに主な新機能をご紹介します。
  • 01. WAS V8.0 概要 WAS V8.0 アナウンスメント・ワークショップ WAS V6.1 以降、 Feature Pack という仕組みにて新機能を追加する機能を提供しています。 Feature Pack は、 Web から無償でダウンロードすることができ、 WAS 環境にアドオンで追加することにより利用可能となります。 WAS のサポート契約をお持ちのお客様には、 Feature Pack も正式サポート対象となりますので安心してご利用いただけます。 WAS V7.0 で Feature Pack として提供されていた以下の機能は、 WAS V8.0 のコードに統合されました。 CEA XML SCA OSGi アプリケーション &JPA 2.0 Java バッチ (Modern Batch) WAS V8.0 では以下の 2 つの Feature Pack が提供されています。 Web 2.0 & Mobile : WAS V6.1 および V7.0 で提供されている Web 2.0 Feature Pack を拡張 Dynamic Scripting : WAS V7.0 で提供されている Feature Pack と同様の機能を提供
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ Web 2.0 & Mobile FP V1.1.0 は、 WAS V8 と同時に出荷された Feature Pack です。この Feature Pack は、 WAS V8 だけでなく、 WAS V6.1 / V7.0 もサポートしています。また、 WAS Community Edition V2.0 / V2.1 、及び WAS Hypervisor Edition もサポートしています。 Web 2.0 & Mobile FP V1.1.0 の新機能としては以下があります。 最新の Dojo をサポート Dojo 1.6 + Dojo 1.7 の一部機能を先取りした最新の Dojo を提供します。詳細については、「2. Dojo によるリッチクライアント」を参照してください。 * 注:この情報は 2011 年 7 月現在の情報です。将来 Dojo のバージョン情報は変わる可能性があります。 RIA とモバイルのサポート 最新の Dojo により、 RIA 作成機能のさらなる進化と、新たにモバイル対応への機能が追加されました。この追加によりモバイルに適したアプリケーションを簡単に構築できるようになります。詳細については、「2. Dojo によるリッチクライアント」、「3.モバイル」を参照してください。 新しいダイアグラム・フレームワーク 新しい ILOG Dojo Diagrammer により、 Dojo を利用して各種ダイアグラムを表示できるようになります。詳細については、「2. Dojo によるリッチクライアント」を参照してください。
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ 上記は、 Web 2.0 & Mobile FP V1.1.0 のコンポーネントです。 V1.0.1 から V1.1.0 になり、 Dojo が 1.6 + 1.7α に更新されました。 Dojo の最新化に伴いモバイル・アプリケーションの開発にも対応しています。 ILOG Dojo Diagrammer とモバイル・アプリケーション・サービスは、新規に追加された機能です。詳細は、「2. Dojo によるリッチクライアント」、「3.モバイル」を参照してください。 JSON4J と JAX-RS は、 WAS V6.1 及び WAS V7.0 向けの機能です。 WAS V8 では、 JSON4J と JAX-RS は WAS V8 本体に取り込まれています。どちらも同じ実装を使用しています。 JAX-RS については、セッション 08 「 Java EE 6 パート 2 」を参照してください。 その他の機能は、 Web 2.0 FP V1.0.1 からの継続機能です。機能の詳細については、「 WAS Feature Pack for Web 2.0 ワークショップ資料」を参照してください。 ・ http://www.ibm.com/developerworks/jp/websphere/library/was/was_web20fep_ws/
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ Web メッセージングとは、 Pub-Sub タイプの通信を用いてリアルタイムに情報をプッシュ配信する機能です。 Ajax クライアントと連携して、株価のチャートの更新やチャットと言ったようなリアルタイムに情報更新を行うアプリケーションを作成することが可能となります。 ブラウザーと WAS 間の通信には Comet モデルを採用しています。 WAS では、 SIBus を使用してサーバー側のイベント(情報の更新)を取得しています。
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ Web 2.0 & Mobile FP のモバイルに関連する機能です。 Dojo モバイル - dojox.mobile Dojo でモバイル・アプリを開発するための機能です。各モバイルのネイティブの様なモバイル Web アプリケーションを開発できます。 モバイル・アプリケーション・サービス モバイル Web アプリケーションを活用するのに便利な REST サービス(サーバー側)です。この機能は、モバイルだけでなく PC からも利用可能です。 Web 2.0 and Mobile Showcase サンプル モバイルや ILOG Dojo Diagrammer など、 Web 2.0 & Mobile FP の新機能に関するソースコード付きサンプル・アプリです。 その他機能 ILOG Dojo Diagrammer や Dojo の Widget をモバイル対応しています。
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ Web 2.0 and Mobile Showcase サンプルのトップ画面です。上記は PC のブラウザーで表示した際の画面です。 Web 2.0 and Mobile Showcase サンプルには、今回のバージョンアップで追加された機能のサンプル・アプリケーションです。このモジュールの中にはサンプルのソースコードも入っています。このサンプルの稼働方法は次のページを参照してください。 Dojo モバイル Dojo モバイルや ILOG Dojo Diagrammer のモバイルでのモバイル用サンプル・アプリケーションが入っています。 iPhone/iPad 、 Android など Dojo モバイルでサポートされているブラウザーで実行可能です。 モバイル・アプリケーション・サービス モバイル・アプリケーション・サービスのサンプルです。サンプルのクライアント・コードはモバイル専用のコードでないので PC でも実行可能です。 正常に稼働させるためにはモジュール内の web.xml を設定する必要があるサンプルがあります。 ILOG Dojo Diagrammer ILOG Dojo Diagrammer のサンプルです。こちらは、 PC の Web ブラウザー向けサンプルです。
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ Web 2.0 and Mobile Showcase サンプルのサンプルを実行した画面です。
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ モバイル・アプリケーション・サービスは、3つの REST サービスと2つのサンプル・アプリケーションがあります。 3つの REST サービスは、それぞれ上記の様なケースで使用します。 REST サービスは、 jar ファイルとして提供されソースコードは提供されません。 Web 2.0 and Mobile Showcase サンプルには、これらの REST サービスを呼ぶ Dojo クライアントのソース付サンプルが付属しています。開発のベースとなる ear ファイルには、 Dojo クライアントのサンプルは入っていません。 サンプル・アプリケーションは、 Dojo クライアントと連携する REST サービスを作成するためのサンプル・コードを提供します。このコードは、実稼働用ではありませんが、 REST サービスもソースコードを参照する事が可能です。
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ Analytics サービスは、 Dojo クライアントで生成されたイベントをサーバー側で記録する REST サービスです。 このサービスを使用すると、 Dojo モバイルのデバッグやクライアントの操作記録のために Dojo クライアントから送信された情報をサーバーに記録できます。このサービスは、 PC 、モバイルともに使用可能です。使用するには、以下のモジュールを利用してアプリケーション開発を行います。 ・ %was_root%/web2mobilefep_1.1/installableApps/application_services/analytics/appsvcs-analytics.ear クライアントは、必ず dojox.analytics を使用して以下の様にコードを記述する必要があります。 REST サービスの宛先等は djConfig のパラメータとして指定します。 dojo.require("dojox.analytics.plugins.dojo"); console.rlog("Any quoted string goes here."); dojox.analytics.addData("timestamp", [new Date().getTime(), "on-load executed"]); ログの出力先は、 web.xml 内で指定します。 REST のインターフェース詳細などについては、 Infocenter を参照してください。 http://publib.boulder.ibm.com/infocenter/wasinfo/v8r0/topic/com.ibm.websphere.web2mobile.mobile.application.services.help/docs/analytics_README.html
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ Graphics Conversion サービスは、画像のフォーマット変換、拡大/縮小を実施する REST サービスです。 PC 、モバイルの両方で使用可能ですが、モバイルでそのデバイスに適した画像への変換での利用が主目的です。使用するには、以下のモジュールを利用してアプリケーション開発を行います。 ・ %was_root%/web2mobilefep_1.1/installableApps/application_services/graphics/appsvcs-graphics.ear 変換可能な画像フォーマットは上記の通りですが、フォーマットによっては制約があります。詳細は Infoceter を参照してください。 http://publib.boulder.ibm.com/infocenter/wasinfo/v8r0/topic/com.ibm.websphere.web2mobile.mobile.application.services.help/docs/graphics_README.html 現段階では、新規に作成された画像ファイルは自動的に消去されないので、手動でのメンテナンスが必要です。 REST のインターフェースには、 2 通りあります。 /appsvcs-graphics/rest/graphics/convert/binaryResponse ・・・ 生成された画像を返す /appsvcs-graphics/rest/graphics/convert/urlResponse ・・・ 生成された画像の URL を返す REST 要求時には、画像の URL と変換後の画像フォーマット、拡大/縮小の大きさを指定します。詳細は Infocenter を参照してください。
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ Optimizer サービスは、 Dojo モジュールの配信を最適化する REST サービスです。 このサービスは PC 、モバイルともに使用可能です。使用するには以下のモジュールをデプロイして利用します。 ・ %was_root%/web2mobilefep_1.1/installableApps/application_services/optimizer/appsvcs-optimizer.ear このサービスを利用するとより高速に Dojo のモジュールをロードできます。このサービスでは HTTP キャッシングや gzip による圧縮を行います。また、モバイルなどで WebKit を使用してる場合は、自動判別して webkitMobile オプションによりカスタムビルドされたモジュールを返します。 このサービスを利用するには、 Dojo クライアントコードで、 Dojo 関連のファイル読込先を上記ディレクトリーに変更する事により実現できます。
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ この2つのサンプル・アプリケーションは、コード実装の参考としてもらうためのサンプルです。実働サーバーでの稼働を目的としていませんので注意してください。 File Uploader サンプル multipart/form-data エンコードによる複数ファイル一括アップロードのサンプルコードです。 PC でもモバイルでも利用でき、以下のファイルをデプロイする事により実行可能です。 ・ %was_root%/web2mobilefep_1.1/installableApps/samples/application_services/fileuploader/appsvcs-fileuploader.ear クライアント・サンプルには、 dojox.form.Uploader を使用した複数ファイル一括アップロードのサンプルコードがあります。 REST サービス側は、その複数ファイルを受け付けるサンプルコードがあります。ファイルをアップロードするディレクトリーは、 web.xml で指定します。詳細は、下記 Infocenter を参照してください。 http://publib.boulder.ibm.com/infocenter/wasinfo/v8r0/topic/com.ibm.websphere.web2mobile.mobile.application.services.help/docs/fileuploader_README.html Directory Listing サンプル dojox.data.FileStore を利用したサンプルです。 PC でもモバイルでも利用でき、以下のファイルをデプロイする事により実行可能です。 ・ %was_root%/web2mobilefep_1.1/installableApps/samples/application_services/directorylisting/appsvcs-directorylisting.ear dojox.data.FileStore を利用すると、簡単にディレクトリー情報を表示する事が可能です。サンプルでは、 dojox.data.FileStore を使用したサンプルコードを提供します。表示するディレクトリーは、 REST サービスの web.xml で指定します。詳細は、下記 Infocenter を参照してください。 http://publib.boulder.ibm.com/infocenter/wasinfo/v8r0/topic/com.ibm.websphere.web2mobile.mobile.application.services.help/docs/directorylisting_README.html
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ モバイル対応機能のその他機能です。 ビジネス・チャートの拡張 Dojo Chart の機能をモバイル対応しています。これにより、モバイル環境でも快適に各種チャート(表)を参照、操作する事が可能となります。 Geo Charting - dojox.geo.charting 地図のチャートもモバイル対応しています。ビジネス・チャートの機能に加え、地図上の要素を簡単に色分け表示したり、ツールチップ表示する事も可能です。
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ ゲージ機能の拡張 Dojo Gauge 機能もモバイル対応されています。モバイル環境でも、軽快にゲージ表示を実施でき、タッチ操作でゲージを操作する事も可能です。 ILOG Dojo Diagrammer ILOG Dojo Diagrammer もモバイル対応されています。モバイル向けにコンポーネントを縮小し、軽量に実行できるようにしています。また、ダイアグラムはタッチ操作可能となっています。また、グラフ・レイアウトの処理は、クライアント( Dojo )で実行するか、サーバーで実行するか選択できます。対象となるモバイルのスペックが低い場合は、サーバーで実行する方法を検討してください。機能的にはほとんど PC での機能と同等なので、詳細は前章の ILOG Dojo Diagrammer のページを参照してください。 モバイルで使用するためには、モバイル向けにコードを修正します。詳細は Infocenter を参照してください。 http://publib.boulder.ibm.com/infocenter/wasinfo/v8r0/topic/com.ibm.websphere.web2mobile.ilog.dojo.diagrammer.help/Content/Visualization/Documentation/Dojo/Dojo_Diagrammer/_pubskel/ps_dojo_diagrammer_ic246.html
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ IBM ILOG Dojo Diagrammer (以降 ILOG Dojo Diagrammer と表記)は、 Dojo 向けのフレームワークで各種ダイアグラムを表示するための機能です。 ILOG Dojo Diagrammer は、 JavaScript でできており、サーバーが無くても Web ブラウザーのみでダイアグラムを表示可能です。この機能は、 IBM が提供する Web 2.0 & Mobile FP の機能で、 Dojo 自身の機能ではありません。 ILOG Dojo Diagrammer で表示するダイアグラムは、各種操作が可能です。また、ノード(項目)のレイアウトも自動で最適な配置を行います。 ILOG Dojo Diagrammer を利用して、上記の様な各種ダイアグラムを作成する事ができます。
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ ILOG Dojo Diagrammer は、ダイアグラムの表示と操作が可能です。 ダイアグラムの表示 ・ノード : 表示する項目です。ノードの見た目、内容は指定可能です。自動レイアウトを使用すると指定されたアルゴリズムが最適場所に自動配置します。 ・リンク : ノードの関連付です。線の見た目は指定可能です。ノード移動に伴い自動的にリンクも追随します。 ・サブグラフ : 複数のノードを子要素の様に扱う事が可能です。サブグラフ単位で展開/折り畳みが可能です。 ・ Overview : ダイアグラムの全体と表示部分を示します。 Overview の表示部分を動かすことによりダイアグラムも移動します。 ・ツールチップ : ノードなどの項目説明をツールチップとして表示可能です。 ダイアグラムの操作/その他機能 マウス及びキーボードで上記の様な操作が可能です。 ダイアグラム・エディターは、ノードの追加/削除/編集/ノード間のリンクなどの操作を可能にする機能です。 印刷は、ダイアグラム全体もしくは一部を印刷するための機能です。
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ ILOG Dojo Diagrammer は、ノードの配置場所をプログラムで指定する事も可能ですが、自動レイアウトにより一貫性を持ったノードの配置を実現できます。その配置のアルゴリズムを指定するだけで、自動的に配置が計算され描画されます。 グラフ・レイアウト・アルゴリズムは、アルゴリズム毎に Dojo の部品になっており上記の様に指定します。上記記述方法以外にも JavaScript コード内でセットする方法もあります。 上記に、グラフ・レイアウト・アルゴリズムの一部サンプルを掲載しています。 Web 2.0 and Mobile Showcase サンプル(「3.モバイル」を参照)に、グラフ・レイアウト・アルゴリズムのサンプルがありますので、そちらで実際の表示を確認してみてください。
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ グラフ・レイアウト処理はダイアグラム表示の中で一番重い処理です。上記の様なケースでは、パフォーマンス向上のため Dojo 側でなくサーバー側でグラフ・レイアウト処理を実施する事も可能です。 サーバー側でグラフ・レイアウト処理を実施する場合は、以下の2つの作業が必要です。 1. Dojo 側のコードの修正 上記の様に、サーバー側でグラフ・レイアウト処理を実行する様にコード修正を実施します。また、サーバー処理専用のグラフ・レイアウト・モジュールに変更する事によりパフォーマンスを向上させる事ができます。 2.サーバー側にモジュールをデプロイ グラフ・レイアウト処理を実行するモジュールを WAS V8 にデプロイします。 JavaScript の Same Origin Policy のためデプロイ先のサーバーは、アプリケーションと同じサーバーである必要があります。モジュールは、 WAS V8 導入ディレクトリの下記場所にあります。 web2mobilefep_1.1/installableApps/DojoDiagrammer/dojo-diagrammer-server.war
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ View と表示される画面の関係は、上記の様になっています。 表示されるページを 1 つの HTML ファイルの中に記述します。 の中に表示画面毎に View を作成して画面表示の記述を行います。各 View 間の遷移は、 ListItem や Heading などの moveTo 属性で指定します。 なお、 FlippableView / SwapView を使用した場合は、 moveTo 属性が無くても遷移が可能です。
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ Dojo モバイルのコーディング例です。このコードは、 HTML 全体でなく画面表示部分のみピックアップしたものです。
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ モバイル Web アプリケーション開発のフローは、基本的に Dojo を使用した Web アプリケーションと同じです。 1.開発 HTML 及び JavaScript で作成するため、コンパイルの必要はなくテキストエディターがあれば開発可能です。通常は、 eclipse や RAD のエディターを使用して記述します。 RAD 8.0 . 3 には、 Dojo モバイルに対応したリッチ・ページ・エディターの Beta 版があります。この WYSIWYG なエディターで、ターゲット・デバイスでの見え方を確認しながらコーディングする事が可能となります。 2.テスト テストは、実機かシミュレーターを使用して行います。実機でのテストは、複数のテスト機種を揃えたりネットワーク環境を整備する必要があり実施が難しい場合があります。また、実機ではデバックも難しいため実際のケースではシミュレーターを使う事が多いです。各機種向けのシミュレーターは、フリーソフトなど様々なものがあります。 RAD V8.0.3 には、モバイル・ブラウザー・シミュレーターの Beta 版があります。これを使用する事により、 RAD 上で簡単にテストを実施する事が可能です。 なお、開発時の初期テスト段階では、これらのツールを使用せずに PC 上で Firefox/Chrome/Safari などの Web ブラウザーでテストを実施するケースもあります。 RAD については、セッション「 10 .開発ツール」を参照してください。
  • Rational Application Developer は、 JavaEE に準拠した Web アプリケーションの構築を支援する統合開発環境です。特に WebSphere Application Server 上で動くアプリケーションの開発を協力にサポートします。 この製品には Web アプリケーションのローカルテスト環境として 3 世代の WAS が同梱されており、各開発者の PC 上でアプリケーションの確認作業を簡単にしています。 JavaEE 開発を支援するための UML 可視化、最新の JavaEE6 標準のアプリケーション作成支援、画面系の開発、コード品質チェック、ローカル環境でのテストといった一連の作業をこの Eclipse ベースのツール上で行うことができ、開発生産性の向上、品質向上、使いやすいアプリケーションの構築を支援いたします。出来上がったアプリケーションをファイル転送でサーバーに送り、サーバー上では、手動でデプロイを手動で行うといった面倒なことは必要ありません。 また、新旧の WAS が同梱されているということで、 Web アプリケーションのマイグレーションにも活用可能となっています。あとで利用シナリオの中で出てまいります。
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ PhoneGap は、ハイブリッド・アプリケーションを作成するためのオープンソースのツールです。このツールにより、 Web アプリケーションを簡単にネイティブ・アプリケーション化できます。 PhoneGap は、 dojox.mobile で作成されたモバイル Web アプリケーションもネイティブ・アプリケーション化可能です。また、 PhoneGap の API を利用する事により、カメラなど一部デバイス特有の機能も利用可能です。 詳細については、以下の PhoneGap サイトを参照してください。 http://www.phonegap.com/
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ Web 2.0 & Mobile FP は、最新の RIA & モバイルの開発に関して、前バージョンから機能強化されました。 Dojo 1.6 ( +1.7α ) 及び ILOG Dojo Diagrammer により、高度な業務アプリケーションも簡単に構築可能になりました。 また、最新の Dojo によりモバイル Web アプリケーションの開発にも対応しています。その他に、モバイル Web アプリケーションを構築しやすくするための REST サービスや多彩なサンプルを提供しています。
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ
  • 01. WAS V8.0 概要 WAS V8.0 アナウンスメント・ワークショップ WAS V8.0 での Express 、 Base 、 ND 、 WAS for Developers の機能比較になります。赤字が WAS V7.0 からの変更点です。 全てのエディションで、 Java EE 6 と Feature Pack をサポートしており、全エディションで同じアプリケーションを稼動させることができます。エディション間の主な違いは、ライセンスの違いと運用管理面での違いになります。 WAS Express は、小規模なシステムを対象に、シングル・サーバー環境を提供します。 Express は、導入可能なプロセッサー数 (PVU 値 ) に制限があり、また、 64bit モジュールの提供がありません。導入可能な PVU 値は、これまでの 280PVU から 480PVU に拡張され、 120PVU の 4 コア・マシンにも導入することができるようになりました。 また、 Express のみに提供されるライセンスとして、イントラネット 20 ユーザー・ライセンスというものがあります。こちらは 1 ロケーションあたり1台の Express しか導入できないという制限がありますが、イントラネット向けの小規模アプリケーションでは、さらに安価なライセンスとしてご利用いただけます。 WAS Base は、 Express と同様にシングル・サーバー環境を提供しますが、導入可能プロセッサー数に制限はありません。また、 2010 年11月から新しくソケット課金(後述)が提供されるようになりました。 WAS ND は、大規模環境向けに、集中管理機能とクラスタリング機能、障害時の自動フェイルオーバー機能を提供しており、 可用性の高いシステムを構成することができます。フェイルオーバーの対象には、 HTTP セッションやメッセージング、2フェーズ・コミットにおけるトランザクションも含まれます。 WAS Express と Base では、 Web サーバー・プラグインから WAS へのリクエストの割り振りと、 HTTP セッションのフェイルオーバーをサポートしています。(ただし、セッションの共有方法は DB に限定されます。メモリー間複製は ND のみのサポートです。) Express は 2 台間でのセッション共有が可能ですが、 Base では、 2010 年11月の拡張により、 5 台まで可能になりました。また、 Web サーバーから WAS へリクエストの割り振りは 25 台まで可能です。 WAS for Developers は、開発用者向けのライセンスで、 WAS Base と同じ機能を提供します。有償版は、 WAS for Developers を導入する開発者単位に課金されます。また、 WAS V8.0 では新しく 64bit モジュールも提供されるようになりました。
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ Web 2.0 & Mobile FP を WAS V8 に導入する手順です。 1.サイトからダウンロード Web 2.0 & Mobile FP のモジュールを入手します。上記 Web 2.0 & Mobile FP 公式サイトのリンクからダウンロードページに行きます。その際、 IBM ID が必要になりますので、未登録の方は登録(無料)を実施してください。もしくは、 IBM Passport Advantage 経由でモジュールを入手してください。 Web 2.0 & Mobile FP V1.1.0 の WAS V8 用モジュールをダウンロードします。バージョンを間違えないようにしてください。モジュールはプラットフォーム共通で、 zip 版と tar.gz 版がありますので、利用環境に合わせて選択してください。 ダウンロードしたファイルを、適当なディレクトリーに解凍します。
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ 2. IBM Installation Manager からインストール IBM Installation Manager を起動し、メニューの「ファイル」から「設定」を選択します。設定画面で、「リポジトリーの追加」ボタンを押し、1.で解凍したモジュール内の repository.config を指定します。「 OK 」ボタンを押して設定画面を終了します。 トップ画面で「インストール」をクリックします。何度か次へボタンを押すとパッケージのインストール画面になります。ここで、 Web 2.0 & Mobile FP を選択します。その後、ライセンス承諾や適応する WAS V8 の選択を実施し、インストールを実施します。 インストール完了後、「更新」をクリックして修正モジュールが無いか確認してください。リポジトリーの設定を元に戻して IBM Installation Manager を終了します。 なお、 WAS V6.1 と WAS V7.0 は、ダウンロードするモジュールや導入方法が違っています。詳細は Infocenter で確認してください。
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ Web 2.0 and Mobile Showcase サンプルの実行方法です。 1.アプリケーション・サーバーを構成 サンプルを稼働させるために、エンタープライズ・アプリケーションが稼働できるアプリケーション・サーバーを構成します。また、 Web 2.0 & Mobile FP は事前に導入しておく必要があります。 2.デプロイ 上記 ear ファイルを管理コンソールからデプロイします。デプロイ時のパラメータはデフォルト値をそのまま使用します。サンプルのデプロイは少し時間がかかります。 3.実行 エンタープライズ・アプリケーションを開始して、上記 URL からアクセスします。トップページは、 PC のブラウザー、モバイルどちらでもアクセス可能です。
  • 09. Web 2.0 & Mobile WAS V8.0 アナウンスメント・ワークショップ Web 2.0 & Mobile FP で IBM Dojo を利用する場合は、 Dojo のモジュールをコピーする必要があります。 Dojo のモジュールは、 WAS V8 導入ディレクトリの "web2mobilefep_1.1/ajax-rt_1.X" に導入されているので必要なモジュールをコピーします。通常は、 Dojo を利用するアプリケーションの war ファイル内にこれらのファイルをコピーして利用します。多くのアプリケーションで共通に使用したい場合などは、 IHS など静的コンテンツ配置先に配置する事も可能です。なお、この場合、 JavaScript の Same Origin Policy 制約上、ブラウザーから同一ホストに見える場所に配置する必要があります。 カスタム・ビルドを実施した場合は、カスタム・ビルドにより生成されたモジュールを配置します。

20111031 MobileWeb at TDC 20111031 MobileWeb at TDC Presentation Transcript

  • iPhone/iPad/Android 対応 Web アプリケーション勉強会(実践編) @ 東北デベロッパーズコミュニティ 2011 年 10 月 31 日 日本アイ・ビー・エム株式会社 須江 信洋 (nsue@jp.ibm.com)
  • 目次
    • モバイル・アプリケーションのアーキテクチャ考察
    • モバイル Web アプリケーションツールキット : Dojo mobile
    • WebSphere Application Server のモバイル対応
    • モバイル Web アプリケーション開発の実践
    • PhoneGap によるハイブリッド・アプリケーション
  • モバイル・アプリケーションのアーキテクチャ考察
  • モバイル・デバイスと PC の違い モバイルには、画面サイズや操作性、 データ通信量及び HW 能力に制約がある モバイル用 アプリケーション モバイル・デバイス PC 画面サイズ スマートフォン ・・・ 4 インチ程度で小さい タブレット ・・・ 6 ~ 10 インチ程度で PC よりは少し小さい 10 インチ以上で高解像度 操作 タッチ操作 ・・・ マウスの様にピンポイント指定は難しい ソフトキーボード ・・・ 入力効率が落ちる マウスとキーボード 通信 無線 LAN ・・・ 利用可能な場所が限られる 3G 通信 ・・・ 通信速度が速くない LAN や無線 LAN HW CPU 能力/メモリー ・・・ PC よりも低スペック GPS 、カメラ、モーションセンサーなどが標準で搭載 高速な CPU と大量メモリー 共通項目 Web ブラウザーが稼働
  • モバイル向けアプリケーションのタイプ モバイルの Web ブラウザーで実行 Maintenance Cost (TCO) Portability (cross-device reuse) Richness of Mobile Presentation / Services Web アプリケーション デスクトップとモバイル共用の Web クライアント ( HTML 、 JavaScript ) デバイス特有の機能が利用できない制限がある AppStore からダウンロード&導入 ネイティブ・モバイル・アプリケーション 各モバイル専用のアプリケーション開発方法で作成されたモバイル・アプリケーション 各モバイル向けの表現、特有の機能が利用可能。 高パフォーマンス モバイル Web アプリケーション モバイル専用の Web クライアント ( HTML5 、 JavaScript ) オフラインでも使用できる ハイブリッド・モバイル・アプリケーション Web 技術( HTML5 、 JavaScript )を活用した各モバイルでのみ稼働するアプリケーション デバイス特有の機能も 利用可能 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
  • ネイティブ・アプリとモバイル Web アプリでの開発方法比較 iPhone / iPad ネイティブ・アプリ Android ネイティブ・アプリ モバイル Web アプリ 実行環境 iOS Android OS ブラウザ (Webkit 系 ) 開発言語 Objective-C Java (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 通知のみ
  • モバイル Web アプリケーションツールキット :Dojo Mobile
  • Dojo
    • 概要
      • JavaScript の高機能なツールキット
      • Dojo Foundation が提供(オープンソース)
    • 機能
      • Core : Dojo の基本的な機能( UI 関連除く)を提供
      • Dijit : UI 関連の機能を提供
      • dojox : 先進的な機能を提供
    • メリット
      • リッチな UI を実現可能
      • 標準ライブラリーが非常に充実している
      • ブラウザ間の表示/動作の違いの吸収
      • JavaScript をより容易に記述できる
      • 画面パーツの国際化対応
      • 画面部品のコンポーネント化の方式を提供
    ● Dojo の各モジュールの位置づけ ● Dojo による仕様の違いの吸収 dojo Core Dijit dojox Internet Explorer Mozilla Firefox ユーザー アプリケーション ユーザー アプリケーション Internet Explorer DOJO ユーザー アプリケーション Mozilla Firefox DOJO ユーザー アプリケーション
  • テーマ
    • テーマ
      • Dijit を利用するには、 Dojo のテーマを読み込む必要がある
      • テーマとは、画面パーツの見た目(色使いやアイコンなど)を規定している CSS ファイル
      • Claro ( Dojo 1.5 から)、 Tundra 、 Soria 、 Nihilo の 4 種類が用意されている
    • 適用方法
      • <style> タグで CSS のインポート
      • <body> 要素の class 属性にテーマ名を指定
    <style type=&quot;text/css&quot;> @import &quot;/dijit/themes/claro/claro.css&quot;; </style> <body class=&quot;claro&quot;> … </body> Tundra Soria Nihilo Claro
  • データ・アクセス : dojo.data
    • dojo.data
      • データ・フォーマットに捉われない一貫性のあるデータ・アクセス
        • データ・ストアがデータ・ソースのデータ・フォーマットを隠蔽
    要求
    • データ・ソース
    • ファイル - JSON - XML - CSV
    • Web サービス など
    データ・ストア データを読み込む JavaScript オブジェクト
    • 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
    no name dpt place 0100 川中 ISE 幕張 0200 山中 SWG 箱崎 0300 野中 ATS 幕張 属性 (Attribute) アイテム (Item) 値 (Value) アイデンティティ (Identity)
  • 表の表示 : データグリッド
    • Dojo による表の表示 : dojox.grid.DataGrid
      • 操作可能な表が、簡単に表示
      • データは、 dojo.data による読み込み
    • 操作
    <span dojoType=&quot;dojo.data.ItemFileWriteStore&quot; jsId=&quot;store1&quot; url=&quot;json/datagrid.json&quot;></span> <table dojoType=&quot; dojox.grid.DataGrid &quot; jsId=&quot;dgrid1&quot; store=&quot;store1&quot; query=&quot;{ id: '*' }&quot; singleClickEdit=&quot;true&quot; selectionMode=&quot;extended&quot; columnReordering=&quot;true&quot; style=&quot;width:100%;height:350px&quot; rowSelector=&quot;20px&quot;> ・データの昇順・降順ソート ・データの検索、検索結果表示 ・項目の選択、複数選択 ・セルの結合されたテーブル表示 ・カラムの順序変更 ( ドラッグアンドドロップ ) ・元データにないカラムの追加 ・データの直接編集、削除、追加
  • 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 の使用
    <script src=&quot;dojo.js&quot; data-dojo-config =&quot;parseOnLoad: true, isDebug: true&quot;></script> <div data-dojo-type =&quot;dijit.Dialog&quot; data-dojo-props ='title:&quot;My Dialog&quot;, onFocus:function(){ /* a focus event handler */ }' data-dojo-id =&quot;myDialog&quot;></div>
  • Dojo 1.6 - ガント・チャート
    • ガント・チャート : dojox.gantt.GanttChart
      • 操作可能なガントチャートを簡単に表示可能
      • コードのイメージ
    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 }, &quot;gantt&quot;); ganttChart.addProject(projectDev); ganttChart.init(); <div class=&quot;ganttContent&quot;> <div id=&quot;gantt&quot;></div> </div>
  • 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
  • Dojo モバイル - 特徴
    • 可能な限り dojo のモジュールとの依存性を排除
      • dojo の必要のないモジュールをロードしないようにするため
    • イメージ(画像)は使用していない
      • UI パーツは CSS3 を利用して描画
      • アプリケーション・アイコンのみイメージ使用
    • CSS sprite をサポート
      • アプリケーション・アイコン・イメージを 1 つのまとめて HTTP リクエストを削減
    • webkitMobile のビルド・オプション ( PC のブラウザーで表示が必要ない場合)
      • カスタム・ビルド時に dojo core のサイズを削減
    • モバイル専用 : 最小限のパーサー
      • dojox.mobile.parser は、たった 80 行で構成されている
      • モバイルには、十分な機能を持った小さなパーサー
    軽量でモバイルに適した Widget パフォーマンスはとても重要である ・モバイルデバイスは、 PC ほど処理能力が高くない ・モバイルユーザーの利用パターンは、 PC ユーザーとは同じでない これらは、イメージではない
  • Dojo モバイル - 必須の処理
    • モバイル・デバイス向け表示指定
    • モバイル専用のパーサーを読み込む
    • モバイル用テーマを読み込む
    <head> <meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1, user-scalable=no&quot;> <meta name=&quot;apple-mobile-web-app-capable&quot; content=&quot;yes&quot;> <title>My Dojo Mobile App</title> <link rel=&quot;stylesheet&quot; href=&quot;dojox/mobile/themes/iphone/iphone.css&quot;> <script src=&quot;dojo/dojo.js&quot; djConfig=&quot;parseOnLoad: true&quot;></script> <script> dojo.require(&quot;dojox.mobile.parser&quot;); dojo.require(&quot;dojox.mobile&quot;); dojo.requireIf(!dojo.isWebKit, &quot;dojox.mobile.compat&quot;); </script> </head> モバイル・デバイスでの表示指定 モバイル用の表示テーマを指定 モバイル専用のパーサーを指定
  • 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 Custom dojox/mobile/themes/custom/custom.css ・独自のモバイル用テーマ ・ LESS を利用してカスタマイズ可能
  • Dojo モバイル - View
    • モバイルで使用するレイアウト・コンポーネント
      • 表示されるページのベースとなるコンポーネント
        • 他のコンポーネントを配置するためのベース
    View ・基本となる View コンポーネント ・画面全体がスクロール <div dojoType=&quot; dojox.mobile.View &quot; selected=&quot;true&quot;></div> Scrollable View ・ヘッダー、フッターはスクロールし ない View スクロールしない <div dojoType=&quot; dojox.mobile.ScrollableView &quot; selected=&quot;true&quot;></div> FlippableView ・タッチ操作で左右画面を移動可 能な View ・ Dojo 1.7 から SwapView に名称 変更 <div dojoType=&quot; dojox.mobile.FlippableView &quot; selected=&quot;true&quot;>View 1</div>
  • Dojo モバイル - 基本的な Widget Heading ・画面上部に表示するナビゲーションバー <h1 dojoType=&quot; dojox.mobile.Heading &quot; label=&quot;My App&quot; back=&quot;Back&quot; moveTo=&quot;back&quot;> <div dojoType=&quot;dojox.mobile.ToolBarButton&quot; label=&quot;Edit&quot; class=&quot;mblColorBlue&quot; style=&quot;width:25px;float:right&quot;></div> </h1> RoundRect ・コンテンツを表示するための単純な角丸コンテナー <div dojoType=&quot; dojox.mobile.RoundRect &quot; shadow=&quot;true&quot;> This is a simple RoundRect object with some content in it. </div> RoundRectCategory と RoundRectList ・アイテムのリスト表示 <h2 dojoType=&quot; dojox.mobile.RoundRectCategory &quot;>List Heading</h2> <ul dojoType=&quot; dojox.mobile.RoundRectList &quot;> <li dojoType=&quot; dojox.mobile.ListItem &quot;>List Item 1</li> <li dojoType=&quot;dojox.mobile.ListItem&quot;>List Item 2</li> <li dojoType=&quot;dojox.mobile.ListItem&quot;>List Item 3</li> </ul> Button と Switch ・ボタンとスイッチ <button dojoType=&quot; dojox.mobile.Button &quot; btnClass=&quot;mblBlueButton&quot; style=&quot;width: 100px&quot;>Click me!</button> <div dojoType=&quot; dojox.mobile.Switch &quot; value=&quot;on&quot;></div> ListItem RoundRectList RoundRectCategory
  • Dojo モバイル - その他の Widget TabBar EdgeToEdgeCategory と EdgeToEdgeList ImageView ProgressIndicator SpinWheel と DatePicker IconContainer と IconItem
  • 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
  • 【デモ】 スマートフォンとタブレットの自動切り替え 1つのアプリケーションで、横の表示をスマートフォンとタブレットで自動切り替え スマートフォン タブレット(& PC ブラウザー) 独立したスクロール
  • WAS のモバイル対応
  • 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 サービス等の業界標準技術にいち早く対応
    • 幅広いプログラミング・モデルに対応
    • 柔軟かつ強力な運用管理機能を提供
    • 高いスケーラビリティと可用性を提供
    • 多くの大規模サイトで高いパフォーマンスを実証
  • WAS 13 年の歴史  1999 2000 2001 2002 2008
    • WebSphere ソフトウェア製品群の発表
      • Java ベースの Web アプリケーションの開発・展開・管理
    EJB を投入 Java 2 マルチ OS サポート 1998 2003 J2EE 1.3 JDK1.3 分散環境の新しいトポロジー WS-I Ba sic Profile 1.0 WAS V2.0 WAS V3.0 WAS V3.5 WAS V4.0 WAS V5.0 WAS V5.1 JDK1.4 JSF PME 最新の WS* WAS V1.1 WAS V6.1 2004 2005 WAS V6.0 2006 J2EE 1.4 HA 機能拡張 SOA 対応 新メッセージングエンジン 混合バージョンセル 全エディション J2EE, PME サポート 最新の WS* WAS V6.1 Feature Pack JDK 5 SIP サポート Portlet サポート スクリプト拡張 開発ツール (AST) 最新の WS* 2007 J2EE 1.2 J2EE 1.3 J2EE 1.4 Java EE 6 WAS V8 登場 ! 2011 年 J2EE 1.2 Web サービスサポート 動的キャッシュ リソースアナライザー 2011
    • 信頼性・管理機能の強化
    • 業界標準技術への対応
    WAS V7 Java EE 5 2009 2010 WAS V7 Feature Pack Java EE 5 / JDK 6 柔軟な管理 ランタイム・プロビジョニング コードと Fix の集中管理 Java 高速化 ( 参照圧縮 ) 6 月 18 日ダウンロード開始 7 月 22 日メディア出荷開始
  • 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
  • Feature Pack とは
    • WAS に特定のテーマに沿った 最新 / 拡張機能 を追加
    • WAS に追加インストール
    • 無償 で Web からダウンロード可能
    • 有効なサポート契約をお持ちのお客様には、 Feature Pack も サポート対象
    Web 2.0 & Mobile WAS V8 CEA XML SCA OSGi Apps & JPA 2.0 Java Batch Dynamic Scripting Java EE 6 WAS V8 Update Web 2.0 EJB 3.0 Web Services WAS V6.1 EJB 3.0 Web Services Web 2.0 CEA XML SCA OSGi Apps & JPA 2.0 WAS V7 Java Batch Java EE 5 WAS V6.1 & 7.0 J2EE 1.4 WAS V6.1 WAS V7
  • 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 パワーが必要になるグラフ・レイアウト処理
        •   をサーバー側でも実行可能
  • 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 Ajax Proxy RPC アダプター JavaEE アプリ Web Feed JSON4J SIBus FP の機能 外部 Web サービス WAS with Web 2.0 & Mobile FP Dojo (モバイル対応) モバイル・ ブラウザー モバイル・ アプリケーション ・サービス ILOG Dojo Diagrammer
  • Web メッセージング
    • Web メッセージング
      • Ajax クライアントを使用して、株価やインスタント・メッセージング(チャット)のようなリアルタイムに更新されるデータをプッシュ配信
      • HTML5 Web Sockets には非対応
    • ブラウザーをサービス統合バス( SIBus )の Topic に接続し、サーバー側のイベントをブラウザーに配信
    • ブラウザーとサーバー間の通信には Comet モデルを採用
    • クライアントは、 Dojo のパーツとして提供
    Bayeux Message JSON WebSphere Application Server Enterprise Service Bus Web メッセージング (Messaging Bridge) Message Delivery Subscribe Publish Comet ブラウザー Ajax Library
  • 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 ・ゲージ機能の拡張 その他機能
  • Web 2.0 and Mobile Showcase サンプルの画面
    • Web 2.0 & Mobile の新機能サンプル・アプリ
    Dojo モバイル モバイル・アプリケーション・サービス ILOG Dojo Diagrammer
  • 【参考】 サンプルの画面 Mobile Showcase (iPad 表示 ) Charts (iPad 表示 ) Business Process Diagram Diagram Editor
  • モバイル・アプリケーション・サービス Analytics サービス ・モバイル端末は、デバッグが難しい ・操作の記録を残したい ・クライアントのログをサーバーに記録 サンプル・アプリケーション ・ファイルアップロード ・ディレクトリー情報表示 ・ Dojo クライアントと REST サービスのサンプル・コードが欲しい Graphics Conversion サービス ・画像のフォーマット変換、拡大/縮小 ・ SVG ファイルを表示できない ・画像のサイズが大きすぎる Optimizer サービス ・ Dojo モジュールの配布を最適化 ・ Dojo のロードを高速化したい ・受信するデータ量を減らしたい
  • モバイル・アプリケーション・サービス - Analytics サービス
    • Analytics サービス
    Dojo クライアントで生成されたイベントを サーバー側で記録する REST サービス Analytics サービス ログ イベント dojox.analytics を使用してイベントを送信 ・ dojo クライアント・コード内で任意のタイミ ング、任意の内容で情報を送信可能 PC 、モバイルで使用可能 appsvcs-analytics.ear ログの出力先の設定 ・ web.xml で指定 REST インターフェース ・イベント・リストの報告 ・ /appsvcs-analytics/rest/analytics/logger ・ GET or POST
  • モバイル・アプリケーション・サービス - 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 からのみ変換可能 ファイル取得
  • モバイル・アプリケーション・サービス - Optimizer サービス
    • Optimizer サービス
    PC 、モバイルで使用可能 appsvcs-optimizer.ear Dojo のモジュールを最適化して 配信を行う REST サービス Dojo の最適化 された配信 Optimizer サービス 最適化 Dojo モジュール Optimizer サービス経由で Dojo を読み込む ・ /appsvcs-optimizer/rest/optimizer/dojo/dojo.js 各種指定を設定 ・ Dojo のディレクトリー、キュッシュ期間などを設定 ・ web.xml で指定 ・ HTTP キャッシング ・ webkitMobile オプションを指定したモジュールの使用 ・ gzip による通信データの圧縮
  • モバイル・アプリケーション・サービス - サンプル
    • File Uploader サンプル・アプリケーション
    • Directory Listing サンプル・アプリケーション
    サンプル・アプリケーションは、コード実装のサンプルです。 実動サーバーでの稼働を目的としていません。 File アップロードを受け付ける REST サービスのサンプル File Upload PC 、モバイルで使用可能 appsvcs-fileuploader.ear multipart/form-data エンコード dojox.form.Uploader による クライアント・サンプル multipart/form-data による複数 ファイル送信を受け付ける RE ST サービスのサンプル dojox.data.FileStore を 利用したサンプル PC 、モバイルで使用可能 appsvcs-directorylisting.ear Directory Listing dojox.data.FileStore を利用 して、ディレクトリー情報を取 得 / 表示するサンプル ディレクトリー情報要求を受け付け、返す REST サービスのサンプル
  • その他機能 1/2
    • ビジネス・チャートの拡張
      • Dojo Chart の全てのチャートをモバイル向け( Webkit モバイル)に拡張、及び最適化を実施
      • 小さな画面サイズに適合したテーマを提供
      • スクロールなどの 操作でタッチ操作 をサポート
      • インタラクティブ な説明
      • Smart label レイ アウト
      • チャートタイトル の表示
    • Geo Charting - dojox.geo.charting
      • ベクター地図表示コンポーネント
        • PC 、モバイルで、ズーム操作をタッチ操作で実施可能
      • Dojo data store の情報を、地図の色分けにマッピング可能
      • 地図要素のツールチップ表示が可能
  • その他機能 2/2
    • ゲージ機能の拡張
      • Dojo Gauge をモバイル向け( Webkit モバイル)に拡張及び最適化を実施
      • 新しいハイクオリティーなゲージスタイルを提供
      • ゲージをタッチ操作可能
    • ILOG Dojo Diagrammer
      • モバイル向けに拡張、最適化を実施
      • ダイアグラムをタッチ操作可能
      • スペックに合わせて、グラフ・レイアウト処理の実行地点を選択可能
        • クライアント( Dojo )で実行
        • サーバーで実行
  • IBM ILOG Dojo Diagrammer
    • Dojo で各種ダイアグラムを表示するフレームワーク
      • Web ブラウザーのみでダイアグラムを表示可能
      • 操作可能なダイアグラム
      • 最適な自動レイアウト
    • 利用形態
      • 産業施設の監視
        • 電話通信網監視、電力網監視
      • エンタープライズ・ビジネス
        • BPM 、 BAM 、 BPM モデリングツール、 デシジョン・ツリー、 PERT 図、 ワークフロー
      • エンタープライズ・ダッシュボード
        • 組織図、 BP モニタリング
      • ソフトウェア・マネージメント
        • UML 図
      • インダストリアル・エンジニアリング
        • 各種プロセス図、 セマンティック・デザイン・ダイアグラム
  • ILOG Dojo Diagrammer の機能
    • ダイアグラムの表示
    • ダイアグラムの操作/その他機能
    ノード リンク Overview サブグラフ ツールチップ ・マウス及びキーボートによる各種操作 ・ノードの移動 ・サブグラフの展開/折り畳み ・ノード/リンクの選択 ・ダイアグラムの拡大/縮小 ・ノード内の文字編集 ・ダイアグラム・エディター ・印刷
  • グラフ・レイアウトの指定
    • 指定されたアルゴリズムによりノードの配置を自動決定
    <div dojoType=&quot; ibm_ilog.graphlayout.tree.TreeLayout &quot; jsId=&quot;myLayout&quot;/> <div id=&quot;canvas&quot; dojoType='ibm_ilog.diagram.widget.Diagram' nodeLayout=&quot;myLayout&quot; automaticNodeLayout=&quot;true&quot; ... > </div> グラフ・レイアウト・アルゴリズムのサンプル
  • サーバでのグラフ・レイアウト処理
    • サーバー側でグラフ・レイアウト処理を実施させる事が可能 以下の様なケースで使用
      • 非常に大きなダイアグラムを生成する
      • モバイルなど 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 Graph Layout 非同期 も可能 サーバー側にグラフ・レイアウト 用モジュールを配置 ・ dojo-diagrammer-server.war Web ブラウザー WAS V8 REST サービス Web ブラウザー側 処理の軽減 重い処理
  • モバイル Web アプリケーション開発の実践
  • モバイル Web アプリケーション開発における考慮点
    • デバイス毎の差異
      • 画面解像度や処理能力 ( メモリ、 CPU)
      • ブラウザ
        • 特に Android は苦労が多いそうです
    • ネットワーク
      • 特に 3G 通信時は注意が必要
        • 通信速度、帯域幅の制限
        • 回線断
      • Web ページのキャッシュ機能が貧弱
        • 例えば Mobile Safari では「戻る」でも通信が発生
    • 開発・デバッグ環境
      • 開発時は PC のブラウザで代替可能
      • ブラウザのメモリリークなどで苦労することも
        • ネィティブアプリケーションのブラウザ・コンポーネントや PhoneGap を利用することで、ネィティブのデバッグ環境 (XCode の Shark など ) が利用可能
  • 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 として実装するのが好ましい
  • Dojo モバイルによる One Page Apps <body> <View id=ViewA> <View id=ViewB> <Heading>ViewA</Heading> <Heading moveTo=&quot;ViewA&quot;>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 の場合
  • Dojo モバイルでのコーディング例 <div id=&quot; foo &quot; dojoType=&quot;dojox.mobile.View&quot; selected=&quot;true&quot;> <h1 dojoType=&quot;dojox.mobile.Heading&quot;> Mobile Mashup </h1> <h2 dojoType=&quot;dojox.mobile.RoundRectCategory&quot;> Spaces </h2>   <ul dojoType=&quot;dojox.mobile.RoundRectList&quot;>    <li id=&quot;item1&quot; dojoType=&quot;dojox.mobile.ListItem&quot;    icon=&quot;images/i-icon-1.png&quot; rightText=&quot;Off&quot; moveTo=&quot; bar &quot;> u1space </li> <li id=&quot;item2&quot; dojoType=&quot;dojox.mobile.ListItem&quot; icon=&quot;images/i-icon-2.png&quot; rightText=&quot;Off&quot; moveTo=&quot; bar &quot;> u2space </li> <li id=&quot;item3&quot; dojoType=&quot;dojox.mobile.ListItem&quot; icon=&quot;images/i-icon-3.png&quot; rightText=&quot;Off&quot; moveTo=&quot; bar &quot;> Wi-Fi </li> <li id=&quot;item4&quot; dojoType=&quot;dojox.mobile.ListItem&quot; icon=&quot;images/i-icon-4.png&quot; rightText=&quot;VPN&quot; moveTo=&quot; bar &quot;> VPN </li> </ul> </div> <div id=&quot; bar &quot; dojoType=&quot;dojox.mobile.View&quot;> <h1 dojoType=&quot;dojox.mobile.Heading&quot; back=&quot;Spaces&quot; moveTo=&quot; foo &quot;> u1space </h1> <h2 dojoType=&quot;dojox.mobile.RoundRectCategory&quot;>Applications</h2> <ul dojoType=&quot;dojox.mobile.RoundRectList&quot;> <li dojoType=&quot;dojox.mobile.ListItem&quot; rightText=&quot;Off&quot;> Video </li> <li dojoType=&quot;dojox.mobile.ListItem&quot; icon=&quot;images/i-icon-1.png&quot; rightText=&quot;VPN&quot;> Maps </li> <li dojoType=&quot;dojox.mobile.ListItem&quot; rightText=&quot;Off&quot;> Phone Number </li> </ul> </div>
  • デモと解説: BigBlue サンプル・アプリケーションはこちらからダウンロードできます http://www.ibm.com/developerworks/jp/websphere/library/was/was8_dojomobile/2.html
  • 【参考】 RAD によるモバイル Web アプリケーションの開発 2. テスト 1. 開発 エディターや RAD ( Rational Application Developer )などによる開発 RAD モバイル対応リッチ・ページ・エディター( Beta 版) 実機、もしくはシミュレーターによるテスト 及びデバッグ RAD モバイル・ブラウザー・シミュレーター( Beta 版)
  • 【参考】リッチ・ページ・エディターでの開発 WYSIWYG エディターで、ターゲット・デバイスでの見え方を確認しながら コーディング パレットから dojox.mobile を含む Dojo ウィジェットを配置可能 フォーカスされたウィジェットをビジュアルに参照、変更するためのプロパティ コーディングを支援するコード・アシスト機能
  • 【参考】モバイル・ブラウザー・シュミレーターでのテスト デバイス・テストを可能にするブラウザー上での シミュレーター 複数デバイスの配置や、 回転(ローテーション)も可能
  • 【参考】 Rational Application Developer V8.0 WebSphere 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 開発を 可視化 実行前に コード 品質をチェック
  • PhoneGap によるハイブリッド・アプリケーション
  • 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 http://docs.phonegap.com/en/1.1.0/index.html
  • PhoneGap デモ
  • PhoneGap Plugins による拡張
    • Native 機能へのブリッジを独自に追加できる
    http://wiki.phonegap.com/w/page/36752779/PhoneGap%20Plugins
  • IBM Mobile Technology Preview(MTP)
    • ハイブリッド・フレームワーク : PhoneGap
    • 軽量 AP サーバーランタイム : WAS8.5 Liberty Profile(α)
    • 通知サービス (Notifications): REST(Comet) / Android 連携
    • サンプル・アプリケーション
    http:// ibm.co/ibmmobile
  • サンプル (Mysurance) のアーキテクチャ
    • Dojo mobile で実装
    • PhoneGap の Plugin として Nofification を追加
  • まとめ/参考資料
  • まとめ
    • Dojo mobile でモバイル・アプリケーション開発が容易に
      • ネィティブよりも開発や配布が容易
      • クロス・プラットフォーム対応
      • Dojo が提供する豊富な API を活用
    • WAS のモバイル対応
      • Dojo mobile に加え、以下を提供
        • モバイルをサポートする REST サービス
        • 多彩なサンプル・アプリケーション
        • ILOG Dojo Diagrammer による高度な UI
    • PhoneGap によるハイブリッド化
      • ネィティブと同様に配布可能
      • JavaScript からデバイス固有機能を利用可能
  • 参考資料
    • 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/
  • WAS V8 のエディション比較 サーバーとして利用可能 開発用 *1: 2010 年 11 月に WAS Base ライセンスの拡張を発表 内容 WAS Express WAS (Base) WAS ND WAS for Developers Java EE 6 サポート (EJB 含む ) ○ ○ ○ ○ Feature Pack サポート ○ ○ ○ ○ 導入可能プロセッサー数 PVU 480 まで 無制限 無制限 開発者用 PC 課金体系 PVU 課金 PVU / ソケット課金 *1 PVU 課金 ユーザー課金 / 無償版 イントラネット 20 ユーザーライセンス ○ × × × 64bit モジュールの提供 × ○ ○ ○ 複数サーバーの集中管理 × × ○ n/a クラスター構成と フェイルオーバー △ Web サーバーから WAS への割り振り、および、セッションのフェイルオーバーは 2 台まで可能 ( セッション保管は DB のみ ) △ Web サーバーから WAS への割り振りは 25 台まで、セッションのフェイルオーバーは 5 台まで可能 *1 ( セッション保管は DB のみ ) ○ n/a
  • 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 用モジュールをダウンロード
      • ダウンロードしたモジュールを適当なディレクトリーに解凍
    ダウンロード
  • Web 2.0 & Mobile FP の導入 ( WAS V8 の場合) 2 / 2
    • 2. IBM Installation Manager からインストール
      • ダウンロードしたモジュールをリポジトリーとして指定
      • トップ画面からインストールを選択
      • Web 2.0 & Mobile FP を選択してインストール
      • (オプション)トップ画面から更新を選択し、修正が出ていないか確認
  • 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/
  • 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