SlideShare ist ein Scribd-Unternehmen logo
1 von 70
iPhone/iPad/Android 対応 Web アプリケーション勉強会(実践編) @ 東北デベロッパーズコミュニティ 2011 年  10 月  31 日 日本アイ・ビー・エム株式会社 須江 信洋 (nsue@jp.ibm.com)
目次 ,[object Object],[object Object],[object Object],[object Object],[object Object]
モバイル・アプリケーションのアーキテクチャ考察
モバイル・デバイスと 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 への 登録が必要 (0,800/ 年 ) 端末の設定変更のみ URL 通知のみ
モバイル Web アプリケーションツールキット :Dojo Mobile
Dojo ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],● Dojo の各モジュールの位置づけ ● Dojo による仕様の違いの吸収 dojo Core Dijit dojox Internet Explorer Mozilla Firefox ユーザー アプリケーション ユーザー アプリケーション Internet Explorer DOJO ユーザー アプリケーション Mozilla Firefox DOJO ユーザー アプリケーション
テーマ ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<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 ,[object Object],[object Object],[object Object],要求 ,[object Object],[object Object],[object Object],データ・ストア データを読み込む   JavaScript オブジェクト ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],no name dpt place 0100 川中 ISE 幕張 0200 山中 SWG 箱崎 0300 野中 ATS 幕張 属性 (Attribute) アイテム (Item) 値 (Value) アイデンティティ (Identity)
表の表示 : データグリッド ,[object Object],[object Object],[object Object],[object Object],<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 対応 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<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  - ガント・チャート ,[object Object],[object Object],[object Object],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 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Dojo モバイル - 特徴 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],軽量でモバイルに適した Widget パフォーマンスはとても重要である   ・モバイルデバイスは、 PC ほど処理能力が高くない   ・モバイルユーザーの利用パターンは、 PC ユーザーとは同じでない これらは、イメージではない
Dojo モバイル - 必須の処理 ,[object Object],[object Object],[object Object],<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 モバイル - モバイル用テーマ ,[object Object],[object Object],[object Object],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 ,[object Object],[object Object],[object Object],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 モバイル - 画面遷移時のエフェクト ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],・ 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)  とは ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
WAS 13 年の歴史  1999 2000 2001 2002 2008 ,[object Object],[object Object],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 ,[object Object],[object Object],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  の特徴 開発生産性の向上 運用の効率化  &  信頼性の向上 セキュリティー  &  管理機能の向上 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Feature Pack  とは ,[object Object],[object Object],[object Object],[object Object],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  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Web 2.0 & Mobile FP V1.1.0 のコンポーネント ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],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 メッセージング ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],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  サンプルの画面 ,[object Object],Dojo モバイル モバイル・アプリケーション・サービス ILOG Dojo Diagrammer
【参考】 サンプルの画面 Mobile Showcase (iPad 表示 ) Charts (iPad 表示 ) Business Process Diagram Diagram Editor
モバイル・アプリケーション・サービス Analytics サービス ・モバイル端末は、デバッグが難しい ・操作の記録を残したい ・クライアントのログをサーバーに記録 サンプル・アプリケーション ・ファイルアップロード ・ディレクトリー情報表示 ・ Dojo クライアントと REST サービスのサンプル・コードが欲しい Graphics Conversion サービス ・画像のフォーマット変換、拡大/縮小 ・ SVG ファイルを表示できない ・画像のサイズが大きすぎる Optimizer サービス ・ Dojo モジュールの配布を最適化 ・ Dojo のロードを高速化したい ・受信するデータ量を減らしたい
モバイル・アプリケーション・サービス -  Analytics サービス ,[object Object],Dojo クライアントで生成されたイベントを サーバー側で記録する REST サービス Analytics サービス ログ イベント dojox.analytics  を使用してイベントを送信 ・ dojo クライアント・コード内で任意のタイミ   ング、任意の内容で情報を送信可能 PC 、モバイルで使用可能 appsvcs-analytics.ear ログの出力先の設定 ・ web.xml で指定   REST  インターフェース ・イベント・リストの報告   ・ /appsvcs-analytics/rest/analytics/logger   ・ GET or POST
モバイル・アプリケーション・サービス -  Graphics Conversion  サービス ,[object Object],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  サービス ,[object Object],PC 、モバイルで使用可能 appsvcs-optimizer.ear Dojo のモジュールを最適化して 配信を行う REST サービス Dojo の最適化 された配信 Optimizer サービス 最適化 Dojo  モジュール Optimizer サービス経由で Dojo を読み込む ・ /appsvcs-optimizer/rest/optimizer/dojo/dojo.js 各種指定を設定   ・ Dojo のディレクトリー、キュッシュ期間などを設定   ・ web.xml で指定 ・ HTTP キャッシング ・ webkitMobile オプションを指定したモジュールの使用 ・ gzip による通信データの圧縮
モバイル・アプリケーション・サービス - サンプル ,[object Object],[object Object],サンプル・アプリケーションは、コード実装のサンプルです。 実動サーバーでの稼働を目的としていません。 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 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
その他機能  2/2 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
IBM ILOG Dojo Diagrammer ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
ILOG Dojo Diagrammer  の機能 ,[object Object],[object Object],ノード リンク Overview サブグラフ ツールチップ ・マウス及びキーボートによる各種操作 ・ノードの移動 ・サブグラフの展開/折り畳み ・ノード/リンクの選択 ・ダイアグラムの拡大/縮小 ・ノード内の文字編集 ・ダイアグラム・エディター ・印刷
グラフ・レイアウトの指定 ,[object Object],<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> グラフ・レイアウト・アルゴリズムのサンプル
サーバでのグラフ・レイアウト処理 ,[object Object],[object Object],[object Object],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 アプリケーション開発における考慮点 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
One Page Apps(Single Page Application) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
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  の機能をフルに引き出す統合開発環境 ,[object Object],[object Object],[object Object],[object Object],Java, Java EE(EJB 3.1 など)の作成支援 WAS ローカルテスト環境でクイックなテスト ビジュアルな Web 開発 開発生産性 品質 使いやすさ Java EE  開発を 可視化 実行前に コード 品質をチェック
PhoneGap によるハイブリッド・アプリケーション
PhoneGap によるハイブリット・アプリケーション化 ,[object Object],[object Object],[object Object],[object Object],[object Object],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 による拡張 ,[object Object],http://wiki.phonegap.com/w/page/36752779/PhoneGap%20Plugins
IBM Mobile Technology Preview(MTP) ,[object Object],[object Object],[object Object],[object Object],http:// ibm.co/ibmmobile
サンプル (Mysurance) のアーキテクチャ ,[object Object],[object Object]
まとめ/参考資料
まとめ ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
参考資料 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
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 ,[object Object],[object Object],[object Object],[object Object],[object Object],ダウンロード
Web 2.0 & Mobile FP の導入 ( WAS V8 の場合)  2 / 2 ,[object Object],[object Object],[object Object],[object Object],[object Object]
Web 2.0 and Mobile Showcase  サンプルの実行方法 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Web 2.0 & Mobile FP での IBM Dojo の利用方法 ,[object Object],WAS V8  導入ディレクトリ IBM Dojo モジュール ① war フィアル ② IHS など静的コンテンツ配置場所 必要な部分を コピー ・外部から同じホスト名で認識される場所 ・・・  IBM Atom ライブラリー  ・・・  IBM  ゲージ・ウィジェット ・・・  IBM ILOG  Dojo Diagrammer   ・・・  IBM OpenSearch ライブラリー  ・・・  IBM SOAP ライブラリー  ・・・  Dojo ユーティリティー・ツール ・・・  Dojo Dijit ・・・  Dojo Core ・・・  Dojo dojox

