第７回 エンタープライズ×HTML5ナイトセミナーでの発表資料です。 http://atnd.org/events/47077

1. SPAを実現するために必要な通信技術
NTTコミュニケーションズ
仲 裕介

2. ⾃自⼰己紹介
仲裕介／なかゆうすけ
Twitter : @Tukimikage
所属
NTT Communications Corporation
Innovative Architecture Center
HTML5 Experts.jp 副編集長
2

3. 伝えたいこと
・SPAを議論論する上で通信技術は避けて通れません
・HTML5の登場でフロントエンドの技術との接点が多くなります
・フロントエンドデベロッパーは無視できない
・通信技術の特徴を理理解した上で、効果的なフロントエンドの設計、実装が求められる
・今⽇日は通信プロトコルの解説、SPDY、WebSocket、WebRTC
の概要に触れます
3

4. Single Page Applicationと通信技術
・SPAは単⼀一Webページで全ての処理理が完結するアプリケーションアーキテクチャ
・HTML5やJavaScriptを活⽤用しクライアントサイドの状態遷移を⾏行行う
・HTML5によるストレージ技術を利利⽤用したオフライン実⾏行行が可能に
・HTML5によりブラウザ履履歴やURLの操作も可能に
・サーバサイドとクライアントサイドはより疎結合に
・AJAXやCometを活⽤用した⾮非同期通信
・WebSocketを活⽤用した双⽅方向⾮非同期通信
・クライアント同⼠士のサーバレス通信も実現
・WebRTC（Web Real Time Communication）を活⽤用したブラウザ同⼠士のリアルタイム通信
・次世代通信プロトコルによるレスポンス向上
・HTTP2.0
・SPDY
4

5. 通信技術オーバービュー
・IP
1対１でのパケットの伝送⼿手順を規定した通信プロトコル
IPアドレスによって指定される相⼿手へパケットを伝送する役割をに担う
・TCP
伝送制御プロトコルで、IPでの伝送に対して、エラー検出、フロー制御、輻輻輳制御、順序の保証などを担う
・UDP
コネクションレスな伝送制御プロトコル、IPでの伝送をほぼそのまま利利⽤用
信頼性、順序、データの完全性は保証しないため⾼高速な通信が可能
ブロードキャストとマルチキャストという機能をもつ
・SCTP
TCP同様に信頼性の⾼高いデータ伝送を保証するプロトコル
マルチホーミングによる複数のネットワーク経路路を同時に確⽴立立させてることで、TCPよりも信頼性が⾼高い
マルチストリーミングによりひとつのネットワーク経路路内で複数のストリームを同時に送受信可能
AJAX
HTTP1.1
WebRTC
SPDY
HTTP2.0
WebSocket
TCP
RTP/SRTP
SCTP
IP
5
UDP

6. 通信技術オーバービュー
・HTTP1.1
HTMLなどのコンテンツをWebサーバとWebブラウザ間で伝送するための通信プロトコル
必ずクライアントから通信が開始され、クライアントがサーバにリクエストを送りサーバはそれにレスポン
スを返すという単純な仕組み
・AJAX/Comet
HTTPを利利⽤用してサーバクライアント間で⾮非同期通信を実現する仕組み
XMLHttpRequestというブラウザ組み込みのAPIの機能を利利⽤用する
AJAXはクライアントからサーバ向けの通信、Cometはサーバからクライアント向けの通信を実現
・SPDY / HTTP2.0
Googleが提唱したHTTP1.1に変わる通信プロトコルで、SPDYはHTTP2.0のベースとなっている
⼀一つのコネクション上で双⽅方向、複数のソケット通信（TCP/IPによる通信）が可能
・WebSocket
サーバとクライアント間での双⽅方向通信を実現する通信プロトコル
⼀一つのコネクション上で双⽅方向、複数のソケット通信（TCP/IPによる通信）が可能
W3CはJavaScriptAPIを規定し、IETFが関連する通信プロトコルを規定している
AJAX / Comet
HTTP1.1
SPDY
HTTP2.0
WebRTC
WebSocket
TCP
RTP/SRTP
SCTP
6
IP
UDP

7. 通信技術オーバービュー
・RTP / SRTP
⾳音声や動画などのストリームデータをリアルタイム伝送するための通信
プロトコル
SRTPはRTPのデータ部分をAESを利利⽤用して暗号化して送受信すること
ができる
RTPとSRTPはUDPをトランスポート層プロトコルとして利利⽤用する
・WebRTC / RTCWeb
W3CとIETFにて標準化が進んでいる、ブラウザ同⼠士でリアルタイムコ
ミュニケーションを実現する仕組み
W3CはJavaScriptAPIを規定し、IETFが関連する通信プロトコルを規定
している
AJAX / Comet
HTTP1.1
SPDY
HTTP2.0
WebRTC / RTCWeb
WebSocket
TCP
RTP/SRTP
SCTP
7
IP
UDP

