本記事は、2017/5/23, 24に開催された「de:code 2017」の1セッション、「War is over : ブラウザエバンジェリスト達とWebの未来を語ろう」を聴講したレポートです。
GoogleやMozillaのエバンジェリストたちがマイクロソフトのセッションで仲良くお話、って光景を見るだけでも楽しいセッションでした😊
左からMozilla Japan 技術戦略マネージャ 浅井智也氏、Google デベロッパーアドボケート 北村英志氏、日本マイクロソフト デベロッパーエヴァンジェリズム統括本部 物江修氏
Web Payments, WebVR, Web Assembly, Progressive Web Appsについてエバンジェリストたちが語る
Web Payments
物江 まず、Web Paymentsについてお聞かせ願いたいのですが、こちら北村さんご説明をお願いできますか？
北村 まず前提として、インターネットを利用する際に私たちがクレジットカードを利用するようになってから、それなりに時間が経過しましたね。そして現在転換期が訪れているといっていいのではないかと思います。これまでのように、フォームにクレジットカードの情報を生で入れて送信するというので、本当にいいのだろうか。
そうした問題を解決すべく提案されているのが、Payment Request APIです。他のサードパーティ製アプリに遷移して戻ってくるなどのUIを通じて、決済に必要な情報を、スムーズにユーザーに対して問い合わせることができます。
（筆者注: Payment Request APIの日本語による解説記事） （筆者注: よりシンプルな Web の決済方法 : Payment Request API の紹介）
Google デベロッパーアドボケート 北村英志氏
物江 なるほど。このPayment Request APIですが、Edgeではバージョン15からサポートしていまして、Creators Updateを適用したWindows 10上ではすでに利用可能です。Firefoxでのサポートは行われる予定があるんでしょうか？
浅井 はい、時期はまだ言えないのですが、サポートするのは確定しています。
北村 Chromeは現在Android版のみ対応していて、デスクトップ版は開発中です。
物江 あと、iOS版のChromeについても教えていただけますか？
北村 iOS版Chromeは、iOSのWebViewを使っていて、iOSのWebViewはPayment Request APIに対応していません。なので、そのままだとiOS ChromeではPayment Request APIは使えないのですが、実はこれを無理やり使えるようにしてしまおうという計画がありまして。
どう実現するかというと、ChromeからWebViewに対して機能を注入してしまうんですね。WebViewで通常使えないJavaScript APIを使えるようにしてしまう。Cordovaとかでは以前から普通に行われていたことです。
これまではiOSのWebViewに対してJavaScriptをインジェクトして、新しいAPIを使えるようにするということはしてきませんでした。なので、iOS版のChromeにとっては大きな方針転換でもあります。
物江 このように、各種のプラットフォームでサポートがすでに始まっていますので、今年中か、もしくは来年の初めくらいには、一般的に使えるAPIになってそうですね。
浅井 個人的には、（Mozillaの前身である）Netscapeが切り開いた商用インターネットの世界が、ようやくここまで来たか…と感慨深いものがあります。
WebVR
物江 では次はWebVRについてお聞きしていきましょう。WebVRについては、先日のCreators Updateから、1.1のAPIをサポートしはじめました。また、Babylon.jsやA-Frameといったライブラリを使うと、WebVRを簡単に扱うことができると。
浅井さん、A-Frameについて教えていただけますか？
浅井 A-Frameは、Web上で簡単にVRを扱えるようにすることを目指すライブラリです。例えば、HTMLタグを一つぽんと置くだけで360度画像を表示できるようにするとか。
Unityだとアセットストアがあって、アセットを購入したりすることができるのですが、それと同じようなエコシステムがコミュニティ主導で進められているのも特徴です。非常に簡単に3Dコンテンツを作れて、売り買いしながら作っていけるエコシステムができていくだろうと期待しています。
Mozilla Japan技術戦略マネージャ 浅井智也氏
物江 コンテンツで思い出したんですが、意外とWeb上で3Dを扱うような仕事ってまだ少ないらしいんですよね。WebGLがモダンブラウザ全部でサポートされるようになってから結構経つのに、WebGLってどこかゲーム用途のイメージも強いみたいで。
ただWebGLって、本来ゲーム以外の用途もたくさんあるはずなんです。例えばGrimoire.jsっていうライブラリがあるんですが、これは様々な3Dコンテンツを、簡単にWeb上で扱えるようにすることを目的としていて、こういう動きが盛り上がると、WebGLってもっと活用されるんじゃないかと思う。
浅井 その点VRは、コンテンツを中心とした盛り上がりも活発で、結構未来があるんじゃないかな、と思いますね。
物江 ちなみに、VRではなくてMR (Mixed Reality) でいうとHoloJSっていうのもあって、HoloLens用のアプリを作ることもできます…すごく大変なんですけどね(笑)。
ところでChromeも、WebVRには対応済みですよね。何か最近の動きとかを教えていただけますか？
北村 そうですねー、Daydream上でChromeを立ち上げることができるようにする、というのは聞きましたね（筆者注: VR/AR空間内でChromeを立ち上げられるように、ということだと思われる。参考: Chrome is coming to augmented reality and Google Daydream (TechCrunch)）。
WebAssembly
物江 では次は、WebAssemblyのお話を聞かせてください。やはりここは、（WebAssemblyの元になったasm.jsの開発元である） Mozillaの浅井さんにお聞きしようかと。
浅井 はい、WebAssemblyの元になったのはasm.jsという技術です。 もともと、JavaScriptは動的な言語なので、パフォーマンスの向上にも限界がある。そこで、JavaScriptのサブセットとしてasm.jsが提案されたんです。 変数の型が厳密に定義されており、さらに実行に先立ってコンパイルが可能なので、相当に速かった。
WebAssemblyは、さらにそれをコンパイル済みのバイナリとして配布できるようにする技術です。そのバイナリフォーマットに関する仕様がWebAssemblyです。実行速度は相当なもので、現在でもC言語の速度まであと20%というところまで迫っています。
物江 FirefoxやChromeではすでに対応済みなんですよね。Edgeでも、フラグをONにすると使えるようになります。 個人的にはJavaScriptを置き換えるようなものではなく、高機能な計算が必要なところに使うものだと思っていますが、合ってますか？
浅井 はい、そうだと思います。WebAssemblyに出力するのも、基本的にはC/C++やRust言語で書かれたものになりますし。
物江 ちなみに、WebAssemblyへのコンパイルって具体的にはどうやるんですか？
浅井 EmscriptenとBinaryenというツールを組み合わせて、C/C++のコードをWebAssemblyに変換する…というのが一般的ですね。基本的には、LLVMの中間言語が出力できれば、そこからEmscriptenを使ってasm.jsに変換でき、更にBinaryenでWebAssembly化できます。
（筆者注: https://github.com/kripken/emscripten/wiki/WebAssembly も参考のこと）
Progressive Web Apps
物江 昨今のWebの重要キーワード、Progressive Web Appsですが、これは北村さん説明をお願いできますか？
北村 はい。その前に、Progressive Web Appsって、ご存じの方どれくらいいます？…思ったより浸透してないですね。まだまだだな。
Progressive Web Appsっていうのは、一言で言うとモバイルウェブの新しい形です。
- Webサイトがホーム画面から起動できる
- プッシュ通知
- オフラインで動く
北村 百聞は一見にしかずで、twitter.comをAndroid 版 Chromeで開いてみるというのが一番わかりやすいと思います。 これはTwitter Liteと呼ばれていて、動作も素早いし、モバイルアプリと使い勝手はほとんど変わりません。
浅井 PWAは、アプリに比べてデータ通信量も抑えめになるそうです。例えばTwitter Liteではアプリに比べて70%データが削減できるとか。なので、ブラジル、インド、インドネシアといった、ネットワークインフラの整っていない新興国では、アプリよりもユーザのコンバージョン率が高く、採用も広まっているようです。
物江 Firefoxでの、PWA対応はいかがでしょう？
浅井 現在でもホーム画面へのインストールなど基本機能は対応していますし、今後フルスクリーン起動なども順次実装を進めていくそうです
物江 モバイルといえばネイティブアプリ、という印象はいまだに根強いですが、モバイルサイトも同時に構築できてしまうので、環境が整って利点が正しく理解されさえすれば、一気に広まりそうですよね。PWA対応していないブラウザでアクセスしたとしても、通常のWebアプリとして使えますし。
ちなみにEdgeでは、今年の夏頃から開発者向けのビルドでPWAを試せるようになります。年末ぐらいまでには、メジャーブラウザでは全体的にPWAが使えるようになりそうですね。
北村 ちなみにマイクロソフトさんの検索エンジンのBingが、PWAを見つけたらWindows Storeに並べてしまうようになるというのを最近知って、すごい荒業だけどこれは面白いなと思いました。
PWAって捉えどころがないふわっとした用語ではありますが、実際には個々の技術それぞれにもすごく価値があります。オフラインやプッシュ通知がWebアプリで行えるというのは、Ajax以来の技術的な革命じゃないかと思いますね。
Web Components
物江 そろそろお時間も迫ってまいりましたので、最後のトピックです。 Web Componentsについて語りたいのですが、北村さん、Web Componentsのご説明をお願いできますか？
北村 Web Componentsっていうのは、一言で言うと、自分でHTMLタグを作れるという技術です。そして、自作したタグ（コンポーネント）を配布できる。
Web Componentsは、最近だとSafariに搭載されたのが大きいですね。iOSを含め、割とどこでも使えるメジャーな技術になりました。
あともう一つ、AMP (Accellalated Mobile Pages）も実はWeb Componentsを使っています。AMPに対応しているサイトは、現時点でもかなりの数に上りますので、実際にはWeb Componentsはすごい勢いで広まっていると言っていいんじゃないかと思います。
物江 Polymerというライブラリもあるそうですが、それとWeb Componentsの関係はどのようなものでしょうか？
日本マイクロソフト株式会社 デベロッパーエヴァンジェリズム統括本部 物江修氏
北村 Web Componentsっていうのは、W3Cで標準化が進められている技術なんです。具体的には4つの技術から構成されています。
Custom Elementは、先程申し上げたように独自のタグを作ることのできる技術です。
Shadow DOMは、DOMのカプセル化を行えるようにする技術。
Template Elementっていうのは、「テンプレートである」という意味合い以外持たないHTML要素です。
HTML Importというのは、JSやCSSのように、HTMLもインポート可能にするという技術です。
一方でPolymerというのは、Web Componentsの上に構築されたライブラリです。
Web Components標準はそれほど高いレベルのAPIを提供しません。なので、実際にコンポーネントを作ろうとすると、実装の重複が多くなります。その重複を排除して、最小限のコードでコンポーネントを作れるようにするのがPolymerです。
物江 ちなみにEdgeは、Web Componentsについては長いこと意識しているようですが、まだ詳細は未定です。Polymerを使うと、現在のEdgeでもWeb Componentsが動作したりするんでしょうか？
北村 はい、PolymerはPolyfill（対応していないブラウザ上でAPIのエミュレーションを行うライブラリ）も含んでいますので、動作しますね。実は、現在のYouTubeサイトはWeb ComponentsベースのHTMLに全て書き換えられているんです。コードを見てみると面白いと思いますよ。
あと、Polymerはライブラリだけじゃなくてコンポーネントも提供しているんです。 http://webcomponents.org/ を見てみると、すでにいろんなコンポーネントが利用できるのを確認できると思います。
まとめ
物江 では、このディスカッションの締めくくりとして、Webの今後について一言ずついただけますでしょうか？
浅井 はい、モバイル時代は長らくネイティブアプリが中心でしたが、ここに来てWebの力が盛り返してきているのを感じています。ネイティブアプリと遜色ない機能を提供できるだけではなく、ユーザーにリーチするのも、アプリストアよりもWebのほうがハードルが低い。リンクを送るだけでプロモーションできますしね。そういう点で、PWAには期待しています。
北村 PWAについては、ぼくも同じく期待しています。とりあえずTwitter Liteを触ってみてほしいですね。
あとWebの今後という点で思いついたのですが、企業の枠組みを超えた合意形成の方法としては、Webはかなり進んでいるんじゃないかと思います。ディスカッションの場作りとか、標準化を行う上で蓄積されたノウハウはかなり貴重で、他の場面や業界にも活かされていくんじゃないかな…と考えています。
物江 ではそろそろお時間ですので、本セッションを終わりとしたいと思います。みなさま、本日は大変興味深いお話を、どうもありがとうございました。