Weitere ähnliche Inhalte

Was ist angesagt?

Android UIデザイン入門
Android UIデザイン入門Android UIデザイン入門
Android UIデザイン入門OESF Education
 
Azure ADとWindows 10によるドメイン環境の拡張
Azure ADとWindows 10によるドメイン環境の拡張Azure ADとWindows 10によるドメイン環境の拡張
Azure ADとWindows 10によるドメイン環境の拡張Naohiro Fujie
 
はじめてのAndroid
はじめてのAndroidはじめてのAndroid
はじめてのAndroidhiro nemu
 
Windows Phone / iOS / Android アプリ同時開発のススメ
Windows Phone / iOS / Android アプリ同時開発のススメWindows Phone / iOS / Android アプリ同時開発のススメ
Windows Phone / iOS / Android アプリ同時開発のススメYoshito Tabuchi
 
エンタープライズIT環境での OpenID Connect / SCIM の具体的実装方法 idit2014
エンタープライズIT環境での OpenID Connect / SCIM の具体的実装方法 idit2014エンタープライズIT環境での OpenID Connect / SCIM の具体的実装方法 idit2014
エンタープライズIT環境での OpenID Connect / SCIM の具体的実装方法 idit2014Takashi Yahata
 
xRLT vol.01 資料「HoloLensでも3Dアニメーションを再生する 」
xRLT vol.01 資料「HoloLensでも3Dアニメーションを再生する 」xRLT vol.01 資料「HoloLensでも3Dアニメーションを再生する 」
xRLT vol.01 資料「HoloLensでも3Dアニメーションを再生する 」Tatsuro Matsubara
 
IDaaSにSign in with Appleをつないでみた
IDaaSにSign in with AppleをつないでみたIDaaSにSign in with Appleをつないでみた
IDaaSにSign in with AppleをつないでみたNaohiro Fujie
 
はじめてのAndroid in 高知
はじめてのAndroid in 高知はじめてのAndroid in 高知
はじめてのAndroid in 高知hiro nemu
 
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介david9142
 
勉強会force#3 iOSアプリ開発
勉強会force#3 iOSアプリ開発勉強会force#3 iOSアプリ開発
勉強会force#3 iOSアプリ開発Kazuki Nakajima
 
CodeIgniterによるPhwittr
CodeIgniterによるPhwittrCodeIgniterによるPhwittr
CodeIgniterによるPhwittrkenjis
 
はじめようMixed Reality Immersive編
はじめようMixed Reality Immersive編はじめようMixed Reality Immersive編
はじめようMixed Reality Immersive編Shinya Tachihara
 
Azure ADと外部アプリのID連携/SSO - Deep Dive
Azure ADと外部アプリのID連携/SSO - Deep DiveAzure ADと外部アプリのID連携/SSO - Deep Dive
Azure ADと外部アプリのID連携/SSO - Deep DiveNaohiro Fujie
 
HTML5ハイブリッドアプリ開発のベストプラクティス
HTML5ハイブリッドアプリ開発のベストプラクティスHTML5ハイブリッドアプリ開発のベストプラクティス
HTML5ハイブリッドアプリ開発のベストプラクティスアシアル株式会社
 
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイドXPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイドTetsuji Hayashi
 
xR Tech Tokyo 登壇資料 Mixed Realityではじまるコラボレーティブ・コンピューティング
xR Tech Tokyo 登壇資料 Mixed Realityではじまるコラボレーティブ・コンピューティングxR Tech Tokyo 登壇資料 Mixed Realityではじまるコラボレーティブ・コンピューティング
xR Tech Tokyo 登壇資料 Mixed Realityではじまるコラボレーティブ・コンピューティングShinya Tachihara
 
夜子まま塾講義10(画面の呼び出し)
夜子まま塾講義10(画面の呼び出し)夜子まま塾講義10(画面の呼び出し)
夜子まま塾講義10(画面の呼び出し)Masafumi Terazono
 

Was ist angesagt? (17)

Android UIデザイン入門
Android UIデザイン入門Android UIデザイン入門
Android UIデザイン入門
 
Azure ADとWindows 10によるドメイン環境の拡張
Azure ADとWindows 10によるドメイン環境の拡張Azure ADとWindows 10によるドメイン環境の拡張
Azure ADとWindows 10によるドメイン環境の拡張
 
はじめてのAndroid
はじめてのAndroidはじめてのAndroid
はじめてのAndroid
 
Windows Phone / iOS / Android アプリ同時開発のススメ
Windows Phone / iOS / Android アプリ同時開発のススメWindows Phone / iOS / Android アプリ同時開発のススメ
Windows Phone / iOS / Android アプリ同時開発のススメ
 
エンタープライズIT環境での OpenID Connect / SCIM の具体的実装方法 idit2014
エンタープライズIT環境での OpenID Connect / SCIM の具体的実装方法 idit2014エンタープライズIT環境での OpenID Connect / SCIM の具体的実装方法 idit2014
エンタープライズIT環境での OpenID Connect / SCIM の具体的実装方法 idit2014
 
xRLT vol.01 資料「HoloLensでも3Dアニメーションを再生する 」
xRLT vol.01 資料「HoloLensでも3Dアニメーションを再生する 」xRLT vol.01 資料「HoloLensでも3Dアニメーションを再生する 」
xRLT vol.01 資料「HoloLensでも3Dアニメーションを再生する 」
 
IDaaSにSign in with Appleをつないでみた
IDaaSにSign in with AppleをつないでみたIDaaSにSign in with Appleをつないでみた
IDaaSにSign in with Appleをつないでみた
 
はじめてのAndroid in 高知
はじめてのAndroid in 高知はじめてのAndroid in 高知
はじめてのAndroid in 高知
 
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
 
勉強会force#3 iOSアプリ開発
勉強会force#3 iOSアプリ開発勉強会force#3 iOSアプリ開発
勉強会force#3 iOSアプリ開発
 
CodeIgniterによるPhwittr
CodeIgniterによるPhwittrCodeIgniterによるPhwittr
CodeIgniterによるPhwittr
 
はじめようMixed Reality Immersive編
はじめようMixed Reality Immersive編はじめようMixed Reality Immersive編
はじめようMixed Reality Immersive編
 
Azure ADと外部アプリのID連携/SSO - Deep Dive
Azure ADと外部アプリのID連携/SSO - Deep DiveAzure ADと外部アプリのID連携/SSO - Deep Dive
Azure ADと外部アプリのID連携/SSO - Deep Dive
 
HTML5ハイブリッドアプリ開発のベストプラクティス
HTML5ハイブリッドアプリ開発のベストプラクティスHTML5ハイブリッドアプリ開発のベストプラクティス
HTML5ハイブリッドアプリ開発のベストプラクティス
 
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイドXPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
 
xR Tech Tokyo 登壇資料 Mixed Realityではじまるコラボレーティブ・コンピューティング
xR Tech Tokyo 登壇資料 Mixed Realityではじまるコラボレーティブ・コンピューティングxR Tech Tokyo 登壇資料 Mixed Realityではじまるコラボレーティブ・コンピューティング
xR Tech Tokyo 登壇資料 Mixed Realityではじまるコラボレーティブ・コンピューティング
 
夜子まま塾講義10(画面の呼び出し)
夜子まま塾講義10(画面の呼び出し)夜子まま塾講義10(画面の呼び出し)
夜子まま塾講義10(画面の呼び出し)
 

Andere mochten auch

20140329_kyon_kao_wedding_LT_Groovy
20140329_kyon_kao_wedding_LT_Groovy20140329_kyon_kao_wedding_LT_Groovy
20140329_kyon_kao_wedding_LT_GroovyNobuhiro Sue
 
