ウェブ 関 連 最 新 技 術 動 向 インターシステムズジャパン 株 式 会 社 シニア テクノロジー アドバイザー 佐 藤 呂 志 アジェンダ クライアント 開 発 法 の 種 類 について 標 準 Web 技 術 ネイティブ ハイブリッド JavaScriptフレームワーク サーバー/クライアント 間 通 信 法 JSON Zen Mojo REST Web Socket 1 1
クライアント 開 発 法 の 種 類 標 準 Web 技 術 ネイティブ ハイブリッド 2 標 準 Web 技 術 HTML 5とCSS3を 利 3 2
Java Scriptフレームワーク 4 フレームワーク 概 要 DOM 探 索 と 操 作 エベント 操 作 Ajax 呼 出 し ウィジェット アニメーション モバイルフレームワーク 5 3
フレームワークはどれも 似 たり 寄 ったり モバイル 世 界 のパッケージ そのほかのパッケージも 必 要 簡 潔 なHTMLを 記 述 DOMが 準 備 された 後 で 変 換 6 データはどこに? サーバーへAJAX 呼 出 しを 使 う 動 的 DOM 注 データ 取 得 スクリプトロード jquery: $.getjson(url,data,callback) サーバー 側 : JSON とCSP/ZEN/Zen Mojo/REST 7 4
HTML5 + CSS3 vs. JS Frameworks きさとロード 時 間 アクセス 性 互 換 性 8 困 難 な 点 フレームワークを 学 習 しなければならない 異 なるランタイムの 異 なる 呼 出 しで 同 じ 結 果 が 得 られる http://jsperf.com/id-vs-class-vs-tag-selectors/118 http://jsperf.com/jquery-native/5 http://24ways.org/2011/your-jquery-now-with-less-suck/ 9 5
ウェブアプローチ 良 い 点 悪 い 点 1つのコードベースだけ 必 要 デバイス 機 能 の 限 られたアクセス いつでも 起 動 修 正 が 可 能 払 プロセスがない インストレーションプロセス 不 要 複 数 ブラウザのサポート 既 存 のウェブアプリケーションを 化 粧 直 しできる 10 ネイティブアプローチ ios Objective-C Android Java Windows.NET 11 6
ネイティブアプローチ 良 い 点 悪 い 点 デバイス 機 能 への 完 全 アクセス ソフトウェア 更 新 をスキップできる 簡 単 な 払 プロセス 開 発 費 価 美 しい 栄 え 複 数 のコードベース 必 要 モバイルアプリケーションより 速 に 実 12 たくさんの 道 のり ネイティブ 開 発 より いリリースサイクル デバイスタイプ 毎 にコードの 書 き 換 え ウェブベース 開 発 ネイティブアプリではない ブラウザの 感 触 デバイス 機 能 への 限 られたアクセス 13 7
PhoneGapはハイブリッド Native App Native Code Native App HTML Code Browser HTML Code Device API Device API Device API Native Hybrid Web 14 PhoneGap ハイブリッド 開 発 には PhoneGapを 推 奨 http://phonegap.com 15 8
ステートフル VS ステートレス モバイルの 特 性 消 費 電 無 線 LANの 不 安 定 性 通 信 の 帯 域 スケーラビリティ ステートレスな 通 信 が 望 ましい HTTP + JSON 16 JSON vs. XML JSON データ 構 造 検 証 の 仕 組 みなし 名 前 空 間 (ネームスペース)なし 解 析 は 速 特 にJavascript eval() を 使 うと XML データ 構 造 XSD 名 前 空 間 (ネームスペース)あり ( 複 数 使 可 ) 解 析 にはXpathなどを 使 ったXMLド キュメント 解 析 が 必 要 17 9
ZEN Mojo モバイルデバイスおよびディスクトップ Webページを 作 成 す るためのクラスライブラリー ページのリロードを 極 抑 える 様 デザインされたアーキテクチャー 全 てのクライアント サーバー 間 の 通 信 に 常 に 軽 量 で 帯 域 をあまり 消 費 しないJSONを 使 動 的 にHTML5を 成 主 要 なブラウザがサポートしている プラグインアーキテクチャーにより 普 及 しているJavaScriptライブラ リーに 簡 単 にアクセス 18 ZEN Mojo 内 容 は 連 のJSONプロバイダーが 提 供 する JSON Object 19 10
その 他 Zen Mojoの 構 成 要 素 Pageクラス Zen Mojoはシンプルなページクラスを 使 するようにデザイン テンプレートクラス データとレイアウト 情 報 を 含 むアプリケーションの 全 てのロジックを 提 供 複 数 のテンプレートクラスを 使 可 アプリケーションクラス スタイルシートなどのアプリケーション 全 体 で 共 通 な 振 舞 を 提 供 サポートクラス プラグイン クラスなど JavaScriptインクルードクラス サードパーティークラスライブラリー JavaScriptインクルードファイル CSSスタイルシート 20 RESTとは ロイフィールディングが 提 唱 したウェブアプリケーションの アーキテクチャ 上 のスタイル 表 現 上 の 状 態 の 転 送 をよいウェブアプリケーションの 振 舞 のイメージ を 喚 起 することと 想 定 する: リンクを 選 択 すること( 状 態 遷 移 )でア プリケーションが 進 中 のウェブページ( 仮 想 状 態 マシン)の 次 の ページに 移 動 し(アプリケーションの 次 の 状 態 を 表 現 しながら) ユーザーに 橋 渡 しされ ユーザーの 利 に 合 わせて 表 現 される 21 11
REST RESTは 標 準 でもプロトコルでもなくて アーキテクチャー 上 の スタイル RESTは 既 存 のウェブ 標 準 であるHTTP URL XML JSON などを 使 う RESTはリソース 指 向 リソースまたは 情 報 の 断 をURIで 指 定 し サーバー/クライア ント 間 の 双 向 に 渡 される 22 RESTの 原 則 定 のインタフェース: 簡 潔 にアーキテクチャーに 紐 づけない その 結 果 各 部 分 は 独 に 進 化 する ステートレス: クライアントのコンテキストは 要 求 間 でサー バーに 保 存 しない リクエストをサービスするために 必 要 な 情 報 はすべて 毎 回 送 る キャッシュ 可 能 : よく 管 理 された 部 分 的 および 完 全 なキャッシ ングがいくつかのクライアント/サーバー 間 のやりとりを 削 る スケーラビリティと 性 能 を 改 善 する 23 12
RESTfulウェブサービス RESTfulウェブサービスというのは HTTPとRESTの 原 則 を 使 って 実 装 したウェブAPI URIのようなディレクトリ 構 造 で 識 別 するリソースの 集 合 (https://www.googleapis.com/calendar/v3/calendars/globalsummit/events) 操 作 は 明 的 にHTTPメソッドを 基 礎 とする(GET, POST, PUT, DELETE) 情 報 は インターネットのメディアタイプ 通 常 はJSONに 基 づき 転 送 他 のタイプにはXML,HTML, CSV (テキスト)が 含 まれる 24 CRUD 操 作 REST 操 作 はhhtpプロトコルメソッドで 定 義 されている4つにタイプに 集 約 される: REST HTTP Create Post POST https://api.twitter.com/1.1/statuses/retweet/241259202004267009.json Read Get GET https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=twitterapi&count=2 Update Put PUT https://www.googleapis.com/calendar/v3/calendars/calendarid/events/eventid Delete Delete DELETE https://www.googleapis.com/calendar/v3/calendars/calendarid/events/eventid 25 13
REST 優 位 性 REST 簡 潔 性 ( 使 保 守 テストが 簡 単 ) 表 現 のたくさんな 選 択 肢 がある(JSON, CSV, HTML, XML) 間 が 可 読 できる 結 果 性 能 スケーラブルアーキテクチャ 軽 量 要 求 と 軽 量 応 答 より 簡 単 な 応 答 の 解 析 帯 域 の 削 減 (キャッシング 条 件 付 GETなど) JSON 表 現 を 使 うとクライアントに 適 している 26 REST 優 位 性 Soap 要 求 <?xmp version= 1.0?> <soap:envelope xmlns:soap=http://www.w3.org/2001/12/soap-envelope soap:encodingstyle=http://www.w3.org/2001/12/soap-encoding> <soap:body ord= http://www.igroup.com/order > <ord:getorderdetails> <ord:ordernumber>12345</ord:ordernumber> </ord:getorderdetails> </soap:body> </soap:envelope> REST 要 求 http://www.igroup.com/order?ordernum=12345 27 14
セキュリティ セキュリティはインターフェース 開 発 者 にゆだねられる RESTには 予 め 定 義 済 メソッドはない ウェブアプリケーションとして 既 に 利 可 能 なものをおおいに 利 すべし SSL/TLS (https:) OpenId Authorization (Oauth) Hash-based Message Authentication Code (HMAC) 28 Cachéでの 実 装 2014.1に 新 クラス - %CSP.Rest MP 上 でディスパッチクラスを 登 録 RESTアプリケーションベースURLとマッチングする システム>セキュリティ 管 理 >ウェブアプケーション>ウェブアプリケーションの 編 集 新 規 ウェブアプリケーション /csp/samples/globalsummit Dispatch Class: Rest.Broker UrlMap Xdataブロックを 使 ってリクエストをHTTP 操 作 とターゲットのクラスメソッ ドに 引 き 渡 す XData UrlMap { <Routes> <Route Url="/employee/html/list" Method="GET" Call="Rest.HTML:GetAllEmployees"/> </Routes>} 29 15
REST vs. SOAP REST 1つのスタイル 適 切 な RESTとしては トランス ポートにはHTTP/HTTPSが 必 須 応 答 データは 通 常 XMLやJSON 形 式 で 転 送 される 平 均 的 にはJSONのほうが 軽 い (SOAPヘッダーのオーバーヘッドが ない) SOAP 標 準 普 通 はトランスポートは HTTP/HTTPSだがほかのものでもよ い 応 答 データはXML 形 式 で 転 送 される 30 REST vs. SOAP ( 続 き) REST 要 求 はURI 形 式 で 転 送 ウェブサービスに 較 してかなり 軽 い さに 制 限 あり フォームフィールドを 簡 単 に 使 可 能 SOAP 要 求 はXML 形 式 で 転 送 メソッドとURIを 解 析 するとその 意 図 がわかる 意 図 を 理 解 するにはメッセージペイ ロードを 解 析 しなければならない WS* イニシアティブが 圧 縮 やセキュ リティのような 課 題 の 改 善 に 取 り 組 む 31 16
REST vs. SOAP ( 続 き) REST JavaScriptから 呼 出 し 簡 単 JSONが 返 ってくると 常 に 強 SOAP JavaScriptはSOAPを 呼 び 出 すことは 可 能 だが 難 しく 洗 練 されたやりか たではない JavaScriptのXML 解 析 は 遅 くて 法 がブラウザ 毎 に 異 なる 32 REST/JSONは 以 下 のようなケースに 最 適 限 られた 帯 域 とリソース 開 発 者 定 義 の 構 造 の 柔 軟 性 どのブラウザも 利 可 能 完 全 にステートレスな 操 作 例 えば ステートレスなCRUD 操 作 キャッシング 状 況 RESTアプローチは 情 報 がキャッシュできるときに 常 にうまく 動 作 する 33 17
SOAP/XMLは 以 下 のようなケースに 最 適 同 期 処 理 同 期 起 動 SOAPは 保 障 できるレベルの 信 頼 性 とセキュリティを 提 供 正 式 な 契 約 SOAPはプロバイダーとコンシューマ 間 の 交 換 の 厳 密 な 仕 様 を 与 える ステートフル 操 作 SOAPは コンテキストと 会 話 状 態 管 理 をサポートする 追 加 の 仕 様 を 持 っている 34 WebSocket サーバとクライアント 間 は 度 でも 接 続 が 確 すると 明 的 に 切 断 しない 限 り 通 信 順 を 意 識 することなくデータのやり 取 りをソケット 通 信 で 実 施 できる WebSocketで 接 続 が 確 しているサーバとすべてのクライアントは 同 じデータを 共 有 し リアルタイムで 送 受 信 できる @ITより 引 用 http://www.atmarkit.co.jp/ait/articles/1111/11/news135.html 35 18
ウェブ 関 連 最 新 技 術 動 向 まとめ 36 まとめ モバイル 機 器 接 続 にはステートレス 通 信 が 望 ましい データ 交 換 にはJSONを 使 うケースが 増 えるのでは? 最 新 Web 開 発 フレームワーク Zen Mojo 最 新 キットについては カスタマーサポートセンターまでお 問 い 合 わせください 外 部 JavaScriptフレームワークを 補 完 的 に 使 うと 便 利 REST 37 19