<?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>岩瀬 義昌 &#8211; HTML5Experts.jp</title>
	<atom:link href="/iwase/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>サイマルキャストはWebRTCになぜ必要なのか？W3C TPACで交わされたもっとも重要な議論を解説する</title>
		<link>/iwase/17582/</link>
		<pubDate>Mon, 30 Nov 2015 00:00:32 +0000</pubDate>
		<dc:creator><![CDATA[岩瀬 義昌]]></dc:creator>
				<category><![CDATA[最新動向]]></category>
		<category><![CDATA[TPAC2015]]></category>
		<category><![CDATA[W3C]]></category>
		<category><![CDATA[WebRTC]]></category>

		<guid isPermaLink="false">/?p=17582</guid>
		<description><![CDATA[2015年10月26日から30日にかけて、札幌で「TPAC2015」が開催されました。本記事はその中でも、29日と30日に開催されたWebRTCワーキンググループの議論をレポートします。 TPACとは? TPACとは、W...]]></description>
				<content:encoded><![CDATA[<p>2015年10月26日から30日にかけて、札幌で「TPAC2015」が開催されました。本記事はその中でも、29日と30日に開催されたWebRTCワーキンググループの議論をレポートします。</p>

<h2>TPACとは?</h2>

<p>TPACとは、Webの標準化団体であるW3C(World Wide Web Consortium)が開催する1週間のイベントのことです。様々な国、様々な企業からメンバーが集まり、現在のWeb標準・将来的なWebの機能(例えば、cryptoやaudio)について議論します。今回は、札幌開催であり主要なWebRTC仕様策定者が一同に日本に集結しました。</p>

<div id="attachment_17586" style="width: 650px" class="wp-caption alignnone"><a href="https://html5experts.jp/wp-content/uploads/2015/11/tpac.jpg" data-wpel-link="internal"><img src="/wp-content/uploads/2015/11/tpac.jpg" alt="pic of tpac 2015" width="640" height="360" class="size-full wp-image-17586" srcset="/wp-content/uploads/2015/11/tpac.jpg 640w, /wp-content/uploads/2015/11/tpac-300x169.jpg 300w, /wp-content/uploads/2015/11/tpac-207x116.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></a><p class="wp-caption-text">tpac 2015</p></div>

<h2>最大の議論の焦点となったサイマルキャスト</h2>

<p>WebRTCのW3C側の仕様は、まだCR(勧告候補)になっていませんが、ORTCの議論に後押しされるかたちで、既に次世代の仕様である、WebRTC-NVの議論がはじまっています。今回のTPACではWebRTC 1.0(WebRTC-NVに対して、年内に切り上げる予定のWebRTCのバージョンを1.0としている)に対して、最終的にどの仕様を盛り込むのか、が1つの争点となりました。その中でも特に議論が盛り上がったのがサイマルキャスト(Simulcast)です。TPACで展開されたサイマルキャストの議論を理解するためには、先にサイマルキャストそのものを理解する必要があります。そこで、以下でサイマルキャストとは何か、なぜ必要なのか、を簡単に説明したのち、TPACの議論を紹介します。</p>

<h3>サイマルキャストとは？</h3>

<p>放送業界の用語として、サイマルキャストという用語をお聞きになった方もいるかもしれませんが、WebRTCの文脈で用いられるサイマルキャストは意味合いが異なります。WebRTCで利用するサイマルキャストを一言で表現すると、「送受信側が1つの動画を、異なる品質でエンコードしたストリームを送受信すること」となります。少しわかりにくいので、以下でさらに具体的な例を利用して説明します。</p>

<h3>サイマルキャストがなぜ必要なのか？</h3>

<p>WebRTCの弱点として挙げられる点として、「多人数会議の実現」があります。P2P通信のみで多人数会議を実現すると、ネットワークトポロジはフルメッシュ形式となり、端末の能力・帯域に限界が来てしまい、接続数がスケールしません。それを解決するための案として、何らかのサーバを利用するスター型トポロジを利用する案があります。サーバには大きく分けて、サーバ側で音声映像を結合するMCU、音声映像を結合せずに分配するSFUがあります。（MCU/SFUの詳細は、過去記事の<a href="https://html5experts.jp/iwase/12585/" data-wpel-link="internal">WebRTCにおけるサーバーソリューションの決め手とは？</a>を参照ください）</p>

<p>SFUを利用した場合、受信側デバイスの処理能力・帯域が豊富にあれば良いのですが、モバイル端末の場合は常に得られるとは限りません。そこで、登場するのがサイマルキャストという概念です。</p>

<div id="attachment_17585" style="width: 650px" class="wp-caption alignnone"><a href="https://html5experts.jp/wp-content/uploads/2015/11/simulcast.png" data-wpel-link="internal"><img src="/wp-content/uploads/2015/11/simulcast.png" alt="the picture of simulcast" width="640" height="480" class="size-full wp-image-17585" srcset="/wp-content/uploads/2015/11/simulcast.png 640w, /wp-content/uploads/2015/11/simulcast-300x225.png 300w, /wp-content/uploads/2015/11/simulcast-207x155.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a><p class="wp-caption-text">simulcast</p></div>

<p>サイマルキャストでは、上図のように送信側が複数の音声・映像ストリームを受信側に送ります。複数のストリームとは例えば、高解像度の映像と低解像度の映像といったストリームを示します。複数ストリームを受け取ったSFUは、受信側の能力に応じて、適切なストリームを分配します。処理能力・帯域に余裕のある受信側クライアントは、高品質のストリームを受信し、余裕のない受信側クライアントは、低品質のストリームを受けとります。その結果、受信側は自身の能力にあったストリームを受信できることになります。</p>

<p>以上が、サイマルキャストの前提知識となります。以降、TPACの議論内容・要点をまとめます。TPACで議論のベースとして用いられた資料は<a href="https://www.w3.org/2011/04/webrtc/wiki/images/e/e3/Simulcast_at_TPAC_2015.pdf" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">こちら</a>です。</p>

<h3>サイマルキャストを実現するために必要な機能</h3>

<p>サイマルキャストを実現するためには、送信側のAPI(JavaScript)でまず、2つ以上のエンコードがあることを明示しなければなりません。具体的なコードサンプルは以下となります：</p>

<p></p><pre class="crayon-plain-tag">var sender = pc.addTransceiver({sendEncodings: [
 {rid: “F”},
 {rid: “H”, scaleResolutionDownBy: 2},
 {rid: “Q”, scaleResolutionDownBy: 4}
]).sender;

// 補足：Transceiverという名前も新規に登場しています。
// 本記事では、詳細に説明いたしませんが、簡単に言えばRTPSenderとRTPReceiverを管理する親のオブジェクトとなります。</pre><p></p>

<p>sendEncodingsの値として、rid(暫定的な名前なため、ridという名前自体は変わる可能性があります。詳細は<a href="https://tools.ietf.org/html/draft-pthatcher-mmusic-rid-02#section-12" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">ridが規定されるRFC</a>を参照ください)を利用して、複数ストリームを設定しています。ridの値である&#8221;F&#8221;/&#8221;H&#8221;/&#8221;Q&#8221;は単なる識別子であり、この値はブラウザが選択するのか、それともJavaScriptで設定するのか、について議論がありましたが、最終的にJavaScript側で設定する方向で議論が進みました。</p>

<p>また、scaleResolutionDownbyの値によって、送信ストリームの品質を分けています。scaleResolutionDownByはconstraints(制約)と設定する一例に過ぎず、ここで設定する値についても議論がありました。具体的にはフレームレート、最大ビットレート等で十分なのでは、といった意見が出ていました。</p>

<h3>SDPによるネゴシエーション？</h3>

<p>従来のWebRTCでは、送受信側でコーデックなどのパラメータを、SDPを利用したシグナリングによってネゴシエーションします。ridを利用したサイマルキャストについても、自然に考えれば、同様にSDPを利用したシグナリングになります。しかし、1点問題があります。SDPで規定される内容は、W3Cで規定する仕様ではなく、IETFのMMUSIC WGで規定であるため、仕様策定に非常に時間がかかるのです。(MMUSICの仕様策定には、これまでの歴史から時間がかかるケースが多いため)</p>

<p>そこで、TPACでは</p>

<ul>
<li>MMUSIC WGで、サイマルキャスト向けの仕様策定が上手くいった場合</li>
<li>MMUSIC WGで、サイマルキャスト向けの仕様策定が上手くいかなかった場合</li>
</ul>

<p>の2点を同時に考慮する議論が進みました。具体的な方針は以下の通りです。</p>

<h3>MMUSIC WGの仕様策定が上手くいった場合</h3>

<p>SDPでsimulcast向けのパラメータを記載します。たとえば、以下のようになります。</p>

<p></p><pre class="crayon-plain-tag">// クライアント側のSDP
a=rid:F send
a=rid:H send
a=rid:Q send
a=simulcast rid:F,H,Q

// サーバ側のSDP
a=rid:F recv
a=rid:H recv
a=simulcast rid:F,H</pre><p></p>

<p>上記でネゴシエーションされたRIDをRTP/RTCPの拡張ヘッダの値として規定して、クライアント(例：ブラウザ)とサーバ間(例：SFU)でメディアを送受信する動作になります。</p>

<p>メディアの送受信方法には、いくつか案があり、TPACより前に議論の候補として挙げられていたのは、<a href="https://tools.ietf.org/html/draft-pthatcher-MMUSIC-rid-02" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">RTPのヘッダに載っているPT(Payload Type)の値を利用して、ストリームを識別する案</a>でした。しかし、その案にはペイロード番号を使いきってしまうなどの懸念(この懸念は<a href="https://www.ietf.org/proceedings/94/slides/slides-94-avtext-0.pdf" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">IETFのAVTEXT WG</a>で説明がされています)があったため、RIDをRTP/RTCPヘッダ拡張として設定する案で議論が進んでいます。</p>

<h3>MMUSIC WGの仕様策定が上手くいかなかった場合</h3>

<p>SDPに対する変更は加えられないため、別の方法が必要になります。具体的な方法は、アプリケーション開発者に委譲されており、開発者が任意の手段でSDP以外の方法でシグナリングすることになります。柔軟なシグナリングを必要としなければ、開発者がパラメータを事前に設定しておいて、不要なシグナリングを減らすような案も考えられます。</p>

<h3>どちらの場合でも発生される懸念</h3>

<p>サイマルキャスト向けのJavaScriptAPIが利用できるようになると、送信側のブラウザが複数品質のメディアストリームを送れるようになります。その際、受信側はSFUではなく、ブラウザであるケースももちろんあります。その場合、「ブラウザは受信すべきか？どう振る舞うべきか？」といった議論もありました。この振舞いの仕様自体は、WebRTC 1.0のスコープ外であり、ブラウザにおけるSimucastの受信は定義されていません。仮にブラウザが受け取ったとしても、ブラウザは単に別のストリームとして扱えばいいのではないか、といった意見が上がっていました。</p>

<h3>その他サイマルキャストの仕様策定における重要な考え方</h3>

<p>TPACで重要な点として述べられていたのは、「MMUSICの仕様策定が上手くいかなかっとしても、ネットワーク経路上を飛び交うメディア(RTP/RTCP)については変更を加えない」ようにするという点です。シグナリングは比較的に容易にpolyfillができるので、MMUSICが間に合わなくても、MMUSICの仕様策定が終わり、最終的に整合がとれれば良いという考え方です。</p>

<h2>サイマルキャスト以外のトピック</h2>

<p>以下で簡単にサイマルキャスト以外のトピックを2つほど紹介します。</p>

<h3>IPリーク問題</h3>

<p>WebRTCは、P2Pで通信する際にICE(<a href="https://tools.ietf.org/html/rfc5245" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">RFC5245 Interactive Connectivity Establishment</a>)という技術を活用します。ICEの内部動作としては、可能な限り接続可能性を高めるために、少しでも通信相手と接続できる可能性がある候補を全て収集します。たとえば、プライベートIP、プライベートIPからインターネットへ出ていく際に変換されるNAT後のグローバルIP、などがその候補に該当します。</p>

<p>接続可能性を向上させる、という意味では正常な動作なのですが、全てのIPアドレスを収集するといったその動作の特性上、ユーザのIPが外部に漏れる懸念があります。実際にNY TimesがIP収集に利用していたといった<a href="https://webrtchacks.com/dear-ny-times/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">実例</a>もあります。結果として、同じNAT配下にいるメンバが外部に漏れてしまう、ネットワークトポロジが外部に漏れてしまう、複数のアドレスが同じであることを利用して個人特定に利用される、VPN/Proxyで隠されるべきアドレスが露出してしまうといった懸念があります。これがWebRTC界隈で話題にあがっているIPリーク問題です。</p>

<p>TPACでは、IPリーク問題に対する対応策として<a href="https://www.w3.org/2011/04/webrtc/wiki/images/4/4d/WebRTC_IP_Address_Privacy_TPAC_2015.pdf" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">この資料</a>をベースに議論が実施されました。</p>

<p>結論のみ述べると、以下の4種類のどれかの振舞いをすることで問題を解決します。</p>

<ol>
<li>全ての候補を収集する(ただし、getUserMediaの同意があるときのみ)</li>
<li>制限付き収集その１(ローカルはデフォルトの候補のみと、<a href="https://www.nic.ad.jp/ja/translation/rfc/1918.html" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">RFC1918</a>で規定されるアドレスの候補を集める。これがデフォルトの動作になる)</li>
<li>制限付き収集その２(ローカルの候補は無し。ただしpreferenceやextensionで設定が必要)</li>
<li>プロキシのみ(preferenceやextensionで設定が必要)</li>
</ol>

<p>上記の[2]においては、どの程度のアドレスを集めるのか、選択肢が2つあります。選択肢の1つ目はデフォルトのホスト候補のみ、もう1つの選択肢はRFC1918の全ての候補を集めるといったものです。結論は、実際に計測実験を実施して、接続確率がどの程度低下してしまうのか、たしかめてから最終的な動作を決定する、といった結論になりました。</p>

<h3>RtpTransceiver</h3>

<p>新たにRtpSenderとRtpReceiverをまとめ、SDPのm=セクションをモデル化したオブジェクトとして、RtpTranceiverが追加されています。アプリケーション開発者はRtpTranceiverを利用することで、メディアストリームトラックの行き先を柔軟にコントロールできるようになります。</p>

<p>TPACではRtpTransceiverに関する議論がいくつかあり、例えばこれまでのWebRTCでa=recvonlyを設定するために利用していたOfferToReceiveオプションは、Tranceiver側でも制御できるようになるため削除する、などが議論に上がりました。</p>

<hr />

<h2>最後に</h2>

<p>ここまで、TPAC WebRTC WGでの議論となった課題の背景、議論内容を紹介してきました。2日間の議論であったため、全てを本記事で紹介できたわけではありません。さらに興味のある方は、以下のアジェンダ・議事録をご覧ください。</p>

<ul>
<li><a href="https://www.w3.org/2011/04/webrtc/wiki/October_29_-_30_2015#Thursday_October_29" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">アジェンダ</a></li>
<li><a href="http://www.w3.org/2015/10/28-webrtc-minutes.html" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">WebRTC WG 1日目議事録</a></li>
<li><a href="http://www.w3.org/2015/10/29-webrtc-minutes.html" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">WebRTC WG 2日目議事録</a></li>
</ul>
]]></content:encoded>
			</item>
		<item>
		<title>SkyWay音声認識機能を使ってみよう！</title>
		<link>/iwase/16439/</link>
		<pubDate>Wed, 26 Aug 2015 00:00:22 +0000</pubDate>
		<dc:creator><![CDATA[岩瀬 義昌]]></dc:creator>
				<category><![CDATA[最新動向]]></category>
		<category><![CDATA[プログラミング]]></category>
		<category><![CDATA[SkyWay]]></category>
		<category><![CDATA[WebRTC]]></category>
		<category><![CDATA[Webアプリ]]></category>

		<guid isPermaLink="false">/?p=16439</guid>
		<description><![CDATA[連載： WebRTCプラットフォーム ”SkyWay” 入門 (3)連載3回目の今回は、SkyWayの付加機能としてリリースされているSkyWay音声認識機能の利用方法についてお届けいたします。SkyWay音声認識機能と...]]></description>
				<content:encoded><![CDATA[<div class="seriesmeta">連載： <a href="https://html5experts.jp/series/skyway-tutorial/" class="series-314" title="WebRTCプラットフォーム ”SkyWay” 入門" data-wpel-link="internal">WebRTCプラットフォーム ”SkyWay” 入門</a> (3)</div><p>連載3回目の今回は、SkyWayの付加機能としてリリースされているSkyWay音声認識機能の利用方法についてお届けいたします。SkyWay音声認識機能とは、クライアント（ブラウザ側）でマイク等を通じて入力した自由発話音声を、サーバ（SkyWay側）と連携して、文字列として受け取る機能のことです。いますぐ試してみたい方は、<a href="https://nttcom.github.io/SkyWay-SpeechRec/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">デモサイト</a>から試用可能です。(注：WebSocketが疎通する環境でないと、正常に動作しません)</p>

<p>同様の機能を実現するAPIとして、Speech Recognition APIがありますが、<a href="http://caniuse.com/#feat=speech-recognition" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">caniuse.com</a>でも示されるように対応するブラウザが限定されています。SkyWay音声認識機能では、標準では対応していないFirefox等のブラウザも対応可能です。</p>

<h2>準備</h2>

<p>以降で記載するサンプルコードの中で、SkyWayが提供しているAPIキーが必要となります。実際にお手元で試される場合は、<a href="http://nttcom.github.io/skyway/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">SkyWay公式サイト</a>から開発者登録を行ってください。本記事のサンプルで利用するには、利用可能ドメインに「localhost」と書いた、APIキーを取得する必要があります。</p>

<h2>今回作成するサンプル</h2>

<p>作成するサンプルは、「音声認識を開始するボタン」と「認識結果を表示するエリア」の2要素のみで構成するシンプルな音声認識アプリケーションです。</p>

<p>スクリーンショットはこちらです。</p>

<div id="attachment_16440" style="width: 583px" class="wp-caption alignnone"><a href="https://html5experts.jp/wp-content/uploads/2015/08/Screen-Shot-2015-08-11-at-11.40.08.png" data-wpel-link="internal"><img src="/wp-content/uploads/2015/08/Screen-Shot-2015-08-11-at-11.40.08.png" alt="SkyWay音声認識スクリーンショット" width="573" height="212" class="size-full wp-image-16440" srcset="/wp-content/uploads/2015/08/Screen-Shot-2015-08-11-at-11.40.08.png 573w, /wp-content/uploads/2015/08/Screen-Shot-2015-08-11-at-11.40.08-300x111.png 300w, /wp-content/uploads/2015/08/Screen-Shot-2015-08-11-at-11.40.08-207x77.png 207w" sizes="(max-width: 573px) 100vw, 573px" /></a><p class="wp-caption-text">SkyWay音声認識スクリーンショット</p></div>

<p>こちらを構成しているサンプルコードは以下の通りです。</p>

<p></p><pre class="crayon-plain-tag">&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
	&lt;title&gt;SkyWay Speech Recognition Sample&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;!-- 音声認識開始用のボタン、および結果表示用のエリア --&gt;
&lt;button id="start_rec"&gt;start&lt;/button&gt;
&lt;div id="result"&gt;&lt;/div&gt;

&lt;!-- 必要なライブラリ群の読み込み  --&gt;
&lt;script src="https://code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
&lt;script src="https://skyway.io/dist/msgpack.codec.js"&gt;&lt;/script&gt;
&lt;script src="https://skyway.io/dist/libspeexdsp.js"&gt;&lt;/script&gt;
&lt;script src="https://skyway.io/dist/resampler.min.js"&gt;&lt;/script&gt;
&lt;script src="https://skyway.io/dist/speechrec.min.js"&gt;&lt;/script&gt;

&lt;!-- 音声認識用のコードサンプル --&gt;
&lt;script&gt;
SpeechRec.config({
   'SkyWayKey':'3969c30a-2789-4e46-9155-79a188256633',
   'OpusWorkerUrl':'libopus.worker.js'
});

$("#start_rec").click(function(){
	SpeechRec.start();
	console.log("音声認識を開始します");
});

SpeechRec.on_proc(function(info){
	console.log(info.volume);
});

SpeechRec.on_result(function(result){
    console.log(result.candidates);
    $("#result").text(result.candidates[0].speech);
});
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;</pre><p></p>

<p>上記HTMLを任意の名前で保存してください。本記事ではsample.htmlという名前で保存します。また、htmlを格納するディレクトリと同じ階層に</p>

<ul>
<li><a href="https://skyway.io/dist/libopus.js" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">libopus.js</a></li>
<li><a href="https://skyway.io/dist/libopus.worker.js" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">libopus.worker.js</a></li>
</ul>

<p>の2ファイルを保存して置いてください。音声認識に必要なライブラリとなります。　</p>

<h2>動かしてみよう</h2>

<p>既にApacheやNginxをインストールされている場合はそちらも活用できますが、今回はpythonからシンプルなWebサーバを起動してみます。コマンドは<code>python -m SimpleHTTPServer</code>です。</p>

<p>localhostの8000番でWebサーバが起動するので、<code>http://localhost:8000/sample.html</code>へ、Chrome/Firefox/Operaのいずれかでアクセスしてみましょう。画面が表示されたら、「start」ボタンをクリックすると、マイク使用許可確認のポップアップが表示されますので、Allow/許可を押下します。その後に自由に発話して、適当なタイミングで発話をやめてください。音声認識結果が上手くいくと、数秒以内に音声認識結果の文字列が表示されます。</p>

<h2>コードのポイント解説</h2>

<p>SkyWay音声認識機能を利用するためには、大きく分けて2つの処理が必要になります。</p>

<h3>1. コンフィグの設定・コールバックの設定</h3>

<p>まず<code>SpeechRec.config</code>関数を利用して、SkyWayKeyおよびlibopus.worker.jsへのパスを設定します。サンプルでは、以下のようにconfigを設定しています。</p>

<p></p><pre class="crayon-plain-tag">SpeechRec.config({
   'SkyWayKey':'3969c30a-2789-4e46-9155-79a188256633',
   'OpusWorkerUrl':'libopus.worker.js'
});</pre><p></p>

<p><code>SpeechRec.config</code>には、その他のパラメータも設定可能であり、<a href="https://github.com/nttcom/SkyWay-SpeechRec/blob/gh-pages/README.md#speechrecconfig" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">ドキュメント</a>から確認できます。</p>

<p>次に各種コールバックの設定をします。サンプルでは2種類のコールバックを設定しています。</p>

<p></p><pre class="crayon-plain-tag">SpeechRec.on_proc(function(info){
	console.log(info.volume);
});

SpeechRec.on_result(function(result){
    console.log(result.candidates);
    $("#result").text(result.candidates[0].speech);
});</pre><p></p>

<p>1つ目の<code>on_proc</code>は、発話時の音声ボリュームを取得できた場合に発火するコールバック関数です。サンプルでは、コンソール画面に音量を表示するようにしています。</p>

<p>2つ目の<code>on_result</code>は、音声認識結果を取得できた場合に発火するコールバック関数です。サンプルでは、結果をコンソール画面に表示する処理、および<code>#result</code>で指定されるdivエリアに、音声認識結果を書き込む処理をしています。</p>

<p>サンプルでは分かりやすいように、コールバックを2つのみしか設定していませんが、実際にはさらに多くのコールバックを設定可能です。詳細は<a href="https://github.com/nttcom/SkyWay-SpeechRec/blob/gh-pages/README.md#コールバック関数一覧" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">コールバック関数一覧</a>をご確認ください。</p>

<h3>2. 開始・停止の実行</h3>

<p>コンフィグおよびコールバックの設定が完了したら、実際に音声認識を開始・停止するための関数を呼び出します。サンプルでは、<code>#start_rec</code>ボタンがクリックされた際に呼び出す<code>SpeechRec.start</code>が、音声認識を開始するための処理に該当します。</p>

<p></p><pre class="crayon-plain-tag">$("#start_rec").click(function(){
	SpeechRec.start();
	console.log("音声認識を開始します");
});</pre><p></p>

<p>なお、開始だけではなく任意のタイミングで音声認識を終了させる<code>SpeechRec.stop</code>等もあります(サンプルでは省略)。その他の関数は<a href="https://github.com/nttcom/SkyWay-SpeechRec#音声認識制御用関数の一覧" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">ドキュメント</a>から確認いただけます。</p>

<h2>おわりに</h2>

<p>いかがでしたでしょうか。今回はSkyWayの付加機能である、音声認識機能について解説いたしました。</p>

<p>次回は画面共有を簡単に実現するSkyWayScreenShareライブラリについてお届けします。</p>
]]></content:encoded>
		
		<series:name><![CDATA[WebRTCプラットフォーム ”SkyWay” 入門]]></series:name>
	</item>
		<item>
		<title>[翻訳] WhatsAppはWebRTCを使ってる？キャプチャから解析してみた！ &#8211; 原題：What’s up with WhatsApp and WebRTC?  &#8211;</title>
		<link>/iwase/14929/</link>
		<pubDate>Fri, 08 May 2015 00:00:18 +0000</pubDate>
		<dc:creator><![CDATA[岩瀬 義昌]]></dc:creator>
				<category><![CDATA[最新動向]]></category>
		<category><![CDATA[WebRTC]]></category>

		<guid isPermaLink="false">/?p=14929</guid>
		<description><![CDATA[本記事は、webrtcHacksに英語で掲載されている記事を、webrtcHacks様の許可を得た上で、翻訳＆掲載する記事となります。修正・更新・コメント等がございましたら、webrtchacksまでお願いいたします。 ...]]></description>
				<content:encoded><![CDATA[<p>本記事は、webrtcHacksに英語で掲載されている記事を、webrtcHacks様の許可を得た上で、翻訳＆掲載する記事となります。修正・更新・コメント等がございましたら、<a href="https://webrtchacks.com/whats-up-with-whatsapp-and-webrtc/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">webrtchacks</a>までお願いいたします。</p>

<p>This article originally appeared in English at webrtcHacks and has been translated with webrtcHack’s permission for posting to html5experts.jp in Japanese. Please visit <a href="https://webrtchacks.com/whats-up-with-whatsapp-and-webrtc/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">webrtchacks</a> for edits, updates, and comments.</p>

<h2>イントロダクション</h2>

<p>このブログ(webrtchacks)にある昔の記事の1つは、<a href="https://webrtchacks.com/mayday-trace/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Amazon MaydayをWiresharkで分析</a>して、内部でWebRTCを使ってるか確かめよう、というものだった。当時はWebRTCが出始めの段階だったので、大規模なWebRTC利用例は、WebRTCコミュニティにとって重要なマイルストーンだったんだ。</p>

<p>最近では、Philipp Hancke（Fippoとして知られる）がいくつかの素晴らしい記事を出していて、<a href="https://webrtchacks.com/hangout-analysis-philipp-hancke/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Google hangouts</a>や、<a href="https://webrtchacks.com/hello-decode/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">MozillaのHello</a>を分析している。これらの分析は、WebRTCが大規模にデプロイして上手くいくかってのを実証してくれている。また、デベロッパやアーキテクト向けには、どうやったらWebRTCのサービスを作れるか、という点についての貴重な洞察になる。</p>

<p>こういう記事は最高だから、もっと欲しいのは当たり前だよね。</p>

<p>ということで、嬉しいことにもう1つが記事できたよ！WebRTCの事実に基づく情報を広めるために、GoogleのWebRTCチームが<a href="https://andyet.com/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">&amp;yet</a>(Fippoの雇用主)に、詳細なリバースエンジニアリングを加えつつ、分析レポートを書くようお願いしたんだ。Philippは承諾してくれて、分かったことなどをwebrtcHacksで書いてくれることになった！もちろん、この分析はかなり時間がかかる。分析は大変だけど、多くの人に見てもらうことはもっと大変なので、webrtcHacksではいつもの公平で非営利な感じで手伝うことにしたよ。</p>

<p>じゃあ、FippoのWhatsApp音声アプリの分析を見てみよう。</p>

<p>{ &#8220;導入の執筆者&#8221; : &#8220;chad&#8221; }</p>

<div id="attachment_14931" style="width: 650px" class="wp-caption alignnone"><a href="https://html5experts.jp/wp-content/uploads/2015/05/whatsapp-deconstruction-3.png" data-wpel-link="internal"><img src="/wp-content/uploads/2015/05/whatsapp-deconstruction-3.png" alt="Philipp Hancke deconstructs WhatsApp to search for WebRTC" width="640" height="410" class="size-full wp-image-14931" srcset="/wp-content/uploads/2015/05/whatsapp-deconstruction-3.png 640w, /wp-content/uploads/2015/05/whatsapp-deconstruction-3-300x192.png 300w, /wp-content/uploads/2015/05/whatsapp-deconstruction-3-207x133.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a><p class="wp-caption-text">Philipp Hancke deconstructs WhatsApp to search for WebRTC<br /></p></div>

<p><a href="http://techcrunch.com/2015/02/02/whatsapp-voice-calling-feature-spotted-in-the-wild/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">TechCrunch</a>あたりで噂になった後、WhatsAppはAndroid向けに音声通話を<a href="http://www.theverge.com/2015/3/31/8318821/whatsapp-voice-calls-android-ios" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">ローンチ</a>した。これはWebRTC業界で一気に話題になって、Tsahi Levent-Leviも<a href="https://bloggeek.me/whatsapp-voip-implementation/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">加わって</a>、
この話題についての議論が白熱した。残念なことに、Thahiのブログ<a href="http://bloggeek.me/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">BlogGeek.Me</a>のコメント欄は小さすぎたので、webRTCHacksで記事として書くことにしたんだ。</p>

<p>ある時、いくつかのモバイルサービス向けの分析をしようと思っていたのと、<a href="https://webrtc.org/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Google WebRTCチーム</a>のサポートもあって、WhatsAppのアプリを複数のシナリオでとったWiresharkのキャプチャを見るのに、数日間の時間を使うことができた。</p>

<p>最初は、単にキャプチャをして中を見ようとしたんだけど（将来的にこれも記事で説明するかも）、面白い情報がもっとたくさんあって、学ぶべきことが多そうだってことがわかってきた。だから、15ページのレポートを書いたし、それは<a href="https://webrtchacks.com/wp-content/uploads/2015/04/WhatsappReport.pdf" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">ここ</a>から入手できる。かなり長いパケットの中の話で、エンジニア以外にはつまらないだろうから、この記事で要約してみるよ。</p>

<h2>要約</h2>

<p>WhatsAppは<a href="http://www.pjsip.org/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">PJSIP</a>ライブラリを、VoIP実装のために使ってる。キャプチャを見ると、DTLSなんかなくて、SDESを使ってるように見える。（詳しくはVictorの<a href="https://webrtchacks.com/webrtc-must-implement-dtls-srtp-but-must-not-implement-sdes/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">この記事</a>を見てね)<a href="https://webrtchacks.com/stun-helps-webrtc-traverse-nats/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">STUN</a>は使われてるんだけど、STUNのバインディングリクエストにはICE関連の属性がない。RTPとRTCPは同じポートで多重化されてる。</p>

<p>Audioコーデックは完全には分からない。サンプリングレートは16kHzで、コーデックの帯域はだいたい20kbit/毎秒ぐらいだ。これはミュート時もかわらない。</p>

<p><a href="http://unixhelp.ed.ac.uk/CGI/man-cgi?strings" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">strings</a>ツールを使って、バイナリを観察してみたら、PJSIPといくつかの文字列が出てきて、その文字列から、<a href="http://www.webrtc.org/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">webrtc.org</a>の音声エンジンにあるいくつかの要素(アコースティックエコーキャンセラ、AECM、ゲイン制御、ノイズ抑制、ハイパスフィルタとか)を利用してることがわかった。</p>

<h2>WebRTCとの比較</h2>

<table>
<thead>
<tr>
  <th align="center">機能</th>
  <th align="center">WebRTC/RTCWebの仕様</th>
  <th align="left">WhatsApp</th>
</tr>
</thead>
<tbody>
<tr>
  <td align="center">SEDS</td>
  <td align="center">SDES使わない</td>
  <td align="left">たぶんSDES</td>
</tr>
<tr>
  <td align="center">ICE</td>
  <td align="center">RFC 5245</td>
  <td align="left">ICE無し、STUNの接続確認だけ</td>
</tr>
<tr>
  <td align="center">TURN利用</td>
  <td align="center">最後の手段</td>
  <td align="left">同じ仕組み(後述)</td>
</tr>
<tr>
  <td align="center">音声コーデック</td>
  <td align="center">OpusかG.711</td>
  <td align="left">謎、16kHzで20kbpsのビットレート</td>
</tr>
</tbody>
</table>

<h2>リレーからP2Pへのスイッチ</h2>

<p>いろいろと見つけた中で最も感動的だったのは、最初は中継ノードを使って呼を確立して、後でP2Pにスイッチするっていう最適化だ。
これによって、呼が確立するまでの時間が早くできる。また、将来的にマルチパーティのVoIPへの可能性も広げてくれる。中継サーバは、バイナリを見ると「conf bridge」って呼ばれてるようだ。</p>

<p>最初のセッションを説明してみよう（PDFに詳細なものが書いてあるから、気になったらそっち見てね）：</p>

<ol>
<li>セッションは、TURN ALLOCATEリクエストを8つ異なるサーバに送るところからスタートする(パケット #70)。これは、普通のSTUN属性(見落としがちな)を使ってない。</li>
<li>レスポンスを受け取ったら、シグナリングサーバと情報交換をはじめる。これは、集めたリレー候補をシグナリングサーバに送って、他方のピアへ候補を送ってるんだろう。</li>
<li>パケット(#132)は、TURNサーバ群の1つに何かを送ってることを示してる。これは実はRTCPパケットで、その後にはRTPが続く。Wiresharkの「decode as」って機能を使って見つけられる。これはWebRTCだと普通じゃなくて、ミスリーディングな感じだ。だって、標準的なTURNの機能（send/data indication)を使ってなくて、代わりに生のRTPを使ってるからだ。</li>
<li>パケット#146は他方のピアから受信する最初のRTPを示してる。だいたい3秒ぐらいの間、中継サーバを通して流れてきてる。</li>
<li>その一方で、#294のパケットは相手ピアのグローバルIPアドレスにSTUNを送ってる。Wiresharkのフィルタ(<code>(ip.addr eq 172.16.42.124 and ip.addr eq 83.209.197.82) and (udp.port eq 45395 and udp.port eq 35574)</code>)を使えば分かる。</li>
<li>そのレスポンスが#300のパケットだ。</li>
<li>で、また面白いことが起こってる。クライアントはRTPストリームの行き先を、#298と#305でスイッチするんだ。RTPとしてデコードすると、RTPのシーケンス番号を確認できる。このスクリーンショットを見てみて：</li>
</ol>

<div id="attachment_14932" style="width: 650px" class="wp-caption alignnone"><a href="https://html5experts.jp/wp-content/uploads/2015/05/switch.png" data-wpel-link="internal"><img src="/wp-content/uploads/2015/05/switch.png" alt="switch" width="640" height="148" class="size-full wp-image-14932" srcset="/wp-content/uploads/2015/05/switch.png 640w, /wp-content/uploads/2015/05/switch-300x69.png 300w, /wp-content/uploads/2015/05/switch-207x48.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a><p class="wp-caption-text">switch</p></div>

<p>これで、全てをRTPとしてデコードできてるなら（Wiresharkのデフォルトだと難しいから、多少の工夫は必要）、フィルタを<code>rtp.ssrc == 0x0088a82d</code>に変えれて、もっと詳しく見れるはずだ。</p>

<p>ここでの意図は、確実につながる接続を試して(同じ根拠を別の記事である<a href="https://webrtchacks.com/the-minimum-viable-sdp/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">minimal viable SDP</a>に書いた)、それからTURNサーバの負荷を下げるために、P2P接続へスイッチするんだ。</p>

<p>マジか！これは賢いね。ユーザーからしたらつながるまでに時間を短くできる。もっかい繰り返すけど、UXを向上させるためのハックだ！</p>

<p>定量化するのは難しい。大規模に実験すれば(標準的なアプローチと、今回のアプローチを両方ね)、答えられるようになるだろうね。</p>

<h2>WebRTCへのレッスン</h2>

<p>WebRTCでは、だいたい似たようなことをできるけど、今のところは小さい。<code>iceTransports: 'relay'</code>って書いて呼を確立できて、これを使えば、hostとserver-reflexiveを使った候補をスキップできるってわけだ。また、中継サーバを使えば、接続できる確率も上げられる。</p>

<p>このアプローチには、TURNのpermissionの仕組みのため、RTTの観点からいくつか欠点がある。基本的には、TURNのリレー候補を集めるときは、以下のように動く。（実際にはChromeとFirefoxでちょっと違うんだけど）</p>

<ol>
<li>Chromeはまず認証なしでAllocationを作ろうとする</li>
<li>TURNサーバは、「認証が必要だよ」って答える</li>
<li>Chromeは、認証付きでもう一度トライする</li>
<li>TURNサーバはChromeには、ICE候補のアドレスとポート番号を伝える</li>
<li>Chromeはonicecandidateコールバックを使って、JavaScriptレイヤにもらった候補を伝える。ここまでで、RTTは2回分だ。</li>
<li>リモート候補を処理したら、Turnで実際にトラフィックを中継する前に、ChromeはTURNにpermissionを作るよう依頼する。これは<a href="https://tools.ietf.org/html/rfc5766#section-2.3" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">ココ</a>で書かれてるセキュリティの仕組みだ。</li>
<li>STUNバインディングリクエストを中継アドレスに送れるようになる。このとき、TURNのsend/data indicationを使える。</li>
<li>ICE候補にお互いで同意できたら、Chromeは、オーバヘッドを減らすためにTURNチャネル（相手ピア向かいの）を作る。</li>
</ol>

<p>上のWebRTCのアプローチと、Whatsappのそれを比べると、ラウンドトリップの回数がかなり削減できる！</p>

<h2>これがUser Experienceを向上させるためのハックだ！</h2>

<p>もし、まずリレー候補だけから開始できるなら、通信相手同士で互いのIPアドレスが分からない状態なので、中継サーバ経由で接続確立して、受信側が呼を受けるって決める前にDTLSのハンドシェイクも済ませられる。これは、<code>トランスポートウォームアップ</code>として知られていて、メディアが実際に流通しはじめる前に、ユーザーが感じる時間を減らせる。</p>

<p>リレー候補が確立できれば、SecConfiguration（昔はupdateiceとして知られていたやつ。いまは<a href="https://code.google.com/p/webrtc/issues/detail?id=3969" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">実装されてない</a>）を利用して、中継サーバが持ってる制約を取り外しにかかる。で、createOfferをもう一回呼んで、このときiceRestartフラグをtrueにしてね、ICEを再開(リスタート)するわけだ。これでICEの処理がはじまるから、P2Pが接続がつながるかどうか試せる。</p>

<p><code>updateIce</code>が実装されてないにもかかわらず、今日でもリレー接続からP2P接続へスイッチできる。ChromeならICE再開は動く。なので今欠けている唯一の要素は、<code>iceTransprots 'relay'</code>で、この動作としては単にリレー候補を作るだけだ。で、リレーじゃない候補は、Javascriptで全部落としちゃう。</p>

<p>そうすれば、WhatsAppみたいな動作がWebRTCでもできる。私のお気に入りの<a href="http://webrtc.github.io/samples/src/content/peerconnection/munge-sdp/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">sdp修正</a>のサンプルをみれば、実装も簡単だと思う。リレーからP2Pへのスイッチは動くし、<a href="https://github.com/fippo/webrtc/commit/bc8a3ac137bf49795f2ed1487cdfdfab6451540b" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">コード</a>もあるよ。</p>

<p>ICE再開は今は非効率だけど、実際のメディアのスイッチ（これが実際難しいところ）はシームレスに起こるよ。</p>

<h2>私見だけど…</h2>

<p>WhatsappのSTUNとRTPの使い方は、ちょっと時代遅れな気もする。議論の余地はたくさんあるんだけど、STUNの使い方は分かりやすいし、
中継接続からP2P接続へリレーするのに使われてる。だけど、ICEは同じことができるし、もっと確実なやり方だ。カスタムTURN機能を使って、生のRTPを会議のブリッジ間で使えば、TURNチャネルのオーバヘッドを何バイトか節約できるけど、無視できるオーバヘッドだ。</p>

<p>完璧な前方秘匿性を持ってるDTLS-SRTPを使わないってのも、プライバシの観点から大いに議論の余地がある。SEDSは欠点を持ってることが知られていて、鍵がばれたら後からでも解読できちゃう。（その鍵はちなみに、シグナリングサーバ経由で転送されるやつだよ）シグナリングでの情報交換は、テキストメッセージに使われるのと同じ方法で保護されてる点に注意。</p>

<p>UXの観点からいえば、P2Pにおける通話中呼のブロッキングが、これまでのシナリオで考慮済みってことを示してる。エコーキャンセルはかなり問題になるけど。webrtc.orgのエコーキャンセラはかなり上手くできていて、バイナリにも組み込まれている。<a href="https://twitter.com/HenrikJoreteg/status/580815221599551489" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">awesomeチョコレート</a>っていう見返りがあれば、WhatsAppのチームがもっと助けてくれるかも。。。</p>

<p>{“著者”: “Philipp Hancke“}
{“訳者”: “岩瀬 義昌&#8221;}</p>
]]></content:encoded>
			</item>
		<item>
		<title>WebRTC DataChannelの活用方法とその可能性─WebRTC Conference Japan</title>
		<link>/iwase/12610/</link>
		<pubDate>Thu, 12 Feb 2015 00:00:11 +0000</pubDate>
		<dc:creator><![CDATA[岩瀬 義昌]]></dc:creator>
				<category><![CDATA[最新動向]]></category>
		<category><![CDATA[WebRTC]]></category>
		<category><![CDATA[WebRTC Conference]]></category>

		<guid isPermaLink="false">/?p=12610</guid>
		<description><![CDATA[連載： WebRTC Conference Japan 特集 (4)本記事では、WebRTC Conference Japanのセッションの1つである、「WebRTC DataChannelの活用方法とその可能性」につい...]]></description>
				<content:encoded><![CDATA[<div class="seriesmeta">連載： <a href="https://html5experts.jp/series/webrtc_conf_jp/" class="series-244" title="WebRTC Conference Japan 特集" data-wpel-link="internal">WebRTC Conference Japan 特集</a> (4)</div><p>本記事では、<a href="http://webrtcconference.jp/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">WebRTC Conference Japan</a>のセッションの1つである、「WebRTC DataChannelの活用方法とその可能性」について紹介する。講演者は、Mist Technologies株式会社CEO・田中晋太朗氏だ。</p>

<div id="attachment_12634" style="width: 650px" class="wp-caption alignnone"><img src="/wp-content/uploads/2015/02/webrtc2.jpg" alt="Mist Technologies株式会社　 田中晋太朗氏" width="640" height="414" class="size-full wp-image-12634" srcset="/wp-content/uploads/2015/02/webrtc2.jpg 640w, /wp-content/uploads/2015/02/webrtc2-300x194.jpg 300w, /wp-content/uploads/2015/02/webrtc2-207x133.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /><p class="wp-caption-text">Mist Technologies株式会社　 田中晋太朗氏</p></div>

<p>セッション内容は、大きく以下の2点である。</p>

<ul>
<li>WebRTC DataChannelのおさらい</li>
<li>ひねりのある使い方事例紹介</li>
</ul>

<p>以下でそれぞれの内容について紹介する。（発表資料全体は<a href="http://www.slideshare.net/shintarotanaka/data-channel-webrtc-conference-japan-26" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">こちらから</a>）</p>

<h2>WebRTC DataChannelのおさらい</h2>

<h3>概要</h3>

<p>DataChannelは、サーバを介さずにテキストやバイナリデータを送ることができる。特にバイナリデータが重要で、ArrayBuffer、ArrayBufferView、Blob、Stringを送信可能だ。</p>

<div id="attachment_12722" style="width: 1516px" class="wp-caption alignnone"><a href="https://html5experts.jp/wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.02.33.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.02.33.png" alt="DataChannel概要" width="1506" height="1044" class="size-full wp-image-12722" srcset="/wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.02.33.png 640w, /wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.02.33-300x207.png 300w, /wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.02.33-1024x709.png 1024w, /wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.02.33-207x143.png 207w" sizes="(max-width: 1506px) 100vw, 1506px" /></a><p class="wp-caption-text">DataChannel概要</p></div>

<p>注意点として、CreateOfferでSDPを作成する前に、createDataChannelしておく必要がある。なぜなら、相手との通信に必要なSDPが作成できないためだ。</p>

<h3>プロトコルスタック</h3>

<p>DataChannelを支えるプロトコルとしてSCTPがある。SCTPは、簡単に言ってしまえば、TCPとUDPの良いとこどりのプロトコルで、createDataChannelの引数にオプションを設定することにより、動作を変更できる。</p>

<h2>ひねりのある使い方</h2>

<h3>事例1:DHT webrtc-chord</h3>

<p>P2P技術が好きな方はご存知かもしれないが、DHT(分散ハッシュテーブル)のアルゴリズムの1つであるchordのWebRTC実装が、<a href="https://github.com/tsujio/webrtc-chord" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">webrtc-chord</a>だ。chordは、分散型のKVSに似ており、様々なノードが、バランスよくデータを保持できる。</p>

<div id="attachment_12723" style="width: 1458px" class="wp-caption alignnone"><a href="https://html5experts.jp/wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.03.47.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.03.47.png" alt="webrtc-chord" width="1448" height="980" class="size-full wp-image-12723" srcset="/wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.03.47.png 640w, /wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.03.47-300x203.png 300w, /wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.03.47-1024x693.png 1024w, /wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.03.47-207x140.png 207w" sizes="(max-width: 1448px) 100vw, 1448px" /></a><p class="wp-caption-text">webrtc-chord</p></div>

<p>DataChannelはこの中で、データの挿入・検索を実現するために利用されている。特に面白いのは、コントロールプレーン（実際のデータではなく、それを制御する通信のこと）をWebRTCのデータチャネルに担わせている点だ。</p>

<p>WebRTC Chordを利用すると、サーバでデータを持つ必要がなくなり、Pure P2Pに近づく。</p>

<h3>事例2:ファイル共有 WebDrop</h3>

<p>Mist Technologies社で、ウォーミングアップとして作ったサービスだ。ファイル共有をする際に、クラウドストレージにアップロードしたくないが、メール添付の容量を越えてしまう場合に、役立つ。</p>

<div id="attachment_12724" style="width: 1462px" class="wp-caption alignnone"><a href="https://html5experts.jp/wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.03.55.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.03.55.png" alt="WebDrop" width="1452" height="1000" class="size-full wp-image-12724" srcset="/wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.03.55.png 640w, /wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.03.55-300x206.png 300w, /wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.03.55-1024x705.png 1024w, /wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.03.55-207x142.png 207w" sizes="(max-width: 1452px) 100vw, 1452px" /></a><p class="wp-caption-text">WebDrop</p></div>

<p>実装としては、JavaScriptからFileAPIを利用し、データを送る際に必要なメタ情報を、BinaryPackでArrayBufferへシリアライズして送っている。</p>

<p>Sharefestや、ShareDropが類似サービスだ。</p>

<h4>データ送受信の注意点</h4>

<p>ブラウザによって実装の違いが大きい点に注意する必要がある。例えば、ChromeやOperaでデータを送る場合は、バイナリの長さに制限がある。制限の長さを越えてしまうと、DataChannelがクローズされてしまう。</p>

<div id="attachment_12725" style="width: 1470px" class="wp-caption alignnone"><a href="https://html5experts.jp/wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.04.02.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.04.02.png" alt="データ送受信の注意点1" width="1460" height="1006" class="size-full wp-image-12725" srcset="/wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.04.02.png 640w, /wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.04.02-300x206.png 300w, /wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.04.02-1024x705.png 1024w, /wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.04.02-207x142.png 207w" sizes="(max-width: 1460px) 100vw, 1460px" /></a><p class="wp-caption-text">データ送受信の注意点1</p></div>

<p>一方でFirefoxは良く出来ていて、どれだけの長さを送信しても、不都合は生じない。ただし、受信時のonmessageでのバイナリの扱いが特徴的で、Firefoxではblobで取り出せるようになっている。そのため、他のブラウザと処理を合わせるためには、Blobで出てきた場合は、ArrayBufferで処理するように実装する。</p>

<p>Chrome等でバイナリの長さ上限を回避するには、2つの方法がある。</p>

<ul>
<li>UDPデータグラムの長さの制限 : あるサイズでデータを輪切り(Chunk)にする</li>
<li>SDPの改変(b=AS:1638400等)により、帯域を変更する</li>
</ul>

<div id="attachment_12726" style="width: 1462px" class="wp-caption alignnone"><a href="https://html5experts.jp/wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.04.11.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.04.11.png" alt="データ送受信の注意点2" width="1452" height="1006" class="size-full wp-image-12726" srcset="/wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.04.11.png 640w, /wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.04.11-300x207.png 300w, /wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.04.11-1024x709.png 1024w, /wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.04.11-207x143.png 207w" sizes="(max-width: 1452px) 100vw, 1452px" /></a><p class="wp-caption-text">データ送受信の注意点2</p></div>

<p>データを輪切りにして送信する場合は、送信側はデータをキューにためておいて、よいタイミングでsendを呼び出して送信する。受信側は、分割して送信されてくるので、Chunkを組み立てる必要がある。</p>

<h3>事例3: MistCDN</h3>

<p>もう1つの応用としてMistCDNを紹介する。</p>

<div id="attachment_12727" style="width: 1450px" class="wp-caption alignnone"><a href="https://html5experts.jp/wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.04.28.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.04.28.png" alt="MistCDN1" width="1440" height="998" class="size-full wp-image-12727" srcset="/wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.04.28.png 640w, /wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.04.28-300x207.png 300w, /wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.04.28-1024x709.png 1024w, /wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.04.28-207x143.png 207w" sizes="(max-width: 1440px) 100vw, 1440px" /></a><p class="wp-caption-text">MistCDN1</p></div>

<div id="attachment_12728" style="width: 1460px" class="wp-caption alignnone"><a href="https://html5experts.jp/wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.04.33.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.04.33.png" alt="MistCDN2" width="1450" height="1020" class="size-full wp-image-12728" srcset="/wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.04.33.png 640w, /wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.04.33-300x211.png 300w, /wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.04.33-1024x720.png 1024w, /wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.04.33-207x145.png 207w" sizes="(max-width: 1450px) 100vw, 1450px" /></a><p class="wp-caption-text">MistCDN2</p></div>

<p>MistCDNはP2P型のCDNで、同じサイトを閲覧している近いユーザから、DataChannelでデータを受信する仕組みだ。フロントエンドの実装はTypeScriptを利用している。</p>

<p>どういう利点があるかというと、CDNを使った場合に、ユーザレスポンスの向上が挙げられる。また、CDN自体の利用量（コスト削減）も実現できる。</p>

<p>類似のサービスも色々あるが、動画の配信という点では、MistCDNに優位性がある。</p>

<h4>P2P型CDNの要所</h4>

<p>既存のCDNは、HTTPの仕様に沿って実現されており、オーバヘッドが少ない。P2P型のCDNを実現しようとすると、シグナリングが必要になり、オーバヘッドが生じる。オーバヘッドが大きい場合は、結局遅くなることもある。</p>

<div id="attachment_12729" style="width: 1462px" class="wp-caption alignnone"><a href="https://html5experts.jp/wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.04.43.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.04.43.png" alt="P2Pの要所" width="1452" height="1004" class="size-full wp-image-12729" srcset="/wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.04.43.png 640w, /wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.04.43-300x207.png 300w, /wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.04.43-1024x708.png 1024w, /wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.04.43-207x142.png 207w" sizes="(max-width: 1452px) 100vw, 1452px" /></a><p class="wp-caption-text">P2Pの要所</p></div>

<p>そこで、シグナリングのメッセージを減らす、また、小さいコンテンツはまとめて送る、等の工夫が必要になる。</p>

<p>また、データを受信するPeerを選択する場合には、遠いPeerを選ばないように、帯域を利用する等の工夫をしている。（詳細は企業秘密）<br>
ただし、クライアントサイドのコードは、誰でも読めてしまうので、将来的にオープンソース化も視野にいれている。</p>

<p>対応ブラウザの問題もつきまとうので、iOS向けにネイティブライブラリも開発している。</p>

<h3>活用方法とその可能性(Discussion)</h3>

<p>DHTのWebRTC実装等の事例を紹介してきたが、いくつかを組み合わせると、サーバの仕事を極力減らして、1つのシステムを組めるようになるのでは、と考えている。</p>

<div id="attachment_12730" style="width: 1460px" class="wp-caption alignnone"><a href="https://html5experts.jp/wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.04.48.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.04.48.png" alt="今後登場しそうなWebRTC応用" width="1450" height="1006" class="size-full wp-image-12730" srcset="/wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.04.48.png 640w, /wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.04.48-300x208.png 300w, /wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.04.48-1024x710.png 1024w, /wp-content/uploads/2015/02/Screen-Shot-2015-02-10-at-13.04.48-207x143.png 207w" sizes="(max-width: 1450px) 100vw, 1450px" /></a><p class="wp-caption-text">今後登場しそうなWebRTC応用</p></div>

<p>シグナリングはどうしても必要になるが、SkyWay等のPaaSを使えばサーバを持たなくてよい。また、データについてもChordの上に載せてしまえば、これもサーバが不要だ。</p>

<p>Ustreamはメディアをサーバにアップロードして、各ユーザがダウンロードする仕組みになっているが、これをブラウザで実現できないか。まだ現実的にできるかは、わからないが。</p>

<p>最後に、ブラウザをエージェントとして利用すれば、グリッドコンピューティングも実現できるのではないか、と考えている。</p>
]]></content:encoded>
		
		<series:name><![CDATA[WebRTC Conference Japan 特集]]></series:name>
	</item>
		<item>
		<title>WebRTCにおけるサーバーソリューションの決め手とは？─WebRTC Conference Japan基調講演</title>
		<link>/iwase/12585/</link>
		<pubDate>Mon, 09 Feb 2015 04:00:55 +0000</pubDate>
		<dc:creator><![CDATA[岩瀬 義昌]]></dc:creator>
				<category><![CDATA[最新動向]]></category>
		<category><![CDATA[WebRTC]]></category>
		<category><![CDATA[WebRTC Conference]]></category>

		<guid isPermaLink="false">/?p=12585</guid>
		<description><![CDATA[連載： WebRTC Conference Japan 特集 (1)2月5日、6日にかけて「WebRTC」をテーマとした、日本初のカンファレンスであるWebRTC Conference Japanで開催された。本記事では...]]></description>
				<content:encoded><![CDATA[<div class="seriesmeta">連載： <a href="https://html5experts.jp/series/webrtc_conf_jp/" class="series-244" title="WebRTC Conference Japan 特集" data-wpel-link="internal">WebRTC Conference Japan 特集</a> (1)</div><p>2月5日、6日にかけて「WebRTC」をテーマとした、日本初のカンファレンスである<a href="http://webrtcconference.jp/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">WebRTC Conference Japan</a>で開催された。本記事では、その中の基調講演の1つである、<a href="http://webrtcconference.jp/session/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">WebRTCに於けるサーバーソリューションの決め手とは？</a>の内容について紹介する。プレゼンターはDialogic社および<a href="https://webrtchacks.com/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">webrtcH4cKS</a>の主宰であるChad氏だ。</p>

<div id="attachment_12629" style="width: 650px" class="wp-caption alignnone"><img src="/wp-content/uploads/2015/02/webrtc1.jpg" alt=" The picture of Chad Hart" width="640" height="417" class="size-full wp-image-12629" srcset="/wp-content/uploads/2015/02/webrtc1.jpg 640w, /wp-content/uploads/2015/02/webrtc1-300x195.jpg 300w, /wp-content/uploads/2015/02/webrtc1-207x134.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /><p class="wp-caption-text">The picture of Chad Hart</p></div>

<p>当日の発表資料は<a href="http://www.slideshare.net/Dialogic/serverside-webrtc-infrastructure-chad-hart-dialogic" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">こちらから</a></p>

<hr />

<h2>WebRTCサーバで考えるべきこと</h2>

<p>WebRTCのサーバサイドインフラストラクチャを考えるに辺り、4つのサーバについて本セッションでは述べる。</p>

<ul>
<li>シグナリングサーバ</li>
<li>NAT越えサーバ</li>
<li>メディアサーバ(音声・映像・データ)</li>
<li>ゲートウェイサーバ</li>
</ul>

<h2>シグナリングサーバ</h2>

<p>WebRTCの通信は、最終的にはP2Pになるが、その過程でシグナリングサーバが必要だ。具体的にはSIPで使われているようなSDPを使って、メディア接続に必要な情報をやりとりする。</p>

<p>もちろん、単にそれだけではなくて以下のような機能も必要となる。</p>

<div id="attachment_12590" style="width: 730px" class="wp-caption alignnone"><a href="https://html5experts.jp/wp-content/uploads/2015/02/90e1e15317b6206cf91f1512bcfe82b2.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2015/02/90e1e15317b6206cf91f1512bcfe82b2.jpg" alt="signaling consideration" width="720" height="405" class="size-full wp-image-12590" srcset="/wp-content/uploads/2015/02/90e1e15317b6206cf91f1512bcfe82b2.jpg 640w, /wp-content/uploads/2015/02/90e1e15317b6206cf91f1512bcfe82b2-300x168.jpg 300w, /wp-content/uploads/2015/02/90e1e15317b6206cf91f1512bcfe82b2-207x116.jpg 207w" sizes="(max-width: 720px) 100vw, 720px" /></a><p class="wp-caption-text">signaling consideration</p></div>

<ul>
<li>ユーザ認証</li>
<li>アクセスコントロール、セキュリティ</li>
<li>プッシュ通知 (特にバッテリ消費に注意)</li>
<li>フェデレーション（他のサービスプロバイダとの相互接続）</li>
<li>その他、現実社会で必要とされる機能</li>
</ul>

<p>これらの機能は、WebRTC標準のスコープからは外れているが、アプリケーション開発においては必要となる機能だ。</p>

<h2>NAT越えサーバ</h2>

<p>次にNAT越えの機能だ。もし、NATが越えられなかった場合、ユーザにNWを変えてみて、とはサービス開発者がお願いすることは難しい。そこで、NAT越えの機能を提供する必要がある。</p>

<p>（編集部補足：NATの解説については当メディアの記事である<a href="https://html5experts.jp/mganeko/5554/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">壁を越えろ！WebRTCでNAT/Firewallを越えて通信しよう</a>が参考になります）</p>

<p>NAT越えに対して、レガシーなVoIPシステムでは、SBC(Session Border Controller)を利用している。
WebRTCは、異なったアプローチをとっており、そのプロトコルがICE(Interactive Connectivity Establishment)プロトコルだ。</p>

<p>ICEでは、STUNとTURNを利用している。</p>

<h3>STUN</h3>

<p>STUNの役割は、自身の外部のIP(NATの外側)を調べるためのプロトコルだ。そのため、非常にシンプルで軽量で、拡張性もある。　</p>

<h3>TURN</h3>

<p>前述したSTUNだけでは越えられない課題もある。その場合、TURN(Traversal Using Relay NAT)を利用して、
トラフィックの中継をする。TURNはSBCに似た動作をする。実社会では環境にもよるが、10-15%程度がTURNを必要としている。</p>

<div id="attachment_12591" style="width: 730px" class="wp-caption alignnone"><a href="https://html5experts.jp/wp-content/uploads/2015/02/c64c5ece666a6407486987541305a212.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2015/02/c64c5ece666a6407486987541305a212.jpg" alt="comparing STUN vs TURN" width="720" height="405" class="size-full wp-image-12591" srcset="/wp-content/uploads/2015/02/c64c5ece666a6407486987541305a212.jpg 640w, /wp-content/uploads/2015/02/c64c5ece666a6407486987541305a212-300x168.jpg 300w, /wp-content/uploads/2015/02/c64c5ece666a6407486987541305a212-207x116.jpg 207w" sizes="(max-width: 720px) 100vw, 720px" /></a><p class="wp-caption-text">comparing STUN vs TURN</p></div>

<p>STUNと違って、TURNは帯域消費が大きく、運用コストも大きい。もし、エンジニアリング（設計等）が不適切だった場合は、レイテンシの増加、音声映像品質を損なうことがある。</p>

<h2>メディアサーバ(音声・映像・データ)</h2>

<p>次はメディアの話だ。さきほど見たように、TURNを経由する場合等、メディアはP2Pで流れないケースもある。</p>

<p>実際には、TURNでメディアを中継する以外に、メディア中継サーバを理由はたくさんある。</p>

<div id="attachment_12592" style="width: 730px" class="wp-caption alignnone"><a href="https://html5experts.jp/wp-content/uploads/2015/02/7ecbec8b200a97f5b85a8a31ece4115c.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2015/02/7ecbec8b200a97f5b85a8a31ece4115c.jpg" alt="Many reasons for media server" width="720" height="405" class="size-full wp-image-12592" srcset="/wp-content/uploads/2015/02/7ecbec8b200a97f5b85a8a31ece4115c.jpg 640w, /wp-content/uploads/2015/02/7ecbec8b200a97f5b85a8a31ece4115c-300x168.jpg 300w, /wp-content/uploads/2015/02/7ecbec8b200a97f5b85a8a31ece4115c-207x116.jpg 207w" sizes="(max-width: 720px) 100vw, 720px" /></a><p class="wp-caption-text">Many reasons for media server</p></div>

<ul>
<li>MCUを使ったマルチパーティ会議</li>
<li>トランスコーディング(コーデックを変換すること)</li>
<li>既存VoIPとの相互接続</li>
<li>メディアの録音、録画</li>
<li>ストリーム処理（例えば、画像をビデオに挿入したり、DTMF音を音声に挿入したりする処理）</li>
<li>人とシステムとで通信する場合（例えば、音声認識による自動応答等）</li>
</ul>

<h3>クライアントで処理すべき？サーバで処理すべき？</h3>

<p>前述した機能はクライアントサイドでも提供できるし、サーバサイドでも提供できる。それらにはトレードオフの関係がある。</p>

<p>例えば、モバイルデバイスの帯域は常に使えるわけじゃないし、無料でもない。また、特にCPUを消費すると、バッテリ消費も著しい。もし、機能をクラウド側（サーバ側）で提供できるのであれば、これらの課題は、解決/軽減できる。</p>

<h3>マルチパーティのビデオ会議例</h3>

<p>具体的にマルチパーティのビデオ会議を提供する場合を例にとって考えてみよう。</p>

<h4>フルメッシュトポロジのアプローチ</h4>

<p>マルチパーティの会議を提供するにあたり、最も簡単なトポロジはフルメッシュの構成だ。</p>

<div id="attachment_12604" style="width: 730px" class="wp-caption alignnone"><a href="https://html5experts.jp/wp-content/uploads/2015/02/fd40f9f7f385df78f8ba2cf60ad8cbff.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2015/02/fd40f9f7f385df78f8ba2cf60ad8cbff.jpg" alt="Full Mesh" width="720" height="405" class="size-full wp-image-12604" srcset="/wp-content/uploads/2015/02/fd40f9f7f385df78f8ba2cf60ad8cbff.jpg 640w, /wp-content/uploads/2015/02/fd40f9f7f385df78f8ba2cf60ad8cbff-300x168.jpg 300w, /wp-content/uploads/2015/02/fd40f9f7f385df78f8ba2cf60ad8cbff-207x116.jpg 207w" sizes="(max-width: 720px) 100vw, 720px" /></a><p class="wp-caption-text">Full Mesh</p></div>

<p>この場合サーバは不要になるのがメリットだが、クライアント側の処理能力の制限もあり、3-4人が限界になることが多い。もし、エンドポイントが増えた場合は、非効率になる。</p>

<h4>スター型:MCUをつかったアプローチ</h4>

<p>この課題に対する伝統的なアプローチがMCU(Multipoint Control Unit)だ。MCUはメディアを集約し、ミキシングし、各デバイスに流す。かなり、クライアントの処理負荷が軽いのがメリットだ。</p>

<p>ただし、MCUにも欠点がある。MCUはサーバの処理負荷が非常に高いことだ。特にHD品質のビデオを扱う場合は顕著になる。処理負荷が高い理由は、すべてのストリームをそれぞれ、エンコード・デコード処理する点にある。</p>

<p>MCUを改良した効率良いアプローチを、エンコーダシェアリングを呼んでいる。</p>

<div id="attachment_12594" style="width: 730px" class="wp-caption alignnone"><a href="https://html5experts.jp/wp-content/uploads/2015/02/a696c9859391dafa55613beeb4d0df7c.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2015/02/a696c9859391dafa55613beeb4d0df7c.jpg" alt="MCU Resource Share" width="720" height="405" class="size-full wp-image-12594" srcset="/wp-content/uploads/2015/02/a696c9859391dafa55613beeb4d0df7c.jpg 640w, /wp-content/uploads/2015/02/a696c9859391dafa55613beeb4d0df7c-300x168.jpg 300w, /wp-content/uploads/2015/02/a696c9859391dafa55613beeb4d0df7c-207x116.jpg 207w" sizes="(max-width: 720px) 100vw, 720px" /></a><p class="wp-caption-text">MCU Resource Share</p></div>

<p>もし、複数のデバイスが同じストリームを受信するなら、MCU側のエンコード処理は1回で済む。この方式だと、CPUの利用率を30-50%ほど効率化できる。</p>

<h4>スター型：SFUを使ったアプローチ</h4>

<p>さらに新しいアプローチがSFU(Selective Forwarding Unit)だ。このアーキテクチャでは、まずクライアントは1つのストリームをSFUに送信する。SFUはエンドポイントが希望するストリームのみをリダイレクトする。</p>

<p>SFUの主なタスクは、ストリームの暗号化・復号化であり、サーバサイドでのエンコード・デコードは必要とされてない。そのため、多くのクライアントを捌くこと可能だ。</p>

<p>SFUにSimulcastの手法を組み合わせた方法もある。
この手法では、クライアントが1つのストリームを送るのではなく、
2つ以上のストリームを送信する。（よくあるのは高品質・低品質の両方を送る)</p>

<div id="attachment_12595" style="width: 730px" class="wp-caption alignnone"><a href="https://html5experts.jp/wp-content/uploads/2015/02/45e645353c52af061f80af60f346190d.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2015/02/45e645353c52af061f80af60f346190d.jpg" alt="SFU" width="720" height="405" class="size-full wp-image-12595" srcset="/wp-content/uploads/2015/02/45e645353c52af061f80af60f346190d.jpg 640w, /wp-content/uploads/2015/02/45e645353c52af061f80af60f346190d-300x168.jpg 300w, /wp-content/uploads/2015/02/45e645353c52af061f80af60f346190d-207x116.jpg 207w" sizes="(max-width: 720px) 100vw, 720px" /></a><p class="wp-caption-text">SFU</p></div>

<p>効果的な使い方としては、話し手のストリームは高品質の映像を流して、聞き手のストリームは低品質のものを使う方法だ。</p>

<p>実際に、Google Hangoutsでは、この技術を利用している。非常に興味深いのは、Googleは独自の実装を使って、これを実現している点だ。詳しくは、<a href="https://webrtchacks.com/hangout-analysis-philipp-hancke/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">webrtcH4cKS</a>を参照されたい。</p>

<h4>VP9,SVC：未来のアプローチ</h4>

<p>最後にScalable Vicdeo Coding(SVC)というアプローチも紹介する。</p>

<div id="attachment_12597" style="width: 730px" class="wp-caption alignnone"><a href="https://html5experts.jp/wp-content/uploads/2015/02/24faa776559c2a19be903453b613f526.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2015/02/24faa776559c2a19be903453b613f526.jpg" alt="SVC" width="720" height="405" class="size-full wp-image-12597" srcset="/wp-content/uploads/2015/02/24faa776559c2a19be903453b613f526.jpg 640w, /wp-content/uploads/2015/02/24faa776559c2a19be903453b613f526-300x168.jpg 300w, /wp-content/uploads/2015/02/24faa776559c2a19be903453b613f526-207x116.jpg 207w" sizes="(max-width: 720px) 100vw, 720px" /></a><p class="wp-caption-text">SVC</p></div>

<p>Simulcastと同様に、品質の異なる複数のメディアをクライアントが送り、SFUがリダイレクトする点は似ているが、SVCでは複数のストリームを1つのストリームにまとめて、レイヤー化している点が異なる。</p>

<h2>ゲートウェイサーバ</h2>

<p>最後のトピックはゲートウェイサーバだ。WebRTCゲートウェイサーバを提供するには、多くのコンポーネントが必要になる。</p>

<div id="attachment_12598" style="width: 730px" class="wp-caption alignnone"><a href="https://html5experts.jp/wp-content/uploads/2015/02/84cf2338df598a65f7626d84e74cce87.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2015/02/84cf2338df598a65f7626d84e74cce87.jpg" alt="Gateway Function" width="720" height="405" class="size-full wp-image-12598" srcset="/wp-content/uploads/2015/02/84cf2338df598a65f7626d84e74cce87.jpg 640w, /wp-content/uploads/2015/02/84cf2338df598a65f7626d84e74cce87-300x168.jpg 300w, /wp-content/uploads/2015/02/84cf2338df598a65f7626d84e74cce87-207x116.jpg 207w" sizes="(max-width: 720px) 100vw, 720px" /></a><p class="wp-caption-text">Gateway Function</p></div>

<ul>
<li>STUN/TURN : 前述した機能</li>
<li>HTTP-to-SIP(H2S)：SIPとHTTPを変換する</li>
<li>Mediaゲートウェイ：DTLSによる暗号化をSDESへ変換、ポート多重化技術等の対応</li>
<li>トランスコード：VP8とOPUSを、既存のVoIPシステムのものへ変換</li>
<li>SBC：既存のSIPと連携する場合に、SIPヘッダ修正等が必要</li>
<li>APIゲートウェイ：システム制御のためのAPI</li>
<li>SDK：WebやNativeに、WebRTCを追加するための開発キット</li>
</ul>

<p>ここで重要なのは、上記の要素を提供するにあたり、標準化されているものはない、ということだ。そのため、規模やベンダ、また既に存在している機器を考慮して、必要なソリューションを自身で決める必要がある。</p>

<h2>まとめ</h2>

<h3>現実世界でのデプロイ例</h3>

<p>ここまで、いくつかのサーバについて紹介してきた。それらを実現している現実のアーキテクチャ例(とあるアメリカのサービスプロバイダの例)を紹介する。</p>

<div id="attachment_12599" style="width: 730px" class="wp-caption alignnone"><a href="https://html5experts.jp/wp-content/uploads/2015/02/e031a4913536a99dc54f681a10f9fcae.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2015/02/e031a4913536a99dc54f681a10f9fcae.jpg" alt="WebRTC Arhcitedture Example" width="720" height="405" class="size-full wp-image-12599" srcset="/wp-content/uploads/2015/02/e031a4913536a99dc54f681a10f9fcae.jpg 640w, /wp-content/uploads/2015/02/e031a4913536a99dc54f681a10f9fcae-300x168.jpg 300w, /wp-content/uploads/2015/02/e031a4913536a99dc54f681a10f9fcae-207x116.jpg 207w" sizes="(max-width: 720px) 100vw, 720px" /></a><p class="wp-caption-text">WebRTC Arhcitedture Example</p></div>

<p>いくつかのキーとなる機能をピックアップする：</p>

<ul>
<li>STUN/TURNの利用</li>
<li>Secure WebSocket(WSS)によるシグナリング</li>
<li>GateWayでのH2S実装</li>
<li>Webメディアゲートウェイでのトランスコード</li>
<li>REST API経由による通信</li>
<li>OAuth、OpenIDによる認証</li>
<li>APIマネージャによるNWの防衛</li>
</ul>

<h3>サーバ技術のまとめ</h3>

<p>本セッションでは、シグナリングサーバ、STUNサーバ、TURNサーバ、メディアサーバ、WebRTCゲートウェイサーバについて紹介した。</p>

<div id="attachment_12600" style="width: 730px" class="wp-caption alignnone"><a href="https://html5experts.jp/wp-content/uploads/2015/02/1e747160b568df1ae5b7e89208dffdcd.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2015/02/1e747160b568df1ae5b7e89208dffdcd.jpg" alt="Summary" width="720" height="405" class="size-full wp-image-12600" srcset="/wp-content/uploads/2015/02/1e747160b568df1ae5b7e89208dffdcd.jpg 640w, /wp-content/uploads/2015/02/1e747160b568df1ae5b7e89208dffdcd-300x168.jpg 300w, /wp-content/uploads/2015/02/1e747160b568df1ae5b7e89208dffdcd-207x116.jpg 207w" sizes="(max-width: 720px) 100vw, 720px" /></a><p class="wp-caption-text">Summary</p></div>

<p>実際には、その他にWebサーバや、認証サーバが登場するが、これらは既にデプロイされているものだろう。組み合わせるとかなり複雑に見えるかもしれないが、一部のサーバはVoIP機器の進化系にすぎない。</p>
]]></content:encoded>
		
		<series:name><![CDATA[WebRTC Conference Japan 特集]]></series:name>
	</item>
		<item>
		<title>[翻訳] coTURN:マルチテナント型のオープンソースのSTUN/TURNサーバ</title>
		<link>/iwase/11300/</link>
		<pubDate>Tue, 18 Nov 2014 00:30:37 +0000</pubDate>
		<dc:creator><![CDATA[岩瀬 義昌]]></dc:creator>
				<category><![CDATA[最新動向]]></category>
		<category><![CDATA[TURN]]></category>
		<category><![CDATA[WebRTC]]></category>
		<category><![CDATA[coTURN]]></category>

		<guid isPermaLink="false">/?p=11300</guid>
		<description><![CDATA[連載： WebRTC (1)本記事は、webrtcHacksにて英語で掲載されている記事を、webrtcHacks様の許可を得た上で、翻訳＆掲載している記事となります。修正・更新・コメント等がございましたら、webrtc...]]></description>
				<content:encoded><![CDATA[<div class="seriesmeta">連載： <a href="https://html5experts.jp/series/webrtc/" class="series-395" title="WebRTC" data-wpel-link="internal">WebRTC</a> (1)</div><p>本記事は、webrtcHacksにて英語で掲載されている<a href="http://webrtchacks.com/coturn/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">記事</a>を、webrtcHacks様の許可を得た上で、翻訳＆掲載している記事となります。修正・更新・コメント等がございましたら、<a href="http://webrtchacks.com/coturn/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">webrtchacks/coturn/</a> までお願いいたします。</p>

<p>This article originally appeared in English at webrtcHacks and has been translated with webrtcHack&#8217;s permission for posting to html5experts.jp in Japanese. Please visit http://webrtchacks.com/coturn for edits, updates, and comments.</p>

<h2>イントロダクション</h2>

<p>昨年、Oleg Moskalenkoへインタビューし、オープンソースのSTUN&amp;TURNサーバで極めて人気のあるrfc-5766-turn-serverプロジェクトについての記事を公開しました。その数カ月後、Amazonが自身のサービスであるMaydayにこのプロジェクトを利用していることがわかりました。それ以後、IETFにてRFC 5766に多くの機能が新たに定義され、オープンソースの新プロジェクトであるcoTURNプロジェクトが生まれました。</p>

<p>今日はOlegに再度、話を伺って、coTURNの何が新しいのか・coTURNとは何なのか、という点についてキャッチアップしたいと思います。</p>

<p>{“導入の執筆者”, “victor”}</p>

<div id="attachment_11301" style="width: 448px" class="wp-caption alignnone"><a href="https://html5experts.jp/wp-content/uploads/2014/11/coturn01.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/11/coturn01.jpg" alt="coturn image" width="438" height="640" class="size-full wp-image-11301" srcset="/wp-content/uploads/2014/11/coturn01.jpg 438w, /wp-content/uploads/2014/11/coturn01-205x300.jpg 205w, /wp-content/uploads/2014/11/coturn01-141x207.jpg 141w" sizes="(max-width: 438px) 100vw, 438px" /></a><p class="wp-caption-text">Photo courtesy of flikr user Grant Nicholson</p></div>

<h2>インタビュー</h2>

<p>webrtcHacks: 前回インタビューしたときは、rfc5766-turn-serverプロジェクトについて話をしていて、既に商用でも使われている例(WebRTCの例、WebRTC以外の例)があるのを教えてもらったよね。 coTURNプロジェクトの何が新しくて、現在人気のあるrfc5766-turn-serverと何が違うの？</p>

<p>Oleg: TURNとSTUNのプロトコルは進化が早くて、新しいネットワークの接続要件を備えていたり、もっとロバストな能力を提供してきている。ある時点で、新しい要件が現在の&#8221;レガシー&#8221;なユーザ要求と衝突する可能性があることがわかったんだ。そこで、プロジェクトを2つの開発ラインに分けて、2つのモデルをサポートしようと決めたんだよ。古いプロジェクト(rfc5766-turn-server)は安定したコードと多くのユーザを受けて継続する。つまり、バグフィックスや本当に必要な機能だけを加えて、信頼性のあるコードになる。このプロジェクトは古いスタイルのRFC 5766に準拠して欲しいという要望がある限り、存在し続けるよ。</p>

<p>一方で新しいプロジェクトである&#8221;<a href="https://code.google.com/p/coturn/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">coTURN</a>&#8220;(複数レルムでco-locationを提供するTURN)は4月にはじまり、2014年の5月に<a href="https://groups.google.com/forum/#!topic/turn-server-project-rfc5766-turn-server/rYF8nbm5rxc" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">公開</a>した。最初の主な違いは、新しい<a href="https://tools.ietf.org/wg/tram/charters" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">IETF TRAMワーキンググループ</a>で提案されているORIGIN属性をサポートしたmultiple-realms(複数領域)の仕様に対応している点だよ。</p>

<p>webrtcHacks: 読者はIETFでTRAMが何をやっていることについて詳しくないひともいるので、簡単に教えてもらえる？</p>

<p>Oleg: もちろん。TRAM WGのゴールは、複数の取組みを整理・統合して、TURNとSTUNをもっとWebRTCの環境に適したものにすること。その中では、以下の取組みが含まれている：</p>

<ul>
<li>追加トランスポートとしての<a href="https://tools.ietf.org/html/rfc7350" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">DTLS</a>を追加する</li>
<li>認証の仕組み</li>
<li>TURNとSTUNの拡張</li>
</ul>

<p>実際、知っていると思うけど、TURNbisやSTUNbisのドラフトにも取り組んでいるよ。私の意見だと、今後やって来る標準の中で最も重要な機能は、oAuthベースの認証と認可の仕組みだね。エンタープライズのユーザ・ISPのユーザにとって、マルチテナントサーバになるのが主要な機能になるだろうね。</p>

<p>これに加えて、多くな小さな追加もある：</p>

<ul>
<li>ALPN (Application Layer Protocol Negotiation)</li>
<li>帯域制御</li>
<li>IPv4とIPv6の割り当て(dual allocation)</li>
</ul>

<p>webrtcHacks: あと、さっき言ってたORIGIN属性もあるよね。</p>

<p>Oleg: その通り、これまで決めてきたものの1つに、新しい<a href="https://tools.ietf.org/html/draft-ietf-tram-stun-origin" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">ORIGIN属性</a>がある。これは、セッション単位での領域選択を可能にするんだ。coturnのデータベースは、複数のレルムでグループ分けされたユーザを保持するようになる。それぞれのレルムは異なるパラメータをおそらく持つ。この機能のおかげで、複雑な大規模環境でもcoturnは対応できる。例えば、1つのIPアドレスとポートしないけど、複数のユーザに対応する必要がある場合とかね。エンタープライズ向けの大規模TURNサーバやISPの運用するTURNサーバも適用例になるだろうね。</p>

<p>webrtcHacks: マルチテナントへの変更って、rfc 5766のTURNサーバのプロジェクトから大きなアーキテクチャの変更が必要なの？</p>

<p>Oleg: アーキテクチャに大きな変更は無いんだけど、データマネジメントでかなりの量の変更があるんだ。これまでの多くのことはシステム全体でグローバルだと想定してたんだけど、これからはレルムに限定されるようになる。そのため、かなりの量のコードを書き換えないといけなくて、それがマルチテナントの移行に向けてとても大変なところなんだ。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/11/coturn02.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/11/coturn02.png" alt="Example from latest TURNbis draft" width="593" height="404" class="alignnone size-full wp-image-11302" srcset="/wp-content/uploads/2014/11/coturn02.png 593w, /wp-content/uploads/2014/11/coturn02-300x204.png 300w, /wp-content/uploads/2014/11/coturn02-207x141.png 207w" sizes="(max-width: 593px) 100vw, 593px" /></a></p>

<p>webrtcHacks: マルチテナント以外の機能は他にある？</p>

<p>Oleg: うん、もう一つの大きな変更はIPv4とIPv6の<a href="http://tools.ietf.org/html/draft-martinsen-tram-ssoda" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">2つの割り当て</a>だね。この機能のおかげで、サーバは1つのセッションに対して2つのエンドポイントを割り当てできる。つまり、1つがIPv4でもう1つがIPv6。もしTURNのクライアントがv4とv6の両方でピアとの接続を確立したい場合は、クライアントは同じセッションの中で両方の接続を扱えるから、クライアントとサーバのリソースの節約になる。</p>

<p>Coturnは、サーバ上であるレベルの<a href="http://tools.ietf.org/html/draft-thomson-tram-turn-bandwidth" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">帯域制御</a>も提供する仕様もサポートしているよ。この機能は、TURNクライアントへ提供するサービスレベルを保証したい場合に役立つよ。</p>

<p>webrtcHacks: プロジェクトのコミットを追っかけてて気づいんたんだけど、データベースのサポートについても何かしているよね。これについて教えてくれる？</p>

<p>Oleg: Coturnでは、もっとロバストで抽象化できるようにデータベースのコードを書き直したんだ。これは、新しい機能の開発に役立つし、新しいデータベースも採用できる。例えば、Coturnは古いTURNサーバのプロジェクトでもサポートしてたRedis、MySQL、Postgresに加えて、MongoDBもサポートしているよ。</p>

<p>webrtcHacks: セキュリティについてはどう？何か改善した？　</p>

<p>Oleg: あるよ、今のCoturnの開発はoAuthベースのサードパーティ認証＆認可について取り組んでいる。また、多くのTURNのセキュリティ課題も修正するつもりだよ。CoturnサーバはoAuthの鍵をデータベースから取得するようになり、外部の独立したエージェントがその鍵があるデータベースを扱うようになる。</p>

<p>webrtcHacks: Coturnのパフォーマンスについてはどう？前のrfc5766-turn-serverプロジェクトに比べてどう？</p>

<p>Oleg: Coturnはrfc5766-turn-serverと同じテストスイートを使ってる。Coturnのコードと機能は、より複雑だから理論的にはパフォーマンスは落ちる。だけど、これまでのテストだと気づけるパフォーマンスは落ちてないね。</p>

<p>TURNとして使うのならCPU1つで数千のコールをさばけるし、STUNだけでいいのなら数万のコールをさばけるよ。</p>

<p>webrtcHacks: デザイン面からパフォーマンスに貢献してそうなところはある？</p>

<p>Oleg: 高いパフォーマンスとスケーラビリティのために、TURNサーバはいくつかの機能を実装しているんだ：</p>

<ul>
<li>libevent2の利用 &#8211; 高パフォーマンスで、耐久性のあるのネットワークIOエンジン</li>
<li>設定可能なマルチスレッドモデル(OSがマルチスレッドを使えるなら、CPUのリソースをフルに使えるように)</li>
<li>設定可能な複数のリスニング、および複数のリレーアドレス</li>
<li>より効率的なメモリ管理モデル</li>
<li>ユーザスペースで動作して、システムに特別な制約を課さないこと</li>
</ul>

<p>このTURNプロジェクトのコードは、個別に専有されたネットワーク環境で使われることもある。TURNサーバのコードでは、抽象化されたネットワークAPIが使われているんだ。いくつかのファイルを書き直すだけで、TURNサーバに専有環境に適するコードをプラグインできるよ。このプロジェクトのおかげで、プロジェクトでは提供するのは標準のUNIXのネットワーク/IO APIだけでいいんだ。ユーザは他の環境に適したものを実装できる。TURNサーバのコードはもともと企業の専有環境で高パフォーマンスがでるように作られていて、その後にUNIXネットワークAPIを採用したんだ。　</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/11/coturn03.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/11/coturn03.png" alt="New coturn Project on Google code" width="796" height="407" class="alignnone size-full wp-image-11303" srcset="/wp-content/uploads/2014/11/coturn03.png 640w, /wp-content/uploads/2014/11/coturn03-300x153.png 300w, /wp-content/uploads/2014/11/coturn03-207x105.png 207w" sizes="(max-width: 796px) 100vw, 796px" /></a></p>

<p>webrtcHacks: スケールやロードバランスはどうするつもり？</p>

<p>Oleg: もちろん、仮想的には無制限にスケールするようにロードバランスのスキーマは使うよ。ロードバランスは次のようなツールを使って実装できる。1つでも複数の組み合わせでもいい：</p>

<ul>
<li>DNS SRVを用いたロードバランス</li>
<li>組み込みの300 ALTERNATE-SERVERメカニズム(TURNクライアントからの300レスポンスが必要)</li>
<li>ネットワークロードバランスサーバ</li>
</ul>

<p>webrtcHacks: メディアリレーするためにTURNサーバってどのぐらい使われるか知ってる？</p>

<p>Oleg: 異なる統計が異なるデータを出しているね。一般的に言えば、8-15%のコールで利用されているよ。もちろん、特別なアプリケーションによっては100％がTURNサーバを通る。ただ、僕の知るかぎりだとWebRTCのアプリケーションじゃないけど。</p>

<p>webrtcHacks: 開発者が全てのトラフィックをTURNサーバ経由にしないとならないシナリオって何か思いつく？伝統的なVoIPだと本質的にSBCを使うような。</p>

<p>Oleg: WebRTCの世界だとそういうシナリオに関する絶対的な情報は知らないな。だけど、一部のエンタープライズユーザはそういうネットワークパターンを議論しているから、ありえると思うよ。</p>

<p>webrtcHacks: Coturnはどのプラットフォームがサポートしているの？</p>

<p>Oleg: リストにすると長いね。サポートしているプラットフォームは</p>

<ul>
<li>Linux &#8211; Debina, Ubuntu, Mint, CentOS, Fedora, Redhat, Amazon Linux, Arch Linux, Open SUSE</li>
<li>BSD &#8211; FreeBSD, NetBSD, OpenBSD, DragonFlyBSD</li>
<li>Solaris</li>
<li>Mac OS X</li>
<li>Cygwin &#8211; R&amp;D用途でプロダクジョン向けじゃない</li>
</ul>

<p>このプロジェクトは、*NIXプラットフォームで利用できるはず。ただ、公式にはサポートしてないけど。</p>

<p>クライアントプラットフォームはなんでも大丈夫で、Android、iOS、Linux、OS X、Windows、Windows Phoneをサポートしているよ。</p>

<p>webrtcHacks: 昨年、統計付きパフォーマンスモニタリングも追加したいと言ってたけど、Coturnはそういう仕組を備えているの？</p>

<p>Oleg: 今のところは、パフォーマンスモニタリングのデータはTURNサーバに対してtelnetのインターフェースで取得できて、いくつかのパフォーマンス統計は、Redisの統計データベースから取得できるよ。統計以外だと、今のTURNサーバはパフォーマンスベースの輻輳制御の仕組みを備えているよ。この仕組みはTCPとTLSの接続で動作して、TCP/TLSのコネクションを効率良く自動的にチューニングしてくれる。</p>

<p>webrtcHacks: Coturnの将来のロードマップについて教えてくれる？</p>

<p>Oleg: Coturnは最新のTURNとSTUNの機能に追従していくつもりだよ。IETF TRAMグループは新しいTURNとSTUNのRFC(TURNbisとSTUNbisというコードネームがついてる)を採用する方向に進んでいる。RFCが最終的に定まったら、Coturnサーバは新しい仕様のサポートするように準備するだろう。</p>

<p>加えて、データベースやREST API等を扱える分離されたマネジメントサーバを追加したいんだ。リソースが不足しているから、ボランティアで参加してもらえると非常に助かるよ。</p>

<p>webrtcHacks: 読者がCoturnについての情報を知りたかったらどこを見ればいい？</p>

<p>Oleg: 一番良いのはプロジェクトのウェブサイ卜だよ。<a href="https://code.google.com/p/coturn/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">https://code.google.com/p/coturn/</a>　必要な情報は、全てリンクするようにしてる。</p>

<p>{“インタビューした人, “victor“}</p>

<p>{“インタビューを受けた人&#8221;, “Oleg Moskalenko“}</p>

<p>{“編集者&#8221;, “chad“}</p>

<p>{“翻訳者&#8221;, “岩瀬 義昌&#8221;}</p>
]]></content:encoded>
		
		<series:name><![CDATA[WebRTC]]></series:name>
	</item>
		<item>
		<title>Webの未来を議論！「Extensible Web Summit Berlin」イベントレポート</title>
		<link>/iwase/10848/</link>
		<pubDate>Thu, 25 Sep 2014 00:00:35 +0000</pubDate>
		<dc:creator><![CDATA[岩瀬 義昌]]></dc:creator>
				<category><![CDATA[最新動向]]></category>
		<category><![CDATA[Extensible Web]]></category>
		<category><![CDATA[W3C仕様]]></category>

		<guid isPermaLink="false">/?p=10848</guid>
		<description><![CDATA[連載： イベントレポート (24)Extensible Web Summitとは 2014年9月11日にドイツ・ベルリンにて、Extensible Web Summitが開催されました。本イベントは、Exntensibl...]]></description>
				<content:encoded><![CDATA[<div class="seriesmeta">連載： <a href="https://html5experts.jp/series/eventarchives/" class="series-159" title="イベントレポート" data-wpel-link="internal">イベントレポート</a> (24)</div><h2>Extensible Web Summitとは</h2>

<p>2014年9月11日にドイツ・ベルリンにて、<a href="http://lanyrd.com/2014/extwebsummit-berlin/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Extensible Web Summit</a>が開催されました。本イベントは、<a href="http://extensiblewebmanifesto.org/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Exntensible Web Manifesto</a>に興味を持つ、Web開発者・ブラウザベンダ・W3Cメンバ等が一堂に会し、未来のWebについてディスカッションを行うというイベントです。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/09/Screen-Shot-2014-09-24-at-1.21.42.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/09/Screen-Shot-2014-09-24-at-1.21.42-1024x540.png" alt="Extensible Web Summit" width="1024" height="540" class="alignnone size-large wp-image-11078" srcset="/wp-content/uploads/2014/09/Screen-Shot-2014-09-24-at-1.21.42-1024x540.png 1024w, /wp-content/uploads/2014/09/Screen-Shot-2014-09-24-at-1.21.42-300x158.png 300w, /wp-content/uploads/2014/09/Screen-Shot-2014-09-24-at-1.21.42-207x108.png 207w, /wp-content/uploads/2014/09/Screen-Shot-2014-09-24-at-1.21.42.png 640w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>

<p>イベント自体は、アンカンファレンススタイルで進められるため、会議の前に議題は決まっていません。会議当日の前半のセッションにて、ライトニングトークが5本あり、その内容を参考にしつつ、参加者自らがトピックが設定していきます。設定されたトピックに沿って、本イベントでは3つのブレイクアウトセッションが平行して開催されます。そして、各参加者は自分の興味のあるセッションに参加します。</p>

<p>本記事では、Extensible Web Summit Berlinでの設定されたトピック、およびトピックの中から特にExtensible Web に関係する議論が行われたトピック2つをピックアップし、その議論模様を紹介いたします。世界中のWeb関係者が、どのような点に興味を持っているか参考になるはずです。</p>

<h2>当日決定されたトピック</h2>

<p>当日決定されたトピックは以下の通りとなりました。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/09/Screen-Shot-2014-09-24-at-1.21.28.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/09/Screen-Shot-2014-09-24-at-1.21.28-300x293.png" alt="Extensible Web Summit Program" width="300" height="293" class="alignnone size-medium wp-image-11079" srcset="/wp-content/uploads/2014/09/Screen-Shot-2014-09-24-at-1.21.28-300x293.png 300w, /wp-content/uploads/2014/09/Screen-Shot-2014-09-24-at-1.21.28-1024x1000.png 1024w, /wp-content/uploads/2014/09/Screen-Shot-2014-09-24-at-1.21.28-207x202.png 207w, /wp-content/uploads/2014/09/Screen-Shot-2014-09-24-at-1.21.28.png 640w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>

<table>
<thead>
<tr>
  <th align="left">No.</th>
  <th align="left">Room1</th>
  <th align="left">Room2</th>
  <th align="left">Room3</th>
</tr>
</thead>
<tbody>
<tr>
  <td align="left">Session 1</td>
  <td align="left"><em>Extensible Web, Huh?</em></td>
  <td align="left"></td>
  <td align="left"></td>
</tr>
<tr>
  <td align="left">Session 2</td>
  <td align="left">Offline First, Service worker &amp; Friends</td>
  <td align="left">Future JS</td>
  <td align="left"><em>New way to do specs; how to connect specs and developers, next generation standardization, etc&#8230;</em></td>
</tr>
<tr>
  <td align="left">Session 3</td>
  <td align="left">Native mobile vs web</td>
  <td align="left">Testing</td>
  <td align="left">Web Components / Simpler Components / How to use components today</td>
</tr>
<tr>
  <td align="left">Session 4</td>
  <td align="left">Content Editable / Rich Text Editing / Accessibility</td>
  <td align="left">WebRTC</td>
  <td align="left">Application Facilitation Layer</td>
</tr>
<tr>
  <td align="left">Session 5</td>
  <td align="left">CSS is awesome &#8211; where are we, where do we go?</td>
  <td align="left">Permissions</td>
  <td align="left">Dev Tools / Source Maps</td>
</tr>
</tbody>
</table>

<p>当日の議論の議事録は、<a href="http://oksoclap.com/p/ews-berlin" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">こちら</a>で公開されています。各ディスカッショントピック議事録へのリンクもありますので、詳細確認されたい方は、是非チェックしてみてください。</p>

<p>ディスカッショントピックは、Extensible Webに関するものだけではなく、「このトピックについて、W3Cメンバーと開発者との間で議論したい！」というものも多く存在しました（例えば、WebRTCのセッションでは、『iOSってWebRTCサポートされないの？』『こればっかりは分かんないね〜』といった話題も）。</p>

<p>本稿では、各種トピックの中から特に Extensible Web に関わりの深い二つのトピック（上表にて、強調表示）の議論模様を紹介いたします。</p>

<h2>セッション紹介：Extensible Web, Huh?</h2>

<p>本セッションのみ、全員参加のセッションとなりました。本セッションでは、『Extensible Webって、実際どうなの？』というテーマで、参加者がディスカッションが行われました。</p>

<p>セッションの進行形式としては、質問/疑問を持っている参加者がそれを発言し、他の参加者が回答する流れとなります。ここでは、主な議論事項を紹介いたします。（議事録は、<a href="http://oksoclap.com/p/ews-berlin" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">こちら</a>。要旨理解を助けるため一部、議論の順番を組み直して記載しています。）</p>

<p>まず最初の質問として投げかけられたのが、「Exntensible Webでは、低レベルのAPIを公開することになるが、Webのセキュリティモデルに適しているのか？」という点でした。これに対しては、</p>

<blockquote>
  <p>同様の課題は、Service WorkerやCORSにもある。</p>
</blockquote>

<p>や、</p>

<blockquote>
  <p>もしExtensible Webを実現するためのテンプレート/パターンのようなものがあれば、セキュリティモデルに対する1つの解になるのではないか。</p>
</blockquote>

<p>という回答が上がっておりました。</p>

<p>また、Extensible Webでは、世界中のWeb開発者が独自のWeb拡張を進めることが出来ます。このとき、 「多くの開発者が同じ目的を持って、Webの拡張に取り組んだ場合、どうやってまとめていくのか？複数のWebの世界を作ってしまうのではないか？」
という懸念があります。これらに対しては、少しジョークのニュアンスを含みますが、</p>

<blockquote>
  <p>READMEが最も簡単で理解しやすいものが、生き残るのではないか。</p>
</blockquote>

<p>という回答、また世界中の開発者を巻き込むという観点から</p>

<blockquote>
  <p>技術に取り組むなら、英語が必要だ。優れなコントリビュータの中でも、英語を使えない人をほとんど知らない。
  また、仕様に使われる英語をもっと簡単にする必要もある。</p>
</blockquote>

<p>という回答がありました。</p>

<p>その他にも、「必要以上に低レベルなAPIを公開することにより、パフォーマンスに影響が出てしまうのではないか？」という懸念も出てきていました。この懸念に対しては、</p>

<blockquote>
  <p>JavaScriptのパフォーマンスはそこまで悪くない。</p>
</blockquote>

<p>といった意見や、</p>

<blockquote>
  <p>ブラウザネイティブの機能を利用した方が、polyfillを使うよりもパフォーマンスが良いのは理にかなっている。polyfillを毎回ダウンロードする必要もない。</p>
</blockquote>

<p>のように、ネイティブの機能のほうがパフォーマンスは良くなる、といった回答も挙がっておりました。</p>

<p>ここまで記載してきたのは、技術的な側面からの質疑でしたが、その他の側面からのコメントとして、</p>

<blockquote>
  <p>Extensible Webでは、低レベルなAPIを公開する等の技術的な側面はもちろんだが、社会的な側面も必要となる。社会的な側面とはつまり、<em>世界中の開発者をどうやって巻き込んでいくか？</em>ということだ。</p>
</blockquote>

<p>というもっともな疑問も挙がっています。本疑問については、参加者の多くが重要と考えており、以下に続く別セッションへ切り出しとなっております。</p>

<h2>セッション紹介：New way to do specs; how to connect specs and developers, next generation standardization, etc&#8230;</h2>

<p><em>(本セッションレポートは、<a href="https://html5experts.jp/komasshu/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">小松</a> が執筆しました。要旨理解を助けるため、議論の順番を組み直して記載しています）</em></p>

<p>本セッションでは、『開発者が標準化プロセスにもっと関われるようになるためには、どのような取り組みが必要か？』についてディスカッションが行われました。W3C HTML5仕様のメインエディター、Robin Berjon 氏がセッションモデレーターを務めました。（議事録は、<a href="http://oksoclap.com/p/ews-berlin-spec-utopia" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">こちら</a>）</p>

<p>本セッションのポイントは、仕様エディターと開発者との間の連携やコミュニケーションの実効性を上げていくこと。理由は、仕様と実際のニーズとの乖離を防ぐためです。例えば、この手の議論で失敗例としてよく出てくる AppCache ですが、</p>

<blockquote>
  <p>「AppCacheの失敗は、開発者が望んでいる機能を仕様化しなかったこと」
  「AppCacheの考え方（オフラインWeb）自体は、間違っていない。仕様化の進め方が間違っていた」</p>
</blockquote>

<p>という分析を行ったとのこと。これを受けて、Indexed Database APIの仕様化にあたっては、エディターとデータベース技術者とで連携したことを紹介し、<strong>W3Cの仕様化に普段は関わっていない、実際の利用者から密にフィードバックを得ること</strong>が、良い仕様を作るためには重要との考えが示されました。</p>

<p>開発者からのフィードバック手段として現在良く利用されているのが、BlogやSNSへの書き込み。これらのフィードバックは、エディターにとって非常に重要な情報ですが、</p>

<blockquote>
  <p>「それらを追いかけるのは、大変」</p>
</blockquote>

<p>このため、<a href="http://discourse.specifiction.org/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Specifictionというフォーラム</a>を開設しており、仕様へのフィードバックは、是非ここに書き込んでいって欲しいとのことでした。</p>

<p>また、このようなオープンな標準化プロセスを進めるにあたり、その大枠の考え方を <a href="http://specs.webplatform.org/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">WebPlatform Specs</a> として文書化していることが紹介されました。現状、ポイントとしては</p>

<ul>
<li>Forkable</li>
<li>Hackable</li>
<li>Thoughtful</li>
<li>Royalty-Free</li>
<li>Software Practices</li>
<li>Tested</li>
</ul>

<p>が挙げられています。最初の二つは、GitHubのイメージですね<em>（参考まで、W3Cではないですが、<strong>HTTP/2</strong>は<a href="https://github.com/http2" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">GitHub</a> で、オープンに管理されています）</em>。当日のディスカッションでは、</p>

<blockquote>
  <p>Polyfillの開発やサンプルコードによるユースケースの提示は仕様化を進めるのに有効</p>
</blockquote>

<p>との発言もあり、Forkable, Hackableは大変重要な概念と感じました。</p>

<p>あと、3番目の <strong>Thoughtful</strong> を補足すると、仕様化にあたって「何をゴールにするか？」のルールを複雑に考えていると、それだけで無駄な時間がとられてしまうので、（アジャイルの考え方で）仕様化も継続的に進められると考え、ゴール設定やルールはシンプルでスマートにしようといったことが述べられています。</p>

<p>ほかには、</p>

<blockquote>
  <p>開発者は普段別の仕事をしており、仕様化貢献にそこまで時間を割くことはできない</p>
</blockquote>

<p>というコメントがあり、これを解決するために仕様を機能分割し、開発者の学習コストを下げる取り組みを行っているといった議論もありました。</p>

<h2>まとめ</h2>

<p>本記事では、Extensible Web Summit Berlinの議論模様を一部紹介いたしました。前述のように、詳細な議事録は、<a href="http://oksoclap.com/p/ews-berlin" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">こちら</a>で公開されています。各ディスカッショントピック議事録へのリンクもありますので、詳細確認されたい方は、是非チェックしてみてください。</p>
]]></content:encoded>
		
		<series:name><![CDATA[イベントレポート]]></series:name>
	</item>
		<item>
		<title>開発者によるWeb標準化を可能とする「Extensible Web」とは？</title>
		<link>/iwase/10825/</link>
		<pubDate>Wed, 24 Sep 2014 00:00:38 +0000</pubDate>
		<dc:creator><![CDATA[岩瀬 義昌]]></dc:creator>
				<category><![CDATA[最新動向]]></category>
		<category><![CDATA[Extensible Web]]></category>
		<category><![CDATA[W3C仕様]]></category>

		<guid isPermaLink="false">/?p=10825</guid>
		<description><![CDATA[Extensible Webとは？ W3Cの標準化担当者・Web開発者が支持を表名している、「Extensible Web」という概念をご存知でしょうか？ Extensible Webとは、一言で表すと、標準化組織である...]]></description>
				<content:encoded><![CDATA[<h2>Extensible Webとは？</h2>

<p>W3Cの標準化担当者・Web開発者が支持を表名している、「Extensible Web」という概念をご存知でしょうか？
Extensible Webとは、一言で表すと、<strong>標準化組織であるW3Cとブラウザベンダだけでなく、
Web開発者も巻き込んでWebの未来を拡張していこう</strong>、という考え方のことです。</p>

<p>本記事では、Extensible Webの登場背景、その内容について紹介いたします。</p>

<h2>登場の背景</h2>

<p>これまでのWebの新機能は、長い年月をかけてブラウザベンダによって開発されてきました。
そのため、多くの場合、Web開発者がブラウザへフィードバックをするには、
まずブラウザ側の機能実装を待つ必要がありました。</p>

<p>しかし近年、Webの開発者が先導して、ブラウザの新機能へ影響を与えるケースが出てきています。
例えば、<code>querySelector</code> や、<code>Object.observe</code> が具体例です。
これらの例は、以下のフィードバックループによって生まれてきています：</p>

<ol>
<li>Web開発者が自身が必要とするユースケースに沿ってAPI(ライブラリ)をデザインする</li>
<li>Web開発者は、他の開発者が作成するAPIと切磋琢磨し、自身のAPIを洗練させていく</li>
<li>洗練されたAPIの中から、ブラウザが実装すべき基本的な機能が抽出される（ブラウザがNativeに実装すればパフォーマンスが向上し、かつライブラリのコードも小さくできる)</li>
</ol>

<p>Webに本当に必要な機能を生み出すためには、 上記のように、ユースケースに沿った実践的なフィードバックループを回すことが重要です。</p>

<p>既にこのプロセスはWeb標準化にも取り込まれています。例をあげると、</p>

<table>
<thead>
<tr>
  <th align="left">ライブラリ例</th>
  <th align="left">標準化された例</th>
</tr>
</thead>
<tbody>
<tr>
  <td align="left">jQuery</td>
  <td align="left">querySelector</td>
</tr>
<tr>
  <td align="left">Ember, AngularJS</td>
  <td align="left">Object.observe</td>
</tr>
<tr>
  <td align="left">Sass, Less</td>
  <td align="left">CSS Variables</td>
</tr>
</tbody>
</table>

<p>といったところが代表的でしょう。例えば、セレクタを用いたDOM操作は jQuery で実践的に有効性が示され、querySelectorとして標準化されました。これにより、jQueryのパフォーマンスは向上し、さらに Zepto.js のような軽量化ライブラリが登場・・・といったWebの好循環を起こしました。</p>

<p>一方、ユースケースの考慮が浅いまま実装されてしまったAPIは、
結果的に実践にそぐわず、憂き目にあってしまうケースが多々見受けられます。(その代表的な例が、<code>Application Cache</code> です)</p>

<p>これまで説明してきたフィードバックループを、
Webを構成するHTML・CSS・JS等の様々な分野で更に展開できるといいのですが、
現在のWebを取り巻く環境では限界があります。なぜならば、<br />
　<em>「Web開発者が、拡張(extend)できるポイントが少ない」</em> <br />
ためです。
例えば、CSSの構文を拡張するのは、既存の拡張ポイント(API)では困難であるため、
そもそもフィードバックループを回しはじめることが出来ません。</p>

<h2>Extensible Web Manifest</h2>

<p>もし、Web開発者が拡張できるポイントが多くあれば、
言い換えれば、低レベルのAPIがWeb開発者に公開されるとしたら、どうなるでしょうか？
Web開発者が実際に必要とするケースに沿って、
さらに多くのAPIやライブラリを開発できるようになります。</p>

<p>このような考え方は、<a href="http://extensiblewebmanifesto.org/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Extensible Web Manifesto</a>にまとめられています。</p>

<div id="attachment_10827" style="width: 1272px" class="wp-caption alignnone"><a href="https://html5experts.jp/wp-content/uploads/2014/09/Screen-Shot-2014-09-14-at-9.27.141.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/09/Screen-Shot-2014-09-14-at-9.27.141.png" alt="Extensible Web Manifesto Screen Capture" width="1262" height="358" class="size-full wp-image-10827" srcset="/wp-content/uploads/2014/09/Screen-Shot-2014-09-14-at-9.27.141.png 640w, /wp-content/uploads/2014/09/Screen-Shot-2014-09-14-at-9.27.141-300x85.png 300w, /wp-content/uploads/2014/09/Screen-Shot-2014-09-14-at-9.27.141-1024x290.png 1024w, /wp-content/uploads/2014/09/Screen-Shot-2014-09-14-at-9.27.141-207x58.png 207w" sizes="(max-width: 1262px) 100vw, 1262px" /></a><p class="wp-caption-text">Extensible Web Manifesto</p></div>

<p>Extensible Web Manifestoでは、ExtensibleなWebのプラットフォームの設計原理として、
以下の点を提言しています：</p>

<p>(Extensible Web Manifestoより抜粋、意訳)</p>

<blockquote>
  <p>Focus on adding new low-level capabilities to the web platform that are secure and efficient.</p>
</blockquote>

<p>安全で効率的な、新たな低レベル機能をWebのプラットフォームに追加する</p>

<blockquote>
  <p>Expose low-level capabilities that explain existing features, such as HTML and CSS, allowing authors to understand and replicate them.</p>
</blockquote>

<p>既存の機能(HTMLやCSS)が、これら低レベル機能によりどのように実装されるかを示すことで、開発者の理解を促進し、複製を可能とする</p>

<blockquote>
  <p>Develop, describe and test new high-level features in JavaScript, and allow web developers to iterate on them before they become standardized. This creates a virtuous cycle between standards and developers.</p>
</blockquote>

<p>新機能の開発、表現、テストをJavascriptで実施し、標準化の前にWeb開発者が参画できるようにする。これにより、Web開発者と標準化担当者の間で素晴らしいサイクルが実現される</p>

<blockquote>
  <p>Prioritize efforts that follow these recommendations and deprioritize and refocus those which do not.</p>
</blockquote>

<p>上記のような提言に沿った取組みの優先度を高くし、そうでないものは優先度を低くするか、もう一度フォーカスを練り直す</p>

<p><a href="http://extensiblewebmanifesto.org/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">原典</a>ではそれぞれの項目について、更に詳細な記載がありますので、興味のある方は参照ください。</p>

<h3>Extensible Webの今後</h3>

<p>Extensible Web Manifestoは、標準化団体であるW3C・各種ブラウザベンダ(Google, Mozilla等)・著名ライブラリの開発者が支持を表明しており、今後より具体化していくことが期待されます。</p>

<p>具体的な活動の一部として、フェイスツーフェイスのミーティングも既に開催されています。
そこで次回の記事では、2014年9月11日にドイツ ベルリンで開催された <a href="http://lanyrd.com/2014/extwebsummit-berlin/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Extensible Web Summit</a> の議論模様を紹介いたします。</p>
]]></content:encoded>
			</item>
		<item>
		<title>【速報】Google I/O 2014 キーノート ライブレポート</title>
		<link>/iwase/7369/</link>
		<pubDate>Wed, 25 Jun 2014 15:45:50 +0000</pubDate>
		<dc:creator><![CDATA[岩瀬 義昌]]></dc:creator>
				<category><![CDATA[最新動向]]></category>
		<category><![CDATA[Google I/O 2014]]></category>

		<guid isPermaLink="false">/?p=7369</guid>
		<description><![CDATA[連載： Google I/O 2014 特集 (2)まもなくキーノートがはじまります！HTML5 Experts.jpでは、現地で取材中のエキスパート・編集部と連携し、ライブレポート形式にて本ページにて、最新情報をお届け...]]></description>
				<content:encoded><![CDATA[<div class="seriesmeta">連載： <a href="https://html5experts.jp/series/google-io-2014-2/" class="series-191" title="Google I/O 2014 特集" data-wpel-link="internal">Google I/O 2014 特集</a> (2)</div><p>まもなくキーノートがはじまります！HTML5 Experts.jpでは、現地で取材中のエキスパート・編集部と連携し、ライブレポート形式にて本ページにて、最新情報をお届けいたします！</p>

<p>まずは、キーノート会場からご紹介です。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io01.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io01.jpg" alt="io01" width="1012" height="759" class="alignnone size-full wp-image-7497" srcset="/wp-content/uploads/2014/06/io01.jpg 640w, /wp-content/uploads/2014/06/io01-300x225.jpg 300w, /wp-content/uploads/2014/06/io01-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a></p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/10453028_750539778322094_4305687654356604239_o.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/10453028_750539778322094_4305687654356604239_o.jpg" alt="Google I/Oキーノート会場画像" width="1080" height="720" class="alignnone size-full wp-image-7370" srcset="/wp-content/uploads/2014/06/10453028_750539778322094_4305687654356604239_o.jpg 640w, /wp-content/uploads/2014/06/10453028_750539778322094_4305687654356604239_o-300x200.jpg 300w, /wp-content/uploads/2014/06/10453028_750539778322094_4305687654356604239_o-1024x682.jpg 1024w, /wp-content/uploads/2014/06/10453028_750539778322094_4305687654356604239_o-207x137.jpg 207w" sizes="(max-width: 1080px) 100vw, 1080px" /></a></p>

<p>カウントダウンがはじまってます！
<a href="https://html5experts.jp/wp-content/uploads/2014/06/io02.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io02.jpg" alt="io02" width="1012" height="569" class="alignnone size-full wp-image-7498" srcset="/wp-content/uploads/2014/06/io02.jpg 640w, /wp-content/uploads/2014/06/io02-300x168.jpg 300w, /wp-content/uploads/2014/06/io02-207x116.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a></p>

<p>ピタゴラスイッチのような演出、そしてFlappy Birdの映像も流れてます。
<a href="https://html5experts.jp/wp-content/uploads/2014/06/io03.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io03.jpg" alt="io03" width="1012" height="569" class="alignnone size-full wp-image-7499" srcset="/wp-content/uploads/2014/06/io03.jpg 640w, /wp-content/uploads/2014/06/io03-300x168.jpg 300w, /wp-content/uploads/2014/06/io03-207x116.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a></p>

<p>Michael Gorman氏のスピーチではじまりました。
<a href="https://html5experts.jp/wp-content/uploads/2014/06/io100.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io100.jpg" alt="io100" width="1012" height="569" class="alignnone size-full wp-image-7575" srcset="/wp-content/uploads/2014/06/io100.jpg 640w, /wp-content/uploads/2014/06/io100-300x168.jpg 300w, /wp-content/uploads/2014/06/io100-207x116.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
前回のGoogleIOはグローバルなイベントであり、547箇所で視聴している人がいます。早速、グローバルなスマフォの出荷数を見ます。全四半期では３億台以上が出荷されています。Androidを使っているユーザは毎年数が倍増しており、今年は１０億人以上のユーザが利用しています。</p>

<p>Androidユーザは9300万人が自分撮りをしています。我々の推定では、1000億会場もAndroidをチェックしています。
<a href="https://html5experts.jp/wp-content/uploads/2014/06/io06.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io06.jpg" alt="io06" width="1012" height="759" class="alignnone size-full wp-image-7502" srcset="/wp-content/uploads/2014/06/io06.jpg 640w, /wp-content/uploads/2014/06/io06-300x225.jpg 300w, /wp-content/uploads/2014/06/io06-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a></p>

<p>タブレットの話もすると、数は非常に伸びています。Androidのタブレットは世界市場の62%を占めています。これはkindleを含んでいません。また、利用状況を見ると、一年前はyoutubeを見る人は28%がyoutubeを視聴していましたが今は42%です。今年だけで、アプリケーションのインストールは200%以上増えています。また、10億人以上のAndroidユーザがいますが、50億人以上のユーザにリーチしたいと考えています。</p>

<p>本日はAndroidとChromeについてお話いたします。まずはAndroid &#8220;L&#8221; Developer Previewについてです。（編集部補足：Kit Katの次ですね。まだ正式名称は内緒のようで、単なるLとして紹介されてます。）</p>

<p>デザインは今日非常に重要です。Lではマテリアルデザイン（材料設計）を取り入れています。マテリアルデザインは、直感的に人々が理解できるようなデザインです。例えば、
影を作ることにより、どのように動くかについて意味をもたらすようなものです。また、Lのガイドラインにより、開発者は1つのデザインで、様々なデバイスのデザインを最適化できます。</p>

<p>（編集部補足：マテリアルデザインについてはこちらの動画をご覧ください。）</p>

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

<p>さらにLでは、Android開発者はシームレスなアニメーションを作ることができます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io07.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io07.jpg" alt="io07" width="1012" height="569" class="alignnone size-full wp-image-7503" srcset="/wp-content/uploads/2014/06/io07.jpg 640w, /wp-content/uploads/2014/06/io07-300x168.jpg 300w, /wp-content/uploads/2014/06/io07-207x116.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a></p>

<p>昨年はPolymerを発表しましたが、マテリアルデザインの機能をPolymerを介して提供します。マテリアルデザインではスムースなアニメーションを作れます。具体的に、Lのユーザエクスペリエンスからお話します。Lには洗練されたノーティフィケーションもあります。Lの場合には即時的にロック画面から確認ができます。</p>

<p>Lではノーティフィケーションを優先度をつけて整理できます。さらにノーティフィケーションを、一回のスワイプで外すこともできます。またheads upというノーティフィケーション機能を導入しています。これは緊急度の高いものを通知する機能です。また新しいコンセプトとして、パーソナルアンロックという機能を導入します。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io08.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io08.jpg" alt="io08" width="1012" height="759" class="alignnone size-full wp-image-7504" srcset="/wp-content/uploads/2014/06/io08.jpg 640w, /wp-content/uploads/2014/06/io08-300x225.jpg 300w, /wp-content/uploads/2014/06/io08-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a></p>

<p>次はパフォーマンスです。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io09.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io09.jpg" alt="io09" width="1012" height="759" class="alignnone size-full wp-image-7505" srcset="/wp-content/uploads/2014/06/io09.jpg 640w, /wp-content/uploads/2014/06/io09-300x225.jpg 300w, /wp-content/uploads/2014/06/io09-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
Androidのバーチャルマシンについて様々な意見を頂いてきました。今日、我々はLの新たな実行環境として、ARTを提供します。ARTは新たなガーベジコレクタも提供します。ARTは64bitアーキテクチャに対応しています。</p>

<p>また、Lでは、GPU性能も向上しています。（Lを用いたムービーが再生される）水の反射や煙のエフェクト、秋のリリースでPCレベルのものがポケットに収まるようになります。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io10.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io10.jpg" alt="io10" width="1012" height="759" class="alignnone size-full wp-image-7506" srcset="/wp-content/uploads/2014/06/io10.jpg 640w, /wp-content/uploads/2014/06/io10-300x225.jpg 300w, /wp-content/uploads/2014/06/io10-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
最後にバッテリです。プロジェクトVoltaをはじめました。これにより持続時間を向上させています。バッテリ性能を確かめるには、まずは計測をしないといけないので、Battery histrianを作りました。これにより当時の状況を見ることができるようになりました。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io11.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io11.jpg" alt="io11" width="1012" height="759" class="alignnone size-full wp-image-7507" srcset="/wp-content/uploads/2014/06/io11.jpg 640w, /wp-content/uploads/2014/06/io11-300x225.jpg 300w, /wp-content/uploads/2014/06/io11-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
そしてジョブスケジューリングAPIも新しくなっており、消費電力も効率化されています。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io12.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io12.jpg" alt="io12" width="1012" height="759" class="alignnone size-full wp-image-7508" srcset="/wp-content/uploads/2014/06/io12.jpg 640w, /wp-content/uploads/2014/06/io12-300x225.jpg 300w, /wp-content/uploads/2014/06/io12-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
LではジョブスケジューリングAPIで、バッテリ接続していても自動的にバッテリを節約できます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io13.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io13.jpg" alt="io13" width="1012" height="759" class="alignnone size-full wp-image-7509" srcset="/wp-content/uploads/2014/06/io13.jpg 640w, /wp-content/uploads/2014/06/io13-300x225.jpg 300w, /wp-content/uploads/2014/06/io13-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
明日の午前中には、LのプレビューSDKを提供します。Nexus7で今日にでもはじめられます。5000の新たなAPIが提供され、パフォーマンスも向上しています。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io14.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io14.jpg" alt="io14" width="1012" height="759" class="alignnone size-full wp-image-7510" srcset="/wp-content/uploads/2014/06/io14.jpg 640w, /wp-content/uploads/2014/06/io14-300x225.jpg 300w, /wp-content/uploads/2014/06/io14-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
これまでのAndroidのイノベーションを振り返ると、オープンプラットフォームで様々な技術革新を提供してきました</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io15.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io15.jpg" alt="io15" width="1012" height="759" class="alignnone size-full wp-image-7511" srcset="/wp-content/uploads/2014/06/io15.jpg 640w, /wp-content/uploads/2014/06/io15-300x225.jpg 300w, /wp-content/uploads/2014/06/io15-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
セキュリティアップデートもGooglePlayを介して利用できます。ファクトリーリセットプロテクションを使い、さらに安全に活用できます。
プライバシーもLの側面にあります。ユーザは個人情報の保護を確実にできます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io16.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io16.jpg" alt="io16" width="1012" height="759" class="alignnone size-full wp-image-7512" srcset="/wp-content/uploads/2014/06/io16.jpg 640w, /wp-content/uploads/2014/06/io16-300x225.jpg 300w, /wp-content/uploads/2014/06/io16-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
ユーザはマルチスクリーンの世界を生きています。例えば、車にのってもネットへ接続しています。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io17.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io17.jpg" alt="io17" width="1012" height="759" class="alignnone size-full wp-image-7513" srcset="/wp-content/uploads/2014/06/io17.jpg 640w, /wp-content/uploads/2014/06/io17-300x225.jpg 300w, /wp-content/uploads/2014/06/io17-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
シームレスな形式で、どのデバイスを使っていても同様なエクスペリエンスを提供します。その一つとして紹介するのは</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io18.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io18.jpg" alt="io18" width="1012" height="759" class="alignnone size-full wp-image-7514" srcset="/wp-content/uploads/2014/06/io18.jpg 640w, /wp-content/uploads/2014/06/io18-300x225.jpg 300w, /wp-content/uploads/2014/06/io18-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
androidWearです。
Android Wearでは例えば、センサによってコンテキストを認識、必要な情報を提供します。ユーザはこのデバイスを常に身につけていることによります。世界中の人はAndroid Phoneを毎日125回以上チェックしていますが、このウェアラブルなウォッチを使えば、すぐに確認できます。まずはLGウォッチで紹介しましょう。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io19.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io19.jpg" alt="io19" width="1012" height="759" class="alignnone size-full wp-image-7515" srcset="/wp-content/uploads/2014/06/io19.jpg 640w, /wp-content/uploads/2014/06/io19-300x225.jpg 300w, /wp-content/uploads/2014/06/io19-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
これにより、ウェアラブルな形で、流れるようなアニメーションで、フライト情報のような様々な情報を確認できます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io20.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io20.jpg" alt="io20" width="1012" height="759" class="alignnone size-full wp-image-7516" srcset="/wp-content/uploads/2014/06/io20.jpg 640w, /wp-content/uploads/2014/06/io20-300x225.jpg 300w, /wp-content/uploads/2014/06/io20-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
UIのモデルですが、Androidがどのように機能するか？まずは天気や通勤時間を確認できます。また、ウォッチから簡単にスマートフォンと連携できます。簡単にメモもとれます。とったメモはすぐにスマートフォンに同期されるのです。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io21.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io21.jpg" alt="io21" width="1012" height="1349" class="alignnone size-full wp-image-7517" srcset="/wp-content/uploads/2014/06/io21.jpg 480w, /wp-content/uploads/2014/06/io21-225x300.jpg 225w, /wp-content/uploads/2014/06/io21-768x1024.jpg 768w, /wp-content/uploads/2014/06/io21-155x207.jpg 155w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
例えば電話がかかってきた場合は、ウォッチに情報が表示されます。ウォッチを上下にスワイプすることによって、電話を拒否するようなこともできます。また下にスワイプダウンすれば、都合がよくなるまで割り込みを避けられます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io101.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io101.jpg" alt="io101" width="1012" height="1349" class="alignnone size-full wp-image-7581" srcset="/wp-content/uploads/2014/06/io101.jpg 480w, /wp-content/uploads/2014/06/io101-225x300.jpg 225w, /wp-content/uploads/2014/06/io101-768x1024.jpg 768w, /wp-content/uploads/2014/06/io101-155x207.jpg 155w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
また、ウォッチで音楽もコントロールできますし、再生している最中のアルバム情報もチェックできます。また、その他の機能として、ジョギングの後の心拍数なども計測できます。AndroidWearSDKによって、開発者は様々なものを構築できます。色々なアプリケーションが何十億という通知を、自分の腕で確認できます。3月に開発者プレビューをリリースしています。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io24.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io24.jpg" alt="io24" width="1012" height="759" class="alignnone size-full wp-image-7520" srcset="/wp-content/uploads/2014/06/io24.jpg 640w, /wp-content/uploads/2014/06/io24-300x225.jpg 300w, /wp-content/uploads/2014/06/io24-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
ユーザには、さらに良いエクスペリエンスを提供できるようになります。GmailやHangoutと統合できるようになります。eat24というアプリを紹介しましょう。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io25.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io25.jpg" alt="io25" width="1012" height="1349" class="alignnone size-full wp-image-7521" srcset="/wp-content/uploads/2014/06/io25.jpg 480w, /wp-content/uploads/2014/06/io25-225x300.jpg 225w, /wp-content/uploads/2014/06/io25-768x1024.jpg 768w, /wp-content/uploads/2014/06/io25-155x207.jpg 155w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
まずピザのオーダがウォッチからできます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io26.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io26.jpg" alt="io26" width="1012" height="1349" class="alignnone size-full wp-image-7522" srcset="/wp-content/uploads/2014/06/io26.jpg 480w, /wp-content/uploads/2014/06/io26-225x300.jpg 225w, /wp-content/uploads/2014/06/io26-768x1024.jpg 768w, /wp-content/uploads/2014/06/io26-155x207.jpg 155w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
支払いもウォッチからできます。これだけで、ピザがあなたのもとに届きます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io102.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io102.jpg" alt="io102" width="1012" height="759" class="alignnone size-full wp-image-7583" srcset="/wp-content/uploads/2014/06/io102.jpg 640w, /wp-content/uploads/2014/06/io102-300x225.jpg 300w, /wp-content/uploads/2014/06/io102-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
ソーシャルレシピのような例もあります。レシピをウォッチで見ると、携帯にもすぐに同期されています。これは料理をしている間に身につけていてもOKです。防水処理されておりますので。タイマーもすぐできます。ウォッチさえあれば大丈夫。焼き過ぎなんてありえないです。</p>

<p>音声のアクションを色々とお見せしましたが、他のアクションにも応用可能です。Okay google, call me car　といえば、位置情報を確認して、車がついたらウォッチに通知してくれます。また目的地についたらウォッチに通知してくれるようなアプリも作れます。さて実際のウォッチですが、</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io27.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io27.jpg" alt="io27" width="1012" height="759" class="alignnone size-full wp-image-7523" srcset="/wp-content/uploads/2014/06/io27.jpg 640w, /wp-content/uploads/2014/06/io27-300x225.jpg 300w, /wp-content/uploads/2014/06/io27-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
今日の午後からLGウォッチをプレイストアで発注できます！またサムスンもAndroidwearファミリー人参加してもらいました！Samsung Gear Liveも午後から発注できます。また丸いUIのMoto3も夏から発売されます。(編集部補足：米国での発売情報です)</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io28.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io28.jpg" alt="io28" width="1012" height="1012" class="alignnone size-full wp-image-7524" srcset="/wp-content/uploads/2014/06/io28.jpg 640w, /wp-content/uploads/2014/06/io28-150x150.jpg 150w, /wp-content/uploads/2014/06/io28-300x300.jpg 300w, /wp-content/uploads/2014/06/io28-207x207.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
Android Wearはシームレスなデバイスすると述べました。次は車を考えてみましょう。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io29.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io29.jpg" alt="io29" width="1012" height="1012" class="alignnone size-full wp-image-7525" srcset="/wp-content/uploads/2014/06/io29.jpg 640w, /wp-content/uploads/2014/06/io29-150x150.jpg 150w, /wp-content/uploads/2014/06/io29-300x300.jpg 300w, /wp-content/uploads/2014/06/io29-207x207.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
Open Automotive Allianceを発表し、Connected Carを現実にしたいと思います。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io30.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io30.jpg" alt="io30" width="1012" height="1012" class="alignnone size-full wp-image-7526" srcset="/wp-content/uploads/2014/06/io30.jpg 640w, /wp-content/uploads/2014/06/io30-150x150.jpg 150w, /wp-content/uploads/2014/06/io30-300x300.jpg 300w, /wp-content/uploads/2014/06/io30-207x207.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
そこで、本日はandroid autoを発表します。android autoでは、Androidプラットフォームを自動車のために作りなおしました。運転中にも使えるようにしています。android autoはコンテキスト対応しており、的確な情報を必要なタイミングで必要な情報を出してくれます。また完全に音声対応されているので必要な情報を音声で使えます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io31.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io31.jpg" alt="io31" width="1012" height="759" class="alignnone size-full wp-image-7527" srcset="/wp-content/uploads/2014/06/io31.jpg 640w, /wp-content/uploads/2014/06/io31-300x225.jpg 300w, /wp-content/uploads/2014/06/io31-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
androidフォンを車に近づけると、android autoを車の画面にそれを表示させます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io103.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io103.jpg" alt="io103" width="1012" height="759" class="alignnone size-full wp-image-7584" srcset="/wp-content/uploads/2014/06/io103.jpg 640w, /wp-content/uploads/2014/06/io103-300x225.jpg 300w, /wp-content/uploads/2014/06/io103-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
そして車のコントロールするために、タッチスクリーンを使えます。しかし、アプリケーションはスマートフォンで動作していますよ。さらに、Google Play Musicの主な機能をコントロールできます。これを手を使わずにコントロールできます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io32.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io32.jpg" alt="io32" width="1012" height="759" class="alignnone size-full wp-image-7528" srcset="/wp-content/uploads/2014/06/io32.jpg 640w, /wp-content/uploads/2014/06/io32-300x225.jpg 300w, /wp-content/uploads/2014/06/io32-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
そうそう、皆様はGoogle Mapが好きですよね。android autoはもちろん対応していて音声が使えます。「ヤングミュージアムはいつからやっていますか？」と聞けば、「朝からやっています」ち答えてくれます。次に、「Navigate There」と言えば、ヤングミュージアムへのナビゲーションを開始します。また、その最中に届いたメッセージはheads upで通知でされます。このとき、マップの移動画面も出しながら、音声で返答できます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io33.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io33.jpg" alt="io33" width="1012" height="759" class="alignnone size-full wp-image-7529" srcset="/wp-content/uploads/2014/06/io33.jpg 640w, /wp-content/uploads/2014/06/io33-300x225.jpg 300w, /wp-content/uploads/2014/06/io33-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
android autoについてお話してきましたが、スマートフォンやタブレットと同じように開発できる、android auto SDKを今日発表します。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io34.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io34.jpg" alt="io34" width="1012" height="759" class="alignnone size-full wp-image-7530" srcset="/wp-content/uploads/2014/06/io34.jpg 640w, /wp-content/uploads/2014/06/io34-300x225.jpg 300w, /wp-content/uploads/2014/06/io34-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
SDKがあれば音声を簡単に使えます。またメッセージングAPIもあります。これにより、Appをユーザへ提供しています。わずか数行のコードで車の中でも対応できます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io35.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io35.jpg" alt="io35" width="1012" height="759" class="alignnone size-full wp-image-7531" srcset="/wp-content/uploads/2014/06/io35.jpg 640w, /wp-content/uploads/2014/06/io35-300x225.jpg 300w, /wp-content/uploads/2014/06/io35-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
40の新しいpartnerがOpen Automotive Allianceに参加しています。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io37.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io37.jpg" alt="io37" width="1012" height="759" class="alignnone size-full wp-image-7533" srcset="/wp-content/uploads/2014/06/io37.jpg 640w, /wp-content/uploads/2014/06/io37-300x225.jpg 300w, /wp-content/uploads/2014/06/io37-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
車をもっていない人もいますよね。そこで、次はTVです。TVは2006年からあまり進化していません。その結果スマートテレビは限定できでした。Androidtvを発表します！Androidtvでは音声入力を活用でき、バーチャルコントローラも使えます。例えば、生のTVが流れている上に、コンテンツをオーバレイできます。TVはコンピュータと違い、エンターテイメントのインターフェースがあります。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io38.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io38.jpg" alt="io38" width="1012" height="569" class="alignnone size-full wp-image-7534" srcset="/wp-content/uploads/2014/06/io38.jpg 640w, /wp-content/uploads/2014/06/io38-300x168.jpg 300w, /wp-content/uploads/2014/06/io38-207x116.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
例えば、「2012年からオスカーを受賞した番組」と音声入力すると、一覧で表示できます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io39.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io39.jpg" alt="io39" width="1012" height="759" class="alignnone size-full wp-image-7535" srcset="/wp-content/uploads/2014/06/io39.jpg 640w, /wp-content/uploads/2014/06/io39-300x225.jpg 300w, /wp-content/uploads/2014/06/io39-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
リモートコントロールがない場合には、Android wear、ウォッチを使ってTVをコントロールできます。つまり、ウォッチをリモコンとして、TVをコントロールできます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io40.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io40.jpg" alt="io40" width="1012" height="759" class="alignnone size-full wp-image-7536" srcset="/wp-content/uploads/2014/06/io40.jpg 640w, /wp-content/uploads/2014/06/io40-300x225.jpg 300w, /wp-content/uploads/2014/06/io40-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
次はゲームの話です。これまでタブレット等でやっていたゲームを今度はTVで楽しめます。例えば、マルチプレイヤーゲームも楽しめます。</p>

<p>他にも、スマートフォンの映像を直接TVにキャストできます。ChromeCastの拡張のような形です。AndroidTVは複数のデバイスタイプ、つまりTV、セットトップボックス、ゲーム機にも対応しており、協業しています。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io41.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io41.jpg" alt="io41" width="1012" height="759" class="alignnone size-full wp-image-7537" srcset="/wp-content/uploads/2014/06/io41.jpg 640w, /wp-content/uploads/2014/06/io41-300x225.jpg 300w, /wp-content/uploads/2014/06/io41-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
実際に、2014-2015年にSony、SharpがandroidTVを出します。最後ですが、ADT1というTV開発キットを提供します。これにより、今日から皆様も開発できます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io42.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io42.jpg" alt="io42" width="1012" height="759" class="alignnone size-full wp-image-7538" srcset="/wp-content/uploads/2014/06/io42.jpg 640w, /wp-content/uploads/2014/06/io42-300x225.jpg 300w, /wp-content/uploads/2014/06/io42-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
次はChromeCastを紹介します。ChromeCastは非常に販売が好調です。実はエレクトロニックデバイスとしては、Amazonで一番売上をあげているものです。このChromeCastははじまりにすぎません。この数ヶ月で6000人のデベロッパが登録しており、10000のアプリがGoogleCastReadyのアプリが生まれています。chromecast.com/appsからアクセスするとGooglecastのアプリケーションが簡単に使えます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io43.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io43.jpg" alt="io43" width="1012" height="759" class="alignnone size-full wp-image-7539" srcset="/wp-content/uploads/2014/06/io43.jpg 640w, /wp-content/uploads/2014/06/io43-300x225.jpg 300w, /wp-content/uploads/2014/06/io43-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
TVは使われていない時間が多いですが、それを活用しようと考えています。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io104.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io104.jpg" alt="io104" width="1012" height="759" class="alignnone size-full wp-image-7587" srcset="/wp-content/uploads/2014/06/io104.jpg 640w, /wp-content/uploads/2014/06/io104-300x225.jpg 300w, /wp-content/uploads/2014/06/io104-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
例えば、フォトフレームのように使うこともできます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io44.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io44.jpg" alt="io44" width="1012" height="759" class="alignnone size-full wp-image-7540" srcset="/wp-content/uploads/2014/06/io44.jpg 640w, /wp-content/uploads/2014/06/io44-300x225.jpg 300w, /wp-content/uploads/2014/06/io44-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
次はChromebookの話です。我々な生活の中で重要なデバイスとして、まずはChromebookがありました。ユーザはこれを非常に楽しんでいます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io45.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io45.jpg" alt="io45" width="1012" height="759" class="alignnone size-full wp-image-7541" srcset="/wp-content/uploads/2014/06/io45.jpg 640w, /wp-content/uploads/2014/06/io45-300x225.jpg 300w, /wp-content/uploads/2014/06/io45-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
今、AmazonのレーティングでTop10のラップトップは、すべてChromebookです。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io46.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io46.jpg" alt="io46" width="1012" height="759" class="alignnone size-full wp-image-7542" srcset="/wp-content/uploads/2014/06/io46.jpg 640w, /wp-content/uploads/2014/06/io46-300x225.jpg 300w, /wp-content/uploads/2014/06/io46-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
Chromebookに近づいてスマートフォンを持っていれば、chromebookに自動的にサインインできます。GoogleNowの通知も導入済みです。何かあれば、Chromebookでテキストメッセージも追加できます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io47.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io47.jpg" alt="io47" width="1012" height="759" class="alignnone size-full wp-image-7543" srcset="/wp-content/uploads/2014/06/io47.jpg 640w, /wp-content/uploads/2014/06/io47-300x225.jpg 300w, /wp-content/uploads/2014/06/io47-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
このようにChromebookは素晴らしいのですが、ここで我々が考えていたのは、AndroidアプリケーションをChromebookでも利用したいという点です。技術的には非常に難しいのですが、AndroidアプリケーションをChromebookで動かせるようにポーティングできています。</p>

<p>さて、次は法人（企業）の話もしましょう。企業では、個人携帯と会社携帯が別物でした。Lでは、両方のエクスペリエンスを統合して、使えるようになります。一つのデバイスで大丈夫になります。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io48.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io48.jpg" alt="io48" width="1012" height="759" class="alignnone size-full wp-image-7544" srcset="/wp-content/uploads/2014/06/io48.jpg 640w, /wp-content/uploads/2014/06/io48-300x225.jpg 300w, /wp-content/uploads/2014/06/io48-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
データは完全に分離されており、セキュアな形になります。もうひとつ、よく要望される機能について紹介します。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io49.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io49.jpg" alt="io49" width="1012" height="759" class="alignnone size-full wp-image-7545" srcset="/wp-content/uploads/2014/06/io49.jpg 640w, /wp-content/uploads/2014/06/io49-300x225.jpg 300w, /wp-content/uploads/2014/06/io49-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
Navie Office Editingも提供します。たとえば、皆様はEmailを使ってwordファイルを受信しますが、今まではそれをdocファイルに変換していましたが、これからはNativeな形式でofficeファイルとして使えるようになります。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io50.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io50.jpg" alt="io50" width="1012" height="759" class="alignnone size-full wp-image-7546" srcset="/wp-content/uploads/2014/06/io50.jpg 640w, /wp-content/uploads/2014/06/io50-300x225.jpg 300w, /wp-content/uploads/2014/06/io50-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
次はGoogleDriveです。Google Drive for Workの機能を法人にも提供します。エンタープライズに対して、すべての機能を提供します。また、無制限のストレージを月10ドルで提供します。これからはAndroid、Chrome、Google Doc、Google Driveを統合的に使えます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io51.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io51.jpg" alt="io51" width="1012" height="759" class="alignnone size-full wp-image-7547" srcset="/wp-content/uploads/2014/06/io51.jpg 640w, /wp-content/uploads/2014/06/io51-300x225.jpg 300w, /wp-content/uploads/2014/06/io51-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
実際に、多くの企業・学校がすでに利用しています。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io52.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io52.jpg" alt="io52" width="1012" height="759" class="alignnone size-full wp-image-7548" srcset="/wp-content/uploads/2014/06/io52.jpg 640w, /wp-content/uploads/2014/06/io52-300x225.jpg 300w, /wp-content/uploads/2014/06/io52-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
Googleの中で様々なインフラを作っています。ここでGoogleプラットフォームの話をしましょう。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io53.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io53.jpg" alt="io53" width="1012" height="759" class="alignnone size-full wp-image-7549" srcset="/wp-content/uploads/2014/06/io53.jpg 640w, /wp-content/uploads/2014/06/io53-300x225.jpg 300w, /wp-content/uploads/2014/06/io53-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
Compute Engineを使っています。エクサバイトまで拡張するストレージも提供しておりますし、スケーラビリティも確保しています。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io55.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io55.jpg" alt="io55" width="1012" height="759" class="alignnone size-full wp-image-7551" srcset="/wp-content/uploads/2014/06/io55.jpg 640w, /wp-content/uploads/2014/06/io55-300x225.jpg 300w, /wp-content/uploads/2014/06/io55-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
バックエンドを作るという意味においては、パフォーマンスがあり、簡単なツールが必要ですが、それはGoogleにしか無いと感がています。ここで4つの機能を紹介します。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io56.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io56.jpg" alt="io56" width="1012" height="759" class="alignnone size-full wp-image-7552" srcset="/wp-content/uploads/2014/06/io56.jpg 640w, /wp-content/uploads/2014/06/io56-300x225.jpg 300w, /wp-content/uploads/2014/06/io56-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
一つのアプリケーションを使って説明します。codewalksは散歩の記録をするアプリです。散歩にいってコメントをシェアするアプリですが、これは情報をクラウドにデータを入れる必要があります。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io57.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io57.jpg" alt="io57" width="1012" height="759" class="alignnone size-full wp-image-7553" srcset="/wp-content/uploads/2014/06/io57.jpg 640w, /wp-content/uploads/2014/06/io57-300x225.jpg 300w, /wp-content/uploads/2014/06/io57-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
デバッグのために、ブレークポイントを設定することもできます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io58.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io58.jpg" alt="io58" width="1012" height="759" class="alignnone size-full wp-image-7554" srcset="/wp-content/uploads/2014/06/io58.jpg 640w, /wp-content/uploads/2014/06/io58-300x225.jpg 300w, /wp-content/uploads/2014/06/io58-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
クラウドトレーシングという機能では、すべてのアプリケーションにおいて、どれだけ時間がかかったか、というのを表示してくれます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io59.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io59.jpg" alt="io59" width="1012" height="759" class="alignnone size-full wp-image-7555" srcset="/wp-content/uploads/2014/06/io59.jpg 640w, /wp-content/uploads/2014/06/io59-300x225.jpg 300w, /wp-content/uploads/2014/06/io59-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
最後はクラウドモニタリングです。これによりインフラのモニタリングをできます。例えば、どのようなサービスを利用しているかを確認できます。また数十のOpenSourceのサービスをモニタできます。例えば、こちらではRedisを確認しています。</p>

<p><img src="https://lh6.googleusercontent.com/-izqbKOhHodg/U6sScIpuLmI/AAAAAAAADoU/F9AZjDPpMI0/w1012-h1500/1566E182-4EE3-40AC-A5E7-BE07FDE35382.JPG" alt="4つ" />
いままで見てきたのは4つの機能であり、それぞれはCloud Save、Cloud Debugger、Cloud Trace、Cloud Monitoringができるようになりました。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io61.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io61.jpg" alt="io61" width="1012" height="759" class="alignnone size-full wp-image-7557" srcset="/wp-content/uploads/2014/06/io61.jpg 640w, /wp-content/uploads/2014/06/io61-300x225.jpg 300w, /wp-content/uploads/2014/06/io61-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
次はデータに注目します。データといえば、もちろん分析が必要です。
その分析において、MapReduceが最適じゃない場合もあります。特にパイプラインを使う場合です。そこで、本日はCloud Dataflowを発表します。これによりデータのパイプラインを使えます。これにより、バッチでもリアルタイムでも分析結果を確認できます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io62.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io62.jpg" alt="io62" width="1012" height="759" class="alignnone size-full wp-image-7558" srcset="/wp-content/uploads/2014/06/io62.jpg 640w, /wp-content/uploads/2014/06/io62-300x225.jpg 300w, /wp-content/uploads/2014/06/io62-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
例えば、CloudDataflowでTwitterを分析してみます。これは、並列化された高速な分析が可能です。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io63.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io63.jpg" alt="io63" width="1012" height="759" class="alignnone size-full wp-image-7559" srcset="/wp-content/uploads/2014/06/io63.jpg 640w, /wp-content/uploads/2014/06/io63-300x225.jpg 300w, /wp-content/uploads/2014/06/io63-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
ブラジルvsクロアチア戦の分析結果です。ポシティブネガティブな結果を表示しています。この例では、途中でレフリーについて物議を醸しているようです。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io64.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io64.jpg" alt="io64" width="1012" height="759" class="alignnone size-full wp-image-7560" srcset="/wp-content/uploads/2014/06/io64.jpg 640w, /wp-content/uploads/2014/06/io64-300x225.jpg 300w, /wp-content/uploads/2014/06/io64-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
また話を技術的な部分に戻して、なぜMapReduceを使うのをやめたかというと、cloudパイプラインによってこれまで大変だったことが簡単にできるようになり、スピードも早くなるからです。我々自身の問題を解決できるようになったので、MapReduceを使うのをやめたのです。</p>

<p>次はGooglePlayについて話をしましょう。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io65.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io65.jpg" alt="io65" width="1012" height="759" class="alignnone size-full wp-image-7561" srcset="/wp-content/uploads/2014/06/io65.jpg 640w, /wp-content/uploads/2014/06/io65-300x225.jpg 300w, /wp-content/uploads/2014/06/io65-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
GooglePlayで開発、配信、マネタイズについて話をします。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io66.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io66.jpg" alt="io66" width="1012" height="759" class="alignnone size-full wp-image-7562" srcset="/wp-content/uploads/2014/06/io66.jpg 640w, /wp-content/uploads/2014/06/io66-300x225.jpg 300w, /wp-content/uploads/2014/06/io66-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
まず開発におけるテストです。テストは大変ですよね。appurifyはもっとも洗練されたテストです。appurifyにより、iOSでもAndroidでも活用できるテストが利用できます。また、特定の環境も擬似できます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io67.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io67.jpg" alt="io67" width="1012" height="759" class="alignnone size-full wp-image-7563" srcset="/wp-content/uploads/2014/06/io67.jpg 640w, /wp-content/uploads/2014/06/io67-300x225.jpg 300w, /wp-content/uploads/2014/06/io67-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
次にGoogleFitPlatformを紹介します。GoogleFitがない時代は、専用アプリを使う必要があり、その提供形式はサイロ型になっていました。GoogleFitでは統合した形で、包括的なアプリを活用できます。例えば、ユーザにはより良いレコメンデーションを提供します。具体的には、アディダスやナイキがGoogleFitのエコシステムに参加しています。このSDKはあと数週間で利用可能になります。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io68.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io68.jpg" alt="io68" width="1012" height="759" class="alignnone size-full wp-image-7564" srcset="/wp-content/uploads/2014/06/io68.jpg 640w, /wp-content/uploads/2014/06/io68-300x225.jpg 300w, /wp-content/uploads/2014/06/io68-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
次は配信です。クロスプラットフォームのサービスとして、これまで、Google Play Gameを提供してきました。Google Play Gameも強化されます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io69.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io69.jpg" alt="io69" width="1012" height="759" class="alignnone size-full wp-image-7565" srcset="/wp-content/uploads/2014/06/io69.jpg 640w, /wp-content/uploads/2014/06/io69-300x225.jpg 300w, /wp-content/uploads/2014/06/io69-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
例えば、Game Profileにより、自分のアイデンティティをクラウドに保存でき、それをゲームで活用できます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io70.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io70.jpg" alt="io70" width="1012" height="759" class="alignnone size-full wp-image-7566" srcset="/wp-content/uploads/2014/06/io70.jpg 640w, /wp-content/uploads/2014/06/io70-300x225.jpg 300w, /wp-content/uploads/2014/06/io70-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
次はマネタイズです。よくある方法はキャリアにお金を払う方法です。実は今25ヶ国で利用できます。アプリケーションやゲームやムービを、携帯電話の請求書に載せて払えます。これによりユーザに請求を簡単にできます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io71.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io71.jpg" alt="io71" width="1012" height="759" class="alignnone size-full wp-image-7567" srcset="/wp-content/uploads/2014/06/io71.jpg 640w, /wp-content/uploads/2014/06/io71-300x225.jpg 300w, /wp-content/uploads/2014/06/io71-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
実際に前回のI/Oから50億ドルをユーザが支払っています。</p>

<p>次はお待ちかねのガジェットを見てみましょうか。（編集部補足：参加者へのお土産コーナーです）</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/06/io72.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io72.jpg" alt="io72" width="1012" height="759" class="alignnone size-full wp-image-7568" srcset="/wp-content/uploads/2014/06/io72.jpg 640w, /wp-content/uploads/2014/06/io72-300x225.jpg 300w, /wp-content/uploads/2014/06/io72-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
カードボードや
<a href="https://html5experts.jp/wp-content/uploads/2014/06/io73.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io73.jpg" alt="io73" width="1012" height="759" class="alignnone size-full wp-image-7569" srcset="/wp-content/uploads/2014/06/io73.jpg 640w, /wp-content/uploads/2014/06/io73-300x225.jpg 300w, /wp-content/uploads/2014/06/io73-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
や
<a href="https://html5experts.jp/wp-content/uploads/2014/06/io74.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/06/io74.jpg" alt="io74" width="1012" height="759" class="alignnone size-full wp-image-7570" srcset="/wp-content/uploads/2014/06/io74.jpg 640w, /wp-content/uploads/2014/06/io74-300x225.jpg 300w, /wp-content/uploads/2014/06/io74-207x155.jpg 207w" sizes="(max-width: 1012px) 100vw, 1012px" /></a>
を会場の皆様にはプレゼントいたします。</p>

<p>これでキーノートは終わりです。参加してくれてどうもありがとう！</p>
]]></content:encoded>
		
		<series:name><![CDATA[Google I/O 2014 特集]]></series:name>
	</item>
		<item>
		<title>【予告】Google I/O 2014 キーノート ライブレポート</title>
		<link>/iwase/7343/</link>
		<pubDate>Wed, 25 Jun 2014 00:00:59 +0000</pubDate>
		<dc:creator><![CDATA[岩瀬 義昌]]></dc:creator>
				<category><![CDATA[最新動向]]></category>
		<category><![CDATA[Google I/O 2014]]></category>

		<guid isPermaLink="false">/?p=7343</guid>
		<description><![CDATA[連載： Google I/O 2014 特集 (1)Googleが主催する開発者イベントである Google I/O 2014 が、日本時間の6/26(木) 午前1時の基調講演を皮切りに始まります！HTML5 Exper...]]></description>
				<content:encoded><![CDATA[<div class="seriesmeta">連載： <a href="https://html5experts.jp/series/google-io-2014-2/" class="series-191" title="Google I/O 2014 特集" data-wpel-link="internal">Google I/O 2014 特集</a> (1)</div><p>Googleが主催する開発者イベントである Google I/O 2014 が、日本時間の6/26(木) 午前1時の基調講演を皮切りに始まります！HTML5 Experts.jpでは、現地で取材中のエキスパート・編集部と連携し、ライブレポート形式にて読者の皆様に最新情報をお届けいたします！</p>

<p><strong><a href="https://html5experts.jp/iwase/7369/" title="Google I/O 2014 キーノート ライブレポート" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">ライブレポートはこちらから！</a></strong></p>

<p>1時よりキーノートがはじまりますが、まずはその前に会場画像をお届けいたします。</p>

<p>朝食会場です。
<img src="https://lh3.googleusercontent.com/-UpxINdfpLhc/U6rpgklyc8I/AAAAAAAADa4/Agggi7_HPKc/w1012-h1500/A07BC74C-8E89-41EA-B686-A9965E992FBA.JPG" alt="朝食会場" /></p>

<p>そして朝食画像です。
<img src="https://lh6.googleusercontent.com/-5mjFIZW4Ic8/U6rpXfCyovI/AAAAAAAADaw/NfQynWDIikc/w1012-h1500/22AA160B-277D-4975-9506-4E8594ACFE0C.JPG" alt="朝食画像" width="80%" height="80%" /></p>
]]></content:encoded>
		
		<series:name><![CDATA[Google I/O 2014 特集]]></series:name>
	</item>
	</channel>
</rss>