Html5勉強会 20120423
Html5勉強会 20120423Html5勉強会 20120423
Html5勉強会 20120423Nobuhiro Sue
 
Gws 20140418 camel_groovy
Gws 20140418 camel_groovyGws 20140418 camel_groovy
Gws 20140418 camel_groovyNobuhiro Sue
 
G*workshop 2011/11/22 Geb+Betamax
G*workshop 2011/11/22 Geb+BetamaxG*workshop 2011/11/22 Geb+Betamax
G*workshop 2011/11/22 Geb+BetamaxNobuhiro Sue
 
Gws 20141024 gradle_intro
Gws 20141024 gradle_introGws 20141024 gradle_intro
Gws 20141024 gradle_introNobuhiro Sue
 
Groovy indy 20120222
Groovy indy 20120222Groovy indy 20120222
Groovy indy 20120222Nobuhiro Sue
 
ぽんぽこバレー勉強会 20120427
ぽんぽこバレー勉強会 20120427ぽんぽこバレー勉強会 20120427
ぽんぽこバレー勉強会 20120427Nobuhiro Sue
 
JJUG CCC 2011 Fall / Web test automation with Geb and Spock
JJUG CCC 2011 Fall / Web test automation with Geb and SpockJJUG CCC 2011 Fall / Web test automation with Geb and Spock
JJUG CCC 2011 Fall / Web test automation with Geb and SpockNobuhiro Sue
 
Jjug 20140430 gradle_intro
Jjug 20140430 gradle_introJjug 20140430 gradle_intro
Jjug 20140430 gradle_introNobuhiro Sue
 
Light and shadow of microservices
Light and shadow of microservicesLight and shadow of microservices
Light and shadow of microservicesNobuhiro Sue
 
JSUG20171027-spfingboot-k8s-ocp
JSUG20171027-spfingboot-k8s-ocpJSUG20171027-spfingboot-k8s-ocp
JSUG20171027-spfingboot-k8s-ocpNobuhiro Sue
 

Andere mochten auch (11)

20140329_kyon_kao_wedding_LT_Groovy
20140329_kyon_kao_wedding_LT_Groovy20140329_kyon_kao_wedding_LT_Groovy
20140329_kyon_kao_wedding_LT_Groovy
 
Html5勉強会 20120423
Html5勉強会 20120423Html5勉強会 20120423
Html5勉強会 20120423
 
Gws 20140418 camel_groovy
Gws 20140418 camel_groovyGws 20140418 camel_groovy
Gws 20140418 camel_groovy
 
G*workshop 2011/11/22 Geb+Betamax
G*workshop 2011/11/22 Geb+BetamaxG*workshop 2011/11/22 Geb+Betamax
G*workshop 2011/11/22 Geb+Betamax
 
Gws 20141024 gradle_intro
Gws 20141024 gradle_introGws 20141024 gradle_intro
Gws 20141024 gradle_intro
 
Groovy indy 20120222
Groovy indy 20120222Groovy indy 20120222
Groovy indy 20120222
 
ぽんぽこバレー勉強会 20120427
ぽんぽこバレー勉強会 20120427ぽんぽこバレー勉強会 20120427
ぽんぽこバレー勉強会 20120427
 
JJUG CCC 2011 Fall / Web test automation with Geb and Spock
JJUG CCC 2011 Fall / Web test automation with Geb and SpockJJUG CCC 2011 Fall / Web test automation with Geb and Spock
JJUG CCC 2011 Fall / Web test automation with Geb and Spock
 
Jjug 20140430 gradle_intro
Jjug 20140430 gradle_introJjug 20140430 gradle_intro
Jjug 20140430 gradle_intro
 
Light and shadow of microservices
Light and shadow of microservicesLight and shadow of microservices
Light and shadow of microservices
 
JSUG20171027-spfingboot-k8s-ocp
JSUG20171027-spfingboot-k8s-ocpJSUG20171027-spfingboot-k8s-ocp
JSUG20171027-spfingboot-k8s-ocp
 

Ähnlich wie 20111031 MobileWeb at TDC

jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
 jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキングTakashi Okamoto
 
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインWebフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインShumpei Shiraishi
 
Android Lecture #01 @PRO&BSC Inc.
Android Lecture #01 @PRO&BSC Inc.Android Lecture #01 @PRO&BSC Inc.
Android Lecture #01 @PRO&BSC Inc.Yuki Higuchi
 
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向Tsutomu Ogasawara
 
Titanium Mobile
Titanium MobileTitanium Mobile
Titanium MobileNaoya Ito
 
PhoneGapでWebアプリをスマホアプリ化
PhoneGapでWebアプリをスマホアプリ化PhoneGapでWebアプリをスマホアプリ化
PhoneGapでWebアプリをスマホアプリ化Takashi Okamoto
 
もう怖くないモバイルアプリ開発!
もう怖くないモバイルアプリ開発!もう怖くないモバイルアプリ開発!
もう怖くないモバイルアプリ開発!Toshiki Iga
 
RxDataSourceをNSDiffableDataSourceへ置き換える際のTips集紹介
RxDataSourceをNSDiffableDataSourceへ置き換える際のTips集紹介RxDataSourceをNSDiffableDataSourceへ置き換える際のTips集紹介
RxDataSourceをNSDiffableDataSourceへ置き換える際のTips集紹介Fumiya Sakai
 
IoT Edge and Serverless playground with Node.js ~ IoT EdgeとサーバレスをNode.jsで遊ぶ実験ノート
IoT Edge and Serverless playground with Node.js ~ IoT EdgeとサーバレスをNode.jsで遊ぶ実験ノートIoT Edge and Serverless playground with Node.js ~ IoT EdgeとサーバレスをNode.jsで遊ぶ実験ノート
IoT Edge and Serverless playground with Node.js ~ IoT EdgeとサーバレスをNode.jsで遊ぶ実験ノートKazumi IWANAGA
 
Tech talk salesforce mobile sdk
Tech talk   salesforce mobile sdkTech talk   salesforce mobile sdk
Tech talk salesforce mobile sdkKazuki Nakajima
 
Xamarin 概要 2014年08月版
Xamarin 概要 2014年08月版Xamarin 概要 2014年08月版
Xamarin 概要 2014年08月版Yoshito Tabuchi
 
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発Daizen Ikehara
 
Adobe Edge Inspectを利用してデバッグ
Adobe Edge Inspectを利用してデバッグAdobe Edge Inspectを利用してデバッグ
Adobe Edge Inspectを利用してデバッグKeisuke Todoroki
 
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival FukuokaHTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival FukuokaKeisuke Todoroki
 
C# を使い倒す!クロス プラットフォーム アプリ開発とクラウド連携の新潮流 - Xamarin セッション
C# を使い倒す!クロス プラットフォーム アプリ開発とクラウド連携の新潮流 - Xamarin セッションC# を使い倒す!クロス プラットフォーム アプリ開発とクラウド連携の新潮流 - Xamarin セッション
C# を使い倒す!クロス プラットフォーム アプリ開発とクラウド連携の新潮流 - Xamarin セッションYoshito Tabuchi
 
Mashup Caravan in オープンソースカンファレンス2011 Hiroshima: infoScoop OpenSource
Mashup Caravan in オープンソースカンファレンス2011 Hiroshima: infoScoop OpenSourceMashup Caravan in オープンソースカンファレンス2011 Hiroshima: infoScoop OpenSource
Mashup Caravan in オープンソースカンファレンス2011 Hiroshima: infoScoop OpenSourcecmutoh
 
