Java EE7, html5

11,013 views

Published on

Published in: Technology

Java EE7, html5

  1. 1. Yoshio TeradaJava Evangelisthttp://yoshio3.com, Twitter : @yoshioterada1 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  2. 2. 以下の事項は、弊社の一般的な製品の方向性に関する概要を説明するもので す。また、情報提供を唯一の目的とするものであり、いかなる契約にも組み 込むことはできません。以下の事項は、マテリアルやコード、機能を提供す ることをコミットメント(確約)するものではないため、購買決定を行う際 の判断材料になさらないで下さい。オラクル製品に関して記載されている機 能の開発、リリースおよび時期については、弊社の裁量により決定されます 。 Oracleは、米国オラクルコーポレーション及びその子会社、関連会社の米国及びその他の国における登録商 標です。文中の社名、商品名等は各社の商標または登録商標である場合があります。2 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  3. 3. Java EE の歴史 軽量化 かんたん開発 Java EE 6 Java EE 5 Pruning, 堅牢 Web サービス Extensibility スケーラブル Ease of Dev, エンタープライズ J2EE 1.4 CDI, JAX-RS アプリケーション J2EE 1.3 Web Ease of Services Development, J2EE 1.2 Mgmt, Annotations, Web Profile Project Servlet, JSP, CMP, Deployment, EJB 3.0, JPA, EJB, JMS Connector JSF, Updated Servlet 3.0, JPE Async Web Services RMI/IIOP Architecture Connector EJB 3.1 Lite1998年5 月 1999年12月 2001年9月 2003年11月 2006年5月 2009年12月 10 specs 13 specs 20 specs 23 specs 28 specs 3 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  4. 4. Java EE 7 : 2013年 春頃 提供開始予定 テーマ:HTML5 と開発生産性の向上 Java EE 7 SDK の提供開始4 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  5. 5. Java EE 7 へ含まれる予定の JSR 一覧 JAX-RS Java Caching JSP 2.2 JSF 2.2 EL 3.0 Portable 2.0 API (JSR-107) Extensions Servlet 3.1 Batch Bean Validation 1.1 Application (JSR-352) Common Interceptors 1.1 CDI 1.1 Annotations 1.1 Java API for JSON Managed Bean 1.0 EJB 3.2 (JSR-353) Java API for Connector WebSocket JPA 2.1 JTA 1.2 JMS 2.0 1.6 (JSR-356) 新規追加 大幅な更新 通常の更新5 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  6. 6. 今日ご紹介する内容 HTML5化に関するテーマ6 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  7. 7. JSR 344 :JavaServer™ Faces 2.2 7 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  8. 8. JSF : コンポーネント・ベース開発8 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  9. 9. JSFフレームワークと開発の概要 Web コンテナ Web アプリケーションクライアント プレゼン • アプリケーションロジック ビジネスロジック テーション • コンバート (変換) • バリデーション (検証) • ナビゲーション (画面遷移) • イベント処理 DB JavaServer Faces Web サービス 9 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  10. 10. (jsf:value=“”, jsf:action=“”) 今までの開発スタイル JSF 2.0 の開発スタイル コード変換 (XHTML) が必要 デザイナー プログラマー デザイナー プログラマー (HTML) (JSP) 同一ファイルを参照編集可能 デザイナーはテキスト&ブラウザで確認  デザイナーはテキスト&ブラウザで確認 プログラマーはJSP&Webコンテナで確認  プログラマーはXHTMLに要素を挿入 プログラム後のデザイン修正は困難  同一ファイルの為デザイン修正も容易 10 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  11. 11. HTML 5 マークアップ・サポート JSF 2.2 からは 素の HTML コードに JSF 属性を埋め込みましょう!!11 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  12. 12. HTML 5 マークアップ・サポート HTML 5 の表現力をそのままに!!12 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  13. 13. JSR 356:JavaTM API for WebSocket13 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  14. 14. WebSocket APIwww.w3.org/TR/websockets/14 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  15. 15. Java API for WebSocket (JSR-356)仕様 http://jcp.org/en/jsr/detail?id=356 http://java.net/projects/websocket-spec ステータス: Early Draft15 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  16. 16. 参照実装http://java.net/projects/tyrus最新の GlassFish v4開発ビルドにバンドル済16 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  17. 17. Java のWebSocket 標準実装はとてもかんたん17 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  18. 18. WebSocket アノテーション アノテーション レベル 内容@WebSocketEndpoint クラス WebSocket のエンドポイントを示す@WebSocketOpen メソッド 接続確立時に呼び出すメソッドを指定@WebSocketClose メソッド 接続切断時に呼び出すメソッドを指定@WebSocketMessage メソッド メッセージを受信した時に呼び出すメソッドを 指定@WebSocketPathParam メソッド エンドポイントのURI 引数に指定されたパラ パラメータ メータを取得する際に仕様@WebSocketError メソッド エラー発生時に呼び出すメソッドを指定 18 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  19. 19. WebSocket アプリケーション・ライフサイクルvar wsUri = "ws://HOST/foo/hello"; @WebSocketEndpoint("/hello")var websocket = new WebSocket(wsUri);websocket.onopen = function(evt) @WebSocketOpen{ onOpen(evt) };websocket.onmessage = function(evt) @WebSocketMessage{ onMessage(evt) };websocket.onerror = function(evt) @WebSocketError{ onError(evt) };websocket.onclose = function(evt) @WebSocketClose{ onClose (evt) }; JavaScript WebSocket API 19 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  20. 20. HelloWorld アプリケーション (1対1)import javax.net.websocket.annotations.*;@WebSocketEndpoint("/hello")public class HelloBean { @WebSocketMessage public void sayHello(Session session, String msg) { session.getRemote().sendString(“Hello” + msg); }} 20 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  21. 21. デモ21 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  22. 22. サンプル・アプリケーションの構成 (多対1) RE Session Twitter4J Session RE 監視 Session Twitter RE WebSocket Endpoint Remote Endpoint22 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  23. 23. Twitter Streaming アプリ@WebSocketEndpoint(value= "/twitter")public class TwitterWebSocket { @WebSocketOpen public void initOpen(Session session) { TwitterClientSingleton.peers.add(session); } @WebSocketClose public void closeWebSocket(Session session){ TwitterClientSingleton.peers.remove(session); }} 23 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  24. 24. Twitter Streaming アプリ@Startup @Singletonpublic class TwitterClientSingleton extends StatusAdapter {public static Set<Session> peers = null; static { peers = Collections.synchronizedSet(new HashSet());}...続く クライアントの参照情報を保持 Session Session Session Session ・・・・・・ RE RE RE RE 24 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  25. 25. データ送信コード (ブロッキング) シーケンシャルに配信を実施 (大量のデータで待ち)public void onStatus(Status status) { User user = status.getUser(); String resStr = "@" +user.getScreenName() + " : " + status.getText() ; try { 全ピア(RE)に対して配信 for (Session peer : peers) { peer.getRemote().sendString(resStr); } } catch (IOException ioe) { ioe.printStackTrace(); Session Session Session Session } } RE RE RE RE 25 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  26. 26. データ送信コード (ノン・ブロッキング)for (Session peer : peers) { Future<SendResult> futureSend = peer.getRemote().sendStringByFuture(resStr); while (!futureSend.isDone()) { // wait here ? } SendResult status = futureSendResult.get(); if (status.isOK()) { // ok } else { // whoops, send failed. }} 26 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  27. 27. subprotocol の指定も可能 (iana.org) http://www.iana.org/assignments/websocket/websocket.xml27 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  28. 28. URI のテンプレートマッチ @WebSocketPathParam について@WebSocketEndpoint("/bookings/{guest-id}")public class BookingServer { 1段目のみ可能 @WebSocketMessage public void processBookingRequest( @WebSocketPathParam("guest-id") String guestID, String message, Session session) { // guest-id に紐づく処理を実装 }}28 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  29. 29. エンコード、デコード@WebSocketEndpoint( value="/hello", encoders={MyMessage.class}, decoders={MyMessage.class})29 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  30. 30. JSON から文字列へのエンコードpublic class MyMessage implements Encoder.Text<MyMessage> { private JsonObject jsonObject; public String encode(MyMessage myMessage) { return myMessage.jsonObject.toString(); }} 30 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  31. 31. 受信データの JSON へのデコードpublic class MyMessage implements Decoder.Text<MyMessage> { private JsonObject jsonObject; public MyMessage decode(String s) { jsonObject = new JsonReader(new StringReader(s)).readObject(); return this;"} public boolean willDecode(String string) { return true; // デコード可能か否かを返す}} 31 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  32. 32. OracleResearch Project !!32 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  33. 33. Project Avatar33 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  34. 34. Project Avatar とはコンセプト 先進的な HTML 5 アプリ構築フレームワーク – WebSocket, Server-Sent Event, RESTful に対応 モジュール化対応 JavaScript フレームワーク 軽量なサーバ・アーキテクチャ (Thin-Server Architecture) Avatar のメリット – サーバ・サイドJavaScript と Java EE アプリの融合 – Java VM 上で稼働する JavaScrip のスケーラビリテイ・信頼性・運用保守性34 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  35. 35. Thin-Server アーキテクチャ (TSA) View HTTP/JS今まで アプリ Model サーバ側でマージ アプリ View View HTTP/JSTSA クライアント側 Model Service JSON でマージ35 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  36. 36. Avatar の概念 (クライアント側) Avatar View (UI Node) (Controller) Model Webコンポーネント • データ・ アクセス方法を提供 と同様 バインディング • ローカル <a:page> • ナビゲーション • RESTful <a:form> • ローカル・ • SSE <a:input> ストレージ • WebSocket <a:textarea> … ブラウザ(JavaScript/DOM)36 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  37. 37. Avatar の概念 (サーバ側) Service Avatar Data プロバイダ アクセス方法を提供 ルーティング 利用可能なデータソー • RESTful JSON のシリアライ ス • ファイル • SSE ズ • DB(JPA) • WebSocket • インメモリ Coherence Nashorn (JavaVMで稼働するJavaScriptエンジン)37 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  38. 38. Avatar のアーキテクチャ Avatar アプリ View Avatar アプリ (HTML 5/JS/CSS) HTTP サービス (XML/JavaScript) Avatar 実行環境 Data HTTP/ サービス Avatar コンパイラ WebSocket Nashorn (JavaScript エンジン) UI HTML 5 DOM Java EE Java EE アプリ ローカルストレージ HTTP/ サービスブラウザ WebSocket App サーバ38 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  39. 39. Avatar のアーキテクチャ Avatar アプリ View Avatar アプリ (HTML 5/JS/CSS) HTTP サービス (XML/JavaScript) Avatar 実行環境 Data HTTP/ ①サービスアプリの作成 Avatar Avatar コンパイラ WebSocket Nashorn (JavaScript エンジン) UI HTML 5 DOM Java EE Java EE アプリ ローカルストレージ HTTP/ サービスブラウザ WebSocket App サーバ39 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  40. 40. Avatar のアーキテクチャ Avatar アプリ View Avatar アプリ (HTML 5/JS/CSS) HTTP サービス (XML/JavaScript) Avatar 実行環境 Data HTTP/ サービス Avatar コンパイラ WebSocket ② Avatar コンパイラで Nashorn (JavaScript エンジン) UI HTML 5 DOM View サービス Java EE サービス Data を生成 Java EE アプリ ローカルストレージ HTTP/ サービスブラウザ WebSocket App サーバ40 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  41. 41. Avatar のアーキテクチャ Avatar アプリ View Avatar アプリ (HTML 5/JS/CSS) HTTP サービス (XML/JavaScript) Avatar 実行環境 Data HTTP/ サービス Avatar コンパイラ③ View サービスの WebSocket Nashorn (JavaScript エンジン) UI HTML 5 DOM 「複数ページの一括」 ダウンロード Java EE (※プラグインは不要) HTTP/ サービス Java EE アプリ ローカルストレージブラウザ WebSocket App サーバ41 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  42. 42. Avatar のアーキテクチャ Avatar アプリ View Avatar アプリ (HTML 5/JS/CSS) HTTP サービス (XML/JavaScript) Avatar 実行環境 Data HTTP/ サービス Avatar コンパイラ WebSocket Nashorn (JavaScript エンジン) UI HTML 5 DOM④ WebSocket/Server-Sent Event/ Java EE RESTful で Data サービスを利用 ローカルストレー Java EE アプリ HTTP/ サービスブラウザ ジ WebSocket App サーバ42 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  43. 43. Avatar のアーキテクチャ Avatar アプリ View Avatar アプリ (HTML 5/JS/CSS) HTTP サービス (XML/JavaScript) Avatar 実行環境 Data HTTP/ サービス Avatar コンパイラ ⑤ サーバ側はJava EE WebSocket Nashorn (JavaScript エンジン) UI HTML 5 DOM のサービスも利用可能 Java EE ローカルストレー Java EE アプリ HTTP/ サービスブラウザ ジ WebSocket App サーバ43 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  44. 44. Avatar のアーキテクチャ Avatar アプリ View Avatar アプリ (HTML 5/JS/CSS) HTTP サービス (XML/JavaScript) Avatar 実行環境 Data HTTP/ サービス Avatar コンパイラ WebSocket Nashorn (JavaScript エンジン) UI HTML 5 DOM ⑥ クライアント側は HTML 5, DOM, Java EE ローカルストレー ローカルストレージ Java EE アプリ HTTP/ サービスブラウザ ジ 等を利用可能 WebSocket App サーバ44 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  45. 45. クライアントで動作するアプリ アプリ View(Hello World) Model<a:viewModule …> <a:page><a:localModel> <a:model id="name" var NameModel = function(){ idref="NameModel"/> this.first = "Planet"; <a:form> this.last = "Earth"; <a:input label="First Name" this.clear = function(){ value="#{name.first}"/> this.first = this.last = <a:input label="Last Name" ""; value="#{name.last}"/> }; <a:output value="Hello }; #{name.first} #{name.last}"/><a:/localModel> <a:button label="Clear" action="#{name.clear()}"/> ローカルのモデルを定義 <a:/form><a:/page><a:/viewModule> 45 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  46. 46. WebSocketで動作するアプリ(Model の実装例) Model JSON Service<a:socketModel> Model 用に用意されているvar ChatModel = function(){ this.message = ""; プロトタイプ関数を上書き実装 this.user = ""; var superSend = this.$send; • this.$onMessage this.$send = function(){ • this.$send this.process(this.message); • etc. superSend.call(this); }; …. };<a:/socketModel> 46 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  47. 47. WebSocketで動作するアプリ(Service の実装例) Model JSON Service<a:socketService Service 用に用意されている url="websocket/chat"> var SocketService = function(){ プロトタイプ関数を上書き実装 this.$onMessage = function(peer,message){ • this.$onMessage this.process(message); • this.$onTimeOut peer.getContext().sendAll(message); • etc. };};<a:/socketService> 47 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  48. 48. New Announcement 2013 年 春頃 Java イベント開催予定48 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  49. 49. 49 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
  50. 50. 50 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.

×