8. Webの⾼高速化のために・・・SPDY
HTTP1.1の仕組み
１回のTCPコネクション
サ
１回のHTTP/HTTPSコネクション
ー
ブ
ラ
ウ
ザ
バ
複数のWebコンテンツを
⾼高速に取得するためにブ
ラウザは並列列でサーバに
対してコネクションをは
るため、サーバリソース
⾯面で問題が出てくる。
SPDYの仕組み
サ
１回のストリーム
（従来のHTTPリクエスト＆レスポンス）
ー
ブ
ラ
ウ
ザ
バ
8

9. SPDYの特徴
・HTTPヘッダー圧縮（セキュリティ上の理理由により現在は⾮非圧縮）
・通信効率率率向上
・１つのTCPコネクションで複数のストリームを扱える
・サーバにやさしい
・TLSの拡張仕様であるNext Protocol Negotiationを利利⽤用
・HTTPS通信が必須
・最近ではGoogleからTLSに変わる仕組みとして、UDPにTCPが持つ様々な機能を持たせた
QUICというプロトコルがリリースされ、SPDYを上位プロトコルとしてサポート
・サーバプッシュ機能で通信効率率率化
・サーバ側から次に必要なコンテンツにクライアントに対して事前送信、キャッシュさせる
・双⽅方向での通信をサポートしているが、⽬目的は双⽅方向通信ではなく通信効率率率の向上
WebSocketとは違い通信効率率率向上に趣が置かられている
・ストリームには優先度度をつけることが可能
・送信側が受信側にコンテンツ読み込みポリシーを伝えることが可能
9

10. SPDYの特徴
・対応するためにWebコンテンツへの変更更が不不要
・サーバとブラウザが対応していればそのまま導⼊入可能
・ブラウザが対応していなければHTTPSによる通信を提供
・Apache、Nginx、node.js、Tomcat、Jettyなどでモジュールが提供されている
・対応ブラウザ（wikipediaより）
Google Chrome 10以降降
Mozilla Firefox 11以降降（SPDY2）、15以降降（SPDY3）、27以降降（SPDY3.1）
Opera 12.10以降降
Internet Explorer 11にてSPDY 3（ただしWindows 8.1のみ。Windows7では未対応）
Android ブラウザ 3.0以降降
SPDY indicator
・採⽤用実績が豊富
・Googleの各種サービス、TwitterやFacebookで利利⽤用されている
・Chrome、Firefox、Operaでは、
SPDY indicatorを利利⽤用することで対応サイトを確認できる
・効果が発揮できないサイトも有る
・CDN等を利利⽤用して複数ドメインにコンテンツを分散している場合
10

11. 双⽅方向通信実現のために・・・WebSocket
AJAX、Cometの仕組み
１回のTCPコネクション
サ
ー
ブ
ラ
ウ
ザ
１回のHTTP/HTTPSコネクション
サ
AJAXはHTTPコネクション
を複数確率率率させる、Comet
はAJAXのコネクションを
サーバで掴みっぱなしにして
擬似的にサーバプッシュを実
現する。
共にサーバへの負荷が⼤大きい
バ
WebSocketの仕組み
ー
ブ
ラ
ウ
ザ
バ
WebSocketのメッセージフレーム
11

12. 双⽅方向通信実現のために・・・WebSocket
接続シーケンス
HTTP -‐‑‒ アップグレードリクエスト
HTTP – レスポンス
サ
WebSocket – Open Message
ー
ブ
ラ
ウ
ザ
WebSocket – メッセージの送受信
バ
WebSocket ­− Close Message
12

13. WebSocketの特徴
・対応ブラウザ（wikipediaより）
Internet Explorer 10（含むモバイル）以降降
Mozilla Firefox 6 (Firefox for Mobile 7)以降降
Google Chrome 4 (含むモバイル)以降降
Safari 5 (含むiOS 4.2以降降)以降降
Opera 12.10（含むモバイル）以降降
Android 4.4以降降の標準ブラウザ
・クライアント側、サーバ側での実装が必要
クライアント側の実装例例
・TLSにてメッセージを暗号化するWSSが利利⽤用可能
・WSSを利利⽤用する場合はアップグレード時もHTTPSを利利⽤用する
13