Data API + AWS = (CMS どうでしょう 札幌編)
Data API + AWS =  (CMS どうでしょう 札幌編)Data API + AWS =  (CMS どうでしょう 札幌編)
Data API + AWS = (CMS どうでしょう 札幌編)Yuji Takayama
 

Ähnlich wie 20111031 MobileWeb at TDC (20)

jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
 jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
 
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインWebフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
 
Android Lecture #01 @PRO&BSC Inc.
Android Lecture #01 @PRO&BSC Inc.Android Lecture #01 @PRO&BSC Inc.
Android Lecture #01 @PRO&BSC Inc.
 
Webに今求められているレベル: HTML5 コントロールを利用した開発
Webに今求められているレベル: HTML5 コントロールを利用した開発Webに今求められているレベル: HTML5 コントロールを利用した開発
Webに今求められているレベル: HTML5 コントロールを利用した開発
 
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
 
Titanium Mobile
Titanium MobileTitanium Mobile
Titanium Mobile
 
PhoneGapでWebアプリをスマホアプリ化
PhoneGapでWebアプリをスマホアプリ化PhoneGapでWebアプリをスマホアプリ化
PhoneGapでWebアプリをスマホアプリ化
 
もう怖くないモバイルアプリ開発!
もう怖くないモバイルアプリ開発!もう怖くないモバイルアプリ開発!
もう怖くないモバイルアプリ開発!
 
RxDataSourceをNSDiffableDataSourceへ置き換える際のTips集紹介
RxDataSourceをNSDiffableDataSourceへ置き換える際のTips集紹介RxDataSourceをNSDiffableDataSourceへ置き換える際のTips集紹介
RxDataSourceをNSDiffableDataSourceへ置き換える際のTips集紹介
 
JqueryMobile
JqueryMobileJqueryMobile
JqueryMobile
 
IoT Edge and Serverless playground with Node.js ~ IoT EdgeとサーバレスをNode.jsで遊ぶ実験ノート
IoT Edge and Serverless playground with Node.js ~ IoT EdgeとサーバレスをNode.jsで遊ぶ実験ノートIoT Edge and Serverless playground with Node.js ~ IoT EdgeとサーバレスをNode.jsで遊ぶ実験ノート
IoT Edge and Serverless playground with Node.js ~ IoT EdgeとサーバレスをNode.jsで遊ぶ実験ノート
 
Tech talk salesforce mobile sdk
Tech talk   salesforce mobile sdkTech talk   salesforce mobile sdk
Tech talk salesforce mobile sdk
 
Xamarin 概要 2014年08月版
Xamarin 概要 2014年08月版Xamarin 概要 2014年08月版
Xamarin 概要 2014年08月版
 
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
 
Adobe Edge Inspectを利用してデバッグ
Adobe Edge Inspectを利用してデバッグAdobe Edge Inspectを利用してデバッグ
Adobe Edge Inspectを利用してデバッグ
 
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival FukuokaHTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
 
C# を使い倒す!クロス プラットフォーム アプリ開発とクラウド連携の新潮流 - Xamarin セッション
C# を使い倒す!クロス プラットフォーム アプリ開発とクラウド連携の新潮流 - Xamarin セッションC# を使い倒す!クロス プラットフォーム アプリ開発とクラウド連携の新潮流 - Xamarin セッション
C# を使い倒す!クロス プラットフォーム アプリ開発とクラウド連携の新潮流 - Xamarin セッション
 
2013 Ignite UI 最新情報 in 岡山
2013 Ignite UI 最新情報 in 岡山2013 Ignite UI 最新情報 in 岡山
2013 Ignite UI 最新情報 in 岡山
 
Mashup Caravan in オープンソースカンファレンス2011 Hiroshima: infoScoop OpenSource
Mashup Caravan in オープンソースカンファレンス2011 Hiroshima: infoScoop OpenSourceMashup Caravan in オープンソースカンファレンス2011 Hiroshima: infoScoop OpenSource
Mashup Caravan in オープンソースカンファレンス2011 Hiroshima: infoScoop OpenSource
 
Data API + AWS = (CMS どうでしょう 札幌編)
Data API + AWS =  (CMS どうでしょう 札幌編)Data API + AWS =  (CMS どうでしょう 札幌編)
Data API + AWS = (CMS どうでしょう 札幌編)
 

Mehr von Nobuhiro Sue

Fuse Online Hands-on Guide
Fuse Online Hands-on GuideFuse Online Hands-on Guide
Fuse Online Hands-on GuideNobuhiro Sue
 
Fuse Online Hands-on Guide
Fuse Online Hands-on GuideFuse Online Hands-on Guide
Fuse Online Hands-on GuideNobuhiro Sue
 
Knative CloudEvents
Knative CloudEventsKnative CloudEvents
Knative CloudEventsNobuhiro Sue
 
JTF2018_B30_k8s_operator_nobusue
JTF2018_B30_k8s_operator_nobusueJTF2018_B30_k8s_operator_nobusue
JTF2018_B30_k8s_operator_nobusueNobuhiro Sue
 
DevLove k8s nobusue 20180711
DevLove k8s nobusue 20180711DevLove k8s nobusue 20180711
DevLove k8s nobusue 20180711Nobuhiro Sue
 
Gws 20131018 vertx_handson(updated)
Gws 20131018 vertx_handson(updated)Gws 20131018 vertx_handson(updated)
Gws 20131018 vertx_handson(updated)Nobuhiro Sue
 
Gws 20130315 gradle_handson
Gws 20130315 gradle_handsonGws 20130315 gradle_handson
Gws 20130315 gradle_handsonNobuhiro Sue
 
Groovy base gradle_20130309
Groovy base gradle_20130309Groovy base gradle_20130309
Groovy base gradle_20130309Nobuhiro Sue
 
クラウド研究会 20120712 BaaS
クラウド研究会 20120712 BaaSクラウド研究会 20120712 BaaS
クラウド研究会 20120712 BaaSNobuhiro Sue
 
Letsgo developer 2012 Continuous Delivery
Letsgo developer 2012 Continuous DeliveryLetsgo developer 2012 Continuous Delivery
Letsgo developer 2012 Continuous DeliveryNobuhiro Sue
 
Gws 20120521 gradle
Gws 20120521 gradleGws 20120521 gradle
Gws 20120521 gradleNobuhiro Sue
 
TDC20111031_Groovy_Geb
TDC20111031_Groovy_GebTDC20111031_Groovy_Geb
TDC20111031_Groovy_GebNobuhiro Sue
 
Letsgo sendai nobusue_20110528
Letsgo sendai nobusue_20110528Letsgo sendai nobusue_20110528
Letsgo sendai nobusue_20110528Nobuhiro Sue
 
DevSummit2011JGGUG OpenJam: Groovy
DevSummit2011JGGUG OpenJam: GroovyDevSummit2011JGGUG OpenJam: Groovy
DevSummit2011JGGUG OpenJam: GroovyNobuhiro Sue
 
G*workshop 20101209 OSGi and Grails2.0
G*workshop 20101209 OSGi and Grails2.0G*workshop 20101209 OSGi and Grails2.0
G*workshop 20101209 OSGi and Grails2.0Nobuhiro Sue
 
DevLOVE 20100823 EnterpriseOSGi
DevLOVE 20100823 EnterpriseOSGiDevLOVE 20100823 EnterpriseOSGi
DevLOVE 20100823 EnterpriseOSGiNobuhiro Sue
 
Gws sokai 20100724_nsue
Gws sokai 20100724_nsueGws sokai 20100724_nsue
Gws sokai 20100724_nsueNobuhiro Sue
 
