<?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>I/O 2016 &#8211; HTML5Experts.jp</title>
	<atom:link href="/tag/io-2016/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>Googleが新たに提唱するProgressive Web Appsの新たな開発パターン「PRPL」とは？</title>
		<link>/komasshu/19704/</link>
		<pubDate>Wed, 22 Jun 2016 01:00:14 +0000</pubDate>
		<dc:creator><![CDATA[小松 健作]]></dc:creator>
				<category><![CDATA[最新動向]]></category>
		<category><![CDATA[I/O 2016]]></category>
		<category><![CDATA[PWApps]]></category>
		<category><![CDATA[Polymer]]></category>

		<guid isPermaLink="false">/?p=19704</guid>
		<description><![CDATA[「Google I/O 2016」では、これからのWebアプリ開発パターンとして提唱しているPWApps(Progressive Web Apps）について多くのプレゼンテーションがなされました。 PWAppsとは、最新...]]></description>
				<content:encoded><![CDATA[<p>「Google I/O 2016」では、これからのWebアプリ開発パターンとして提唱しているPWApps(Progressive Web Apps）について多くのプレゼンテーションがなされました。</p>

<p>PWAppsとは、最新のWeb技術を有効に活用し、漸進的（Progressive）に高度なユーザー体験を提供しようとする概念です。このPWAppsの概念を具体化する一つの手法として、「PRPL」（パープル）と名付けられた開発・提供パターンが提案されました。本稿ではこのPRPLを解説するとともに、その有効性や課題点を考察します。</p>

<p>本稿は、Google I/O 2016の二つのセッションに関する、解説記事です。</p>

<ul>
<li><a href="https://www.youtube.com/watch?v=fFF2Yup2dMM" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Polymer and Progressive Web Apps: Building on the modern web</a></li>
<li><a href="https://www.youtube.com/watch?v=J4i0xJnQUzU" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Progressive, Performant, Polymer: Pick Three</a></li>
</ul>

<h2>PRPLの概要、PWAppsとの関係</h2>

<p>PRPLは、次の4つの頭文字をとった、開発パターンです。</p>

<ul>
<li>Push</li>
<li>Render</li>
<li>Pre-cache</li>
<li>Lazy-load</li>
</ul>

<p>モバイルWebアプリケーションにおいて、現行のWeb開発・提供パターンが抱える課題点を解決するものとしてGoogleが今回の I/Oで提案した新たなフレームワークパターンです。</p>

<p>Web Componentsや、Service Worker、HTTP/2 Serveer Pushといった Webの最新技術をフルに活用し、レスポンス性の高いユーザー体験を提供しようというものです。PWAppsの具体的なパターンの一つとして位置付けられます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/06/1.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/06/1.png" alt="The PRPL Pattern" width="640" height="330" class="aligncenter size-full wp-image-19706" srcset="/wp-content/uploads/2016/06/1.png 640w, /wp-content/uploads/2016/06/1-300x155.png 300w, /wp-content/uploads/2016/06/1-207x107.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p>PRPLについては、以降のパラグラフで詳しく解説するとして、まず最初にPWAppsについて概説します。</p>

<p>PWAppsが最初に発表されたのは、昨年11月。シリコンバレーGoogleオフィスで開催された <a href="https://developer.chrome.com/devsummit" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Chrome Dev Summit</a>のことです。モバイルWebアプリにメインターゲットをおき、ネイティブアプリに近いユーザー体験（オフライン動作や高速なレスポンス性）を漸進的に提供していこうという考え方です。</p>

<p>ここで、漸進的といっても、イマイチピンと来ない方も多いことでしょう。具体例としてService Workerのパターンについて紹介します。Service Workerの詳細ついては、<a href="http://www.html5rocks.com/ja/tutorials/service-worker/introduction/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">HTML5 Rocks</a>や<a href="https://html5experts.jp/kinuko/16537/" data-wpel-link="internal">Googleの安田絹子さんの記事</a>（Service WorkerのChrome実装者です！）を参照ください。</p>

<p>Service Workerは、オフラインWebを実現する最新Web標準技術の一つ。オフライン環境でも動作するWebアプリケーションの提供を可能とします。オールドファッションなオフライン Web（Application Cache）とは異なり、柔軟なキャッシュ制御が可能となるため、多様なWebアプリケーションにオフライン Webの世界を適用することができます。ネイティブアプリのようにオフラインでも動作するWebアプリ体験を提供することが可能となるわけです。</p>

<p>また、Service Workerは単なるオフラインアプリの実現にとどまりません。多様なキャッシュ制御ができるということは、リソース（HTMLやJavascriptファイルなど）のロード時間短縮が可能となることを意味しており、アプリキャッシュによる高速なレスポンス性を実現します。</p>

<p>さらに、Service Workerは、プッシュ通知もサポートします。これにより、該当のWebサイトにアクセスしていなくても、通常のモバイルアプリのようにプッシュ通知を提供することができます。Service WorkerはモバイルアプリとWebアプリとの間の様々なギャップを埋め、より高度なユーザー体験を提供するためのAPIなのです。</p>

<p>では、このService Workerと漸進性との関係はなんでしょう？答えは単純で、Service Workerは、それが対応していないブラウザ環境であっても、Webサイトのサービス提供自体を止めることはありません。</p>

<p>したがって、非対応ブラウザ利用ユーザーには、ベースとなるWebサービスのみを提供し、対応ブラウザ利用ユーザーには、オフライン対応・高速なレスポンス性・プッシュ通知といったより高度なユーザー体験を提供します。これが漸進的なWebアプリケーションと言われる所以です。</p>

<h2>現状のWeb開発課題を解決するPRPL</h2>

<p>さて、本題のPRPLです。これは前述のService Workerなど、様々な最新Web技術を活用したWeb開発・提供パターンです。もちろん、PWAppsの理念に基づいています。</p>

<h3>現状のWebアプリ開発の課題。バンドルの肥大化</h3>

<p>最近のWebアプリ開発手法は、コンポーネント化による独立性・安定性の向上と、バンドル（単一ファイルの生成）による高速性の両者に基づいています。BabelやReact、npmといったツール類を用い、ES2015やTypeScript記法による洗練されたコンポーネント志向のコーディングを行いつつ、mochaやwebpackなどを用い、オートメーション化されたテスト駆動開発と全てのコンポーネントを集約したコンパイルの実行、バンドルを行うのがベストプラクティスとなっています。</p>

<p>ここで、コンポーネント化のメリットは解説不要でしょう。Webアプリの各機能要素をライブラリとしてコンポーネント開発することで、独立性・安定性・再利用性といった様々な恩恵を得ることができます。</p>

<p>一方で、バンドル化のメリットはなんでしょうか？答えは、ロード時間の短縮です。この点は、PRPLを理解する上で重要な知識となりますので、より詳しく紹介します。</p>

<p>そもそも、Webはコンポーネント志向を支えるプラットフォームであると捉えることができます。それぞれのコンポーネント要素（Javascriptライブラリ、HTMLテンプレート、CSS）は、それぞれ個別のリソースファイルとして提供され、 &lt;script&gt; タグや、 &lt;link&gt; タグなどにより個別にダウンロード、ブラウザ内で一連のプログラムとして結合・コンパイルされ、Webサービスとして提供されます。</p>

<p>しかし、このような開発・提供手法は甚大なユーザー体験の低下を招きます。HTTP/1.1の制約により、ファイルロード時間の増大を促してしまうのです。HTTP/1.1はリクエスト＆レスポンス型のデータ転送プロトコルとなっているため、リソースファイルのダウンロードが完了しないと、次のファイルのダウンロードを開始することができません。</p>

<p>この影響は無視することができないものであり、仮にブラウザとWebサーバー間の往復転送遅延時間を0.1秒とし、300個のコンポーネントリソースをダウンロードしなければならないとなると、0.1 x 300で合計30秒の待ち時間がサービス起動にかかってしまいます（実際には、平行ダウンロードにより数分の一に短縮されますが、極端な例として理解ください）。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/06/2.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/06/2.png" alt="HTTP/1.1" width="640" height="332" class="aligncenter size-full wp-image-19713" srcset="/wp-content/uploads/2016/06/2.png 640w, /wp-content/uploads/2016/06/2-300x156.png 300w, /wp-content/uploads/2016/06/2-207x107.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p>これを解決するのがバンドルです。Webアプリ開発時に、サーバーサイドで一連のコンポーネントリソースを結合した一つのファイル（バンドル）を生成し、サービス提供時には、バンドルファイルのみをダウンロードすることで、転送待ち時間によるサービス起動時間を短縮する手法が用いられています（バンドル時には単に結合するだけでなく、ブラウザ依存の解決や、構文チェック・コードの最適化・重畳リソースの削減など、各種コンパイルプロセスが実行されます）。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/06/3.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/06/3.png" alt="App bundling" width="640" height="335" class="aligncenter size-full wp-image-19714" srcset="/wp-content/uploads/2016/06/3.png 640w, /wp-content/uploads/2016/06/3-300x157.png 300w, /wp-content/uploads/2016/06/3-207x108.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p>しかし、これは新たな問題を引き起こしました。それはバンドルファイルの肥大化です。全てのコンポーネントが一つのリソースファイルに集約されるため、設計を怠るととんでもないサイズのバンドルファイルが生成されます。</p>

<p>最近では、SPA（Single-Page Application）の進展により、全てのルート（SPAに不慣れな方は、個別のWebページと考えていただいて結構です）を制御する一つのバンドルファイルが提供されることも珍しくありません。</p>

<p>このようなケースでは数百キロバイトのバンドルファイルとなることもチラホラ。ダウンロード時間の増大をもたらします。これは、モバイル環境のユーザーにとっては、とくに深刻な状況になりえます。</p>

<h3>コンポーネント志向への回帰。PRPLによる解決</h3>

<p>このバンドルファイルの肥大化問題を解決するのがPRPLです。最新のWeb技術を活用することで、バンドルを行わずとも、転送待ち時間によるユーザー体験の低下を解決することができます。</p>

<h4>コンポーネントの定義</h4>

<p>PRPLでは、各コンポーネントがWeb ComponentsのCustom Elementsで提供されることを前提とします。具体的には、各コンポーネントが カスタム要素としてHTMLファイルとして提供され、親となるHTMLからはHTML Importsにより各コンポーネントの利用が宣言されます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/06/4.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/06/4.png" alt="HTML Imports" width="640" height="333" class="aligncenter size-full wp-image-19715" srcset="/wp-content/uploads/2016/06/4.png 640w, /wp-content/uploads/2016/06/4-300x156.png 300w, /wp-content/uploads/2016/06/4-207x108.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p>この手法の重要な点は、標準化された手法によりコンポーネントの利用が宣言されること、これによりサーバーサイドでHTML Importsのリンクを解析し、Webサービスに必要となるコンポーネントツリーを得ることができます。これが、その後の HTTP/2 Server pushの適用につながります。</p>

<h4>HTTP/2 Server pushの適用</h4>

<p>先に解説した通り、HTML Importsで記述した場合、個別のリソースファイルの転送待ち時間によるサービス起動時間の増大が発生します。これを解決するため、PRPLではHTTP/2 Server pushが利用されます。</p>

<p>HTTP/2は、HTTP/1.1に続く最新バージョンのファイル転送プロトコル。HTTP/1.1のリクエスト＆レスポンスによる待ち時間の制約を受けずに、複数リソースファイルを効率的・スピーディーにダウンロードすることが可能になります。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/06/5.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/06/5.png" alt="HTTP/2" width="640" height="331" class="aligncenter size-full wp-image-19716" srcset="/wp-content/uploads/2016/06/5.png 640w, /wp-content/uploads/2016/06/5-300x155.png 300w, /wp-content/uploads/2016/06/5-207x107.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p>HTTP/2では、ダウンロード完了を待つことなく、以降のリソースダウンロードを行うことができます。したがって、サーバーサイドでバンドルすることなく、個別のコンポーネントファイルを高速に転送することができるのです。</p>

<p>PRPLでは、さらなる転送時間の短縮を図るため、HTTP/2 Server pushが用いられます。先にも書いた通り、PRPLでは各コンポーネントファイルがHTML Importsの記法により親となるHTMLファイルに記載されています。したがって、最初のHTMLファイルがダウンロード完了しないと、各コンポーネントファイルのダウンロードを開始することができません。</p>

<p>しかし、HTTP/2 Server pushを用いると、この待ち時間すら短縮することができます。前述の通り、PRPLでは、サーバーサイドで HTML Importsを解析し、コンポーネントツリーを得ます。そして、そのコンポーネントを最初のHTMLファイルに対するレスポンスヘッダーに記述することで、HTTP/2サーバーはクライアントからのリクエストを待つことなく、以降のコンポーネントリソースをPushすることができます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/06/6.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/06/6.png" alt="HTTP Request Headers" width="640" height="331" class="aligncenter size-full wp-image-19717" srcset="/wp-content/uploads/2016/06/6.png 640w, /wp-content/uploads/2016/06/6-300x155.png 300w, /wp-content/uploads/2016/06/6-207x107.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/06/7.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/06/7.png" alt="HTTP/2 + Server Push" width="640" height="333" class="aligncenter size-full wp-image-19718" srcset="/wp-content/uploads/2016/06/7.png 640w, /wp-content/uploads/2016/06/7-300x156.png 300w, /wp-content/uploads/2016/06/7-207x108.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p>これにより、いわゆる0 RTT（Round-Trip Time）で、全てのコンポーネントリソースをブラウザに転送することが可能になります。</p>

<h4>Service workerによるpre cache</h4>

<p>ここまでであげた手法により、<em>初期起動に必要</em>となる リソースを高速に転送し、ユーザーの起動待ち時間を短縮することが可能となりました。しかし、Webサービスは、初期画面だけではありません。その後の、ユーザー操作に基づいた各画面の提供が必要となります。</p>

<p>例えば、ショッピングサイトでは、各商品画面や商品購入画面が必要となります。これらを形成するコンポーネントは、初期画面に含まれるものもあるでしょうし、それ以外のものも含まれるでしょう。これらのコンポーネントリソースのダウンロード待ち時間を短縮するために、PRPLではService Workerが用いられます。</p>

<p>PRPLでは、初期画面用のコンポーネントリソースをService Workerを用いて、キャッシュに保存します。以降の画面で該当のコンポーネントが必要になった場合は、このキャッシュが用いられるためダウンロードは発生しません。</p>

<p>また、初期画面を表示したあと、以降の画面で必要となるコンポーネントリソースをバックグラウンドで事前にダウンロードし、Service Workerを用いキャッシュとして保存します（pre cache）。したがって、これらのコンポーネントリソースについても待ち時間は発生しません。非常にレスポンス性の高いWebアプリをon-the-flyで提供することが可能となります。</p>

<h4>さらにユーザー体験を向上する lazy load</h4>

<p>最後にlazy loadです。Webアプリのリソースには優先度があります。例えば、ファーストビューには表示されない画像ファイル、初期画面のメニューコンポーネントなどは、優先度が低いリソースの典型的なものです（メニューは、ファーストビューに含まれますが、最初からは表示されてなくてもいいですよね！）。</p>

<p>これらのリソースについては、lazy-loadとして、優先度の低いものとして宣言してしまいます。こうすることで、ブラウザはこれらのリソースのダウンロード順番の優先度を下げ、ファーストビューに本当に必要なものを優先して表示することができるようになります。</p>

<h2>サンプルサイト、開発ツール</h2>

<p>PRPLを活用したサンプルサイトとして、ショッピングサイトのサンプルが公開されています。</p>

<p><a href="https://shop.polymer-project.org/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">https://shop.polymer-project.org/</a></p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/06/8.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/06/8.png" alt="SHOP" width="640" height="333" class="aligncenter size-full wp-image-19719" srcset="/wp-content/uploads/2016/06/8.png 640w, /wp-content/uploads/2016/06/8-300x156.png 300w, /wp-content/uploads/2016/06/8-207x108.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p>Chromeのdev tool、networkタブのwarter fallパターンから、PRPLの転送フローを確認することができます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/06/9.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/06/9.png" alt="SHOP - Push" width="640" height="330" class="aligncenter size-full wp-image-19720" srcset="/wp-content/uploads/2016/06/9.png 640w, /wp-content/uploads/2016/06/9-300x155.png 300w, /wp-content/uploads/2016/06/9-207x107.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p>また、開発ツール<a href="https://www.polymer-project.org/1.0/toolbox/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Polymer App Toolbox</a>ではPRPLの一端が提供されています。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/06/10.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/06/10.png" alt="Polymer App Toolbox" width="640" height="331" class="aligncenter size-full wp-image-19721" srcset="/wp-content/uploads/2016/06/10.png 640w, /wp-content/uploads/2016/06/10-300x155.png 300w, /wp-content/uploads/2016/06/10-207x107.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p></p><pre class="crayon-plain-tag">$ npm install -g polymer-cli
$ mkdir my-app; cd my-app
$ polymer init app-drawer-template
#... write code ...
$ polymer build</pre><p></p>

<p>HTTP/2対応ブラウザ、非対応ブラウザ用に、それぞれPRPLの概念に基づいた非bundle版、bundle版のjsが生成されます（こういったところに、PWAppsの概念が適用されています）。ただし、こちらの開発ツールでは、HTTP/2サーバーは提供されておらず、PRPL概念の一部を具体化したものとなっています。その点は、注意してください。</p>

<h2>PRPLは即座に利用可能か？</h2>

<p>さて、今回のGoogle I/Oで発表・提案された新たな開発・提供手法のPRPL。最新のWeb技術を活用することで、従来のWebアプリが内包する課題を解決し、モバイル環境での最高のユーザー体験提供を目指したものです。ただ、ここで気になるのが、以下の2点です。</p>

<ul>
<li>「PRPLは今すぐ、production環境に適用できるものなのか？」</li>
<li>「本当にこれまでの開発プラクティスよりも優れているのか？」</li>
</ul>

<p>この点について、（あくまで）個人的な見解を述べ、本稿を締めたいと思います。</p>

<p>まず結論から言うと、「<em>Productionでの利用は、まだ早い</em>」 というのが僕の率直な感想です。</p>

<p>その理由として、以下の点があげられます。</p>

<h4>まだHTTP/2の環境が整備されていない</h4>

<p>HTTP/2は、最近標準化が完了したばかり、実装はまだ完全には追いついていません。実際、apahceやnginxではHTTP/2の基本機能は搭載されているものの、Server pushまだ未サポートです。</p>

<p>また、これらの実装が完了したからといって、それがすぐ Productionに適用できるというものではありませんし、AmazonのELBやHerokuなどIaaS/PaaS事業者側のサポートも必要となるでしょう。WebSocketがそうであったように、サーバーサイドのエコシステムが整備されるのにはしばらく時間が必要です。</p>

<h4>まだ開発者フレンドリーではない</h4>

<p>開発ツールPolymer App Toolboxを見てみてもわかりますが、PRPLの概念はnpm + webpackのような開発者フレンドリーな開発手法とは相性が悪いです（実際、bowerが用いられています）。</p>

<p>Webアプリのコンポーネント開発において、Javascript部分が占める割合は非常に大きく、これをbowerベースで行い、いちいちHTML Importsで記述することは大変なストレスとなります。やはり、npm + webpackでストレスレスにコーディングしたい…、というのがJSエンジニアの率直な意見でしょう。</p>

<h4>cacheとの相性が悪い</h4>

<p>PRPLで用いられているHTTP/2 Server pushですが、Webのキャシュと非常に相性が悪いことが知られています。基本的に、ブラウザの状態と無関係にリソースをPushする仕組みのため、ブラウザにキャッシュがあろうがなかろうが、リソースをPushしてしまいます。</p>

<p>したがって、「初回の起動である」、「常にダイナミックに変動するリソースである」の場合を除いてHTTP/2 Server pushの効果は限定的ですし、逆に負の効果をもたらします(キャッシュがあるのであれば、リソースをPushする必要はない)。バンドルのサイズ肥大化の問題も、persistant cache制御さえちゃんとしてやれば、初回起動時およびバンドル変更時の問題だけになります。</p>

<h2>最後に</h2>

<p>最後にネガティブな意見を述べましたが、僕はPRPLの考えには基本的に賛同しています。Googleは常にWebをより良いものにするため、努力を続けている企業。その姿勢の表れであると感じています。</p>

<p>本稿で述べたPRPLの限界点は、現状のツール環境に依存するところが大きく、新たなツールが登場することでこの状況は一変することでしょう（本来、ツールは概念の一部を具現化するものであって、それをもって概念全体を評価されるべきものではありません）。</p>

<p>さまざまな概念やツールが融合し、開発者がフィードバックしていくことで、よりよい形が作り上げられていく。これまでのWeb開発の進化がそうであったように、そのような文脈の中でPRPLや、それのベースとなっているPWAppsが進化していくことでしょう。</p>
]]></content:encoded>
			</item>
		<item>
		<title>Webの最先端では何が起こっているか、今Googleが取り組んでいることは？──Google I/O 2016セッションレポート【後編】</title>
		<link>/ryoyakawai/19461/</link>
		<pubDate>Wed, 15 Jun 2016 00:00:15 +0000</pubDate>
		<dc:creator><![CDATA[河合良哉]]></dc:creator>
				<category><![CDATA[最新動向]]></category>
		<category><![CDATA[Chrome]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[I/O 2016]]></category>
		<category><![CDATA[MIDI]]></category>

		<guid isPermaLink="false">/?p=19461</guid>
		<description><![CDATA[Google I/O 2016のセッション「What&#8217;s new for the web?」についてのレポート後編です。（前編はこちら） 前編では、既に導入済みの機能、API、またこれから導入される機能が怒涛...]]></description>
				<content:encoded><![CDATA[<p>Google I/O 2016のセッション「What&#8217;s new for the web?」についてのレポート後編です。（前編は<a href="https://html5experts.jp/ryoyakawai/19335" target="_blank" data-wpel-link="internal">こちら</a>）
前編では、既に導入済みの機能、API、またこれから導入される機能が怒涛のごとく紹介してきました。後編では、Web Platformをより先に進めるためにGoogleが取り組んでいること、そしてWeb BluetoothやPhysical Webについて解説していきます。</p>

<h2>Google loves the web</h2>

<p>ChromeチームWeb Platformをより先に進めるために、ここ1～2年取り組んでいるアプローチの紹介です。</p>

<p><img src="/wp-content/uploads/2016/06/GoogleLovetheWeb1.png" alt="GoogleLovetheWeb" width="640" height="356" class="aligncenter size-full wp-image-19479" srcset="/wp-content/uploads/2016/06/GoogleLovetheWeb1.png 640w, /wp-content/uploads/2016/06/GoogleLovetheWeb1-300x167.png 300w, /wp-content/uploads/2016/06/GoogleLovetheWeb1-207x115.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<p>まず、前提としてGoogleはWebが大好きです。Googleの同僚は皆、Webが大好きです。そしてChrome Teamには「Webをより先に進める」という重要なMissonがあります。ここで私がWebと言っているのはChrome Webということではなく、全てのWebのことを指していて、それら全てのWebが素晴らしくなってほしいと思っています。</p>

<p>よって、Interoperability（相互運用性）を保ちモダンブラウザの全てにShipされるまでが我々の使命です。なぜならInteroperabilityが保たれずShipしてしまったら、誰でも・いつでも・どこでも利用できるというWebの最も大きく重要な利点の1つが失われてしまうからです。Vender Prefixを廃止したのもそういった理由です。</p>

<p>Chromeにおいては、Web Platformをより先に進めるために4つのアプローチをを持ち取り組んでいます。</p>

<h4>Chromeチームが取り組んできたこと</h4>

<ul>
<li><b>複数のチャネルを持つ</b>（Stable, Dev, Canary、Beta）</li>
<li><b>実験的な機能にはExperimental flagを設けONにしないと動かなくしている</b>(chrome://flags のことでWeb Bluetoothもこの1つ)</li>
<li><b>Original Trials</b>：実装したAPIをそのままExperimental flagとして提供してしまうと、いつの間にかデファクトになってしまう可能性があります。APIの仕様・実装を吟味してからShipすることがよりよいWebを作るのには必要不可欠です。よって、Feedbackをすることに同意したDeveloperのみ利用を可能にすることで、利用するユーザー数を絞り、さらに期間を区切ることでデファクトすることを防ぎ、実験のIterationのスピードを上げることを目的としています。さらに多くのDeveloperが使い始めた場合は自動的に利用を停止する機能も入っています。</li>
<li><b>Incubation of substantial new feature</b>(<a href="https://html5experts.jp//wicg.io" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">wicg.io</a>)：Web Incubator Community GroupをW3Cでにて行っています。標準化のProposalの議論をライトウェイトに行うグループです。チャーター（W3Cで議論を進める場合には必ず作成します）を作ったりすることに全ての時間は費やさないものの、正しく管理されるし、Contributionも受け付けることが可能です。もし新しい機能を提案したい場合は是非このグループに提案してください。</li>
</ul>

<p><img src="/wp-content/uploads/2016/06/wicg.png" alt="wicg" width="640" height="355" class="aligncenter size-full wp-image-19467" srcset="/wp-content/uploads/2016/06/wicg.png 640w, /wp-content/uploads/2016/06/wicg-300x166.png 300w, /wp-content/uploads/2016/06/wicg-207x115.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<p>しかし、機能を追加するだけではWeb Platformを健康に保つことはできません。よって、機能の削除も行います。削除の理由には、他のAPIとの入替えや、実験的に作ったが上手くいかなかった、というものがあったりします。3つ前までで削除された機能のリストがこちら(<a href="https://html5experts.jp//goo.gl/5gq1Im" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">goo.gl/5gq1Im</a>)です。今後、requestAutoCompleteだったり、HTML5 App Cacheのような影響の大きな機能も削除しようとしています。まだ使われている機能、APIをいきなり削除しないというようなポリシーもありますので安心してください。</p>

<h4>これまでの成功の紹介</h4>

<p>それでは、ここ数年での成功を紹介します。私がここに立っている、ということは何のことだか分かる方も多いかも知れませんが、そうですWeb MIDIです。</p>

<p>MIDIは知ってる方もそうでない方もいると思います。仕様ができてから30年以上にもなる楽器のキーボード、シンセサイザー等、電子楽器同士、またはコンピュータとを接続する標準化されたプロトコルです。数年前Web Audioで遊んでいたときに「これを楽器のキーボードから操作したい」と思い立ったW3Cにて標準化を始め、Chromeでは去年Shipされました。</p>

<p>ChromeでのShip以降、多くの楽器メーカがユーザー体験を提供するプラットフォームとしてWebを使い始めました。Yamahaはrefaceという新しいシンセサイザーのラインナップに対してSoundmondoという音色のエディタ、ライブラリアンを提供するWeb MIDIを使ったサービスを展開しています。NovationのCircuit Groove BoxはWebに接続して新しいサンプルをダウンロードします。これらの作業においてソフトウェアを新たにインストール必要はないのです。</p>

<p>そして、間違いなくスゴイことはフランスのEDMアーティストであるMadeonがWeb Audioで作られたRemixBoardをWebサイトで公開したことです。ファンに向けられて作られたサイトで、彼のアルバムの中の音をRemixして遊ぶことができるのです。もちろんMIDIデバイスも接続してプレイすることができるようになっているのです。<br>
（デモ（パフォーマンス？）が始まります。実際の動画を御覧ください）</p>

<p><figure class="aligncenter">
<a href="https://youtu.be/bK6Ah68jEX8?t=28m25s" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">
<img src="/wp-content/uploads/2016/06/chris_madeon.png" alt="chris_madeon" width="640" height="359" class="aligncenter size-full wp-image-19477" srcset="/wp-content/uploads/2016/06/chris_madeon.png 640w, /wp-content/uploads/2016/06/chris_madeon-300x168.png 300w, /wp-content/uploads/2016/06/chris_madeon-207x116.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a>
<figcaption>何が起きたかは<a href="https://youtu.be/bK6Ah68jEX8?t=28m25s" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">ここ</a>または画像をクリックして動画を御覧ください！</figcaption>
</figure></p>

<p>デモアプリのURLはこちら<a href="https://html5experts.jp//www.madeon.fr/adventuremachine" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">www.madeon.fr/adventuremachine</a>です。</p>

<p>「これスゴイでしょ？！」と言いたいのですが、本質はそこではなくて「ハードウェアがブラウザにアクセスできる」ということが大きな可能性を生んだ、ということを伝えたいのです。ちょうど加速度センサから素晴らしいユーザー体験（UX）が生まれ、モバイル・デバイスが大きな可能性を持ったのと同じようにです。他にも接続できることで大きな可能性が生まれるデバイスはたくさんあると思います。我々は、そこにある可能性を積極的に解き放っていきたいと考えています。</p>

<p>（ここでChris氏からFrançois氏に交代）</p>

<h2>これから何が起こるのか</h2>

<h4>Web Bluetooth</h4>

<p>Bluetoothの名称の由来の説明から始まります。（詳しくはWikipediaの<a href="https://goo.gl/s7nIAG" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">Bluetooth </a>「名称の由来」をどうぞ）
<img src="/wp-content/uploads/2016/06/bluetooth.png" alt="bluetooth" width="640" height="358" class="aligncenter size-full wp-image-19486" srcset="/wp-content/uploads/2016/06/bluetooth.png 640w, /wp-content/uploads/2016/06/bluetooth-300x168.png 300w, /wp-content/uploads/2016/06/bluetooth-207x116.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<p>Bluetoothはいろいろなバージョンで20年成長してきた技術で、最新はBluetooth Low Energy（BLE）が導入されたVersion 4でリリースされてから6年経過しています。Wi-Fi、Ethernetのスピードは継続的に上がっていますが、Bluetoothはちょっと様子が違っています。</p>

<p><img src="/wp-content/uploads/2016/06/blespeed.png" alt="blespeed" width="640" height="358" class="aligncenter size-full wp-image-19488" srcset="/wp-content/uploads/2016/06/blespeed.png 640w, /wp-content/uploads/2016/06/blespeed-300x168.png 300w, /wp-content/uploads/2016/06/blespeed-207x116.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<p>なぜなら、今まで接続されていなかった多くのデバイスに搭載できるようにバッテリの消費量を最小限にできるようにデザインされているからです。例えば小型のデバイスが使うバッテリは、通常CR2032です。（2032の20は直径、32は厚さを表すそうです！）なので、転送速度はとっても遅いのです。ですが、BLEはそもそも転送速度が遅くても大丈夫なデバイスをターゲットにしているので問題はありません。</p>

<p>それでは、デモをしてみます。デモはPlaybulb Candleという電球のOn/Off、色をBluetooth通信にて変更できるデバイスをWebアプリから操作します。（映像には全体が映っていませんでしたが、会場ではこんな感じでデモが行われていました）</p>

<p><img src="/wp-content/uploads/2016/06/playbulbcandle.jpg" alt="playbulbcandle" width="640" height="426" class="aligncenter size-full wp-image-19491" srcset="/wp-content/uploads/2016/06/playbulbcandle.jpg 640w, /wp-content/uploads/2016/06/playbulbcandle-300x200.jpg 300w, /wp-content/uploads/2016/06/playbulbcandle-207x138.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<p>Bluetooth SIG(Bluetoothの規格の策定、技術利用に対する認証を行う団体)は、これから先2年で96%の電話、タブレットにBLEが搭載されると予想している。そこからも、いろいろな場所でBLEが存在するであろうことがお分かりになると思います。</p>

<p>Web BluetoothのAPIを説明する前に、一度BLEの動作を復習してみます。Bletoothには、以下の2つの機能があります。</p>

<ul>
<li><b>Central</b>：近隣のデバイスを探索する（電話、ラップトップPCの等）</li>
<li><b>Peripheral</b>：周囲に向けて継続的に自らの情報を格納したアドバタイジング・パケットをBroadcastする。（心拍センサ、ビーコン、冷蔵庫等）</li>
</ul>

<p>PeripheralがCentralに接続（ペアリング）されると、Peripheralはアドバタイジング・パケットのBroadcastを停止し、CentralがPeriferalで動作するGATTサーバと通信を開始する。通信に関しては、デフォルトで用意されているバッテリ、心拍のようなサービスも存在していますが、もちろん独自にサービスを作ることも可能になっています。それぞれのサービスにはそれぞれのCharastristicに属性を持っていて、読込み（バッテリーレベルの取得等）、書込み（設定の変更等）、また更新時に通知（心拍数のリアルタイム監視）してもらうことも可能です。Web Bluetooth APIを使って書いたサンプルを説明していきます。</p>

<h4>値の読込み</h4>

<p><img src="/wp-content/uploads/2016/06/bluetooth_getValue.png" alt="bluetooth_getValue" width="640" height="358" class="aligncenter size-full wp-image-19498" srcset="/wp-content/uploads/2016/06/bluetooth_getValue.png 640w, /wp-content/uploads/2016/06/bluetooth_getValue-300x168.png 300w, /wp-content/uploads/2016/06/bluetooth_getValue-207x116.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<p>コードはラップトップがCentral、何かしらのデバイスがPeripheralとなっていることを想定しています。まず、Centralのラップトップがnavigator.bluetooth.requestDevice(option)をCallして近隣のデバイスを探索します。optionにデバイスが山ほど列挙されないためにどの種類でフィルタするかを記述します。コードではバッテリのサービスは標準化されているので「batttery_service」と文字列で指定していますが、アドバタイジングパケットにはカスタマイズした値も書込むことが可能です。</p>

<p>navigator.bluetooth.requestDevice(option)をCallすることで探索が開始され、それと同時にアドレスバーの直下に該当するデバイスを列挙するポップアップが出てきます。ユーザがリストからデバイスを選択すると、JavaScript側ではそのデバイスのデバイス名、利用可能なサービスが格納されているオブジェクトにアクセスが可能になります。</p>

<p>ここでセキュリティに関する注意点。<br>
navigator.bluetooth.requestDevice(option)はユーザのインタラクションにて初めて動作します。デモではボタンクリックで開始していました。Localhost以外のホストでWeb Bluetoothを使う場合は、HTTPSでコンテンツがServeされたことを要求している。</p>

<p>device.get.connect()をCallしてGATTサーバと接続をします。その後に、server.getPrimaryService(&#8216;battery_service&#8217;)でバッテリサービスを取得、service.getCharacteristic(&#8216;battery_level&#8217;)で読込みたいCharacteristicを指定して取得、最後にcharacteristic.getValue()をCallすることで、バッテリのレベルの読込み（取得）をすることができます。</p>

<h4>値の書込み</h4>

<p><img src="/wp-content/uploads/2016/06/bluetoothapi_lookslike.png" alt="bluetoothapi_lookslike" width="640" height="360" class="aligncenter size-full wp-image-19496" srcset="/wp-content/uploads/2016/06/bluetoothapi_lookslike.png 640w, /wp-content/uploads/2016/06/bluetoothapi_lookslike-300x169.png 300w, /wp-content/uploads/2016/06/bluetoothapi_lookslike-207x116.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<p>先ほどとは違い、心拍センサをPeripheralとしています。その他、ハイライトされた部分が違います。charctristic.writeValue()にUint8Arrayにて、1バイトを引数に渡すことで書込みを行っています。</p>

<h4>更新の受取り</h4>

<p><img src="/wp-content/uploads/2016/06/bluetooth_notify.png" alt="bluetooth_notify" width="640" height="359" class="aligncenter size-full wp-image-19499" srcset="/wp-content/uploads/2016/06/bluetooth_notify.png 640w, /wp-content/uploads/2016/06/bluetooth_notify-300x168.png 300w, /wp-content/uploads/2016/06/bluetooth_notify-207x116.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<p>この例でも、心拍センサをPeripheralとしています。この例でも、ハイライトされた部分が違います。characteristicにcharacteristicvaluechangedのイベント名でEventハンドラを設定し、beepという関数をCallbackとして指定しています。characteristic.startNotifications()で、更新の受け取りを開始します。これで、更新がある度にbeepが実行されます。</p>

<p>続いて、心拍センサを動作させるデモです。私（François氏）は心拍センサをつけています。リアルタイムに値を受け取ることができますので、ちょっと見てみましょう。通常私の心拍数は60-80ですが、今はどうでしょう？</p>

<p><img src="/wp-content/uploads/2016/06/francis_heartrate.png" alt="francis_heartrate" width="640" height="361" class="aligncenter size-full wp-image-19504" srcset="/wp-content/uploads/2016/06/francis_heartrate.png 640w, /wp-content/uploads/2016/06/francis_heartrate-300x169.png 300w, /wp-content/uploads/2016/06/francis_heartrate-207x117.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<p>（普段の倍近くの心拍数が表示されChris氏も会場も爆笑）<br>
次に実際にリアルタイムに心拍数を受け取っていることを証明するために腕立て伏せをしてみます。（前編の最後に掲載さいた画像はここでの1シーンです）<br>（が、ペアリングが切断されたのか動作せず……そして、今度はChris氏も会場も大爆笑！失敗するということは、デモがリアルタイムに行われている証拠です！）</p>

<p>私以外にも、Web Bluetoothで遊んでいる同僚たちもいます。</p>

<p><figure class="aligncenter">
<img src="/wp-content/uploads/2016/06/bletoy00.png" alt="bletoy00" width="640" height="361" class="aligncenter size-full wp-image-19505" srcset="/wp-content/uploads/2016/06/bletoy00.png 640w, /wp-content/uploads/2016/06/bletoy00-300x169.png 300w, /wp-content/uploads/2016/06/bletoy00-207x117.png 207w" sizes="(max-width: 640px) 100vw, 640px" />
<figcaption>Web Bluetoothでラジコンカーをコントロール</figcaption>
</figure></p>

<p><figure class="aligncenter">
<img src="/wp-content/uploads/2016/06/bletoy01.png" alt="bletoy01" width="640" height="359" class="aligncenter size-full wp-image-19506" srcset="/wp-content/uploads/2016/06/bletoy01.png 640w, /wp-content/uploads/2016/06/bletoy01-300x168.png 300w, /wp-content/uploads/2016/06/bletoy01-207x116.png 207w" sizes="(max-width: 640px) 100vw, 640px" />
<figcaption>Web Bluetoothでプリンタをコントロール</figcaption>
</figure></p>

<p><figure class="aligncenter">
<img src="/wp-content/uploads/2016/06/bletoy02.png" alt="bletoy02" width="640" height="359" class="aligncenter size-full wp-image-19507" srcset="/wp-content/uploads/2016/06/bletoy02.png 640w, /wp-content/uploads/2016/06/bletoy02-300x168.png 300w, /wp-content/uploads/2016/06/bletoy02-207x116.png 207w" sizes="(max-width: 640px) 100vw, 640px" />
<figcaption>Web BluetoothでBB-8をコントロール</figcaption>
</figure></p>

<p><figure class="aligncenter">
<img src="/wp-content/uploads/2016/06/bletoy03.png" alt="bletoy03" width="640" height="359" class="aligncenter size-full wp-image-19508" srcset="/wp-content/uploads/2016/06/bletoy03.png 640w, /wp-content/uploads/2016/06/bletoy03-300x168.png 300w, /wp-content/uploads/2016/06/bletoy03-207x116.png 207w" sizes="(max-width: 640px) 100vw, 640px" />
<figcaption>Web BluetoothでLEDをコントロール</figcaption>
</figure></p>

<p><figure class="aligncenter">
<img src="/wp-content/uploads/2016/06/Screen-Shot-2016-06-05-at-1.20.56-AM.png" alt="Screen Shot 2016-06-05 at 1.20.56 AM" width="640" height="359" class="aligncenter size-full wp-image-19509" srcset="/wp-content/uploads/2016/06/Screen-Shot-2016-06-05-at-1.20.56-AM.png 640w, /wp-content/uploads/2016/06/Screen-Shot-2016-06-05-at-1.20.56-AM-300x168.png 300w, /wp-content/uploads/2016/06/Screen-Shot-2016-06-05-at-1.20.56-AM-207x116.png 207w" sizes="(max-width: 640px) 100vw, 640px" />
<figcaption>Web Bluetoothで空飛ぶ猫をコントロール</figcaption>
</figure></p>

<p>Bluetoothのパケット通信の中身を見るときはAndroidを使うのが最も簡単な方法です。AndroidのDeveloper Optionにある「Bluetooth HCI snoop log」を有効にしてください。（詳しくは<a href="http://wifimanager.hateblo.jp/entry/2016/06/02/204600" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">この辺り</a>を参照してみてください）</p>

<p><img src="/wp-content/uploads/2016/06/support_browser.png" alt="support_browser" width="640" height="358" class="aligncenter size-full wp-image-19511" srcset="/wp-content/uploads/2016/06/support_browser.png 640w, /wp-content/uploads/2016/06/support_browser-300x168.png 300w, /wp-content/uploads/2016/06/support_browser-207x116.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<p>現在Web BluetoothをサポートしているブラウザはOperaとChromeOS、マシュマロ上で動作しているChrome for Android、Chrome for LinuxでChromeでは chrome://flags/#enable-web-bluetooth （アドレスバーにコピー＆ペーストしてください）を有効にすることで利用することが可能です。Mac、WindowsのChromeへは現在実装中です。</p>

<p>開発の助けになるであろう以下の2つを紹介します。</p>

<ul>
<li>Get Start with Web Bluetooth (<a href="https://html5experts.jp//goo.gl/MLKzj2" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">goo.gl/MLKzj2</a>)：コードジェネレータ</li>
<li>Web Bluetooth Developer Studio Plugin (<a href="https://html5experts.jp//goo.gl/c2ype5" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">goo.gl/c2ype5</a>)：Bluetooth SIGが提供している<a href="https://www.bluetooth.com/~/media/developer-studio/index" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">Bluetooth Developer Studio</a>向けのPlug-in</li>
</ul>

<p>WebアプリからでもNativeアプリと同じように、Bluetoothでデバイスを操作できるようになりました。また、Webアプリですので、URLをシェアすることで、誰でもスグにアプリを利用できるようになります。当たり前のことかもしれませんが、これがWeb Platformの大きな強みです。</p>

<h4>Physical Webとの連携</h4>

<p>URLを載せたBluetoothのパケットをビーコンからブロードキャストするPhysical Webですが、これがもしBluetoothのアプリからブロードキャストできたらどうでしょう？</p>

<p>URLをPhysical Web経由で受け取り、そのURLにアクセスするとBluetoothデバイスをコントロールするアプリが表示され、Bluetoothデバイスとのペアリングが完了したら、その直後からBluetoothの利用が可能になりますよね。今までのアプリを検索してインストールする等の作業が一切必要がなくなり、通知エリア(Notification Area)に通知されたURLにアクセスするだけでペアリングも含め、Bluetoothデバイスを利用する準備が整うことになります。</p>

<p>今後、Web BluetoothはPhysical Webの機能を組み込み、前述の動作を一気通貫でJavaScriptで実装できるような機能を追加する予定です。</p>

<p>Codelabも<a href="https://codelabs.developers.google.com/codelabs/candle-bluetooth/index.html" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">Control a PLAYBULB candle with Web Bluetooth</a>と<a href="https://codelabs.developers.google.com/codelabs/polymer-bluetooth/index.html" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">Interactive with Bluetooth devices on the web with Polymer</a>もありますので、是非挑戦してみてください。</p>

<p>（再びChris氏）</p>

<h4>Web USB</h4>

<p>Web USBは現存する全てのUSBデバイスに接続しようと考えているわけではなくて、Firmwareへのアクセスを許可されているような新しい種類のデバイスに適用されます。</p>

<h2>まとめ</h2>

<p>ここではカバーしきれなかった、まだまだ多くの以下の様な機能が進行中です。</p>

<p><img src="/wp-content/uploads/2016/06/note_covered.png" alt="note_covered" width="640" height="358" class="aligncenter size-full wp-image-19515" srcset="/wp-content/uploads/2016/06/note_covered.png 640w, /wp-content/uploads/2016/06/note_covered-300x168.png 300w, /wp-content/uploads/2016/06/note_covered-207x116.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></p>

<p>さらに、まだデザインも始めていないPersistent Storageとか、Web Intents v2もあります。</p>

<p>そろそろ時間です。我々がWeb Platformの未来にワクワクしているのと同じくらいに、皆さんもワクワクしていることを期待しています。</p>

<p><a href="https://html5experts.jp//developers.google.com/web/updates/" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">developers.google.com/web/updates/</a> にさらなる情報がありますので、お時間がありましたらご覧ください。</p>

<p>（というところで、セッションは終了しました）</p>

<p><figure class="aligncenter">
<img src="/wp-content/uploads/2016/06/IMG_34891.jpg" alt="IMG_3489" width="640" height="443" class="aligncenter size-full wp-image-19360" srcset="/wp-content/uploads/2016/06/IMG_34891.jpg 640w, /wp-content/uploads/2016/06/IMG_34891-300x208.jpg 300w, /wp-content/uploads/2016/06/IMG_34891-207x143.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" />
<figcaption>セッション終了後の素敵な笑みを浮かべるChris氏とガッツポーズのFrançois氏</figcaption>
</figure></p>

<p>ありがとうございました＆お疲れ様でしたっ！！！</p>
]]></content:encoded>
			</item>
	</channel>
</rss>