14. WebSocket対応のサーバモジュール
•
•
•
•
•
Socket.IO
•
Node.jsのWebSocketモジュール
•
Sec-‐‑‒WebSocket-‐‑‒Version 7,8,13（RFC6455）に対応
Apache Tomcat 7
• 2012年年7⽉月にリリースされた7から対応
• Sec-‐‑‒WebSocket-‐‑‒Version 13（RFC6455）のみ対応
Apache-‐‑‒websocket
• Apache 2専⽤用
• Sec-‐‑‒WebSocket-‐‑‒Version 7,8,13（RFC6455）に対応
• https://github.com/disconnect/apache-‐‑‒websocket
GlassFish 3.1
• 3.1でプロトコル仕様hybi-‐‑‒00に対応
• 4ではSec-‐‑‒WebSocket-‐‑‒Version 13（RFC6455）に対応
• http://blog.yujing.jp/entry/2013/07/14/190728 →サンプルプログラムあり
Jetty 7
• 2009年年リリースの7から対応
• 現在までリリースされているWebSocketの全てのプロトコルに対応
• ひかりTVでの活⽤用例例：http://www.atmarkit.co.jp/ait/articles/1304/19/news017.html
•
cowboy
• Erlang製のWebサーバ
• Sec-‐‑‒WebSocket-‐‑‒Version 7,8,13（RFC6455）に対応
• SkyWayで利利⽤用：http://nttcom.github.io/skyway/
•
•
php-‐‑‒websocket
WebSocket-‐‑‒for-‐‑‒Python
•
EM-‐‑‒WebSocket
14

15. ブラウザ同⼠士でコミュニケーション・・・WebRTC
WebRTCが繋がる仕組み
Signaling Server
1.Signaling
RTC Function
・getUserMedia
・RTCPeerConnection
・RTPSessionDescription
・RTCIceCandidate
IPやPortなどを交換する
Web Browser
Web Browser
JavaScript
JavaScript
RTC
Function
Native OS Services
2.Peer Connection
DataChannel
MediaChannel
RTC
Function
Native OS Services

16. WebRTCの特徴
• Signaling
•
o
仲介サーバを経由してブラウザ同⼠士が互いの接続⽅方法を交換しあう
シグナリングの⽅方法はアプリ開発者次第
o
Ajax、WebSocket、SIP over websocketなどで実装可能
• MediaChannel
•
•
ブラウザ同⼠士でメディアストリームのやりとりが可能
getUserMediaで取得したカメラ映像やマイク⾳音声を扱うことが可能
• DataChannel
•
•
•
ブラウザ同士でデータのやり取りが可能
バイナリデータにすることで日本語などのやりとりも可能
SCTPを利用してUDP上で信頼性を向上させたデータのやり取りをすることが可能
• NAT超え（ICE/STUN/TURN）
•
•
•
P2P通信を行うためNATを超える課題が必ず出てくる
ICEというNATを超えるためのプロトコルを利用する
STUNはICEに利用されるもので、端末のGlobalIPを取得するための仕組み
•
TURNはICEで通信でない場合に、メディアやデータをサーバ経由で中継する仕組み

17. WebRTCの特徴
• 対応ブラウザ
PC
・Chrome 23以上
・Firefox 22以上
・Opera 12以上
• Android
・Chrome 28以上
・Firefox 24以上
• WebOS
• FirefoxOS 1.2以上（PeerConnectionhaまだ動かない）
•
• 開発用ライブラリ
・開発の難易易度度が⾼高いため簡単に開発可能なSDKが様々なベンダから提供されている
SkyWay – http://skyway.io
・SafariやIE（CU-‐‑‒RTC-‐‑‒Webという独⾃自規格）、iOSデバイスとの相互接続を実現するための
SDKやBaaSが海外企業により提供されている
Add Live -‐‑‒ http://www.addlive.com/
Frozen Mountain -‐‑‒ http://www.frozenmountain.com/
17

18. 終わりに
SPAが当たり前になると、HTML5を始めとした新しい技術をに活⽤用
する必要が出てきます。
通信技術に関しても進歩しており、Webの世界とかなり親和性が⾼高
くなりました。
・SPDY、WebSocketはもう⼗十分に使える技術です
・WebRTCは今後１〜～２年年で間違いなく使える様になります
WebSocketを利用した活用例は次のセッションで！
18

19. ご清聴ありがとうございました。
19

20. 参考資料料
体感！JavaScriptで超速アプリケーション開発 －Meteor完全解説 -‐‑‒ gihyo
http://gihyo.jp/dev/serial/01/meteor/0012
Web表⽰示の⾼高速化を実現するSPDYとHTTP/2.0の標準化 -‐‑‒ IIJ
http://www.iij.ad.jp/company/development/tech/activities/spdy/index.html
・SPDY対応WebSocket -‐‑‒ infoq
http://www.infoq.com/jp/news/2012/06/spdy-‐‑‒websockets
・WebSocketと、SPDYってどう違うのよ？
http://d.hatena.ne.jp/kasei_̲san/20130217/p1
・変わるWebプロトコルの常識識（SPDY、HTTP2.0編）
http://html5experts.jp/komasshu/404/
20