G*workshop sendai 20100424(v2)
G*workshop sendai 20100424(v2)G*workshop sendai 20100424(v2)
G*workshop sendai 20100424(v2)Nobuhiro Sue
 

Mehr von Nobuhiro Sue (19)

Fuse Online Hands-on Guide
Fuse Online Hands-on GuideFuse Online Hands-on Guide
Fuse Online Hands-on Guide
 
Fuse Online Hands-on Guide
Fuse Online Hands-on GuideFuse Online Hands-on Guide
Fuse Online Hands-on Guide
 
Knative CloudEvents
Knative CloudEventsKnative CloudEvents
Knative CloudEvents
 
JTF2018_B30_k8s_operator_nobusue
JTF2018_B30_k8s_operator_nobusueJTF2018_B30_k8s_operator_nobusue
JTF2018_B30_k8s_operator_nobusue
 
DevLove k8s nobusue 20180711
DevLove k8s nobusue 20180711DevLove k8s nobusue 20180711
DevLove k8s nobusue 20180711
 
Gws 20140117 lt
Gws 20140117 ltGws 20140117 lt
Gws 20140117 lt
 
Gws 20131018 vertx_handson(updated)
Gws 20131018 vertx_handson(updated)Gws 20131018 vertx_handson(updated)
Gws 20131018 vertx_handson(updated)
 
Gws 20130315 gradle_handson
Gws 20130315 gradle_handsonGws 20130315 gradle_handson
Gws 20130315 gradle_handson
 
Groovy base gradle_20130309
Groovy base gradle_20130309Groovy base gradle_20130309
Groovy base gradle_20130309
 
クラウド研究会 20120712 BaaS
クラウド研究会 20120712 BaaSクラウド研究会 20120712 BaaS
クラウド研究会 20120712 BaaS
 
Letsgo developer 2012 Continuous Delivery
Letsgo developer 2012 Continuous DeliveryLetsgo developer 2012 Continuous Delivery
Letsgo developer 2012 Continuous Delivery
 
Gws 20120521 gradle
Gws 20120521 gradleGws 20120521 gradle
Gws 20120521 gradle
 
TDC20111031_Groovy_Geb
TDC20111031_Groovy_GebTDC20111031_Groovy_Geb
TDC20111031_Groovy_Geb
 
Letsgo sendai nobusue_20110528
Letsgo sendai nobusue_20110528Letsgo sendai nobusue_20110528
Letsgo sendai nobusue_20110528
 
DevSummit2011JGGUG OpenJam: Groovy
DevSummit2011JGGUG OpenJam: GroovyDevSummit2011JGGUG OpenJam: Groovy
DevSummit2011JGGUG OpenJam: Groovy
 
G*workshop 20101209 OSGi and Grails2.0
G*workshop 20101209 OSGi and Grails2.0G*workshop 20101209 OSGi and Grails2.0
G*workshop 20101209 OSGi and Grails2.0
 
DevLOVE 20100823 EnterpriseOSGi
DevLOVE 20100823 EnterpriseOSGiDevLOVE 20100823 EnterpriseOSGi
DevLOVE 20100823 EnterpriseOSGi
 
Gws sokai 20100724_nsue
Gws sokai 20100724_nsueGws sokai 20100724_nsue
Gws sokai 20100724_nsue
 
G*workshop sendai 20100424(v2)
G*workshop sendai 20100424(v2)G*workshop sendai 20100424(v2)
G*workshop sendai 20100424(v2)
 

Kürzlich hochgeladen

自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineerYuki Kikuchi
 
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdfAWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdfFumieNakayama
 
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdfクラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdfFumieNakayama
 
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)UEHARA, Tetsutaro
 
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NTT DATA Technology & Innovation
 
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?akihisamiyanaga1
 
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察  ~Text-to-MusicとText-To-ImageかつImage-to-Music...モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察  ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...博三 太田
 
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)Hiroshi Tomioka
 

Kürzlich hochgeladen (8)

自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
 
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdfAWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
 
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdfクラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
 
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
 
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
 
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
 
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察  ~Text-to-MusicとText-To-ImageかつImage-to-Music...モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察  ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
 
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
 

20111031 MobileWeb at TDC

  • 1. iPhone/iPad/Android 対応 Web アプリケーション勉強会(実践編) @ 東北デベロッパーズコミュニティ 2011 年 10 月 31 日 日本アイ・ビー・エム株式会社 須江 信洋 (nsue@jp.ibm.com)
  • 2.
  • 4. モバイル・デバイスと PC の違い モバイルには、画面サイズや操作性、 データ通信量及び HW 能力に制約がある モバイル用 アプリケーション モバイル・デバイス PC 画面サイズ スマートフォン ・・・ 4 インチ程度で小さい タブレット ・・・ 6 ~ 10 インチ程度で PC よりは少し小さい 10 インチ以上で高解像度 操作 タッチ操作 ・・・ マウスの様にピンポイント指定は難しい ソフトキーボード ・・・ 入力効率が落ちる マウスとキーボード 通信 無線 LAN ・・・ 利用可能な場所が限られる 3G 通信 ・・・ 通信速度が速くない LAN や無線 LAN HW CPU 能力/メモリー ・・・ PC よりも低スペック GPS 、カメラ、モーションセンサーなどが標準で搭載 高速な CPU と大量メモリー 共通項目 Web ブラウザーが稼働
  • 5. モバイル向けアプリケーションのタイプ モバイルの 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
  • 6. 【参考】 各タイプでの比較 比較項目 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
  • 7. ネイティブ・アプリとモバイル 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 への 登録が必要 (0,800/ 年 ) 端末の設定変更のみ URL 通知のみ
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20. 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
  • 21. Dojo モバイル - その他の Widget TabBar EdgeToEdgeCategory と EdgeToEdgeList ImageView ProgressIndicator SpinWheel と DatePicker IconContainer と IconItem
  • 22.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 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.
  • 34. 【参考】 サンプルの画面 Mobile Showcase (iPad 表示 ) Charts (iPad 表示 ) Business Process Diagram Diagram Editor
  • 35. モバイル・アプリケーション・サービス Analytics サービス ・モバイル端末は、デバッグが難しい ・操作の記録を残したい ・クライアントのログをサーバーに記録 サンプル・アプリケーション ・ファイルアップロード ・ディレクトリー情報表示 ・ Dojo クライアントと REST サービスのサンプル・コードが欲しい Graphics Conversion サービス ・画像のフォーマット変換、拡大/縮小 ・ SVG ファイルを表示できない ・画像のサイズが大きすぎる Optimizer サービス ・ Dojo モジュールの配布を最適化 ・ Dojo のロードを高速化したい ・受信するデータ量を減らしたい
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 47.
  • 48.
  • 49. 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 の場合
  • 50. 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>
  • 51. デモと解説: BigBlue サンプル・アプリケーションはこちらからダウンロードできます 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 版)
  • 53. 【参考】リッチ・ページ・エディターでの開発 WYSIWYG エディターで、ターゲット・デバイスでの見え方を確認しながら コーディング パレットから dojox.mobile を含む Dojo ウィジェットを配置可能 フォーカスされたウィジェットをビジュアルに参照、変更するためのプロパティ コーディングを支援するコード・アシスト機能
  • 55.
  • 57.
  • 58. PhoneGap が提供する JavaScript API http://docs.phonegap.com/en/1.1.0/index.html
  • 60.
  • 61.
  • 62.
  • 64.
  • 65.
  • 66. 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
  • 67.
  • 68.
  • 69.
  • 70.

