<?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>http2 &#8211; HTML5Experts.jp</title>
	<atom:link href="/tag/http2/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移行、TLS 1.3、そしてQUICについてヤフーに聞いてみた！</title>
		<link>/shumpei-shiraishi/24164/</link>
		<pubDate>Fri, 15 Sep 2017 00:48:15 +0000</pubDate>
		<dc:creator><![CDATA[白石 俊平]]></dc:creator>
				<category><![CDATA[最新動向]]></category>
		<category><![CDATA[プログラミング]]></category>
		<category><![CDATA[システム開発]]></category>
		<category><![CDATA[HTTPS]]></category>
		<category><![CDATA[QUIC]]></category>
		<category><![CDATA[http2]]></category>
		<category><![CDATA[ヤフー]]></category>

		<guid isPermaLink="false">/?p=24164</guid>
		<description><![CDATA[連載： HTML5 Conference 2017特集 (5)こんにちは、編集長の白石です。 この記事は、9月24日に開催されるHTML5 Conference 2017に登壇するエキスパートに、予定しているセッションの...]]></description>
				<content:encoded><![CDATA[<div class="seriesmeta">連載： <a href="https://html5experts.jp/series/html5-conf2017/" class="series-457" title="HTML5 Conference 2017特集" data-wpel-link="internal">HTML5 Conference 2017特集</a> (5)</div><p>こんにちは、編集長の白石です。</p>

<p>この記事は、9月24日に開催される<a href="http://events.html5j.org/conference/2017/9/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">HTML5 Conference 2017</a>に登壇するエキスパートに、予定しているセッションのトピックを中心に、様々な技術的なお話を伺おうというものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。</p>

<p>今回お話を伺ったのは、ヤフー株式会社にお勤めの大津繁樹さんと新部長則さんです。</p>

<p><img src="/wp-content/uploads/2017/09/DSC04596.jpg" alt="" width="640" height="400" class="alignnone size-full wp-image-24194" srcset="/wp-content/uploads/2017/09/DSC04596.jpg 640w, /wp-content/uploads/2017/09/DSC04596-300x188.jpg 300w, /wp-content/uploads/2017/09/DSC04596-207x129.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /><br><span style="font-size: 80%;">▲<strong>左から、ヤフー株式会社 大津繁樹さん、新部長則さん</strong></span></p>

<p>お二人のセッションは「<a href="http://events.html5j.org/conference/2017/9/session/#b2" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">大規模運用で見えるWebプロトコルの理想と現実、そして今後</a>」（ルームB 13:20-14:00）です。
（現在HTML5 Conferenceは定員オーバーの状態ですが、無料イベントということもあってキャンセルも多めに出るらしいので、諦めずにキャンセル待ちすることをお勧めします！）</p>

<h2>日本最大級のHTTPS &amp; HTTP/2化案件の実際</h2>

<p><b class="speaker siraisi">白石:</b> まず簡単な自己紹介からお願いできますでしょうか？</p>

<p><b class="speaker nibe">新部:</b> 私は2005年の7月に入社し、Yahoo!メールや広告の画像配信を行うCDNの運用などを経て、現在は全社で利用しているリバースプロキシの運用を行っています。
現在、社内でプラットフォームと呼ばれる部分にはだいたい関わっている感じですね。</p>

<p><b class="speaker ohtsu">大津:</b> まさに、新部さんのチームは、ヤフーのトラフィックをほとんど全て受け止めていると言って間違いありません。国内最大級のトラフィックを支えているんです、半端ないですよ。</p>

<p><b class="speaker siraisi">白石:</b> では大津さんも自己紹介をお願いできますか？</p>

<p><b class="speaker ohtsu">大津:</b> 私は昨年の10月に入社したばかりです。大きく2つの仕事をしていまして、Node.jsのコミッターとして社内のサポートを行っているのと、IETFでネットワークプロトコルの標準化活動に関わっています。</p>

<p><b class="speaker siraisi">白石:</b> ありがとうございます。では、ヤフーのサービスをHTTPS + HTTP/2化した際のことを伺ってもいいですか？</p>

<p><b class="speaker nibe">新部:</b> まずはヤフーのサービスをHTTPSに移行するところから始めたんです。HTTPS化に伴うコストや影響の試算を踏まえて、2015年10月に、全社横断でHTTPS化するプロジェクトが発足したんです。</p>

<p>HTTPS化するにあたっては大きな問題が2つありました。1つは、TLSの暗号化・復号化の処理が重たいということ。もう1つは、証明書の管理が煩雑にならないようにしなくてはならないということでした。なにせドメインでいうと1,000以上、サービスも100以上ありますので。</p>

<p><img src="/wp-content/uploads/2017/09/bc4381f4affc0b228260a833a3758bfb.jpg" alt="" width="640" height="427" class="alignnone size-full wp-image-24195" srcset="/wp-content/uploads/2017/09/bc4381f4affc0b228260a833a3758bfb.jpg 640w, /wp-content/uploads/2017/09/bc4381f4affc0b228260a833a3758bfb-300x200.jpg 300w, /wp-content/uploads/2017/09/bc4381f4affc0b228260a833a3758bfb-207x138.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<p><b class="speaker siraisi">白石:</b> 規模感が普通の会社とは桁違いだ…。</p>

<p><b class="speaker nibe">新部:</b> なので、全社共通のリバースプロキシを作って対応することになったんです。そのリバースプロキシでTLSを一旦終端させて、そこから先は通常のHTTP/1.1に変換し、各サービスにリクエストを転送する。</p>

<p><b class="speaker siraisi">白石:</b> そのリバースプロキシって、だいたいサーバ何台分くらいになるんでしょう…？</p>

<p><b class="speaker nibe">新部:</b> <strong>500台以上</strong>ですね。</p>

<p><b class="speaker ohtsu">大津:</b> 「以上」と言っても幅があると思いますが、<strong>そのかなり上の方</strong>ですよ、実際の数字は(笑)。</p>

<p><b class="speaker siraisi">白石:</b> す、すごい…！</p>

<p><b class="speaker nibe">新部:</b> そして、2016年3月、最初にリバースプロキシに乗ったのはヤフオク！です。</p>

<p><b class="speaker siraisi">白石:</b> なんでヤフオク!を最初のサービスに選んだんですか？</p>

<p><b class="speaker nibe">新部:</b> 検証の意味も強かったので、ある程度以上の規模感のあるサービスをデプロイしたかったんです。あと、下手すると人命を左右するような「何があっても絶対に止められない」サービスは避けたかった。</p>

<p><b class="speaker siraisi">白石:</b> なるほど。</p>

<p><b class="speaker nibe">新部:</b> ヤフオク！も、いきなり全部をHTTPS化したわけじゃなくて、最初は一部だけ、その後範囲を広げていったという感じです。
幸いにもそれほど大きな事故も起こることなく進んでいき、2017年の3月末には、特定のクライアントに提供しているところを除いたすべてのサービスがHTTPSで動作するようになりました。</p>

<h2>HTTP/2化は正直、「エイヤ」でやった</h2>

<p><b class="speaker siraisi">白石:</b> なるほど、HTTPS化は、様々なご苦労はあったことと思いますが、比較的順調に推移したということですね。そして今では多くのサービスがHTTP/2を利用しているんですよね。<strong>HTTP/2化はどういう流れで進んでいったんですか？</strong></p>

<p><b class="speaker nibe">新部:</b> これはちょっと言いにくいし、言っていいのかもわからないんですが…<strong>正直、「エイヤ」でやってしまったところもありますね(笑)</strong>。</p>

<p>全社共通のリバースプロキシを構築できたし、ここをHTTP/2化してしまえば、全部HTTP/2にできるじゃん、と。弊社のエンジニアもHTTP/2サーバの実装に携わっていたりもしたので、自分たちで作った成果を自分たちで使いたいという要望もありまして…。</p>

<p><img src="/wp-content/uploads/2017/09/51c35f6b549c0e867e11f9359ea822e5.jpg" alt="" width="640" height="427" class="alignnone size-full wp-image-24196" srcset="/wp-content/uploads/2017/09/51c35f6b549c0e867e11f9359ea822e5.jpg 640w, /wp-content/uploads/2017/09/51c35f6b549c0e867e11f9359ea822e5-300x200.jpg 300w, /wp-content/uploads/2017/09/51c35f6b549c0e867e11f9359ea822e5-207x138.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<p><b class="speaker siraisi">白石:</b> で、「エイヤ」でやっちゃったと(笑)。</p>

<p><b class="speaker nibe">新部:</b> まあ、全部をいきなり切り替えたわけじゃないですけどね。こちらも一部のサーバだけを切り替えて、問題がないことを確認しつつ、だんだんと。</p>

<p><b class="speaker siraisi">白石:</b> なるほどー。ちなみにその、最も重要なリバースプロキシですが、具体的にはどのソフトを利用しているんですか？nginxとか？</p>

<p><b class="speaker nibe">新部:</b> いや、<a href="http://trafficserver.apache.org/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Apache Traffic Server</a>というプロダクトです。元々これは米国のYahoo! Inc.が開発していたものをApache Software Foundationに寄贈したものです。</p>

<p><b class="speaker siraisi">白石:</b> では、Apache HTTP Serverとは関連がないんですね。</p>

<p><b class="speaker nibe">新部:</b> そうです。このサーバをHTTP/2対応させるパッチの開発に、弊社のエンジニアもコミットしているんです。</p>

<h2>「HTTP/2化で速くなったかは…正直わかりません(笑)」</h2>

<p><b class="speaker siraisi">白石:</b> では、HTTP/2への切り替えは、それほど大きな問題もなくうまく行ったと。そうした環境で運用を行ってみて、実際にわかったことや問題などはありますか？例えばHTTP/2化することで、パフォーマンスが向上するんじゃないかという期待はあったと思うのですが。</p>

<p><b class="speaker ohtsu">大津:</b> そうですね…正直に言ってしまうと、HTTP/2でパフォーマンスが上がったかどうかは<strong>よくわからない</strong>んです。</p>

<p><b class="speaker siraisi">白石:</b> ああ、それ<a href="https://html5experts.jp/shumpei-shiraishi/24156/" data-wpel-link="internal">先日インタビューしたあほむさん</a> も同じこと言ってました(笑)。</p>

<p><b class="speaker ohtsu">大津:</b> 個別に見れば、速度が上がっている部分は確実にあるんです。ただ、トータルで向上したかどうかは結局よくわからないんですよね。</p>

<p>例えば、<code>window.onload</code> が速くなったかというと、そうでもないんです。ただ、<code>onload</code>についてはあまりにも様々な要因が絡むんで、測定の指標としてあまり有効でないという問題もありますけどね。なにせ、ずっと昔から運営しているサービスなので、 <code>document.write</code> にブロックされているページも残っていたりしますし。</p>

<p><img src="/wp-content/uploads/2017/09/e64a89a1dacf16720a61477a7e16379c.jpg" alt="" width="640" height="427" class="alignnone size-full wp-image-24197" srcset="/wp-content/uploads/2017/09/e64a89a1dacf16720a61477a7e16379c.jpg 640w, /wp-content/uploads/2017/09/e64a89a1dacf16720a61477a7e16379c-300x200.jpg 300w, /wp-content/uploads/2017/09/e64a89a1dacf16720a61477a7e16379c-207x138.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<p><b class="speaker siraisi">白石:</b> 確かに、「トータルで向上したか」と言っても「トータル」ってそもそも何なんだという定義が難しそうです。</p>

<p><b class="speaker ohtsu">大津:</b> そういうところも含めて、測定が十分に行えていないというのも課題ですね。サーバ側のログを見ると、リクエスト数ベースでHTTP/1.1とHTTP/2の割合は現在4:6くらいです。</p>

<p><b class="speaker siraisi">白石:</b> 1.1がまだいるっていうのは…ああそうか、(HTTP/2に対応していない)古いブラウザを使っているクライアントですね。クライアントの環境も様々だから、余計測定が難しいですね…。</p>

<p><b class="speaker ohtsu">大津:</b> そうなんです。一気に切り替えてしまったことで、A/Bテストなども行えていないですしね。A/Bテストを行うために、一部を一旦HTTP/1.1に戻すというのもありかもしれません(笑)。</p>

<h2>HTTP/2がサーバの処理負荷を下げる？</h2>

<p><b class="speaker siraisi">白石:</b> HTTP/2に移行する前の、HTTPSへの切り替えではいかがでしたか？先程、「TLSの処理が重たい」という懸念が事前にあったとのことでしたが。</p>

<p><b class="speaker nibe">新部:</b> 一度それで問題になったことはありますね。</p>

<p>弊社のサービスからプッシュ通知を送った時とかは、ユーザーが一斉に接続するので負荷が一時的に高まるんですが、それでCPUがパツパツになってしまったことがありまして。ただ、HTTPS化する前はCPUがボトルネックになるようなことはなかったので、やはりTLSの処理が影響していたんだろうなあと思います。</p>

<p><b class="speaker ohtsu">大津:</b> ただ、<strong>その後そういう問題は起きていないのは、HTTP/2が一役買っているのかもしれません</strong>。</p>

<p>HTTP/2はTCPセッション数が減るので、TLSの暗号化・復号化に伴う処理負荷も減ります。単純に言えば、HTTP/1.1の時に6セッションだったものがHTTP/2で1セッションになったら、TLSのコストは1/6になるわけで。</p>

<p><b class="speaker siraisi">白石:</b> なるほど！HTTP/2がサーバの処理負荷を下げるという可能性は、今まで思い至りませんでした。</p>

<p><img src="/wp-content/uploads/2017/09/c4c6994cd0eee49d9c63ee16f82a8554.jpg" alt="" width="640" height="421" class="alignnone size-full wp-image-24198" srcset="/wp-content/uploads/2017/09/c4c6994cd0eee49d9c63ee16f82a8554.jpg 640w, /wp-content/uploads/2017/09/c4c6994cd0eee49d9c63ee16f82a8554-300x197.jpg 300w, /wp-content/uploads/2017/09/c4c6994cd0eee49d9c63ee16f82a8554-207x136.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<h2>HTTP/2のさらに先へ。新しいプロトコルを知る &#8211; TLS 1.3とは？</h2>

<p><b class="speaker siraisi">白石:</b> HTML5 Conferenceでは、さらに新しいプロトコルについてもご紹介があるとのことですね。</p>

<p><b class="speaker ohtsu">大津:</b> はい、TLS 1.3やQUICについて紹介しようかと思います。</p>

<p><strong>TLS 1.3</strong>というのは、1.2までの技術的負債を精算しつつ、ハンドシェイクを速くすることを目的とした仕様です。仕様はだいたい固まっていて、現在Googleをはじめとした企業が、実験的に使用して調査中です。</p>

<p><b class="speaker siraisi">白石:</b> 技術的負債を精算して、さらに速く…って、いいことづくめですね。</p>

<p><b class="speaker ohtsu">大津:</b> ただ、TLS 1.3にはまだ大きな問題が残っています。<strong>後方互換性に関わる透過性の問題があって、通信できない場合があることが報告されているのです</strong>。</p>

<p>TLS 1.3に対応していない中間機器が、接続を無断で切断しちゃうことがあるんですよね。そういうファイアウォール、IDS（Intrusion Detection System:不正侵入検知システム）、IDP（Intrusion Prevention System:不正侵入予防システム）などが中間経路にあると、ネットワーク全体がダウンしてしまうこともあります。本来は、TLS 1.2にフォールバックしてほしいのですが…現在Googleなどが後方互換の問題を最小にするために透過性の調査を行っているところです。</p>

<p><b class="speaker siraisi">白石:</b> 通信を遮るものをどう扱うか、は難しい問題ですね。正直、簡単に解決する問題には全く聞こえませんね…</p>

<p><b class="speaker ohtsu">大津:</b> そうなんですよ。少し前に、<a href="https://www.theregister.co.uk/2017/02/27/blue_coat_chokes_on_chrome_encryption_update/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">GoogleがTLS 1.3を試験的に有効化していたところ、ある学校で問題が発生し、数万台のChromebookが通信もアップデートも行えなくなってしまうということがありました</a>。
こうなるとGoogleですらお手上げなんですよね。TLSに完全に依存しているので。</p>

<p>そう考えると、HTTP/2って「幸運」だったと思うんですよね。</p>

<p><b class="speaker siraisi">白石:</b> 「幸運」ですか。</p>

<p><b class="speaker ohtsu">大津:</b> はい、TLS 1.2という「枯れた」プロトコル上の動作を前提にできたのがラッキーでした。TLS1.2って、2008年に登場したプロトコルで、今は完全に普及しきっていますから。</p>

<p>そういう前提のないプロトコルや機能拡張だと、大変なんです。</p>

<p>例えば、TCPのデータ送受信開始を速める「<a href="https://html5experts.jp/jxck/3529/" data-wpel-link="internal">TCP Fast Open</a>」という仕様もあるのですが、<a href="https://www.nanog.org/sites/default/files/Paasch_Network_Support.pdf" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">うまく通じない現象がAppleのエンジニアによって報告</a>されていて、<a href="http://asnokaze.hatenablog.com/entry/2017/05/09/223534" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">最近Linuxで緩和策が講じられたにもかかわらず</a>、Microsoft Edgeではついにデフォルトで無効化されてしまいました。</p>

<p>TCP Fast Openは2014年に標準化されており、Linux、 macOS、 WindowsなどOSの対応も進んでいるのですが、それでもまだこういう状況です。それほど、低レイヤーのプロトコルを普及させていくのは難しい。</p>

<p>だから、私たちがHTTP/2の移行にあまり苦労しなかったことも含め、HTTP/2のアップグレードがこれほどスムーズなのは大変幸運なことなのです。</p>

<p><img src="/wp-content/uploads/2017/09/d3cf54c0f443750953b54a236fa672c3.jpg" alt="" width="640" height="427" class="alignnone size-full wp-image-24200" srcset="/wp-content/uploads/2017/09/d3cf54c0f443750953b54a236fa672c3.jpg 640w, /wp-content/uploads/2017/09/d3cf54c0f443750953b54a236fa672c3-300x200.jpg 300w, /wp-content/uploads/2017/09/d3cf54c0f443750953b54a236fa672c3-207x138.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<h2>QUICという「プラットフォーム」の可能性</h2>

<p><b class="speaker siraisi">白石:</b> <strong>QUIC</strong>についても教えていただけますか？</p>

<p><b class="speaker ohtsu">大津:</b> QUICは、<strong>ざっくり言うとUDPの上でTCP、TLS 1.3、そしてHTTP/2の一部をごちゃっとやる感じのプロトコル</strong>です。</p>

<p><b class="speaker siraisi">白石:</b> ごちゃっと(笑)。</p>

<p><b class="speaker ohtsu">大津:</b> IETFでの標準化も進められていて、今度の10月で1年になりますね。非常に有望なプロトコルで、今後のネットワークのプラットフォームになっていくポテンシャルを秘めていると期待しています。</p>

<p><b class="speaker siraisi">白石:</b> なぜそこまで期待していらっしゃるのでしょう？</p>

<p><b class="speaker ohtsu">大津:</b> 「UDPなので疎通性が良い」というのと「ユーザーランドで動作するプロトコルなのでデプロイが容易」ということが挙げられます。</p>

<p>先程TLS 1.3の普及には苦労しそうだ、という話をしましたが、QUICはUDPなので比較的通りやすいんです。また、通じなかった場合はTCPにフォールバックする機能もある。通信を行うコンピューター同士が、エンドツーエンドでQUICに対応していればいいのです。</p>

<p>ユーザーランドで動作する…というのは、TCP BBR (※) と比較するとわかりやすいと思います。</p>

<p><small>
※参考: 「<a href="http://www.publickey1.jp/blog/17/googletcptcp_bbrgoogle_cloud.html" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Google、TCPのスループットとレイテンシを改善する輻輳制御アルゴリズム「TCP BBR」をGoogle Cloudで利用開始 (Publickey)」</a>
</small></p>

<p>TCP BBRは、Googleが開発した新しい輻輳制御のアルゴリズムです。モバイル環境のように、パケットロスが非常に多い環境でも速度を最大化できるという利点があります。</p>

<p><img src="/wp-content/uploads/2017/09/2071b8b501257b7d07a5f4c6ebf54559.jpg" alt="" width="640" height="427" class="alignnone size-full wp-image-24201" srcset="/wp-content/uploads/2017/09/2071b8b501257b7d07a5f4c6ebf54559.jpg 640w, /wp-content/uploads/2017/09/2071b8b501257b7d07a5f4c6ebf54559-300x200.jpg 300w, /wp-content/uploads/2017/09/2071b8b501257b7d07a5f4c6ebf54559-207x138.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<p>しかし欠点としては、TCPのスタックってOSのカーネルに実装されているので、<strong>使おうとするとカーネルのアップデートが必要になる</strong>ということです。できれば通信を行うコンピューターがどちらもTCP BBRに対応したカーネルにアップグレードしていることが望ましいのですが、OSのアップグレードサイクルを考えると、どれほど少なく見積もっても普及には数年かかるでしょう。</p>

<p>その点QUICはUDPの上で構築されている。プロトコルの処理はユーザーランドで行われるので、デプロイするのにOSのアップグレードなどを伴いません。プロトコルのバージョンアップも、機能追加も比較的簡単だと考えられます。将来的にHTTPだけでなくDNSやWebRTCなどでQUICが利用されることも検討されています。</p>

<p><b class="speaker siraisi">白石:</b> それが、「<strong>QUICはプラットフォームになりうる</strong>」という先程の言葉の意味ですね。</p>

<p><b class="speaker ohtsu">大津:</b> はい。ただ、QUICも実際には良いことばかりではありません。「QUICを無効にしたらChromeが軽くなった」などのノウハウが最近巷に広まってきています（※）。さきほどUDPの透過性の良さについて話しましたがやはり完全に透過ではなく、これも中間経路での問題が出てきている現象だと見られています。</p>

<p><small>
※参考: 「<a href="http://tanweb.net/2017/07/11/15417/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">最近 Chrome が「重くなった・ひっかかる」と感じたら試してみてほしいこと (Tanweb.net)</a>」
</small></p>

<p><b class="speaker siraisi">白石:</b> やはり、ネットワークプロトコルのデプロイって難しいんですね…。ただ、QUICが持つ素晴らしい可能性についても、よくわかりました。</p>

<p>本日は、実際の大規模なHTTPS &amp; HTTP/2への移行経験から新しいWebプロトコルのお話まで聞けて、大変勉強になりました！
どうもありがとうございました。</p>
]]></content:encoded>
		
		<series:name><![CDATA[HTML5 Conference 2017特集]]></series:name>
	</item>
		<item>
		<title>「最近のWebパフォーマンス改善について知っておきたいコト」についてあほむに聞いてきた</title>
		<link>/shumpei-shiraishi/24156/</link>
		<pubDate>Mon, 11 Sep 2017 01:00:23 +0000</pubDate>
		<dc:creator><![CDATA[白石 俊平]]></dc:creator>
				<category><![CDATA[最新動向]]></category>
		<category><![CDATA[プログラミング]]></category>
		<category><![CDATA[システム開発]]></category>
		<category><![CDATA[サイト制作]]></category>
		<category><![CDATA[Webパフォーマンス]]></category>
		<category><![CDATA[http2]]></category>
		<category><![CDATA[サイバーエージェント]]></category>

		<guid isPermaLink="false">/?p=24156</guid>
		<description><![CDATA[連載： HTML5 Conference 2017特集 (3)こんにちは、編集長の白石です。 この記事は、9月24日に開催されるHTML5 Conference 2017に登壇するエキスパートに、予定しているセッションの...]]></description>
				<content:encoded><![CDATA[<div class="seriesmeta">連載： <a href="https://html5experts.jp/series/html5-conf2017/" class="series-457" title="HTML5 Conference 2017特集" data-wpel-link="internal">HTML5 Conference 2017特集</a> (3)</div><p>こんにちは、編集長の白石です。</p>

<p>この記事は、9月24日に開催される<a href="http://events.html5j.org/conference/2017/9/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">HTML5 Conference 2017</a>に登壇するエキスパートに、予定しているセッションのトピックを中心に、いろいろ伺ったものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。</p>

<p>今回お話を伺ったのは、株式会社サイバーエージェントにお勤めの佐藤歩さんです（ネット上では「あほむ」「ahomu」のIDで有名）。
（プロフィールは<a href="http://events.html5j.org/conference/2017/9/speaker/index.html#ahomu" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">こちら</a>）</p>

<p><img src="/wp-content/uploads/2017/09/6ed2d7e1dc76c5d83a54be2cc27ba479.jpg" alt="" width="640" height="412" class="alignnone size-full wp-image-24174" srcset="/wp-content/uploads/2017/09/6ed2d7e1dc76c5d83a54be2cc27ba479.jpg 640w, /wp-content/uploads/2017/09/6ed2d7e1dc76c5d83a54be2cc27ba479-300x193.jpg 300w, /wp-content/uploads/2017/09/6ed2d7e1dc76c5d83a54be2cc27ba479-207x133.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<p>あほむさんのセッションは「最近のWebパフォーマンス改善について知っておきたいコト」（ホール 13:20-14:00）です。
（現在<a href="https://html5j.connpass.com/event/64992/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">HTML5 Conference 2017</a>は定員オーバーの状態ですが、無料イベントということもあってキャンセルも多めに出るらしいので、あきらめずにキャンセル待ちすることをお勧めします！）</p>

<h2>パフォーマンスはなぜ重要か？を違う切り口から伝える</h2>

<p><b class="speaker siraisi">白石:</b> Webパフォーマンスについて、<a href="http://events.html5j.org/conference/2017/9/session/#h2" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">「ベーシックな話を少々と、最近の動向」をお話されるということですね</a>。</p>

<p><b class="speaker ahomu">あほむ:</b> はい、そうですね。まあ、まだセッションの内容はほとんど固まっていないので、当日は全然違った話をすることになるかもしれないのですが。</p>

<p>普通パフォーマンスに関する「ベーシックな話」というと、「なぜパフォーマンス改善は重要か」ということを語られることが多いと思うんです。でも、「パフォーマンスが重要」というのは、もうエンジニアには広く認識されているんですよね。</p>

<p>足りないのは、<strong>パフォーマンス改善を「開発者の自己満足」で終わらせない</strong>ことなんじゃないかと。パフォーマンス改善が、自社のビジネスにどう寄与するのか。そこを考えないと、意味のないパフォーマンス改善を行ってしまう恐れもあるし、社内の理解も得られない。</p>

<p>「パフォーマンスは重要である」というメッセージを、そういう観点からも伝えたい気がします。それも他社の事例とか一般論から語るんじゃなくて、私自身が遭遇した実体験などを踏まえて語りたいな…と思ってます。</p>

<p><b class="speaker siraisi">白石:</b> それは面白そうですね！具体的には、どんな実体験になりますか？</p>

<p><b class="speaker ahomu">あほむ:</b> 例えば、弊社のサービスってSNSでWebページが拡散されることが、非常に大きな比重を占めているんです。つまり、TwitterやFacebookのアプリ上で、WebViewでページを表示されることがすごく多いんです。そうなると、実は<strong>ブラウザのキャッシュにすら期待できないことが多い</strong>。弊社のサービスはiOSのユーザーが多いのでなおさらです（※）。</p>

<p>とはいえ、<strong>SNSを通じてたまたま遭遇した、っていう千載一遇のチャンスは活かさなくてはならない</strong>。そういう限定された環境でも最高のUXを実現するため、最大のパフォーマンスを発揮するにはどうしたらよいかを常に試行錯誤しているんです。</p>

<p><b class="speaker siraisi">白石:</b> なるほど。確かにそれは、パフォーマンスが非常に重要なシチュエーションと言えそうです。</p>

<p><b class="speaker ahomu">あほむ:</b> こういう例を含めていろいろ紹介できるといいかもしれません。URLさえあればどこからでもアクセス可能というのはWebの利点ですが、要はどんな環境で見られるかわからないということです。だから、Webのパフォーマンス改善には終わりがないし、少しでもその助けになるよう、常に新しいアイデアや技術が考案されています。そういう技術のうち、比較的新しくて、活用しがいのあるテクニックや仕様について、いろいろご紹介できればと思っています。</p>

<p><small>
※弊社のサービスはiOSのユーザーが多いのでなおさら…Androidであれば、Chrome Custom Tabという仕組みでメインブラウザ（Chrome）とキャッシュなどのリソースが共有されることも期待できる。iOSは、Chrome Custom Tabに近いSafari View Controllerという仕組みがあるが、あまり利用されていない。
</small></p>

<p><img src="/wp-content/uploads/2017/09/520562370d1f74af395a1fd9555160cd.jpg" alt="" width="640" height="427" class="alignnone size-full wp-image-24176" srcset="/wp-content/uploads/2017/09/520562370d1f74af395a1fd9555160cd.jpg 640w, /wp-content/uploads/2017/09/520562370d1f74af395a1fd9555160cd-300x200.jpg 300w, /wp-content/uploads/2017/09/520562370d1f74af395a1fd9555160cd-207x138.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<h2>ページロードパフォーマンスの改善テクニック</h2>

<p><b class="speaker siraisi">白石:</b> では、パフォーマンスを改善していくテクニックや仕様をいくつかご紹介いただけますか？</p>

<p><b class="speaker ahomu">あほむ:</b> Webパフォーマンスを考える際には、やはりページロード (ページの読み込み速度)と ランタイム （ページ実行中のパフォーマンス）に分けて考えるのが王道です。ページロードの改善については、<strong>最近だとHTTP/2の話が中心になる</strong>と思います。</p>

<p><b class="speaker siraisi">白石:</b> なるほど、御社のサービスでは、HTTP/2対応はもうかなり進められている感じなのですか？</p>

<p><b class="speaker ahomu">あほむ:</b> はい。できるところからHTTP/2にしていくというアプローチで、現在は多くのサービスがHTTP/2を利用して動いています。</p>

<p><b class="speaker siraisi">白石:</b> 実際にHTTP/2に対応してみていかがですか？苦労した点とかはありましたか？</p>

<p><b class="speaker ahomu">あほむ:</b> 具体的な切り替え作業については、インフラの専門チームが実施してくれるので、あくまで開発側からの意見になりますが…<strong>ほとんど苦労していることはないですね</strong>。</p>

<p><b class="speaker siraisi">白石:</b> おお、本当ですか。それは素晴らしい。</p>

<p><b class="speaker ahomu">あほむ:</b> はい、HTTP/2に切り替えても、開発への影響はほとんどなかったという点はとても重要ですね。アプリケーションとネットワークで、レイヤーが違うから当然といえば当然なのですが、やはり実際に経験してみると、そのありがたさが実感できます。トレードオフがほとんどないにも関わらず、パフォーマンスの向上が見込めるのですから。</p>

<p><b class="speaker siraisi">白石:</b> でも、HTTP/2に切り替えたことで、本当にパフォーマンスアップするのか、懐疑的な意見も目にしたことがあります。実際のところどうなんでしょうか？</p>

<p><b class="speaker ahomu">あほむ:</b> うーん…実際のところ、それはありますね。<strong>HTTP/2にしただけだと、体感的に良くなったっていう実感があまりないのは、正直なところです(笑)。</strong></p>

<p><img src="/wp-content/uploads/2017/09/fb8e33c766398453904ac50859d6bf89.jpg" alt="" width="640" height="417" class="alignnone size-full wp-image-24177" srcset="/wp-content/uploads/2017/09/fb8e33c766398453904ac50859d6bf89.jpg 640w, /wp-content/uploads/2017/09/fb8e33c766398453904ac50859d6bf89-300x195.jpg 300w, /wp-content/uploads/2017/09/fb8e33c766398453904ac50859d6bf89-207x135.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<p><b class="speaker siraisi">白石:</b> それも正直な意見として、貴重だと思います(笑)。</p>

<p><b class="speaker ahomu">あほむ:</b> 例えばHTTP/2でヘッダ圧縮されてデータ転送量が多少減ったとしても、アプリケーションで扱うデータが最適化されてなかったら、誤差みたいなレベルになってしまいますからね。HTTP/2によるパフォーマンス向上は、確実に効いているとは思います。ですが、実際のサービスでは、常に別のところにパフォーマンスのボトルネックが潜んでいて、効果のほどが見えにくいんですよね。</p>

<p><b class="speaker siraisi">白石:</b> 他には、ページロードの最適化で知っておいたほうがいいテクニックとかありますか？</p>

<p><b class="speaker ahomu">あほむ:</b> ほかには、コンテンツの圧縮に<a href="https://github.com/google/zopfli" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Zopfli</a>や<a href="https://github.com/google/brotli" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Brotli</a>を利用していますね。他にはResource Hintsなども使っているので、お話したいですね。</p>

<p><span style="font-size: 80%;">※参考記事：<a href="https://developers.cyberagent.co.jp/blog/archives/5975/" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">FRESH! Web パフォーマンス改善 〜サーバサイド編〜</a></span></p>

<p><b class="speaker siraisi">白石:</b> Zopfli…？そんな圧縮形式があるんですか？</p>

<p><b class="speaker ahomu">あほむ:</b> はい、ZopfliもBrotliも、どちらもGoogleが開発した圧縮形式です。</p>

<p>Zopfliは、圧縮の速度は遅いですが、そのかわりに圧縮効率は非常に良い。そしてgzipとの互換性があるので、gzipに対応したブラウザであればだいたい扱えるという大きな利点があります。</p>

<p>Brotliは、gzipとの互換性はありませんが、非常に効率のよい圧縮アルゴリズムです。こちらは現在のところ、Chrome, Firefox, Edgeでのみ利用可能です。</p>

<p><b class="speaker siraisi">白石:</b> <a href="https://www.w3.org/TR/resource-hints/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Resource Hints</a>というのはどういうものですか？</p>

<p><b class="speaker ahomu">あほむ:</b> 利用するリソースを先読みするヒントをブラウザに与えるための仕様です。これを利用すると、現在のWebページに含まれていないリソースであっても、ブラウザに先読みさせることができます。dns-prefetch (名前解決を実行しておく）, preconnect （サーバ接続を行っておく）, prefetch （リソースのフェッチを実行しておく）, prerender （ページのレンダリングをバックグラウンドで実行しておく）といったタイプの先読みが可能です。
<small>
（筆者注: <a href="https://blog.jxck.io/entries/2016-02-11/resource-hints.html" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Jxck</a>さんのブログで詳しく解説されています）。
</small></p>

<h2>ランタイムパフォーマンスの改善テクニック</h2>

<p><b class="speaker siraisi">白石:</b> ランタイム （アプリケーション実行時）のパフォーマンスを向上させるために使用している技術にはどんなものがありますか？</p>

<p><b class="speaker ahomu">あほむ:</b> <a href="https://github.com/w3c/IntersectionObserver" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Intersection Observer</a>や<a href="https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Passive Event Listeners</a>は利用しがいがあると思います。</p>

<p><strong>Intersection Observer</strong>というのは、要素同士の領域が交差したり、もしくはビューポート（ユーザーに見えている範囲）に要素が入ったかどうかなどを検出できるAPIです（筆者注: Intersectionとは「交差」の意味）。これを利用すると、ビューポート外で行われる処理を抑制したり、遅延させたりすることが可能になるので、パフォーマンス向上には非常に効果的です。わかりやすいのは、img要素がビューポート内に現れるまで画像の読み込みを遅延させる…などですね。</p>

<p><strong>Passive Event Listeners</strong>というのは、UIイベントが <code>preventDefault()</code> （デフォルトの動作をキャンセルする）されないことを保証するための仕組みです。</p>

<p>スクロールイベントなどは、 <code>preventDefault()</code> を行うことでブラウザのスクロール処理そのものをキャンセルすることができます。逆に言うと、ブラウザはスクロールがキャンセルされる可能性を考えると、イベントハンドラを実行してから実際のスクロールを行わなくてはならない。だから、イベントハンドラの実行に時間がかかったりすると、スクロール処理が詰まってしまうんです。これが<strong>スクロールジャンク</strong>と呼ばれる現象です。</p>

<p>ただ、実際に <code>preventDefault()</code> でスクロール処理を止めたいというケースは多くはありません。なので、「このイベントハンドラはpreventDefault()を呼ばないよ」ということをブラウザに伝える手段として用意されたのがPassive Event Listenersです。</p>

<p><small>
（筆者注: これらも、Jxckさんのブログに詳しい解説がある。<a href="https://blog.jxck.io/entries/2016-06-25/intersection-observer.html" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Intersection Observer</a> <a href="https://blog.jxck.io/entries/2016-06-09/passive-event-listeners.html" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Passive Event Listeners</a>）
</small></p>

<p><img src="/wp-content/uploads/2017/09/8934352103f7dcdc633ff237e8d88b63.jpg" alt="" width="640" height="411" class="alignnone size-full wp-image-24178" srcset="/wp-content/uploads/2017/09/8934352103f7dcdc633ff237e8d88b63.jpg 640w, /wp-content/uploads/2017/09/8934352103f7dcdc633ff237e8d88b63-300x193.jpg 300w, /wp-content/uploads/2017/09/8934352103f7dcdc633ff237e8d88b63-207x133.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<p><b class="speaker siraisi">白石:</b> 今おっしゃったIntersection ObserverやPassive Event Listenersは、全てのブラウザで動くわけではありませんよね？</p>

<p><b class="speaker ahomu">あほむ:</b> はい。なので、動作しないブラウザ用にFeature Detectionで分岐を設けたり、Polyfillも活用しています。</p>

<p><b class="speaker siraisi">白石:</b> なるほど。ただ、最初にお聞きした例だと「SNSで拡散されたページの最適化に注力している」というお話でした。<strong>こういうランタイム系のパフォーマンス改善って、SPA (Single Page Application) ではない通常のランディングページやメディアのサイトなどでも重要なのでしょうか？</strong></p>

<p><b class="speaker ahomu">あほむ:</b> そう思います。先程も申し上げたように、SNSを通じてサイトにアクセスしてくれるのって、ユーザーと接触できる千載一遇のチャンスなわけです。そこからモバイルアプリへの誘導を行うこともできる。なので、そういう千載一遇のチャンスで少しでも機会損失を起こさないように、入念にパフォーマンスをチューニングするのは非常に重要です。</p>

<p>個人的には、jQueryを使った普通のWebサイトこそ、ランタイムのパフォーマンスにもっと気を使うべきだし、できるとも思います。jQueryのプラグインが最新の仕様に追従すれば、プラグインをアップデートするだけで恩恵を得られるわけですから。</p>

<p>ただ逆に、プラグイン側が対応してくれなかったりすると、プラグインの中に手を入れるわけにもいかず、対応が進まないということの裏返しでもありますけどね…悩ましい問題です。</p>

<h2>パフォーマンス改善を「開発者の自己満足」で終わらせないために</h2>

<p><b class="speaker siraisi">白石:</b> これまでご紹介いただいた様々なテクニックですが、これらを活用してパフォーマンスを実際に改善していくのは、実際には骨の折れる作業だと思います。そうした、パフォーマンス改善作業に投下するコストと、それによって得られるリターンについては、どのようにお考えでしょうか？</p>

<p><b class="speaker ahomu">あほむ:</b> はい、おっしゃるとおり、これらのテクニックをただ使って、目に見えない部分でパフォーマンスを改善しても、単なる開発者の自己満足に終わってしまいます。それを避けるためには、<strong>まずは正しく計測することと、それがビジネス上のKPIとどう関連付けているかを検証していくこと</strong>が必要です。</p>

<p>まず計測についてですが、クライアントサイドのパフォーマンスを計測する指標は、現在も様々なものが考案され、利用可能です。</p>

<p>例えば<strong>First Paint</strong>。Webページの描画が開始されたタイミングを表す指標で、ChromeやEdgeでは非標準のAPIから値を得ることができます。</p>

<p>ただ、First Paintだけでは、コンテンツの表示が完了するまでの速度などについてはわかりません。最も重要なのは、ユーザーに見える範囲、つまりビューポートの描画がいつ完了するかです。</p>

<p><img src="/wp-content/uploads/2017/09/d49206c651f16b4bd779417fc8ee95c3.jpg" alt="" width="640" height="419" class="alignnone size-full wp-image-24180" srcset="/wp-content/uploads/2017/09/d49206c651f16b4bd779417fc8ee95c3.jpg 640w, /wp-content/uploads/2017/09/d49206c651f16b4bd779417fc8ee95c3-300x196.jpg 300w, /wp-content/uploads/2017/09/d49206c651f16b4bd779417fc8ee95c3-207x136.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<p>そういう観点での指標としては<strong>Speed Index</strong>があります。Speed Indexを計測する基本的な方法としては、描画中の画面をキャプチャして、最終的な表示結果が得られるまでにどれくらいかかるかを測るというものです。弊社のサービスでは、ページビューや直帰率といったKPIとSpeed Indexの間に相関関係が認められたため、Speed Indexを中心にパフォーマンス改善を行いました。</p>

<p>さらにこうした指標は実際のユーザーの環境で得られた値を一定量集めることも大事なので、集計結果をGoogle Analyticsに送信しています。そうすることで、GAを使いなれたプロに分析をお任せすることもできますからね。</p>

<p>そうした経緯は<a href="https://developers.cyberagent.co.jp/blog/archives/9540/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">弊社技術ブログの記事</a>に詳しく書かれています。</p>

<p><b class="speaker siraisi">白石:</b> なるほど…パフォーマンス改善がビジネスに寄与するという道筋を立てることで、パフォーマンス改善が業務として意味にあるものになるわけですね。</p>

<p><b class="speaker ahomu">あほむ:</b> そうですね。パフォーマンス改善とビジネスが両輪としてうまく回るためにも、やはり様々なパフォーマンス指標や計測が大事になってきます。</p>

<p>指標は他にも<strong>First Contentful Paint</strong> （コンテンツが表示され始めた時）や <strong>First Meaningful Paint</strong> （ユーザーに意味のある表示になったとき）など様々なものが考案され、実装も行われています。よければそういう話をまとめた<a href="https://havelog.ayumusato.com/develop/performance/e744-performance_metrics.html" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">私のブログ記事</a>も見てみてください。</p>

<p><b class="speaker siraisi">白石:</b> なるほど、今日は貴重なお話をお聞かせいただきありがとうございました！HTML5 Conferenceでのセッションも楽しみにしています。</p>
]]></content:encoded>
		
		<series:name><![CDATA[HTML5 Conference 2017特集]]></series:name>
	</item>
		<item>
		<title>HTTPSにまつわる怪しい伝説を検証する──Google I/O 2016 セッションレポート</title>
		<link>/takoratta/20061/</link>
		<pubDate>Wed, 13 Jul 2016 02:00:08 +0000</pubDate>
		<dc:creator><![CDATA[及川卓也]]></dc:creator>
				<category><![CDATA[最新動向]]></category>
		<category><![CDATA[Google I/O 2016]]></category>
		<category><![CDATA[HTTPS]]></category>
		<category><![CDATA[http2]]></category>

		<guid isPermaLink="false">/?p=20061</guid>
		<description><![CDATA[今年はGoogle I/Oに初めて社員ではない立場で参加しました。全体の感想は Google I/O 2016まとめ（Web的視点） で公開していますが、今回はその中で、気に入ったセッションの1つである&#8221;My...]]></description>
				<content:encoded><![CDATA[<p>今年はGoogle I/Oに初めて社員ではない立場で参加しました。全体の感想は <a href="http://qiita.com/takoratta/items/f08ed988cfedaf6f45b7" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Google I/O 2016まとめ（Web的視点）</a> で公開していますが、今回はその中で、気に入ったセッションの1つである&#8221;Mythbusting HTTPS: Squashing security’s urban legends&#8221;について書いてみたいと思います。</p>

<p>セッションは大変良くまとまっていますので、YouTubeにあがっている動画を見れる人はそちらを見てもらえればいいのですが、時間がないという人のために、その内容をまとめました。基本的には文字起こしに近いものです。</p>

<p>重要だとわかっているけど、なかなか導入に踏み切れない人も多いHTTPS。これについて、最新の状況が理解できるコンテンツとしてお役に立てるならば嬉しいです。</p>

<p><small>※この記事は、<a href="http://qiita.com/takoratta/private/5bfe926a6421a14c1f94" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">Qiitaに投稿された記事</a>を、Qiitaの許可を得て転載したものです。</small></p>

<h2>TL;DR</h2>

<ul>
<li>HTTPSはPWAppなどWebにとって必須。</li>
<li>しかし、パフォーマンス悪化するかも！？ でもお高いんでしょ？ それに見合うだけのメリットあるの？などなどの疑問（＝都市伝説的なものも含む）があるので、それを1つ1つ検証。</li>
<li>結論: 確かに懸念すべきものもあるが、やはり必須。正しく、早急に導入しよう。</li>
</ul>

<h2>Mythbusting HTTPS: Squashing security’s urban legends</h2>

<p>&#8220;Mythbusting HTTPS: Squashing security’s urban legends&#8221; はGoogle I/O 2016の初日の夕方に行われたセッションです。ChromeのセキュリティチームでSSL/TSLを担当するエンジニアであるエミリー（Emily Stark）自らが登壇しました。</p>

<h3>Mythbustingとは</h3>

<p>Mythとは英語で「神話」を意味します。Bustにはいくつか意味がありますが、ここではゴーストバスターズなどと同じように、「退治する」、「撃退する」の意味になります。実は、オーストラリアで制作され、米国でも放映されているMythbustersという人気テレビ番組があります。都市伝説のような伝説を検証する科学エンターテイメント番組なのですが、タイトルのMythbustingはもしかしたらそこからとったのかもしれません。</p>

<p>Mythbustersは日本でもケーブルテレビなどで放映されておりますが、そのタイトルは「怪しい伝説」となっています。この投稿のタイトルもそれに習いました。</p>

<h3>セッション動画</h3>

<p>セッション動画は<a href="https://youtu.be/YMfW1bfyGSY" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">ここ</a>から。英語が苦手な方も、<a href="http://googledevjp.blogspot.jp/2012/10/blog-post.html" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Google Developers Japan: 技術と英語を同時に、しかも無料で勉強できる画期的な方法</a> にあるように字幕付きならば、技術的な内容ですので、十分内容を掴めるはずです。</p>

<h2>HTTPSのおさらい</h2>

<p>セッションでは、スピーカーであるエミリーが2010年の世界から見ると、2016年の今日のWebは大きく進化したというところから話し始めます。ホーム画面への追加（Add to Home screen）やプッシュ通知、デバイスオリエンテーション、ジオロケーションなどプログレッシブWebアプリケーションをはじめとするWebをよりアプリに近づける技術が使われるようになっています。</p>

<p>一方で、そのようなアプリケーション的なWebが普及する中、未だに課金や商取引、個人情報をやりとりするようなデータを扱っていながら、第三者から盗み見されるようなネットワークで運用されているところもあったり、ISPやWiFiプロバイダーのような第三者がWebサイト運営者の意図しないようにコンテンツを書きかえることさえ起きています。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/07/1.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/07/1.png" alt="データ盗聴の危険性" width="640" height="317" class="aligncenter size-full wp-image-20079" srcset="/wp-content/uploads/2016/07/1.png 640w, /wp-content/uploads/2016/07/1-300x149.png 300w, /wp-content/uploads/2016/07/1-207x103.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/07/2.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/07/2.png" alt="意図しないコンテンツの挿入" width="640" height="278" class="aligncenter size-full wp-image-20078" srcset="/wp-content/uploads/2016/07/2.png 640w, /wp-content/uploads/2016/07/2-300x130.png 300w, /wp-content/uploads/2016/07/2-207x90.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p>エミリーはだからこそHTTPSが重要だと強調します。</p>

<p>現在のブラウザはHTTPSでアクセスしているサイトには、それがHTTPSであることをインディケーターで示します。ですが、すべてのWebサイトがHTTPSをサポートし、この緑のインディケーターを必要としない世界こそ、望むべきものです。</p>

<p>HTTPSには3つの役割があります。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/07/3.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/07/3.png" alt="HTTPSの役割" width="640" height="421" class="aligncenter size-full wp-image-20077" srcset="/wp-content/uploads/2016/07/3.png 640w, /wp-content/uploads/2016/07/3-300x197.png 300w, /wp-content/uploads/2016/07/3-207x136.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<ul>
<li>認証（Identity）: https://google.com/ にアクセスすると、ブラウザはgoogle.comから証明書を受信し、それにより今アクセスしているgoogle.comが真正のgoogle.comであることを確認します。</li>
<li>守秘性（Confidentiality）: 一度、真正のgoogle.comにアクセスしていることが確認されると、その後の通信はgoogle.comとブラウザ以外には盗聴されない形で行われます。</li>
<li>完全性（Integrity）: google.comとブラウザの間でのデータは第三者により改ざんされないことが保証されます。</li>
</ul>

<p>このようなセキュリティ上の利点があるものの、HTTPSを導入しようとしたときに、コスト、パフォーマンス、そして保守の面で課題があるのではないかと心配されるかもしれません。しかし、それは過去のものです。そのようにエミリーは言います。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/07/4.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/07/4.png" alt="HTTPSに関しての誤解" width="640" height="398" class="aligncenter size-full wp-image-20076" srcset="/wp-content/uploads/2016/07/4.png 640w, /wp-content/uploads/2016/07/4-300x187.png 300w, /wp-content/uploads/2016/07/4-207x129.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<h2>HTTPSにまつわる話</h2>

<p>これらの誤解は結局のところ、5つほどの話に整理できます。それらのうちのいくつかは過去には正しかったものの、現在では都市伝説になっているものもあります。エミリーは5つの話を現在でも事実の話と怪しい伝説とに分類していきます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/07/5.jpg" data-wpel-link="internal"><img src="/wp-content/uploads/2016/07/5.jpg" alt="5" width="640" height="480" class="aligncenter size-full wp-image-20075" srcset="/wp-content/uploads/2016/07/5.jpg 640w, /wp-content/uploads/2016/07/5-300x225.jpg 300w, /wp-content/uploads/2016/07/5-207x155.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p>その5つの話は次の通りです。</p>

<ol>
<li>私のサイトはHTTPSを必要とするほど重要ではない</li>
<li>HTTPSを導入すると遅くなる</li>
<li>HTTPSに関しての攻撃がたくさんあるみたい</li>
<li>HTTPSにはお金がたくさんかかる</li>
<li>私のサイトはHTTPSに移行できるけど、使っている（依存している）サードパーティ（のサービス）はどうしたらいいの？</li>
</ol>

<p>それでは、エミリーが1つ1つをどのように解説していったかをお伝えしましょう。</p>

<h3>「私のサイトはHTTPSを必要とするほど重要ではない」</h3>

<p>エミリーはアリスの話を始めます。</p>

<p>アリスというWebデベロッパーがいます。彼女の旅行ガイドのWebサイトはログインフォームもなければ、クレジットカード番号の入力フォームもない。そこでアリスは自分のサイトにはHTTPSは必要ないと考えます。ですが、ある日、彼女の友人からアリスの旅行ガイドサイトが遅いと言われて、調べてみると、友人が見ている彼女のサイトには彼女が入れたのではない様々な広告が挿入されていたことに気づくのです。それらにはマルウェアが埋め込まれていて、アリスのサイトを信じた友人はサイト内の広告もクリックし、マルウェアに感染してしまっていたのです。</p>

<p>アリスはまた新しい機能をジオロケーションAPIを用いて実装しようとします。ユーザーがどこにいるかを把握し、適切なトラベル情報を提供しようと試みたのです。しかし、彼女はChromeでは動作しないことに気づきます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/07/6.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/07/6.png" alt="ジオロケーションAPI" width="640" height="315" class="aligncenter size-full wp-image-20074" srcset="/wp-content/uploads/2016/07/6.png 640w, /wp-content/uploads/2016/07/6-300x148.png 300w, /wp-content/uploads/2016/07/6-207x102.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p>現在、Chromeを始めとする多くのモダンブラウザはジオロケーションAPIをはじめとするパワフルな新しいAPIの利用はセキュアはHTTPS上でしか動作しないようにし始めています。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/07/7.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/07/7.png" alt="HTTPSを必要とする機能" width="640" height="321" class="aligncenter size-full wp-image-20073" srcset="/wp-content/uploads/2016/07/7.png 640w, /wp-content/uploads/2016/07/7-300x150.png 300w, /wp-content/uploads/2016/07/7-207x104.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p>このように、HTTPSはプライバシーやセキュリティ上の重要なデータのやりとりが発生するようなサイトだけでなく、ユーザー体験を向上させるすべてのサイトに必要なものとなっています。</p>

<p>つまり、この話は<strong>嘘</strong>です。</p>

<h3>「HTTPSを導入すると遅くなる」</h3>

<p>次はボブの話。ボブはEコマースサイトを持っています。彼はサイトを分析し、コンバージョン最適化のためにはレイテンシーを下げることが必要と判断しましたが、HTTPSとパフォーマンスについてあまりよくない話を聞きました。</p>

<p>HTTPSに移行したyell.comはパフォーマンスの差（HTTPとHTTPS）は相対的に大きかったと言っています。しかしながら、2010年にGmailをHTTPSに移行したGoogleは無視できるほどの差しかなかったとしています。</p>

<p>ボブはこれらの話を知り、さらに自分自身でも調査をしました。</p>

<p>エミリーはボブや一般のWebデベロッパーのためにHTTPSにするとネットワーク層で何が起きるのかを説明し、どのように遅延を避けるかを解説します。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/07/8.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/07/8.png" alt="HTTPS移行で起きること" width="640" height="352" class="aligncenter size-full wp-image-20072" srcset="/wp-content/uploads/2016/07/8.png 640w, /wp-content/uploads/2016/07/8-300x165.png 300w, /wp-content/uploads/2016/07/8-207x114.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p>一般のユーザーはブックマークするなどした以前のHTTPのURLでサイトにアクセスしてきますので、まずはHTTPからHTTPSへのリダイレクトが起きます。そしてその次にTLSハンドシェイクで証明書のやりとりと双方がTLSを使えることの確認が行われます。</p>

<h4>HSTS</h4>

<p>まず最初のHTTPからHTTPSへのリダイレクトに関しては、HTTP Strict Transport Security（HSTS）の導入を勧めます。HTTPヘッダーにHSTSの記述をすることで、次回からのアクセス時にブラウザはHTTPでのURLを自動的に内部でHTTPSに置き換えます。これにより2度目以降はこのリダイレクトは発生しなくなります。</p>

<p>注意事項としては、これは一度セットされると、HTTPヘッダーが失効するまで有効ですので、HTTPSのテスト時や完全にHTTPSでのアクセスをサポートできるまでは行ってはいけません。</p>

<h4>TLS False Start</h4>

<p>次のTLSハンドシェイクにおける最適化は2ウェイラウンドトリップをいかに高速化するかに関わるのですが、ここではTLS False Startの利用を勧めます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/07/9.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/07/9.png" alt="TLS False Start" width="640" height="357" class="aligncenter size-full wp-image-20071" srcset="/wp-content/uploads/2016/07/9.png 640w, /wp-content/uploads/2016/07/9-300x167.png 300w, /wp-content/uploads/2016/07/9-207x115.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p>TLS False Startは2ウェイラウンドトリップを待つことなく、クライアントであるブラウザがHTTPSでの通信をリクエストするものです。</p>

<h4>TLS Session Resumption</h4>

<p>もう１つの最適化はTLS Session Resumptionと呼ばれるもので、一度TLS通信を行った場合、以前に使ったセッションIDを用いることで、同じTLSハンドシェイクは必要ないと省略するものです。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/07/10.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/07/10.png" alt="TLS Session Resumption" width="640" height="336" class="aligncenter size-full wp-image-20070" srcset="/wp-content/uploads/2016/07/10.png 640w, /wp-content/uploads/2016/07/10-300x158.png 300w, /wp-content/uploads/2016/07/10-207x109.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<h4>HTTP/2</h4>

<p>ここでエミリーはHTTP/2のいくつかの特徴を話します。</p>

<p>HTTP/2はリクエストとレスポンスを並列で行うパイプライン化により、１つのリクエストのレスポンスを待たずに次のリクエストを送れます。また、サーバープッシュにより、ブラウザがHTMLをパースし、追加のリソースであるスタイルシート（CSS）やJavaScript、イメージなどをリクエストするのを待たずに、サーバー側から必要となるリソースをプッシュすることが可能です。</p>

<p>HTTP/2には他にもさまざまな利点があります。</p>

<p>ここで大事なのは、このHTTP/2はHTTPSでのみ利用可能なことです。</p>

<p>エミリーはHTTP/2がHTTPSでのみ利用可能になっているのには、2つの理由があると言います。1つがHTTPSを普及させるためのインセンティブとして、つまりHTTP/2を使いたいならば、HTTPSを使わなければいけないとすることにより普及を目論んでいるということです。もう１つがプロキシサーバーなどの中継機器によりHTTP/2の通信が阻害されることを避けるためです。</p>

<p>ここで、さきのボブの話に戻ります。ボブが知ったyell.comのHTTPS移行の話ですが、実は彼らが遭遇したパフォーマンス上の課題は古いロードバランサーによるものであったそうです。彼らは将来的にはHTTP/2にアップグレードすることで、TLSネゴシエーションを改良し、RTTを減らすことで、HTTPSへの移行をネガティブなインパクトではなく、ポジティブなインパクトに変えたいと言っています。</p>

<p>実際に、別の事例としてweather.comがあります。彼らはHTTPSに移行した際にネガティブなインパクトがあったのですが、最終的にHTTP/2にアップグレードすることで、それらはほとんど解消できたそうです。</p>

<p>ボブはこれらの調査結果を踏まえて、解説されたような設定を行うとともに、HTTP/2にアップグレードすることで、パフォーマンスの心配なく、HTTPSに移行することができました。</p>

<p>結論として、この話、「HTTPSを導入すると遅くなる」は<strong>（ほとんど）嘘</strong>とエミリーは言います。「ほとんど」となっているのは、HTTP/2へのアップグレードなどを含めて総合的にはという意味でしょう。</p>

<h4>参考情報</h4>

<p>HTTPSに移行したyell.comの話は<a href="https://blog.yell.com/2016/03/https-is-hard/" target="_blank " data-wpel-link="external" rel="follow external noopener noreferrer">HTTPS is Hard – The Yell Blog</a>に詳しく書かれています。これは大変読み応えのある記事なので、英語ですがお勧めです。</p>

<p>また、HSTSについては以前書いた<a href="http://qiita.com/takoratta/items/fb6b3486257eb7b9f12e" target="_blank " data-wpel-link="external" rel="follow external noopener noreferrer">HSTS (HTTP Strict Transport Security) の導入 &#8211; Qiita</a>に簡潔にまとめてあります。</p>

<p>HSTSを含むTLSの設定などは、IPA（情報処理推進機構）の<a href="http://www.ipa.go.jp/security/vuln/ssl_crypt_config.html" title="SSL/TLS暗号設定ガイドライン" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">SSL/TLS暗号設定ガイドライン～安全なウェブサイトのために（暗号設定対策編）～</a>がお勧めです。</p>

<h3>「HTTPSに関しての攻撃がたくさんあるみたい」</h3>

<p>今度はイブの話。技術的な知識もあるイブはちょっとお金に困っていました。そこでHTTPSの脆弱性の話に目をつけ、あるHTTPSの脆弱性を持ったまま放置されているサイトを探します。クレジットカードやログイン情報を持っているサイトなどで脆弱性が放置されているサイトにアクセスします。</p>

<p>これは実際に起こりうる話です。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/07/11.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/07/11.png" alt="TLS脆弱性" width="640" height="272" class="aligncenter size-full wp-image-20069" srcset="/wp-content/uploads/2016/07/11.png 640w, /wp-content/uploads/2016/07/11-300x128.png 300w, /wp-content/uploads/2016/07/11-207x88.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p>HTTPSのセキュリティの研究は最近とても注目されており、単なる攻撃の可能性を理論で示すだけではなく、より実践的な形で攻撃を示したり、インターネット上で実際に脆弱なサイトを見つけるツールやスクリプトを公開したりすることも多くなっています。</p>

<p>実際に図に示したように、多くの脆弱性と攻撃が見つかっています。</p>

<p>エミリーはこう考えたらどうかと言います。</p>

<p>「HTTPSはライフジャケットのようなもの。いろいろと問題はあるけれど、HTTPはライフジャケット無しのようなもの」</p>

<p>HTTPSを使わないのではなく、ツールなどを用いて、サイトで用いる技術を常に最新の状態に保つのが良いでしょう。例えば、<a href="https://www.ssllabs.com/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">SSL Labs</a>は<a href="https://www.ssllabs.com/ssltest/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">スキャニングツール</a>を提供していて、サイトのURLを入力することで、サイトのレイティングや必要となる設定などを示してくれます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/07/12.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/07/12.png" alt="https://qiita.comのスキャン結果/" width="640" height="375" class="aligncenter size-full wp-image-20068" srcset="/wp-content/uploads/2016/07/12.png 640w, /wp-content/uploads/2016/07/12-300x176.png 300w, /wp-content/uploads/2016/07/12-207x121.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p>類似のツールとして、<a href="https://mozilla.github.io/server-side-tls/ssl-config-generator/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">MozillaはSSL Configuration Generator</a>を提供しています。利用するサーバーやバージョンなどを入力することで、設定が生成されます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/07/13.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/07/13.png" alt="Mozilla SSL Configuration Generator" width="640" height="443" class="aligncenter size-full wp-image-20067" srcset="/wp-content/uploads/2016/07/13.png 640w, /wp-content/uploads/2016/07/13-300x208.png 300w, /wp-content/uploads/2016/07/13-207x143.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p>さて、この話の結論は<strong>事実（ただし、心配しすぎることは無い）</strong>です。「心配しすぎることはない」のは、ライフジャケットなしのHTTPよりも、多少の問題があってもライフジャケットとなるHTTPSは使ったほうが良いし、問題もツールなどを用いて常に最新ソフトウェアを使い、構成を正しくすることで解決できるからです。</p>

<h3>「HTTPSにはお金がたくさんかかる」</h3>

<p>次の主人公はチャーリー。</p>

<p>チャーリーは２年前にスタートアップ向きの素晴らしいアイデアを思いつきました。彼はサイトを作り、そこで人々がチャットを行えるようにし、無事ベンチャーキャピタルからも資金を調達できました。それから2年経ち、資金調達で得た資金も枯渇しつつありこともあって、彼はコストには厳しくなってきています。HTTPSにはお金がかかるという話が気になっています。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/07/14.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/07/14.png" alt="14" width="640" height="383" class="aligncenter size-full wp-image-20066" srcset="/wp-content/uploads/2016/07/14.png 640w, /wp-content/uploads/2016/07/14-300x180.png 300w, /wp-content/uploads/2016/07/14-207x124.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p>お金はHTTPSのいろいろなところに関係しています。</p>

<p>パフォーマンスもお金に関係しますし、最後に紹介する広告もお金の話です。ここでは、特にHTTPSの財務上の課題について話します。HTTPSを支える暗号技術における認証は証明書が必要です。これは従来は認証局から有償で購入する必要がありました。身分証明や法人登記書類などを提示して、認証局より証明書を購入し、それをブラウザに対しての自らの認証として使います。</p>

<p>さて、この証明書はいくらかかるのでしょう？ 確かに以前はお金がかかりましたが、今ではいくつかの安価な解決策があります。例えば、プロジェクトSSLMate（https://sslmate.com/ ）というものが数年前から始まっていますが、ここでは1つのドメイン年額$15.95です。複数証明書や追加オプションなどを使うとしても、財務にさほど大きな負担を与えません。新しいプロジェクトのLet&#8217;s Encrypt（https://letsencrypt.org/ ）は無料で証明書を発行します。</p>

<p>このSSLMateとLet&#8217;s Encryptは無料もしくは安価での証明書の取得を実現するだけでなく、自動化のためのコマンドラインツールも提供しているので、期限切れを防ぐことなどの管理作業を行うことができます。</p>

<p>このように、証明書はあまりお金がかからないものとなりました。</p>

<p>もう1つのお金にまつわる心配は、検索ランクへの影響です。HTTPとHTTPSという2つのバージョンのサイトがあったならば、検索エンジンが混乱してしまい、検索ランクが下がってしまうのではないでしょうか？</p>

<p>Googleはサイトの移動に関していくつかのガイドラインを示しています。1つはサイトを移動した場合、301リダイレクトを返すようにと勧めています。また、検索エンジンのクローラーがアクセスしてきた時のために、canonicalリンク要素を提供する必要があります。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/07/15.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/07/15.png" alt="15" width="640" height="299" class="aligncenter size-full wp-image-20065" srcset="/wp-content/uploads/2016/07/15.png 640w, /wp-content/uploads/2016/07/15-300x140.png 300w, /wp-content/uploads/2016/07/15-207x97.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p>他のガイドラインとしては、次のようなものがあります。</p>

<p>https://support.google.com/webmasters/answer/6033049
https://support.google.com/webmasters/answer/6073543
https://plus.google.com/+JohnMueller/posts/PY1xCWbeDVC</p>

<p>これらのガイドラインに従うことで、検索ランクへの影響は最小限に抑えることができ、その影響もしばらくしたら回復します。逆に、GoogleはHTTPSのサイトにランキングブーストを行っています。現在は小さいブーストだが、将来的には変更もあり得ることをエミリーは示唆しています。</p>

<p>証明書のコストも無料か低価格で抑えられ、検索結果への影響も無視できるレベルなので、この話の結論は<strong>嘘</strong>となります。</p>

<h3>「私のサイトはHTTPSに移行できるけど、使っている（依存している）サードパーティ（のサービス）はどうしたらいいの？」</h3>

<p>最後の話の登場人物はフランシスコ。彼によるサードパーティコンテンツにまつわる話です。
皆さんのサイトも多くのサードパーティに依存していることでしょう。</p>

<p>フランシスコは大きなニュースサイトを運営しています。このニュースサイトには多くのレガシーなコンテンツも掲載されています。フランシスコはサイトをHTTPS化すると、すべてのサードパーティコンテンツも同様にHTTPS対応していなければならないと聞いていたので、サイトのHTTPS化はかなり大変ではないかと心配しています。</p>

<p>これは事実で、サードパーティコンテンツもHTTPSに対応していなければなりません。</p>

<p>まず一番最初に心配したのが、サイトの収入源でもある広告です。広告がHTTPSに対応していれば、サイトの移行もすぐに行なえます。GoogleのAdSenseは現在では常にHTTPS上で提供されるようになっています。そのため、フランシスコが自分のサイトをHTTPSに移行する前であっても、実はAdSenseはHTTPSですでに提供されています。つまり、AdSenseについては心配の必要はありません。ただし、HTTPS通信がブロックされているいくつかの国は例外です。</p>

<p>これはGoogleだけの動きではありません。業界全体のトレンドです。2015年、IAB（Interactive Advertising Bureau）はブログ記事の中で約80%の広告ネットワークがすでにHTTPSに対応していると明かしています。</p>

<p><a href="http://www.iab.com/news/adopting-encryption-the-need-for-https/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Adopting Encryption: The Need for HTTPS</a></p>

<p>このように最近では広告がHTTPSに対応していないから、サイトのHTTPS化ができないというのはほとんどなくなっています。もし、広告ネットワークがHTTPSに対応していないようだったら、是非確認してみてください。近い将来に対応予定であることがほとんどでしょうし、もしそうでなかったならば何故対応しないか、是非対応してほしいと言ってみましょう。</p>

<p>次に心配なサードパーティコンテンツはHTTPリファラーヘッダーに依存しているものです。アクセス解析のためなどのいくつかの理由によりパートナーサイトであるサードパーティはHTTPリファラーヘッダーを見て、トラフィックがフランシスコのサイトから来たものであることを確認します。問題は、HTTPSでホストされているサイト上のHTTPでホストされているサイトへのリンクをユーザーがクリックした場合、ブラウザはプライバシーの理由からリファラーヘッダーを取り去ってしまうのです。フランシスコにとって、これは困ります。</p>

<p>ここで解決のために必要となるのが、<a href="https://www.w3.org/TR/referrer-policy/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Referrer Policy</a>です。a要素などに付けられるこのReffer Policyとして、&#8221;origin-when-cross-origin&#8221;を指定することで、リファラーヘッダーがHTTPサイトに対して送られることになります。他にも複数のポリシーがあるので、適切なものを選び、必要な状態でリファラーを送ることができます。</p>

<p><code>&lt;a href="http://external-partner.com/..." referrerpolicy="origin-when-cross-origin"&gt;Click here!&lt;/a&gt;</code></p>

<p>最後のフランシスコの心配は少し一般的なものです。Mixed Contentsと言われる、HTTPSサイトでホストされているページの中にHTTPサイトでホストされるセキュアではないコンテンツが含まれるケースです。このようなコンテンツがロードされることで、HTTPSにより高められるセキュリティが妥協したものになってしまうため、厳しい措置がとられています。スクリプトやiFrameのようなものはブラウザによりブロックされます。</p>

<p>また、フランシスコのサイトでは多くの古い記事にロードされている写真などがあったのですが、これらはHTTPでホストされています。このようなイメージに対してはブラウザはブロックはしませんので、イメージも見ることはできますが、ブラウザのアドレスバーのHTTPSアクセスを示す緑色は消えてしまいます。</p>

<p>CSP（Content Security Policy）を用いてこの問題は対処することができます。HTTPレスポンスヘッダーに次のように指定します。</p>

<p><code>Content-Security-Policy-Report-Only: default-src https:
  'unsafe-inline' 'unsafe-eval'; report-uri
  https://example.com/reportEndpoint</code></p>

<p><code>default-src https:</code>という指定から、ブラウザはすべてのコンテンツはHTTPSでロードしようとします。ただし、<code>'unsafe-inline' 'unsafe-eval'</code>という指定から、動的に生成されたものやインラインスクリプトは例外とします。ブラウザがコンテンツをロード中に、もしこのポリシーに従わなかったものを見つけたら、<code>https://example.com/reportEndpoint</code>にレポートするように指示されています。</p>

<p>このポリシーの例は、&#8221;Report-Only&#8221;なので、ユーザーから見た時の挙動は変わりません。セキュアでないコンテンツのロードがブロックされることもありません。ただ、もしそのようなコンテンツがロードされたことがあったならば、フランシスコはレポートを通じて知ることができます。</p>

<p>このレポーティングのためのインフラを用意するのも面倒であった場合、report-uri.ioというサービスを使うことも可能です。エンドポイントを用意してくれるだけでなく、解析やビジュアリゼーションまでも行ってくれます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/07/16.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/07/16.png" alt="report-uri.io" width="640" height="424" class="aligncenter size-full wp-image-20064" srcset="/wp-content/uploads/2016/07/16.png 640w, /wp-content/uploads/2016/07/16-300x199.png 300w, /wp-content/uploads/2016/07/16-207x137.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p>ここで説明したことは、Chrome DevToolsのセキュリティパネルで見ることができるようになっています。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/07/17.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/07/17.png" alt="DevTools Security Panel" width="640" height="383" class="aligncenter size-full wp-image-20063" srcset="/wp-content/uploads/2016/07/17.png 640w, /wp-content/uploads/2016/07/17-300x180.png 300w, /wp-content/uploads/2016/07/17-207x124.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p>この話の結論は<strong>真実</strong>です。ですが、ここ数年で状況は改善されつつあり、業界全体として対応に取り組んでいるものです。</p>

<h2>まとめ</h2>

<p>確かに、10年や15年前はHTTPSは遅く、導入にはコストがかかり、セットアップは手間のかかるものでしたが、現在では多くの障壁は取り払われています。</p>

<p>このセッションでエミリーが解説したように、HTTPS関連のツールやサービスなどが充実し、導入は昔の比ではないほど敷居が下がっています。インターネットのセキュリティの強化は誰かひとりや一社の取り組みで一日にして成るものではありません。HTTPSの導入を進めることで、安全に快適なインターネット空間が広がるよう、皆で努力していきましょう。</p>

<h2>補足</h2>

<p>各お話に出てくる人物の名前にはそれぞれ由来があります。</p>

<ul>
<li>アリスとボブは暗号技術を勉強したことがある人ならばご存知だと思いますが、暗号通信を二者で行うときの例として出てくるのが常にボブとアリス。それが由来。</li>
<li>イブはEvil（邪悪な）から。</li>
<li>チャーリーはどこから来たのか不明。</li>
<li>フランシスコはサンフランシスコからか。</li>
</ul>
]]></content:encoded>
			</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>
