<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	xmlns:series="http://organizeseries.com/"
	>

<channel>
	<title>spdy &#8211; HTML5Experts.jp</title>
	<atom:link href="/tag/spdy/feed/" rel="self" type="application/rss+xml" />
	<link>https://html5experts.jp</link>
	<description>日本に、もっとエキスパートを。</description>
	<lastBuildDate>Sat, 07 Jul 2018 03:14:05 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=4.7.19</generator>
	<item>
		<title>HTTP/2.0がもたらすWebサービスの進化「HTML5 Conference 2013」</title>
		<link>/miyuki-baba/3756/</link>
		<pubDate>Tue, 07 Jan 2014 04:00:50 +0000</pubDate>
		<dc:creator><![CDATA[馬場 美由紀]]></dc:creator>
				<category><![CDATA[プログラミング]]></category>
		<category><![CDATA[HTML5 Conference 2013]]></category>
		<category><![CDATA[HTTP/2.0]]></category>
		<category><![CDATA[W3C]]></category>
		<category><![CDATA[spdy]]></category>

		<guid isPermaLink="false">/?p=3756</guid>
		<description><![CDATA[連載： HTML5 Conference 2013レポート (19)GoogleやTwitterが大規模に導入しているSPDYをベースとして、HTTP/2.0の標準化作業が現在急ピッチで進められている。十数年ぶりに改訂さ...]]></description>
				<content:encoded><![CDATA[<div class="seriesmeta">連載： <a href="https://html5experts.jp/series/html5-conference-2013-2/" class="series-160" title="HTML5 Conference 2013レポート" data-wpel-link="internal">HTML5 Conference 2013レポート</a> (19)</div><p>GoogleやTwitterが大規模に導入しているSPDYをベースとして、HTTP/2.0の標準化作業が現在急ピッチで進められている。十数年ぶりに改訂されるこの新プロトコルによってWebサービスが今後どう変わるのか。「HTML5 Conference 2013」では、株式会社インターネットイニシアティブの大津繁樹氏、株式会社林達也 (@lef)氏、W3C中島博敬氏が、レピダムデモを交えてHTTP/2.0の概要について解説した。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/01/DSC03184.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/01/DSC03184.jpg" alt="DSC03184" width="700" height="442" class="aligncenter size-full wp-image-4254" srcset="/wp-content/uploads/2014/01/DSC03184.jpg 640w, /wp-content/uploads/2014/01/DSC03184-300x189.jpg 300w, /wp-content/uploads/2014/01/DSC03184-207x130.jpg 207w" sizes="(max-width: 700px) 100vw, 700px" /></a></p>

<h2>14年ぶりに改訂されるHTTP/2.0標準化作業</h2>

<p>現在、IETF（Internet Engineering Task Force）にて標準化作業が急ピッチで進められているHTTP/2.0。1999年にHTTP 1.1が規定されて以来、14年ぶりに改訂されることになった新プロトコルの概要と、Webサービスが今後どう変わるのかについての最新情報が紹介された。</p>

<p>HTTP/2.0はインターネット技術の標準化を推進する任意団体IETF（Internet Engineering Task Force）のアプリケーションワーキンググループにて標準化が進められている。IETFには、Google、Microsoft、Mozilla、Twitterなどの協賛企業が名を連ねている。今回登壇した林氏、大津氏もIETFのメンバーである。</p>

<h2>SPDYがベースとなるHTTP/2.0</h2>

<p>HTTP/2.0は、Googleが開発したプロトコルSPDY（スピーディ）がベースとなっている。GoogleがSPDYを世に送り出した背景には、インターネット環境の大きな変化があった。ユースケースの大半がPCからモバイルへと変化つつある中で、HTTPというプロトコルをモバイルに最適化し、Webの表示を高速化するという目的で作られたのがSPDYだった。</p>

<p>HTTP/1.1のセマンティクスを維持し互換性を保持した上で、新しいシンタックスを導入しフレーム化することになっているHTTP/2.0は、このSPDYのアイデアをもとに一般公募で仕様提案を決定する。既にデプロイされGoogleサーバで動いているこのSPDYに、相互運用性を持たせたものがHTTP/2.0といえるだろう。</p>

<h2>新たに導入されるHTTP/2.0独自の技術的な特徴</h2>

<p>SPDYをベースにしつつ、今回新たに導入されるHTTP/2.0独自の技術的な特徴にも注目したい。まず挙げたいのは、2段階・3種類の接続方法だ。</p>

<p>第一段階の接続1つ目のTLS＋ALPNは、TLS接続時にALPN拡張フィールドを活用し、HTTP/2.0に接続する。</p>

<p>2つ目は現在議論中のHTTP Upgradeだ。WebSocketと同様の仕組みでHTTP/1.1の接続後、Upgradeヘッダを使いHTTP/2.0に接続をアップグレードする。</p>

<p>3つ目はDirect接続で、DNSレコードやHTTPヘッダによるリダイレクトであらかじめサーバがHTTP/2.0対応とわかっている場合は、直接接続する。</p>

<p>そして第二段階での接続でクライアントから24byteのマジックコードをサーバに送り、初期ウィンドウサイズやストリームの最大同時オープン数などの情報を含む情報（SETTINGフレーム）を交換する。これが完了してからHTTP/2.0の通信が始まることになる。</p>

<p>サーバプッシュ機能の「予約」という概念もSPDYにはない点だ。先読みさせるリクエストヘッダとストリームIDをサーバがクライアントに予約すると、クライアントは予約されたリクエストは新しくリクエストしない。サーバがコンテンツをプッシュしてクライアントにキャッシュするため、無駄なやりとりがなくなる。</p>

<p>またHTTP/2.0ではSPDY にはない新しいヘッダ圧縮仕様（HPACK）も追加された。ここではサーバとクライアントでヘッダ情報とその状態をテーブルとして持ち合い、ヘッダの差分情報を符号化してやり取りする。</p>

<p>最終的にはヘッダ情報を圧縮し、バイナリの文字列として扱う。Cookieやどんどん増えていくユーザーエージェントなど、これまで冗長で大きいものだったクライアントからサーバに送るヘッダ情報が、差分情報として必要なものだけのやりとりになるため、データ量は2～3割削減される。モバイル環境でブラウザを使う場合は、このヘッダ圧縮の効果は非常に大きいだろう。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/01/DSC03189.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/01/DSC03189.jpg" alt="DSC03189" width="2692" height="1468" class="aligncenter size-full wp-image-4257" srcset="/wp-content/uploads/2014/01/DSC03189.jpg 640w, /wp-content/uploads/2014/01/DSC03189-300x163.jpg 300w, /wp-content/uploads/2014/01/DSC03189-1024x558.jpg 1024w, /wp-content/uploads/2014/01/DSC03189-207x112.jpg 207w" sizes="(max-width: 2692px) 100vw, 2692px" /></a></p>

<h2>今後HTTP/2.0でwebサービスはどう変わる？</h2>

<p>今後実際にHTTP/2.0でwebサービスがどのように変わるのかというと、昔より表示がスムーズで速くなったと感じる人はいるだろうが、ユーザー視点では一見なにも変わらない。</p>

<p>大きなインパクトを与えると考えられるのは、インフラ視点だ。サーバリソース・ネットワークリソースを効率的に使えるため、大規模サービスほどその効果を享受できるだろう。またサーバプッシュやサーバイニシエイトのフレームを活用し、LINEのようなブラウザ以外での用途での展開も進むと考えられる。</p>

<p>今後の動きとしては、GoogleやFacebookといったInternet GiantsでHTTP/2.0の導入が進むが、HTTP/2.0のメリットが少ない小規模サイトや一般ユーザーはHTTP/1.1という2極化になると予想される。ブラウザ側の対応が進むことで、HTTP/2.0に最適化されたサービスが登場すると考えられる。特にモバイルでの性能改善が大きく期待される。</p>

<p>最近米国のNSAによる盗聴問題（PRIZM）が話題となったが、脆弱性・盗聴への対策としてHTTP/2.0をhttps（SSL）に限定するかどうかは現在議論中だ。IETFの中で賛成、反対に意見は分かれているが、HTTP/2.0がインターネットのセキュリティ動向に大きな影響を与えるのは間違いないといえるだろう。</p>

<p><DIV align=right></p>

<p style="padding-top: 16px; line-height: 1.55; color: #60aa2a;">（レポート：畑毛あゆみ／撮影：萩原崇之）</p>

<p></div></p>

<p>【講演資料・セッション映像】</p>

<iframe width="560" height="315" src="//www.youtube.com/embed/_6KwzTEqiWw" frameborder="0" allowfullscreen></iframe>

<iframe src="http://www.slideshare.net/slideshow/embed_code/28796344" width="427" height="356" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen> </iframe>

<div style="margin-bottom:5px"> <strong> <a href="https://www.slideshare.net/shigeki_ohtsu/html5-conf2013-http2iijohtsu" title="HTTP/2.0がもたらす</a></strong> </div>
]]></content:encoded>
		
		<series:name><![CDATA[HTML5 Conference 2013レポート]]></series:name>
	</item>
		<item>
		<title>「WebSocket, WebRTC, Socket API, &#8230; 最新Webプロトコルの傾向と対策」HTML5 Conference 2013 セッションレポート</title>
		<link>/yosssi/3424/</link>
		<pubDate>Thu, 12 Dec 2013 01:00:25 +0000</pubDate>
		<dc:creator><![CDATA[吉田 啓二]]></dc:creator>
				<category><![CDATA[プログラミング]]></category>
		<category><![CDATA[HTML5 Conference 2013]]></category>
		<category><![CDATA[HTTP]]></category>
		<category><![CDATA[TCP]]></category>
		<category><![CDATA[WebRTC]]></category>
		<category><![CDATA[spdy]]></category>

		<guid isPermaLink="false">/?p=3424</guid>
		<description><![CDATA[連載： HTML5 Conference 2013レポート (1)2013年11月30日（土）に開催された「HTML5 Conference 2013」の、エヌ・ティ・ティ・コミュニケーションズ株式会社・小松健作さんによ...]]></description>
				<content:encoded><![CDATA[<div class="seriesmeta">連載： <a href="https://html5experts.jp/series/html5-conference-2013-2/" class="series-160" title="HTML5 Conference 2013レポート" data-wpel-link="internal">HTML5 Conference 2013レポート</a> (1)</div><p>2013年11月30日（土）に開催された「<a href="http://events.html5j.org/conference/2013/11/" title="HTML5 Conference 2013" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">HTML5 Conference 2013</a>」の、エヌ・ティ・ティ・コミュニケーションズ株式会社・小松健作さんによるセッション「WebSocket, WebRTC, Socket API,&#8230;最新Webプロトコルの傾向と対策」の内容をご紹介します。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2013/12/Screen-Shot-2013-12-05-at-15.25.13.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2013/12/Screen-Shot-2013-12-05-at-15.25.13-1024x562.png" alt="html5conference-report-web-protocol-01" width="1024" height="562" class="aligncenter size-large wp-image-3429" srcset="/wp-content/uploads/2013/12/Screen-Shot-2013-12-05-at-15.25.13-1024x562.png 1024w, /wp-content/uploads/2013/12/Screen-Shot-2013-12-05-at-15.25.13-300x164.png 300w, /wp-content/uploads/2013/12/Screen-Shot-2013-12-05-at-15.25.13-207x113.png 207w, /wp-content/uploads/2013/12/Screen-Shot-2013-12-05-at-15.25.13.png 640w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>

<h2>最新のWebプロトコルが続々と誕生</h2>

<p>1990年から10年間ほどは、HTTPというたった一つのプロトコルが、Web通信用のプロトコルとして使われていました。その後、HTML5という言葉が出てきてから、WebSocketやSPDY、HTTP/2.0、WebRTC、Raw Socket API、SCTP over UDP、QUICといった、新しいプロトコルが続々と誕生してきました。この4年間ほどで、これらの多くのプロトコルが誕生してきた背景・理由をこれから説明します。</p>

<h2>HTTPの仕組みと問題</h2>

<p>約20年間に渡り、Webを支え続けているHTTPの仕組みをまずは説明します。HTTPは非常に単純なプロトコルで、ブラウザ・サーバ間でリクエスト・レスポンスがやり取りされる仕組みとなっています。例えば、ブラウザから「index.htmlがほしい」とサーバへリクエストを送信すると、サーバからそのHTMLファイルがレスポンスとして送信されます。その後、ブラウザから「CSSがほしい」とサーバへリクエストを送信すると、またサーバからレスポンスが返ってくるという流れになります。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2013/12/web-131202044252-phpapp01.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2013/12/web-131202044252-phpapp01.jpg" alt="html5conference-report-web-protocol-02" width="520" height="390" class="aligncenter size-full wp-image-3442" style="border: 1px solid #000000" srcset="/wp-content/uploads/2013/12/web-131202044252-phpapp01.jpg 640w, /wp-content/uploads/2013/12/web-131202044252-phpapp01-300x225.jpg 300w, /wp-content/uploads/2013/12/web-131202044252-phpapp01-207x155.jpg 207w" sizes="(max-width: 520px) 100vw, 520px" /></a></p>

<p>ここで問題となるのが、<strong>ブラウザがサーバへリクエストを送信してレスポンスが返ってくるまでの間、ブラウザが次のリクエストを送信できない</strong>ということです。この待ち時間をRound Trip Timeと言いますが、例えばこれが100ミリ秒だとすると、全て合計するとこの時間だけで1～2秒かかる場合があります。この状況を改善するために、<strong>TCPの接続を複数張り、同時に複数のリクエストを送信する</strong>という方法があり、これが今のHTTPのメジャーな使用方法となっています。この方法で改善はするのですが、例えばChromeですとブラウザから同一のサーバに対しては、同時に6つまでしかリクエストを送信できないという制限があり、どうしても待ち時間が発生してしまいます。</p>

<p>このような制限がある中でWebサービスのレスポンス性を高めるために、<strong>やり取りされる複数のリソースを一つにまとめて、リクエスト・レスポンスの回数を減らす</strong>という方法があります。具体的な方法の一つとして、複数の画像ファイルを一つのファイルにまとめるCSS Spritesという手法があります。ただし、Twitterのアイコンなど、リクエストによって動的に表示させる画像を変更しなければならない状況では、このような手法を使うことはできません。このような課題があり、そもそも開発者側でこのようなパッキング・テクニックを使わなくても済むように、複数のリソースをまとめるための一般的な方法が求められるようになりました。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2013/12/html5conference-report-web-protocol-03.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2013/12/html5conference-report-web-protocol-03.jpg" alt="html5conference-report-web-protocol-03" width="520" height="390" class="aligncenter size-full wp-image-3456" style="border: 1px solid #000000" srcset="/wp-content/uploads/2013/12/html5conference-report-web-protocol-03.jpg 640w, /wp-content/uploads/2013/12/html5conference-report-web-protocol-03-300x225.jpg 300w, /wp-content/uploads/2013/12/html5conference-report-web-protocol-03-207x155.jpg 207w" sizes="(max-width: 520px) 100vw, 520px" /></a></p>

<h2>複数のリソースを一つにまとめるSPDY</h2>

<p>複数のリソースを一つにまとめて通信するプロトコルとして、SPDYがあります。SPDYでは、一つのTCP接続の中で、複数のリクエストを送信することができ、これによって高速化が図られています。</p>

<p>ただし、常にSPDYを使用すればよいというわけではありません。ネットワークの遅延がない状況ですと、SPDYの方がHTTPSよりも常に速いのですが、ネットワークの遅延が100ミリ秒ある状況ですと、HTTPSの方がSPDYよりも速くなります。そして、通信するリソースサイズが大きくなればなるほど、その通信速度の差は大きくなります。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2013/12/html5conference-report-web-protocol-04.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2013/12/html5conference-report-web-protocol-04.jpg" alt="html5conference-report-web-protocol-04" width="520" height="390" class="aligncenter size-full wp-image-3462" style="border: 1px solid #000000" srcset="/wp-content/uploads/2013/12/html5conference-report-web-protocol-04.jpg 640w, /wp-content/uploads/2013/12/html5conference-report-web-protocol-04-300x225.jpg 300w, /wp-content/uploads/2013/12/html5conference-report-web-protocol-04-207x155.jpg 207w" sizes="(max-width: 520px) 100vw, 520px" /></a></p>

<p>TCPには<strong>Long Fat Pipe</strong>という問題があります。TCPでデータをダウンロードする際は、データが複数の小さいパケットに分割されてサーバからブラウザへ送られます。ブラウザは、ある程度パケットをダウンロードすると、サーバへACK（Acknowledgement：受信応答）を送信し、サーバはブラウザからのACKを受信することで、次のデータをブラウザへ送信します。ここで、<strong>サーバが、ブラウザからのACKを受信するまで次のデータを送信することができない</strong>という問題があります。そのため、レイテンシが増えるにつれて、ブラウザからのACKの待ち時間が増えることになります。これがLong Fat Pipeと呼ばれる問題です。すごく太い、例えば1GBくらいの回線があったとしても、100ミリ秒などの遅延があると、1GBという速度は到底でません。このLong Fat Pipeは、個々のTCPの接続で発生するため、1つのTCP接続でデータをやり取りするSPDYの方が、複数のTCP接続に分散してデータをやり取りするHTTPSよりもLong Fat Pipeの影響を受けやすくなります。よって、<strong>ネットワークのレイテンシが大きい状況では、通信するリソースサイズが増えるに従ってLong Fat Pipeの影響が大きくなり、SPDYの方がHTTPSよりも通信速度が遅くなります</strong>。このように、常にSPDYの方が速いというわけではありません。</p>

<p>さらに、<strong>Head of Line Blocking</strong>という問題についても、SPDYの方がより大きな影響を受けます。Head of Line Blockingとは、TCP通信内でサーバから送られるデータが欠損する（パケット・ロスが起こる）と、そのデータが再送されるまでは、その後続のデータがブラウザへ送信されないという問題です。HTTPSの場合、TCPを複数張っているため、一つのTCPでHead of Line Blockingが発生しても、他のTCPでは通常通り通信が行われるため、この影響をあまり受けませんが、<strong>SPDYの場合、一つのTCPのみを使用しているため、Head of Line Blockingの影響を大きく受けることになります</strong>。</p>

<h2>Webの進化によりTCPの制限に直面</h2>

<p>以上のようなSPDYを使用することによる問題は、SPDY自体に原因があるわけではありません。その下のレイヤであるTCPに、Long Fat PipeやHead of Line Blockingといった制限があることに原因があります。<strong>Webの進化によって、TCPの制限が顕著になってきた</strong>のです。このように、TCPの制限がWebサービスに影響を及ぼすことがわかってきたため、「TCP以外のプロトコルを使った方が良いのではないか」という議論が国際標準化の場でなされるようになってきました。Googleは、TCPの代替としてQUICという、Head of Line Blockingが起こりにくい新たなプロトコルを提案しています。また、WebRTCの方ですと、SCTP over UDPという、Head of Line Blockingが起きないプロトコルが提案されています。ただし、インターネットのあらゆる機器に影響があるため、TCPを代替するこれらのプロトコルの普及には、時間がかかると考えられます。</p>

<h2>ユーザの体感速度を上げる</h2>

<p>TCPの制限により、SPDYが速いとは一概に言えない状況の中で、Web開発者は、「速度とは何か」を今一度考える必要があります。結局は、全てのコンテンツをブラウザへダウンロードするということはそれほど重要なことではなく、ユーザへ、最低限見せなければならない情報を素早く見せる、つまり、<strong>ユーザの体感速度をあげることが重要になります</strong>。体感速度を上げる方法として、ファーストビューのレンダリングを高速化させ、ファーストビューに関係ない画像やスクリプトを後でダウンロードするという方法があります。これを実現する技術として、HTMLの<strong>Resource Priorities</strong>というものがあります。これを使うことで、タグの中に、あるアトリビュートを指定するだけで、そのリソースを後から読み込むことができます。具体的には、後から読み込むようにしたいリソースについては、タグに属性「lazyload」を指定することで、そのリソースを後から読み込むことができます。</p>

<p></p><pre class="crayon-plain-tag">&lt;img class='Backgrounds' id='BackgroundLevel1' src='Background1.png' /&gt;
&lt;img class='Backgrounds' id='BackgroundLevel2' src='Background2.png' lazyload /&gt;</pre><p></p>

<h2>P2P通信を実現するWebRTC</h2>

<p>WebRTCの特徴はP2Pにあります。WebSocketを使ってブラウザ間でメッセージのやり取りを行う場合、必ずサーバを経由して通信しなければなりません。WebRTCを使う場合は、サーバを介せず、ブラウザ間で直接データをやり取りすることができます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2013/12/html5conference-report-web-protocol-05.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2013/12/html5conference-report-web-protocol-05.jpg" alt="html5conference-report-web-protocol-05" width="520" height="390" class="aligncenter size-full wp-image-3475" style="border: 1px solid #000000" srcset="/wp-content/uploads/2013/12/html5conference-report-web-protocol-05.jpg 640w, /wp-content/uploads/2013/12/html5conference-report-web-protocol-05-300x225.jpg 300w, /wp-content/uploads/2013/12/html5conference-report-web-protocol-05-207x155.jpg 207w" sizes="(max-width: 520px) 100vw, 520px" /></a></p>

<p>P2P通信を実現させるためには、通信対象の端末のIPアドレスとUDPのポート番号を知る必要があります。しかし、通常は端末がNATの内側にあるため、インターネット上でやり取りをする際に必要となる、NATの外側のIPアドレスとポート番号を知ることができません。</p>

<p>NATの外側のIPアドレスとポート番号を知るために、WebRTCではICEという仕組みを使用するのですが、その中でSTUNサーバというものがあります。端末は、STUNサーバへUDPのパケットを送信すると、NATの外側にあるIPアドレスとポート番号を知ることができます。そのようして得られた自分のIPアドレスとポート番号を、通信したい端末とお互いに交換しあうことで、P2P通信を行うことができます。ただし、STUNサーバは、フルコーンNATのように、宛先のIPアドレスを気にしないNATでないと使用できないため、シンメトリックNATではSTUNサーバを使用することができません。ちなみに、大体の家庭のNATはフルコーンNATで、企業で使用されるNATはほとんどがシンメトリックNATです。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2013/12/html5conference-report-web-protocol-06.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2013/12/html5conference-report-web-protocol-06-300x225.jpg" alt="html5conference-report-web-protocol-06" width="310" height="240" class="alignnone size-medium wp-image-3477" style="border: 1px solid #000000" /></a>
<a href="https://html5experts.jp/wp-content/uploads/2013/12/html5conference-report-web-protocol-07.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2013/12/html5conference-report-web-protocol-07-300x225.jpg" alt="html5conference-report-web-protocol-07" width="310" height="240" class="alignnone size-medium wp-image-3478" style="border: 1px solid #000000" /></a></p>

<p>WebRTCでは、STUNサーバが使えない場合は、TURNサーバを使うようになっています。TURNサーバを使う場合は、WebSocketを利用してブラウザ間でデータをやり取りする場合と同様に、このTURNサーバを介してデータのやり取りが行われるようになります。同一セグメント内であれば、STUN, TURNサーバを使うことなくP2P通信を行うことができます。ただし、セキュリティの観点から同一LAN内のP2P通信が禁止されていることがあり、同一LAN内であってもP2P通信を行うためにTURNサーバが必要になる場合があります。IPv6で通信が行われるようになると、NATが不要になるため、P2P通信のためにSTUN, TURNサーバが不要になると思われているのですが、NATの代わりとなるファイアーウォールが恐らく設置されることになると思いますので、ファイアーウォールを超えてP2P通信を実現させるために、STUNのようなサーバが必要になると考えられます。</p>


<!-- iframe plugin v.4.3 wordpress.org/plugins/iframe/ -->
<iframe src="http://www.slideshare.net/slideshow/embed_code/28800754" width="427" height="356" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" 0="allowfullscreen" class="iframe-class"></iframe>


<div style="margin-bottom:5px"> <strong> <a href="https://www.slideshare.net/KensakuKOMATSU/web-28800754" title="最新Webプロトコル傾向と対策" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">最新Webプロトコル傾向と対策</a> </strong> from <strong><a href="http://www.slideshare.net/KensakuKOMATSU" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">Kensaku Komatsu</a></strong> </div>

<p><br>

<!-- iframe plugin v.4.3 wordpress.org/plugins/iframe/ -->
<iframe width="560" height="315" src="//www.youtube.com/embed/nXhEDC2qOLg" frameborder="0" 0="allowfullscreen" scrolling="yes" class="iframe-class"></iframe>
</p>
]]></content:encoded>
		
		<series:name><![CDATA[HTML5 Conference 2013レポート]]></series:name>
	</item>
		<item>
		<title>新たな技術仕様・要素とは？HTTP/2.0相互接続試験参加レポート（技術解説編）</title>
		<link>/jovi0608/1622/</link>
		<pubDate>Tue, 27 Aug 2013 22:00:22 +0000</pubDate>
		<dc:creator><![CDATA[大津 繁樹]]></dc:creator>
				<category><![CDATA[最新動向]]></category>
		<category><![CDATA[プログラミング]]></category>
		<category><![CDATA[http2]]></category>
		<category><![CDATA[spdy]]></category>

		<guid isPermaLink="false">/?p=1622</guid>
		<description><![CDATA[前回のHTTP/2.0接続試験参加（標準化作業編）に続き、今回お届けするのは技術解説編。既存のSPDYでは使われていないようなHTTP/2.0で新しく議論された技術仕様、相互接続試験のポイントとなった技術要素などを中心に...]]></description>
				<content:encoded><![CDATA[<p>前回のHTTP/2.0接続試験参加（標準化作業編）に続き、今回お届けするのは技術解説編。既存のSPDYでは使われていないようなHTTP/2.0で新しく議論された技術仕様、相互接続試験のポイントとなった技術要素などを中心にレポートします。</p>

<p><span id="more-1622"></span></p>

<h2>HTTP/2.0相互接続試験で重要な技術要素の概要</h2>

<p>SPDYを技術ベースにして検討されているHTTP/2.0仕様は、現在60ページ弱の分量です。従来のHTTP/1.1と異なりバイナリー通信を基本とするため、その多くはフレームフォーマットの説明に割かれています。HTTP/2.0で新しく導入されたヘッダ圧縮の仕様(HPACK)は、現在HTTP/2.0の仕様と分離されていますが、将来的には統合することも検討されています。<br>
HTTP/2.0は、既存のHTTP/1.1のセマンティクスを保持したままフレームやストリームといった単位でバイナリー通信を行うので、この点過去のSPDYの開発経験や運用実績を活かすことができます。他方、既存のSPDYでは使われていないようなHTTP/2.0で新しく議論された技術仕様については、まだ未知数な部分が多く残っています。ここでは後者に該当する項目、先に述べた相互接続試験のポイントとなった2つの技術要素について、簡単に解説します。</p>

<h2>初期接続：HTTP/2.0の接続方法は3種類で2段階</h2>

<p>相互接続試験における一番最初の技術的なハードルは、初期接続の確立です。将来HTTP/2.0の仕様化が完了すると、ある日突然今利用している全てのウェブサーバやブラウザーを一斉にHTTP/2.0対応に変えなければならなくなる、というわけではありません。HTTP/1.1とHTTP/2.0はインターネット上で共存できるよう設計されており、皆さんはHTTP/1.1をこれからもずっと使い続けることができるでしょう。その共存を可能にする技術が、HTTP/2.0の初期接続仕様です。ブラウザやサーバは、この初期接続を通じて相手がHTTP/2.0を使うことができるのかどうかを知り、従来のHTTP/1.1を使うのか、それとも新しいHTTP/2.0で接続するのかを正確に判断することができるのです。</p>

<h2>初期接続の第1段階</h2>

<p>HTTP/2.0の初期接続は、2段階のステップに分かれています。 第１段階は、次の3種類の接続方法を規定しています(図1)。</p>

<h3>1. TLS+ALPN</h3>

<p>ALPN(Alternate Protocol Negotiation)は、TLSのハンドシェイク時に拡張フィールドにクライアントから利用可能なプロトコルリスト送信し、そのリストを受け取ったサーバが利用プロトコルを決定する方法です。 SPDYでは、クライアント側が利用プロトコルを決定するNPN(Next Protocol Negotiation)仕様を利用していました。IETFのtlsワーキンググループの議論の過程で、TLSハンドシェイク後のプロトコル選択方法としてNPNではなく、ALPNを採用することが決定されました。ALPN仕様の採用には様々な理由がありますが、セキュリティ通信の多くは基本的にサーバ側が決定権を持つというのが理由の一つです。 クライアント・サーバ間でTLSのネゴシエーションが終り、ALPNでその後続けてHTTP/2.0通信を行うことが決まると、次に2段階目の初期接続に移ります。<br>
今回8月の接続試験時は、opensslのALPN対応パッチの導入がまだ公表されていなかったため、iij-http2 を含めたいくつかの実装は、ALPNの代替としてNPNを利用して試験しました。</p>

<h3>2. HTTP Upgrade</h3>

<p>従来のHTTP/1.1リクエストを行うと同時にクライアントから Upgrade ヘッダを送信して HTTP/2.0 接続に切り替える方法です。これは、WebSocketで行われている方法と同じ切り替え方式になります。サーバが、HTTP/2.0に対応していれば、ステータスコード 101 (Switching Protocols)をクライアントに返し、第2段階目の初期接続に移ります。Upgrade時にクライアントからHTTP/1.1で送信されたHTTPリクエストは、サーバ内部で最初のHTTP/2.0のリクエストとして扱われます。サーバ側では、Upgradeの有無によってHTTP/1.1とHTTP/2.0の両方を処理可能にする必要があるため、 iij-http2ではクライアントのみこの接続方式を実装しました。</p>

<h3>3. Direct接続</h3>

<p>あらかじめクライアントの接続先がHTTP/2.0に対応していることを知っていれば、(1)や(2)の初期接続を行わずいきなり第2段階目の初期接続から開始することも可能です。どのようにして事前にHTTP/2.0対応であることを知ることができるのかは、HTTP/2.0仕様とは別に決めることになっています。現在のところ、DNSレコードを見て判断する方法やAlternate-Protocolヘッダを見てリダイレクションを行う方法などが候補とされていますが、具体的な仕様の検討はまだ始まっていません。
<div id="attachment_1627" style="width: 970px" class="wp-caption aligncenter"><a href="https://html5experts.jp/wp-content/uploads/2013/08/kohan-fig1.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2013/08/kohan-fig1.png" alt=" " width="960" height="720" class="size-full wp-image-1627" srcset="/wp-content/uploads/2013/08/kohan-fig1.png 640w, /wp-content/uploads/2013/08/kohan-fig1-300x225.png 300w, /wp-content/uploads/2013/08/kohan-fig1-207x155.png 207w" sizes="(max-width: 960px) 100vw, 960px" /></a><p class="wp-caption-text"><br /></p></div></p>

<h2>初期接続の第2段階</h2>

<p>第2段階目の初期接続は、HTTP/2.0通信を開始する最終確認です。このステップでは、24バイトのコネクションヘッダというバイト列(<b>505249202a20485454502f322e300d0a0d0a534d0d0a0d0a</b>) をクライアントからサーバに送信します(図2) 。</p>

<p>これは、 <b>PRI * HTTP/2.0\r\n\r\nSM\r\n\r\n</b> という文字列を表したものです<a href="#fn1" id="r1" data-wpel-link="internal">(注1)</a>。もし第１段階を経由して間違ってHTTP/1.1のサーバにアクセスしてしまっても、HTTP/1.1のサーバは PRIというメソッドとHTTP/2.0というサポートされていないバージョンを持ったHTTPリクエストを受け取ったと解釈し、400 (Bad Request) のエラーを返して直ちにコネクションを切断するでしょう。一方、 HTTP/2.0のサーバは、このバイト列を受け取れば確かにHTTP/2.0のクライアントからの接続であることの確証が取れますので、安心してHTTP/2.0の処理を継続することができます。
<a href="https://html5experts.jp/wp-content/uploads/2013/08/kohan-fig21.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2013/08/kohan-fig21.png" alt="図2： HTTP/2.0の接続方法(第2段階目）" width="960" height="720" class="aligncenter size-full wp-image-1712" srcset="/wp-content/uploads/2013/08/kohan-fig21.png 640w, /wp-content/uploads/2013/08/kohan-fig21-300x225.png 300w, /wp-content/uploads/2013/08/kohan-fig21-207x155.png 207w" sizes="(max-width: 960px) 100vw, 960px" /></a></p>

<p>このバイト列を受け取ったことを確認したら、クライアント・サーバ双方で設定情報を通知するSETTINGSフレームを送信し、HTTP/2.0の初期情報を交換します。これをSETTINGSフレームによって、通常データのフロー制御を行う初期ウィンドウサイズや同時オープンできるストリーム数の最大数などの設定情報が定まります。</p>

<p>以上、第2段階までのHTTP/2.0初期接続のステップを完了して初めて通常のHTTPリクエスト・レスポンスといった処理を開始することができます。今回の相互接続試験では、試験対象の実装がサポートしている初期接続に対してちゃんと仕様が想定している通りに動作し、お互いに第二段階まで問題なく完了できるのかといったところが一つの技術的なマイルストーンでした。</p>

<p>実装者からのフィードバック議論において、既に大規模にSPDY向けにTLS+NPNを実サービスに展開しているGoogleなどから、HTTP/2.0でTLS+ALPNが採用されたため、今後どう両者を共存させながら大規模試験をしていくのか、そして最終的にどのようにしてSPDYからHTTP/2.0に移行していくか、という運用上の問題が懸念として示されました。これに伴いHTTP/2.0に関する dev ops の議論を行う場を新たに作る提案がなされています。</p>

<h2>ヘッダ圧縮(HPACK)：脆弱性を克服、これまでのWebにはない新しい試み</h2>

<p>現状HTTP/1.1で利用されているヘッダ情報は、毎回同じデータを送るように冗長になっている場合が多く、その容量も次第に増加しています。特にネットワーク帯域が制限されているモバイル環境では、冗長なHTTPヘッダ情報のやり取りは帯域を圧迫し、その影響は無視できないものになっています。この状況を解決するためSPDYでは、deflateという汎用的な圧縮アルゴリズムを利用してヘッダ情報の通信容量を圧縮しました。</p>

<p>しかし2012年9月に、deflateを用いた場合にヘッダ情報が暗号化された通信上でも漏えいできることをセキュリティ研究者により明らかにされました。彼らはCRIMEというツールを利用することにより、特定の環境下で短時間にクッキーなどの重要なヘッダ情報を取得することを示しました。現在SPDYを利用しているブラウザーでは、この脆弱性に対応するために暫定的にヘッダ圧縮をしない対策がとられています。しかしモバイル環境などでヘッダ情報の送受信を削減することは急務の課題です。<br>
皮肉なことにこの脆弱性は、データ圧縮アルゴリズムによって送信データが最適化されてしまったことを手掛かりにヘッダ情報を取得する手法を使っています。このため一般的な情報圧縮手法では脆弱性を回避できない可能性もあり、HTTP/2.0ではHTTPのリクエスト・レスポンスに特化した目的でヘッダ情報のデータ量を削減する新たな仕様を導入する必要に迫られました。</p>

<p>当初新たなヘッダ圧縮手法として、 Delta2 と Header-Diff という2つの仕様が候補として検討が進められていました。調整の結果、第2回の中間会議の直前にこの2つを合わせた Header-Compression 仕様(現HPACK仕様)が両仕様の共著として提出されました。最終的にこれを実装仕様として採用することが決定し、相互接続試験では一部を改良した仕様(Header-Compression-01)を使ってテストが行われました。<br>
HTTPリクエストとレスポンスは、HTTPヘッダのやり取りをせずに実現できるものではありません。相互試験の参加者は、Header-Compressionのリリース後初めてこのヘッダ圧縮仕様を実装します。今回の相互接続試験のもう一つの技術トピックは、この新しいヘッダ圧縮の仕様を使って本当にHTTPリクエスト・レスポンスのやり取りが実現可能か実証する所にありました。</p>

<p>HPACKの仕様は、これまでHTTPで用いられてきた通信手順と全く異なり、新しいコンセプトに基づくものです。その手順は細かく規定されていますが、全てを説明するとわかりにくくなるため、若干正確性を犠牲にしますが一部簡略化してその仕組みの概要を解説します。</p>

<p>この仕様の基本は、サーバ・クライアントがヘッダ情報を記載したヘッダテーブルとreference set という２つのデータ集合を状態として保持することにあります。このヘッダテーブルとreference setは、HTTPリクエスト・レスポンスそれぞれに用意されるものです。ヘッダテーブルは、初期状態としてあらかじめ数十種類のヘッダ情報が番号付きで登録されています。 reference set は、1つ前のHTTPリクエスト・レスポンスの送受信によって有効になったヘッダ情報を保持しています(図3）。reference set の初期状態は空です。
<a href="https://html5experts.jp/wp-content/uploads/2013/08/kohan-fig3.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2013/08/kohan-fig3.png" alt="kohan-fig3" width="960" height="720" class="aligncenter size-full wp-image-1633" srcset="/wp-content/uploads/2013/08/kohan-fig3.png 640w, /wp-content/uploads/2013/08/kohan-fig3-300x225.png 300w, /wp-content/uploads/2013/08/kohan-fig3-207x155.png 207w" sizes="(max-width: 960px) 100vw, 960px" /></a>
クライアントとサーバは、HTTPリクエスト・レスポンスが行われる度に reference set やヘッダテーブルに対してどういうヘッダ情報を追加・削除・変更するのかといった差分操作をやり取りします。この差分操作を表すやり方は、その種類や操作によって4種類のエンコーディング方式が定義されています<a href="#fn2" id="r2" data-wpel-link="internal">(注2)</a>。受信側は、エンコードされた差分操作のデータを解析し、記載された操作に従ってヘッダテーブルやreference set を更新します。その結果、サーバとクライアントは同じヘッダテーブルと reference set を持ち、ブラウザやWebアプリケーションはこの新しい reference set を有効になヘッダ情報として利用することになります。</p>

<p>具体的な例を見たほうがよりわかりやすいでしょう。一例としてまずクライアントが一番最初に
<code>
:scheme http
:host serverA
:path /
xmyhoge hoge
</code>
のヘッダ(空白を除いて39バイト）情報をサーバにHTTPリクエストとして送信する場合を考えます。この場合、次の5つのステップでヘッダ情報の差分操作として表します。</p>

<ol>
<li> 0番のヘッダテーブルをそのまま使う
<li> 2番のヘッダテーブルを serverAに書き換える
<li> 3番のヘッダテーブルをそのまま使う
<li> 4番のヘッダテーブルをそのまま使う
<li> xmyhogeは新しくヘッダテーブルに採番して値にhogeを入れ込む
</ol>

<p>この差分操作を規定されたエンコード書式で表すと、
<code>
0x80
0x03 0x02 0x07 serverA
0x83
0x84
0x40 0x07 xmyhoge 0x04 hoge
</code>
のような形式になります。これは全27バイトのデータ容量で、HTTP/2.0のフレームに付与してクライアントからサーバへ送信されます。従来のヘッダ情報の送信(39バイト）よりもデータ容量が減っていることがわかります。このヘッダ操作データを受け取ったサーバは、エンコード情報を解析し、初期状態が空のreference setとヘッダテーブルに対して1から5の差分操作を行います。結果、クライアントと同じ有効なヘッダ情報を持つreference setを作成し、Webアプリケーションに渡します（図4）。
<a href="https://html5experts.jp/wp-content/uploads/2013/08/kohan-fig41.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2013/08/kohan-fig41.png" alt="kohan-fig4" width="960" height="720" class="aligncenter size-full wp-image-1634" /></a></p>

<p>次にクライアントが2回目のリクエストする際には、この新しいreference setに対して、ヘッダの追加、削除、変更という差分操作情報をサーバに送信します。もしクライアントが、
<code>
:scheme http
:host serverA
:path /foo.html
xmyhoge hoge
</code>
のヘッダ情報（47バイト）を2回目に送信する場合は、今保持するreference setに対して:pathのヘッダ情報だけ更新を指示する操作情報のみサーバに送ることになります（3番のヘッダテーブルを/foo.htmlに書き換える操作）。 このエンコード方式は、
<code>
0x04 0x03 0x09  /foo.html
</code>
と表すことができます。これは、わずか12バイトです。このデータをクライアントからサーバに送信し、サーバは、reference set とヘッダテーブル:pathの値を更新します。HPACKを使わなければ47バイトのヘッダ情報を送付しなければならないことが、HPACKの利用で12バイトを送付するだけに縮小できるのです(図5)。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2013/08/kohan-fig52.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2013/08/kohan-fig52.png" alt="kohan-fig5" width="960" height="720" class="aligncenter size-full wp-image-1635" /></a>
もし3回目のリクエストが2回目と同じヘッダ情報を持つリクエストなら、更新操作は必要なくなり、送付する差分操作情報は0バイトになります。クライアントは、ペイロードを空にしてフレームヘッダだけを送信すればよいのです（図6）。
<a href="https://html5experts.jp/wp-content/uploads/2013/08/kohan-fig62.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2013/08/kohan-fig62.png" alt="kohan-fig6" width="960" height="720" class="aligncenter size-full wp-image-1714" /></a>
このように冗長で繰り返し同じヘッダ情報を送付する場合に、HPACKはその効果が最大限に発揮される仕様であると言えます。</p>

<p>この方式は、SPDYで利用されていたdeflateの圧縮アルゴリズムと全く異なるものであるため先ほどのCRIME攻撃の脆弱性は存在しないものと考えられています。当初この仕様を見て実装を始めた時には、その変わり様に非常に驚きました。しかし、実際に相互接続試験では初めての実装試験であるにもかかわらず、各実装に対して問題なくHTTPリクエスト・レスポンスのやり取りができることを確認できました。<br>
しかし様々な課題がまだ残っています。例えばメモリの対策のためヘッダテーブルは容量を制限しなければなりません。その容量を超えた場合の更新処理はどうなるのか。また実利用のヘッダ情報を使っても長時間継続してヘッダ情報の更新を行った場合でも、クライアント・サーバ間でヘッダ情報の整合性を保てるのか、といったような課題が議論され今後更なる仕様の見直しと試験を続けていく必要がある、ということが合意されました。</p>

<p>このように従来とは全く異なった手法でヘッダ情報がやり取りされるということは、HTTP/2.0の大きな特徴です。今後HTTP/2.0の導入や運用を行う際には、これまでの古い知識にとらわれず新しく頭を切り替えてHTTP/2.0に取り組んでいく必要がありそうです。</p>

<h2>まだまだある、技術的なチャレンジ</h2>

<p>上記2つの技術トピックスは、初回の相互接続試験で特に問題になりそうなものだけを解説しました。これ以外にも、</p>

<ul>
<li>クライアント・サーバ間でフレームの送受信の競合状態が発生しても問題は発生しないか
<li>リクエストの予約という形の新しいサーバプッシュ機能はクライアントへキャッシュを正常に送り込めるのか
<li>フロー制御や優先度設定はいろんな環境でも有効に機能するのか
</ul>

<p>などなど、他にも解決しなければならない技術的課題がまだ数多く残っています。</p>

<p>とはいえ、近い将来インターネットで主流となる新しいプロトコルを世界中の優秀な技術者と一緒に作り上げていく過程は、エンジニアとして非常に貴重な機会であり、とてもワクワクする瞬間です。このレポートを読んでいただいている方に、このワクワク感が少しでも伝わればうれしいことだと思っています。</p>

<p>(注： 本記事は、2013年8月時点でのHTTP/2.0仕様ドラフトに基づくものです。今後仕様が変更され記述内容と異なる可能性がありますので、ご注意ください。)</p>

<p id="fn1"><a href="#r1" data-wpel-link="internal">(注1)</a> これ(PRI SM)は、あのスノーデン事件が起きた時にエディターがシャレで付けた文字列です。現時点でこの文字列を正式に決めるようとすると議論がまとまらない可能性があるので仮の値になってます。このようにどうでもいいことで議論が発散することを<a href="http://ja.wikipedia.org/wiki/%E3%83%91%E3%83%BC%E3%82%AD%E3%83%B3%E3%82%BD%E3%83%B3%E3%81%AE%E5%87%A1%E4%BF%97%E6%B3%95%E5%89%87" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">bikeshed（自転車置き場）</a>と呼んでワーキンググループ内で議論する時に注意しています。</p>

<p id="fn2"><a href="#r2" data-wpel-link="internal">(注2)</a> この4種類のエンコーディング方式は、
<dl>
 <dt> Indexed Header Representation</dt><dd>ヘッダテーブルの数字指定だけで有効・無効をトグルさせる操作方式</dd>
 <dt> Literal Header without Indexing</dt><dd>ヘッダを文字列指定してヘッダテーブルの更新しない操作方式</dd>
 <dt> Literal Header with Incremental Indexing</dt><dd>ヘッダを文字列指定してヘッダテーブルの最後に追加する操作方式</dd>
 <dt> Literal Header with Substitution Indexing</dt><dd>ヘッダを文字列指定して既存のヘッダテーブルの値を更新する操作方式</dd>
</dl>
に分かれます。それぞれビット列の書式が決められており、頭の数ビットで方式を区別できるようになっています。</p>
]]></content:encoded>
			</item>
		<item>
		<title>次世代プロトコルはどう作られる？HTTP/2.0相互接続試験参加レポート（標準化作業編）</title>
		<link>/jovi0608/1585/</link>
		<pubDate>Mon, 26 Aug 2013 22:00:55 +0000</pubDate>
		<dc:creator><![CDATA[大津 繁樹]]></dc:creator>
				<category><![CDATA[最新動向]]></category>
		<category><![CDATA[プログラミング]]></category>
		<category><![CDATA[http2]]></category>
		<category><![CDATA[spdy]]></category>

		<guid isPermaLink="false">/?p=1585</guid>
		<description><![CDATA[先日私はドイツで行われた第1回目のHTTP/2.0接続試験に参加してきました。今回、この接続試験を通じて次世代プロトコルがどのように作られていくのか、HTTP/2.0の仕様策定作業の最前線の様子を少しご紹介したいと思いま...]]></description>
				<content:encoded><![CDATA[<p>先日私はドイツで行われた第1回目のHTTP/2.0接続試験に参加してきました。今回、この接続試験を通じて次世代プロトコルがどのように作られていくのか、HTTP/2.0の仕様策定作業の最前線の様子を少しご紹介したいと思います。</p>

<p><span id="more-1585"></span></p>

<h2>はじめに</h2>

<p>先日公開された<a href="https://html5experts.jp/author/komasshu/" title="小松健作さん" data-wpel-link="internal">小松健作さん</a>の記事「<a href="https://html5experts.jp/komasshu/404/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">変わるWebプロトコルの常識（SPDY, HTTP2.0編）</a>」で解説されている通り、Webを支えるプロトコルHTTPをバージョン1.1から2.0に大幅に改訂する作業が、現在急ピッチで進められています。10数年ぶりに改訂されるHTTPの仕様は、現状のインターネット環境に適応できるよう、これまで以上にWeb表示の高速化・効率化が実現できることを目的としています。</p>

<h2>HTTP/2.0標準化作業の進め方</h2>

<p>HTTP/2.0のプロトコル仕様の策定は、インターネット技術の標準化を推進する団体IETFの<a href="http://trac.tools.ietf.org/wg/httpbis/trac/wiki" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">httpbisワーキンググループ</a>で行われています。httpbisでは、SPDYを開発したGoogleをはじめ、Microsoft、Mozilla, Twitter, Akamaiなどのエンジニアが中心となり、メーリングリスト上で活発に議論を進めています。特にHTTP/2.0の仕様策定は他のワーキングループと違い、通常年3回ほど開催されるIETF総会とは別にinterimと呼ばれる中間会議を頻繁に開催して集中討議を行っているのが特徴です。
HTTP/2.0の仕様自体は、<a href="https://github.com/http2/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">GitHub</a>上で管理されています。ここのhttp2-specレポジトリでは、議論の合意を受けてエディタがドラフトを更新する様子をリアルタイムで見ることができます。<br>
<a href="https://github.com/http2/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2013/08/octcat_http2.png" alt="octcat and http2" width="595" height="274" class="aligncenter size-full wp-image-1597" srcset="/wp-content/uploads/2013/08/octcat_http2.png 595w, /wp-content/uploads/2013/08/octcat_http2-300x138.png 300w, /wp-content/uploads/2013/08/octcat_http2-207x95.png 207w" sizes="(max-width: 595px) 100vw, 595px" /></a></p>

<p>仕様更新の手順は通常のオープンソースプログラムと同様に、issueやPull Requestを使って行われています。仕様策定に関する議論はメーリングリスト上で行うことと決められているのですが、たまにメーリングリストに構わずGitHubのコメント上でやり取りが続いたりします。チャット感覚で議論が進むので白熱することも多いのですが、そんな時はチェアから注意を受けたりします。一方、設計を変更しない程度の修正であればPull Requestを送って、直接取り込んでもらうことも可能です。まだまだいろいろ試行錯誤の段階ですが、こういった今風なソーシャルコーディングのインフラを活用しながら標準化作業を進めていく手法は、IETFでも新しい試みではないかと思われます。</p>

<h2>HTTP/2.0の仕様は、今どこまで進んでいるのか？</h2>

<p>これまでのHTTP/2.0仕様策定作業の歩みを表1にまとめます。
<a href="https://html5experts.jp/wp-content/uploads/2013/08/table11.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2013/08/table11.png" alt="表１：これまでの HTTP/2.0 仕様策定作業の主な歩み" width="895" height="621" class="aligncenter size-full wp-image-1692" srcset="/wp-content/uploads/2013/08/table11.png 640w, /wp-content/uploads/2013/08/table11-300x208.png 300w, /wp-content/uploads/2013/08/table11-207x143.png 207w" sizes="(max-width: 895px) 100vw, 895px" /></a>
今年になり、8月までに3回httpbisの中間会議が開催されました。HTTP/2.0の仕様ドラフトも6回改訂されています。当初HTTPの仕様改訂を開始するにあたり、SPDYを含む複数の候補案で検討が始まりました。途中大きな議論を経て、最終的にSPDYをHTTP/2.0の仕様ベースとして採用することが決定しました。ベースといっても、SPDYで実現できている機能や利点といった特徴を、HTTP/2.0の仕様に大部分引き継いでいますが、その仕組みに関しては大きく見直しが入っています。
HTTP/2.0の変更点の概要としては、</p>

<ul>
 <li> フレームやストリームという多重化構造のSPDYプロトコルアーキテクチャをそのまま利用する。
 <li> 無駄なヘッダフィールドやフレームタイプを統廃合し、簡略化を図る。
 <li>SPDYの実運用で明らかとなったフロー制御・優先度制御といった課題に対応する。
 <li>TLS利用を前提とするSPDYに対し、HTTP/2.0はTLS以外の接続も利用可能にする。
 <li>情報漏えいを起こす脆弱性対策として新たにHTTPヘッダ圧縮の送受信仕様を策定する。
</ul>

<p>といったことが挙げられます。
標準化作業の大きなマイルストーンとして、第2回目のhttpbis中間会議の結果を受けて最初のHTTP/2.0の実装仕様が<a href="http://tools.ietf.org/html/draft-ietf-httpbis-http2-04" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">draft-04</a>として7月上旬にリリースされました。それまで2つの案を候補にして検討されてきたヘッダ圧縮仕様も、両者をジョイントした新しい仕様<a href="http://tools.ietf.org/html/draft-ietf-httpbis-header-compression-01" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Header-Compression-01</a>がリリースされました。この2つのドラフト仕様がそろったところで、初めてHTTP/2.0を実装できる環境が整いました。実際に動くものを作って議論を進める段階に来たのです。</p>

<h2>世界初、HTTP/2.0相互接続試験の実施</h2>

<p>8月上旬、初めてのHTTP/2.0相互接続試験を実施すべく第3回中間会議が、ドイツ・ハンブルグで開催されました。
<div id="attachment_1610" style="width: 310px" class="wp-caption aligncenter"><a href="https://html5experts.jp/wp-content/uploads/2013/08/hamburg.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2013/08/hamburg-300x225.png" alt="ハンブルグの風景" width="300" height="225" class="size-medium wp-image-1610" srcset="/wp-content/uploads/2013/08/hamburg-300x225.png 300w, /wp-content/uploads/2013/08/hamburg-207x155.png 207w, /wp-content/uploads/2013/08/hamburg.png 544w" sizes="(max-width: 300px) 100vw, 300px" /></a><p class="wp-caption-text">ハンブルグの風景</p></div>
HTTP/2.0の仕様案を執筆するコアメンバーとChromeやFirefoxといったブラウザーのSPDYスタックを実際に開発しているソフトウェアエンジニアなど、20数名がAdobe社の会議室に集まりました。私は5月より仕様検討やドラフトの修正作業に参加していますが、実際の会議は初参加です。今回、Node.jsで新たに開発したHTTP/2.0モジュールiij-http2を持参して相互接続試験に臨みました。</p>

<p>第3回の中間会議は二日半の日程で、下記のアジェンダで進められました。</p>

<dl>
<dt>1日目</dt><dd>終日 実装者からのフィードバック、issueの議論・整理</dd>
<dt>2日目</dt><dd>終日 相互接続試験</dd>
<dt>3日目</dt><dd>午前 issueの議論・整理、今後のロードマップ策定</dd>
</dl>

<p>ハンブルグでの初のHTTP/2.0相互接続試験向けに提出された実装のリストは、 <a href="https://github.com/http2/http2-spec/wiki/Implementations" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">http2-spec レポジトリのWikiページ</a>にまとめられています。現在ここに10の実装が登録されていますが、このうち実際に会議中に相互接続試験を行うことができたのは8つでした。実装の種類は、クライアント・サーバ・プロキシの3つの用途に大きく分類されます。今回の相互接続試験は初回ということもあり、基礎的な部分の動作確認が中心となりました。技術的には以下の2点が大きな検証ポイントです。</p>

<ol>
  <li> HTTP/2.0の初期接続が問題なく完了し、HTTP/2.0の処理が開始できること。
  <li> 新しいヘッダ圧縮仕様を使って問題なくHTTPのリクエスト・レスポンスの処理が行えること。
</ol>

<p>上記2つの技術ポイントについての詳細は、本レポートの後半(技術解説編）で解説します。</p>

<h2>相互接続試験の結果と今後のロードマップ</h2>

<p>私が持ち込んだ iij-http2 モジュールと他の実装との相互接続試験は、中間会議の2日目に集中的に行いました。ただ実際には、担当者同士でメールのやり取りをして、前日から既に試験を開始しています。
<div id="attachment_1613" style="width: 310px" class="wp-caption aligncenter"><a href="https://html5experts.jp/wp-content/uploads/2013/08/interop.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2013/08/interop-300x225.png" alt="HTTP/2.0相互接続試験の様子" width="300" height="225" class="size-medium wp-image-1613" srcset="/wp-content/uploads/2013/08/interop-300x225.png 300w, /wp-content/uploads/2013/08/interop-207x155.png 207w, /wp-content/uploads/2013/08/interop.png 603w" sizes="(max-width: 300px) 100vw, 300px" /></a><p class="wp-caption-text">HTTP/2.0相互接続試験の様子</p></div></p>

<p>実は今回作成したiij-http2は、会議前にソースが公開されていた実装 (nghttpd や node-http等）に対してドイツ出発の2日前になってやっと初めて簡単な接続テストができたレベルなので、実際の接続試験ではどうなるかドキドキでした。当日は会議参加者間だけでなく、オフラインで参加した実装者も含めて各自がテストを進めています。相互接続試験といってもきっちりしたテストシナリオやチェック項目が用意されているわけではありません。開発者が気になる部分を中心に、用意されたサーバ・クライアントを自由にテストするといったやり方でした。</p>

<p>iij-http2は、テストのためにインターネット上に単純にHello Worldを返すサーバの2種類準備しました。ブラウザの替りに手元のクライアント実装を使って他のサーバやプロキシ実装に対してアクセスを行い、手元で表示されるデバッグ情報などと照らし合わせてHTTP/2.0プロトコルのやり取りを確認しました。最終的なiij-http2の接続試験結果を表2に示します。
<a href="https://html5experts.jp/wp-content/uploads/2013/08/table2.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2013/08/table2.jpg" alt="表2 iij-http2の相互接続試験結果" width="955" height="587" class="aligncenter size-full wp-image-1615" srcset="/wp-content/uploads/2013/08/table2.jpg 640w, /wp-content/uploads/2013/08/table2-300x184.jpg 300w, /wp-content/uploads/2013/08/table2-207x127.jpg 207w" sizes="(max-width: 955px) 100vw, 955px" /></a></p>

<p>試験を通じていくつの問題が発見されましたが、最終的にiij-http2は接続テストを行った全ての実装と接続確認が取れました。初回ということであまり複雑なアクセスパターンやエラー時の挙動などの試験を行っていませんが、先に解説した技術ポイントに対する相互接続は成功したことになります。一例としてHTTP/2.0対応Chromeとiij-http2との接続成功時のスクリーンショットを載せます。
<a href="https://html5experts.jp/wp-content/uploads/2013/08/chrome.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2013/08/chrome-300x221.png" alt="chrome" width="300" height="221" class="aligncenter size-medium wp-image-1617" srcset="/wp-content/uploads/2013/08/chrome-300x221.png 300w, /wp-content/uploads/2013/08/chrome-207x152.png 207w, /wp-content/uploads/2013/08/chrome.png 640w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>

<p>会議の最終日は、今後のロードマップをどうするかという議論に移りました。クローズしたissueの方針や接続試験で議論された内容を最新のドラフトに反映し、第2回目の接続試験を行うための新しい実装仕様<a href="http://tools.ietf.org/html/draft-ietf-httpbis-http2-06" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">draft-06</a>を2週間後にリリースすることが決まりました。またヘッダ圧縮仕様については一部仕様の見直しが必要なことが判明し、さらに詳細な試験が必要との声から、9月中旬に開発者が中心になってヘッダ圧縮に特化した試験を集中的に行うことも決めました。ちなみにヘッダ圧縮仕様の「圧縮」という名称は、機能的に正確な表現でないため、その名称をHPACKに変更するということが了承されました。</p>

<p>次の相互接続試験を行う中間会議は10月初旬シアトルで行われることを合意し、その先の2014年1月に開催する第5回中間会議までの予定を決めて会議は終了しました。HTTP/2.0の標準化作業は、2014年春の仕様化完了に向けてまだまだ続きます。後半では技術的な内容に興味を持つ人のために、HTTP/2.0相互接続試験の検証ポイントとなった技術トピックスについて解説します。</p>

<p>(注： 本記事は、2013年8月時点でのHTTP/2.0仕様ドラフトに基づくものです。今後仕様が変更され記述内容と異なる可能性がありますので、ご注意ください。)</p>
]]></content:encoded>
			</item>
		<item>
		<title>変わるWebプロトコルの常識（SPDY, HTTP2.0編）</title>
		<link>/komasshu/404/</link>
		<comments>/komasshu/404/#respond</comments>
		<pubDate>Tue, 09 Jul 2013 11:54:25 +0000</pubDate>
		<dc:creator><![CDATA[小松 健作]]></dc:creator>
				<category><![CDATA[プログラミング]]></category>
		<category><![CDATA[http2]]></category>
		<category><![CDATA[spdy]]></category>
		<category><![CDATA[ネットワーク]]></category>
		<category><![CDATA[パフォーマンス]]></category>
		<category><![CDATA[プロトコル]]></category>

		<guid isPermaLink="false">/?p=404</guid>
		<description><![CDATA[最新の各種通信プロトコルにより、Webの可能性は大きく広ろうとしています。今回は、それらの中から Web をより高速かつスケーラブルなものに変えていくプロトコル、SPDYとHTTP2.0 について解説します。 HTML5...]]></description>
				<content:encoded><![CDATA[<p>最新の各種通信プロトコルにより、Webの可能性は大きく広ろうとしています。今回は、それらの中から Web をより高速かつスケーラブルなものに変えていくプロトコル、SPDYとHTTP2.0 について解説します。</p>

<p><span id="more-404"></span>
<img src="/wp-content/uploads/2013/07/overview_http2_spdy.png" alt="SPDY, HTTP2.0" title="SPDY, HTTP2.0" /></p>

<p>HTML5の登場により、Webで使われるプロトコルは、 HTTP1.1 から大きく変わろうとしています。具体的には、SPDY, HTTP2.0, WebSocket, WebRTC といったプロトコルがそれにあたります。これらは、現状のHTTPが抱える各種問題点を解決するものです。</p>

<p>しかしながら、これらのプロトコルについて、</p>

<ul>
<li>いったい何であるのか</li>
<li>今のWebの何を解決してくれるのか</li>
</ul>

<p>は、あまり知られていません。そこで数回に分けて、これらのプロトコルがいったい何であるのか、今のWebの何を解決してくれるのかを解説したいと思います。<sub><a href="#1" data-wpel-link="internal">[1]</a></sub></p>

<p>今回は、SPDY, HTTP2.0について取り上げます。</p>

<h2>そもそも HTTP とは？</h2>

<p>まず、従来のWebプロトコル HTTP についておさえておきましょう。HTTPは Hypertext Transfer Protocol の頭文字をとったもの。その名の通り HTML (Hypertext Markup Language) 文書をサーバーからブラウザにダウンロードするために開発されました。ちなみに現在もっとも使われているバージョンは1.1です。</p>

<p>このHTTPの特徴は、動作が非常に単純であることにつきます。その動作パターンは以下のようになります。</p>

<ol>
<li>ブラウザから、サーバーに HTML 文書を要求(request)する</li>
<li>サーバーは、ブラウザに要求された HTML文書を返す（response）</li>
</ol>

<p>このため、HTTPは request &amp; response型のプロトコルと呼ばれます。</p>

<h2>Webの進化に伴い、スピードの問題が!!</h2>

<p>Webが登場してしばらくの間は、このHTTPで全く問題がありませんでした。Webの初期は文書を表示することしかできなかったため、一つのHTML文書をダウンロードすれば良かったからです。</p>

<p>しかしWebの進化に伴い、特にスピード面で問題が出るようになりました。多くのリソースをダウンロードすることによる、パフォーマンス上のボトルネックが生じるようになったのです。</p>

<p>今皆さんが利用しているWebページは、多くのリソース（JavaScriptやスタイルシート, 画像など）から構成されています。例えば、<a href="https://html5experts.jp/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">HTML5 Experts.jpのトップページ</a>では <strong>80個のリソース</strong> から構成されています。これらのリソースを、HTTPを用いて <strong>素直に</strong> 取得しようとすると、以下の様なパターンとなります。</p>

<ol>
<li>ブラウザから、サーバーに HTML 文書を要求する</li>
<li>HTML 文書を取得したら、次のリソース（スタイルシート）を要求する
&#8230;</li>
<li>最後の画像リソースをダウンロードしたら、それを表示してWebページが完成する</li>
</ol>

<p>つまり、request &amp; responseの繰り返しが 80 回起きるわけです。もし、仮にサーバーからリソースをダウンロードするのに 1 回あたり、0.2秒かかったとすると 16 秒かかる計算になります。こんなに時間がかかっては、正直サービスになりません。</p>

<p>このため、現在Webで使われている HTTP1.1 では、同時に送信するリクエストの数を増やすことで、ダウンロード時間の短縮を図っています<sub><a href="#2" data-wpel-link="internal">[2]</a></sub>。運送業者にたとえるなら、80個の荷物を1台のトラックで1個づつピストン輸送するよりも、同時に複数台のトラックでピストン輸送したほうが早く終わる…という感じです。</p>

<p>この解決策により、スピードの問題は著しく改善しました。現在のWebでは様々なテクニックを駆使し、10本以上の同時リクエストを送信することで、スピードの高速化を図っています。</p>

<h2>同時リクエストの乱用による新たな問題</h2>

<p>しかし、このようなHTTPの同時リクエストの乱用は、新たな問題を生むことになりました。サーバーやネットワーク機器の負荷を上昇することとなってしまったのです。</p>

<p>先の運送業者の例で、伝え忘れていたことがありました。このトラックは、一本の車線を占有しないと走れないという困った特徴があります。これは、同時に10台でピストン輸送しようとすると、10本の車線が必要となることを意味しています。</p>

<p>これは、あまりにも大変で、無駄が多いことは直感的にわかると思います。トラックに積荷を載せる倉庫は、多くの車線をカバーする大きなものが必要になりますし、途中の道路についても同様です。</p>

<p>ここで、倉庫をサーバーとし、道路をネットワーク、車線をTCPコネクションとしたのが今のWebです。HTTPはTCPコネクションという車線の上を走るトラックに相当しますので、同時に送信するリクエスト数が増えれば増えるほど、TCPコネクション数が上昇し、サーバーやネットワークに過剰な負荷を引き起こします<sub><a href="#3" data-wpel-link="internal">[3]</a></sub>。</p>

<h2>SPDY, HTTP2.0の登場</h2>

<p>このようなTCPコネクション数の乱用による問題を解決するために登場したのが SPDY, HTTP2.0です。これらの最新Webプロトコルを用いることで、スピードを高めつつ、サーバーやネットワークの負荷を下げることが可能となりました。</p>

<p>そのアイディアは非常に単純・明快です。トラックでたとえれば、一台あたり一本の車線を専有してしまうのが諸悪の根源です。もし筆者が運送業者の社長であれば、運転手を説得し、全てのトラックを一本の車線で走らせることでしょう。冒頭の図面のように。SPDYやHTTP2.0についても、全く同様のアイディアです。複数のHTTPを一本のTCPコネクションで運べるようにしたのです<sub><a href="#4" data-wpel-link="internal">[4]</a></sub>。</p>

<p>最初に登場したのは、SPDYです。Googleが提唱した独自プロトコルで、ドラフト仕様が最初に公開されたのは 2009 年のことです。HTTPの多重化以外にも、HTTPヘッダーの圧縮やサーバープッシュ、フロー制御など高速化のためのさまざまな機能が盛り込まれています。</p>

<p>既に、Googleの各種サービスや Twitter, Facebookなどの大規模サイトで実際に利用されており、運用実績があるのも大きな魅力です。ブラウザとしてはすでにChromeやFirefoxが対応しており、Internet Explorerの次期バージョン IE11 でもサポートされることから、今後更に普及することが予想されます。</p>

<p>HTTP2.0の検討は、SPDYをきっかけとして 2012年に始まりました。SPDYのエッセンスを新しい HTTP のバージョンに盛り込み、HTTP1.1の様々な問題を解決した標準仕様を策定しようとする取り組みです。最初のドラフトは SPDY そのものでしたが、徐々にその形を変えてきています。今年度内には、テスト実装も予定されており、これをベースとして検討がより具体化されると予想されます。</p>

<h2>SPDY と HTTP2.0の関係・これから</h2>

<p>SPDYとHTTP2.0の関係ですが、SPDY/4では、<a href="https://groups.google.com/forum/?fromgroups=#!topic/spdy-dev/EWEEWSYtlhc" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">HTTP2.0仕様の一部を取り込み</a>始めています。短絡的に考えるのは早計ですが、SPDYとHTTP2.0は互いに影響を与えながら、あるべき次世代 HTTP の結論を導くことでしょう。</p>

<p>ただし、SPDYがカバーしようとする領域は HTTP だけではありません。Webに関わるその他のプロトコル〜DNSやWebSocketなど〜もSPDYの中に取り込んでいこうとするアイディアもあります。こういった様々な興味深いトピックも、HTML5 Experts.jpでは今後紹介していければと思っています。</p>

<hr />

<p><a id="1" data-wpel-link="internal"></a>[1] このシリーズは、最新Webプロトコルの入門編的な記事です。その後、より詳しいシリーズを執筆する予定です。</p>

<p><a id="2" data-wpel-link="internal"></a>[2] 正確にはHTTP1.1というより、現在のブラウザのHTTP実装がそうなっているというほうが正しいのですが、話が複雑になるので割愛します。</p>

<p><a id="3" data-wpel-link="internal"></a>[3] 例えばIPv4枯渇に伴い、特にモバイルキャリアのネットワークに CGN（Carrier Grade NAT）の導入が進んでいますが、このような振る舞いがCGNに大きなインパクトを与えています。</p>

<p><a id="4" data-wpel-link="internal"></a>[4] 多重化のアイディアは、HTTP1.1でもpipeline仕様として存在しているのですが、相互接続性の問題から実際には殆ど使われていません。</p>
]]></content:encoded>
			<wfw:commentRss>/komasshu/404/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