Hinweis der Redaktion

  1. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ
  2. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ *Web 2.0 &amp; Mobile FP の正式名称は、 WebSphere Application Server Feature Pack for Web 2.0 and Mobile です。 以降のページでは、 Web 2.0 &amp; Mobile FP と省略します。
  3. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ
  4. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ モバイル・デバイスと PC では、上記の様な違いあります。 スマートフォンの画面サイズは非常に小さいので、画面を設計する際には表示する情報量を考慮する必要があります。また、最近のモバイル機器はタッチ操作が主流となっています。タッチ操作はマウスの様にピンポイントを指定する事が難しいので、指定する領域はある程度大きくとる必要があります。文字入力もソフトキーボードが主流なので、 PC の様に大量のデータ入力をするのには向いていません。データ通信量、 HW 能力も PC より劣るので、アプリケーションを設計する際に考慮が必要です。その代り、 GPS やカメラ、モーションセンサーなどが標準搭載されていて利用可能です。 モバイル・デバイスも PC と同じように Web ブラウザーを標準で搭載しているので、 Web アプリケーションを利用する事が可能です。しかし、上記な様な制約があるため、より利用しやすいアプリケーションを構築するには PC とは違ったモバイル向けの UI (ユーザー・インターフェース)を作成する必要があります。
  5. 09. Web 2.0 &amp; 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 &amp; Mobile は、 Web アプリケーションとモバイル Web アプリケーションを対象としています。
  6. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ 各タイプのアプリケーションを比較したものです。 Web は開発/公開が容易ですが、パフォーマンス重視やカメラの様な各デバイス固有の機能を使う場合はネイティブ・アプリケーションを選択します。ハイブリッドは両者の利点を生かせるタイプです。
  7. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ iPhone/iPad ネイティブ・アプリと Android ネイティブ・アプリ、モバイル Web アプリの開発に関する比較です。ネイティブ・アプリは、それぞれの開発言語と専用の API での開発が必要です。特に iPhone/iPad に関しては、開発に Mac OS 環境が必須となります。 それに対して、モバイル Web アプリは通常の Web アプリ開発と同じスキルで開発する事が可能です。
  8. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ
  9. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ Dojo は、 Dojo Foundation が提供する高機能な JavaScript ツールキットです。 IBM は、 Dojo Foundation の contributor です。 Dojo はオープンソースとして配布されていますが、 Web 2.0 &amp; Mobile FP では製品の一部として同梱されています。 Web 2.0 &amp; 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/
  10. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ Dojo は、画面の見た目を統一するためにテーマと言う機能を採用しています。テーマは、 CSS の集合でテーマの指定を変更するだけで見た目を変更する事が可能です。 Dojo 1.6 では、 Claro 、 Tundra 、 Soria 、 Nihilo の 4 種類のテーマが用意されています。 Claro は Dojo 1.5 から追加されました。 適用方法は、初めに &lt;style&gt; タグで使用するテーマの CSS フィアルを指定します。そして、そのテーマの名前を &lt;body&gt; で指定します。
  11. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ Dojo におけるデータ・アクセスの機能を提供しているのが dojo.data です。 dojo.data を利用することにより、データ・フォーマットに捉われず一貫性のあるデータ・アクセスが可能になります。 データを保持するコンテンツは、データ・ソースと呼ばれます。データ・ソースは JSON や XML などの静的ファイルのこともありますし、 Web サービスで外部に接続した先の外部アプリケーションのこともあります。そして、そのデータ・ソース毎に用意されているのが、データ・ストアです。このデータ・ストアがデータ・ソースの形式を隠蔽してくれるため、開発者はデータ・ソースの形式を意識せずに開発することが可能です。 また、データ・ストアからデータ・ソースにアクセスするための API として、 dojo.data API が規定されています。必ずしも全ての API が実装されているわけではなく、データ・ストアによってサポートされる API が異なります。
  12. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ データグリッドを利用する事により Dojo で簡単に操作可能な表を表示する事が可能です。 表の表示には、 dojox.grid.DataGrid を使用します。他に、 dojox.grid.EnhancedGrid 、 dojox.grid.TreeGrid もあります。 表示するデータは、 dojo.data で読み込みます。読み込まれたデータは自動的にフォーマットされ表示されます。 表示された表は、上記の様な操作を行う事が可能です。
  13. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ Dojo 1.6 では、パーサーが HTML5 へ対応しています。 HTML5 の文書を Validation できるようになりました。それに伴い Dojo の記述方式を HTML5 の Data-Attribute 方式に変更しました。 今までの方式も使用できますが、 Dojo 2.0 からは新方式が標準となります。 HTML5 では、 HTML のタグ内で独自の属性を使用する場合は、属性の名前を &amp;quot;data-&amp;quot; で始めるように定められています。これにより、パーサーやエディターなどは、独自方式の属性をエラーとして扱わないようになります。 Dojo では、 Dojo が使用する属性名を &amp;quot;data-dojo-&amp;quot; で始めるようにしています。例えば、 &amp;quot;dojoType&amp;quot; は &amp;quot;data-dojo-type&amp;quot; に、 &amp;quot;jsId &amp;quot; は &amp;quot;data-dojo-id&amp;quot; に変更になります。
  14. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ Dojo 1.6 では、ガント・チャートの表示が可能となりました。 dojox.gantt.GanttChart を使用すると、簡単にガント・チャートが表示可能です。このガント・チャートは、期日や進捗率などの項目を操作する事も可能です。 コードは、上記の様に記述します。各種設定は、用意されているプロパティーに値をセットします。 デフォルトでの表示は、右側の図の様に表示されます。
  15. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ Dojo モバイルは、 dojox.mobile パッケージに入っている機能で、モバイル Web アプリケーションを作成する事が可能となります。モバイルの標準 Web ブラウザーに最適化された機能で、タッチ操作が可能なネイティブ・アプリケーションの様な UI を作成可能です。また、テーマを切り替えるだけで、複数のモバイル・デバイス( OS )に対応可能です。 この機能は Dojo 1.5 から採用され、さらに機能拡張されています。 対応するモバイル OS は、上記の通りです。この情報は Dojo 1.7 での情報で、将来のバージョンアップに伴いサポート対象が更新される可能性があります。
  16. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ Dojo モバイルの特徴です。 Dojo モバイルはモバイル向けに軽量でモバイルに適した Widget を提供します。モバイル・デバイスは、 PC より処理能力が低く利用パターン(短時間での利用)も違うのでパフォーマンスが重要です。 Dojo モバイルは、軽量でモバイルに適した Widget にするため上記の様な工夫がなされています。
  17. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ Dojo モバイルを使用する場合は必ず上記のようなコードを記述します。 初めのモバイル・デバイスでの表示指定は、モバイルの画面の合わせて表示するために必要な指定です。この記述は Dojo モバイル特有の事項ではなく、モバイルの Web ブラウザーの仕様です。 次に、 Dojo が提供するモバイル用表示テーマの css ファイルを指定します。上記では、 iPhone 用のテーマを指定しています。モバイル用のテーマに関しては、次ページを参照してください。 dojo.require() では、必ず最初にモバイル用のパーサー( dojox.mobile.parser )を指定します。その後に dojox.mobile も指定します。最後の「 dojo.requireIf(!dojo.isWebKit, &amp;quot;dojox.mobile.compat&amp;quot;); 」は、 WebKit を使用していない Web ブラウザーを使用している場合でも表示できるようにする互換指定です。
  18. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ Dojo 1.7 で提供されているモバイル用のテーマです。各モバイル用テーマはネイティブ・アプリケーションの様な見た目を提供します。あくまでも見た目なので iPhone で利用する場合に iPhone テーマ利用が必須と言うことではありません。 iPhone で Custom テーマを利用したり独自のテーマを作成する事も可能です。また、モバイル用の各テーマは LESS で作成されているので、一部を独自カスタマイズすることも可能です。なお、 iPad は iPhone のテーマで利用する事も可能です。 Custom は Dojo オリジナルの見た目です。どのモバイルでも使用可能なテーマとなっていますが、各デバイスのネイティブ・アプリケーションの見た目とは違っています。このテーマの一部(全体的な色遣いを緑系にするなど)を変更して独自のモバイル用テーマを作成する事も可能です。
  19. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ View はモバイルで使用するレイアウト・コンポーネントです。表示のベースとなるコンポーネントで、このコンポーネント上に他のコンポーネントを配置します。現在、 View コンポーネントとして以下の 3 種類があります。 View は dojo.require() が必要ありませんが、 ScrollableView と FlippableView(SwapView) は dojo.require() が必要です。 View 基本となる View コンポーネントです。 ScrollableView View が画面全体がスクロールするに対して、 ScrollableView は、ヘッダー、フッターがスクロールしません。 FlippableView 画面を左または右方向にスワイプすると、他の FlippableView オブジェクトと入れ替えられます。 &lt;div dojoType=&amp;quot;dojox.mobile.FlippableView&amp;quot; selected=&amp;quot;true&amp;quot;&gt;View 1&lt;/div&gt; &lt;div dojoType=&amp;quot;dojox.mobile.FlippableView&amp;quot;&gt;View 2&lt;/div&gt; 上記様なコードを作成すると、初め View 1 が表示され、スワイプすると View 2 が表示されます。書いた順番が、表示の順番になります。 Dojo 1.7 から、名前が SwapView に変わります。
  20. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ 画面作成で使用する基本的な Widget です。
  21. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ Dojo モバイルが提供する Widget の表示例です。その他にも入力用フォームなど様々な Widget があります。詳しくは、下記リファレンス・ガイドを参照してください。 http://dojotoolkit.org/reference-guide/dojox/mobile.html
  22. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ Dojo モバイルでは、画面遷移を行う際のエフェクトを指定可能です。 これらのエフェクトは、サンプルの Mobile Showcase にあるので、そこで動きを確認してください。
  23. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ スマートフォンとタブレットは、同じコードを利用しても上記の様に自動的に表示方法が変わります。
  24. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ
  25. 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 は数多く採用されている実績があります。
  26. 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 においても、業界標準技術への対応と運用管理機能の強化、パフォーマンスの向上が図られています。
  27. 01. WAS V8.0 概要 WAS V8.0 アナウンスメント・ワークショップ WAS V8.0 は、次の 3 つのテーマにフォーカスして機能拡張を提供しています。 開発生産性の向上 運用の効率化と信頼性の向上 セキュリティーと管理機能の向上 移行のページではそれぞれのテーマごとに主な新機能をご紹介します。
  28. 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 アプリケーション &amp;JPA 2.0 Java バッチ (Modern Batch) WAS V8.0 では以下の 2 つの Feature Pack が提供されています。 Web 2.0 &amp; Mobile : WAS V6.1 および V7.0 で提供されている Web 2.0 Feature Pack を拡張 Dynamic Scripting : WAS V7.0 で提供されている Feature Pack と同様の機能を提供
  29. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ Web 2.0 &amp; 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 &amp; 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 によるリッチクライアント」を参照してください。
  30. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ 上記は、 Web 2.0 &amp; 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/
  31. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ Web メッセージングとは、 Pub-Sub タイプの通信を用いてリアルタイムに情報をプッシュ配信する機能です。 Ajax クライアントと連携して、株価のチャートの更新やチャットと言ったようなリアルタイムに情報更新を行うアプリケーションを作成することが可能となります。 ブラウザーと WAS 間の通信には Comet モデルを採用しています。 WAS では、 SIBus を使用してサーバー側のイベント(情報の更新)を取得しています。
  32. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ Web 2.0 &amp; Mobile FP のモバイルに関連する機能です。 Dojo モバイル - dojox.mobile Dojo でモバイル・アプリを開発するための機能です。各モバイルのネイティブの様なモバイル Web アプリケーションを開発できます。 モバイル・アプリケーション・サービス モバイル Web アプリケーションを活用するのに便利な REST サービス(サーバー側)です。この機能は、モバイルだけでなく PC からも利用可能です。 Web 2.0 and Mobile Showcase サンプル モバイルや ILOG Dojo Diagrammer など、 Web 2.0 &amp; Mobile FP の新機能に関するソースコード付きサンプル・アプリです。 その他機能 ILOG Dojo Diagrammer や Dojo の Widget をモバイル対応しています。
  33. 09. Web 2.0 &amp; 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 ブラウザー向けサンプルです。
  34. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ Web 2.0 and Mobile Showcase サンプルのサンプルを実行した画面です。
  35. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ モバイル・アプリケーション・サービスは、3つの REST サービスと2つのサンプル・アプリケーションがあります。 3つの REST サービスは、それぞれ上記の様なケースで使用します。 REST サービスは、 jar ファイルとして提供されソースコードは提供されません。 Web 2.0 and Mobile Showcase サンプルには、これらの REST サービスを呼ぶ Dojo クライアントのソース付サンプルが付属しています。開発のベースとなる ear ファイルには、 Dojo クライアントのサンプルは入っていません。 サンプル・アプリケーションは、 Dojo クライアントと連携する REST サービスを作成するためのサンプル・コードを提供します。このコードは、実稼働用ではありませんが、 REST サービスもソースコードを参照する事が可能です。
  36. 09. Web 2.0 &amp; 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(&amp;quot;dojox.analytics.plugins.dojo&amp;quot;); console.rlog(&amp;quot;Any quoted string goes here.&amp;quot;); dojox.analytics.addData(&amp;quot;timestamp&amp;quot;, [new Date().getTime(), &amp;quot;on-load executed&amp;quot;]); ログの出力先は、 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
  37. 09. Web 2.0 &amp; 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 を参照してください。
  38. 09. Web 2.0 &amp; 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 関連のファイル読込先を上記ディレクトリーに変更する事により実現できます。
  39. 09. Web 2.0 &amp; 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
  40. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ モバイル対応機能のその他機能です。 ビジネス・チャートの拡張 Dojo Chart の機能をモバイル対応しています。これにより、モバイル環境でも快適に各種チャート(表)を参照、操作する事が可能となります。 Geo Charting - dojox.geo.charting 地図のチャートもモバイル対応しています。ビジネス・チャートの機能に加え、地図上の要素を簡単に色分け表示したり、ツールチップ表示する事も可能です。
  41. 09. Web 2.0 &amp; 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
  42. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ IBM ILOG Dojo Diagrammer (以降 ILOG Dojo Diagrammer と表記)は、 Dojo 向けのフレームワークで各種ダイアグラムを表示するための機能です。 ILOG Dojo Diagrammer は、 JavaScript でできており、サーバーが無くても Web ブラウザーのみでダイアグラムを表示可能です。この機能は、 IBM が提供する Web 2.0 &amp; Mobile FP の機能で、 Dojo 自身の機能ではありません。 ILOG Dojo Diagrammer で表示するダイアグラムは、各種操作が可能です。また、ノード(項目)のレイアウトも自動で最適な配置を行います。 ILOG Dojo Diagrammer を利用して、上記の様な各種ダイアグラムを作成する事ができます。
  43. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ ILOG Dojo Diagrammer は、ダイアグラムの表示と操作が可能です。 ダイアグラムの表示 ・ノード : 表示する項目です。ノードの見た目、内容は指定可能です。自動レイアウトを使用すると指定されたアルゴリズムが最適場所に自動配置します。 ・リンク : ノードの関連付です。線の見た目は指定可能です。ノード移動に伴い自動的にリンクも追随します。 ・サブグラフ : 複数のノードを子要素の様に扱う事が可能です。サブグラフ単位で展開/折り畳みが可能です。 ・ Overview : ダイアグラムの全体と表示部分を示します。 Overview の表示部分を動かすことによりダイアグラムも移動します。 ・ツールチップ : ノードなどの項目説明をツールチップとして表示可能です。 ダイアグラムの操作/その他機能 マウス及びキーボードで上記の様な操作が可能です。 ダイアグラム・エディターは、ノードの追加/削除/編集/ノード間のリンクなどの操作を可能にする機能です。 印刷は、ダイアグラム全体もしくは一部を印刷するための機能です。
  44. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ ILOG Dojo Diagrammer は、ノードの配置場所をプログラムで指定する事も可能ですが、自動レイアウトにより一貫性を持ったノードの配置を実現できます。その配置のアルゴリズムを指定するだけで、自動的に配置が計算され描画されます。 グラフ・レイアウト・アルゴリズムは、アルゴリズム毎に Dojo の部品になっており上記の様に指定します。上記記述方法以外にも JavaScript コード内でセットする方法もあります。 上記に、グラフ・レイアウト・アルゴリズムの一部サンプルを掲載しています。 Web 2.0 and Mobile Showcase サンプル(「3.モバイル」を参照)に、グラフ・レイアウト・アルゴリズムのサンプルがありますので、そちらで実際の表示を確認してみてください。
  45. 09. Web 2.0 &amp; 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
  46. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ
  47. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ View と表示される画面の関係は、上記の様になっています。 表示されるページを 1 つの HTML ファイルの中に記述します。 &lt;body&gt; の中に表示画面毎に View を作成して画面表示の記述を行います。各 View 間の遷移は、 ListItem や Heading などの moveTo 属性で指定します。 なお、 FlippableView / SwapView を使用した場合は、 moveTo 属性が無くても遷移が可能です。
  48. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ Dojo モバイルのコーディング例です。このコードは、 HTML 全体でなく画面表示部分のみピックアップしたものです。
  49. 09. Web 2.0 &amp; 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 .開発ツール」を参照してください。
  50. Rational Application Developer は、 JavaEE に準拠した Web アプリケーションの構築を支援する統合開発環境です。特に WebSphere Application Server 上で動くアプリケーションの開発を協力にサポートします。 この製品には Web アプリケーションのローカルテスト環境として 3 世代の WAS が同梱されており、各開発者の PC 上でアプリケーションの確認作業を簡単にしています。 JavaEE 開発を支援するための UML 可視化、最新の JavaEE6 標準のアプリケーション作成支援、画面系の開発、コード品質チェック、ローカル環境でのテストといった一連の作業をこの Eclipse ベースのツール上で行うことができ、開発生産性の向上、品質向上、使いやすいアプリケーションの構築を支援いたします。出来上がったアプリケーションをファイル転送でサーバーに送り、サーバー上では、手動でデプロイを手動で行うといった面倒なことは必要ありません。 また、新旧の WAS が同梱されているということで、 Web アプリケーションのマイグレーションにも活用可能となっています。あとで利用シナリオの中で出てまいります。
  51. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ
  52. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ PhoneGap は、ハイブリッド・アプリケーションを作成するためのオープンソースのツールです。このツールにより、 Web アプリケーションを簡単にネイティブ・アプリケーション化できます。 PhoneGap は、 dojox.mobile で作成されたモバイル Web アプリケーションもネイティブ・アプリケーション化可能です。また、 PhoneGap の API を利用する事により、カメラなど一部デバイス特有の機能も利用可能です。 詳細については、以下の PhoneGap サイトを参照してください。 http://www.phonegap.com/
  53. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ
  54. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ Web 2.0 &amp; Mobile FP は、最新の RIA & モバイルの開発に関して、前バージョンから機能強化されました。 Dojo 1.6 ( +1.7α ) 及び ILOG Dojo Diagrammer により、高度な業務アプリケーションも簡単に構築可能になりました。 また、最新の Dojo によりモバイル Web アプリケーションの開発にも対応しています。その他に、モバイル Web アプリケーションを構築しやすくするための REST サービスや多彩なサンプルを提供しています。
  55. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ
  56. 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 モジュールも提供されるようになりました。
  57. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ Web 2.0 &amp; Mobile FP を WAS V8 に導入する手順です。 1.サイトからダウンロード Web 2.0 &amp; Mobile FP のモジュールを入手します。上記 Web 2.0 &amp; Mobile FP 公式サイトのリンクからダウンロードページに行きます。その際、 IBM ID が必要になりますので、未登録の方は登録(無料)を実施してください。もしくは、 IBM Passport Advantage 経由でモジュールを入手してください。 Web 2.0 &amp; Mobile FP V1.1.0 の WAS V8 用モジュールをダウンロードします。バージョンを間違えないようにしてください。モジュールはプラットフォーム共通で、 zip 版と tar.gz 版がありますので、利用環境に合わせて選択してください。 ダウンロードしたファイルを、適当なディレクトリーに解凍します。
  58. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ 2. IBM Installation Manager からインストール IBM Installation Manager を起動し、メニューの「ファイル」から「設定」を選択します。設定画面で、「リポジトリーの追加」ボタンを押し、1.で解凍したモジュール内の repository.config を指定します。「 OK 」ボタンを押して設定画面を終了します。 トップ画面で「インストール」をクリックします。何度か次へボタンを押すとパッケージのインストール画面になります。ここで、 Web 2.0 &amp; Mobile FP を選択します。その後、ライセンス承諾や適応する WAS V8 の選択を実施し、インストールを実施します。 インストール完了後、「更新」をクリックして修正モジュールが無いか確認してください。リポジトリーの設定を元に戻して IBM Installation Manager を終了します。 なお、 WAS V6.1 と WAS V7.0 は、ダウンロードするモジュールや導入方法が違っています。詳細は Infocenter で確認してください。
  59. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ Web 2.0 and Mobile Showcase サンプルの実行方法です。 1.アプリケーション・サーバーを構成 サンプルを稼働させるために、エンタープライズ・アプリケーションが稼働できるアプリケーション・サーバーを構成します。また、 Web 2.0 &amp; Mobile FP は事前に導入しておく必要があります。 2.デプロイ 上記 ear ファイルを管理コンソールからデプロイします。デプロイ時のパラメータはデフォルト値をそのまま使用します。サンプルのデプロイは少し時間がかかります。 3.実行 エンタープライズ・アプリケーションを開始して、上記 URL からアクセスします。トップページは、 PC のブラウザー、モバイルどちらでもアクセス可能です。
  60. 09. Web 2.0 &amp; Mobile WAS V8.0 アナウンスメント・ワークショップ Web 2.0 &amp; Mobile FP で IBM Dojo を利用する場合は、 Dojo のモジュールをコピーする必要があります。 Dojo のモジュールは、 WAS V8 導入ディレクトリの &amp;quot;web2mobilefep_1.1/ajax-rt_1.X&amp;quot; に導入されているので必要なモジュールをコピーします。通常は、 Dojo を利用するアプリケーションの war ファイル内にこれらのファイルをコピーして利用します。多くのアプリケーションで共通に使用したい場合などは、 IHS など静的コンテンツ配置先に配置する事も可能です。なお、この場合、 JavaScript の Same Origin Policy 制約上、ブラウザーから同一ホストに見える場所に配置する必要があります。 カスタム・ビルドを実施した場合は、カスタム・ビルドにより生成されたモジュールを配置します。