吉川 徹

ブラウザベンダーとエキスパートが語るWebテクノロジーの未来【後編】──Webの未来を語ろう 2017

特別企画「Webの未来を語る」のエキスパート、ブラウザベンダー対談の後編です。前編はこちらから。今年1年のWeb業界を占うということで、エキスパート、ブラウザベンダーの方々に「Webの未来」について、がっつりお話を聞いてきました。

どこから、どこまでが Progressive Web Apps?

白石 PWAは、すごい重要なキーワードだと思いますが、どこまでがPWAなんですかね? 厳密に定義付けする必要があるとも思わないんですが、モバイルのホーム画面にアイコンを追加するとか、プッシュができますというところまではPWAなんだろうと思うんですが、BluetoothだとかUSBだとかはPWAと言えるのかどうか。

えーじ 一応基準として挙げられるものは2つあって、1つはWeb Fundamentalsというサイトにチェックリストをのせています。あまり明確に定義するのはやめようという話は当初ありましたが、ただそれだとちょっと曖昧すぎるということで、いくつかポイントを挙げてチェックリストになっています。チェックリストの中身は、今後増える可能性はあります。

もう1つは、「Lighthouse」というものをChromeの拡張機能node moduleで出しています。拡張機能のほうを使うと、見ているページのスコアを出しくれるというものです。今後これがDevToolsにも入る予定で、AuditでWebサイトの分析をユーザーエクスペリエンス視点でやるという感じになります。その評価基準のひとつとして、PWAの対応状況をスコアリングしてくれるようになります。

矢倉 そういえば、Chrome Dev Summitのセッションの中のひとつで、Chromeチームの定義として「Webのエクスペリエンスを根本的に向上させるもの」という風に紹介されていました。ここで言うエクスペリエンスは何かというと、速くて、信頼できて、ユーザーとのエンゲージメントもある。それでいて、モバイル向けサイトとPWAと別に作るんじゃなくて、ひとつのドメインでWebのエクスペリエンスを向上させるのがPWAだよ、と説明していました。使う技術スタックだけではPWAじゃないというとこに踏み込んだなっていう印象がありますね。

えーじ スピード周りもすごく重要で、そういう意味ではHTTP/2だとかHTTPSへの対応もPWAの要素のうちのひとつと数えるといえば数えられます。モジュールローディングなどで、どうやってモジュールをいかに早くロードするか、などもそうですね。そこはノウハウとかもこれからどんどん溜まっていって、そのあたりが今一番面白いところだと思うんですけど、これから1年ぐらいでおそらくいろいろ整備されてくるかなと思います。

白石 WHATWGのローダーみたいな?

矢倉 それよりかはどちらかというと、フレームワークとかのほうになるのかなって思います。Webpack 2のtree-shakingとか。仕様は実装を待たないといけないので、いま手をつけ始めやすいところという意図なのかなと。

白石 少し前に公開したAngularのインタビューで、結論のところでAngularも半年ごとにメジャーバージョンアップしていって、もしかしたら後方互換性のことは気にせずにやっていくかもしれないと。なので、Webの進化にどんどん追随していくという感じで、Webの進化とAngularの進化が両輪で進んで行くみたいな感じになるのかな、っていう形で終わったんですけど、そんな感じで捉えていけばいいんでしょうか?

えーじ それとはあんまり関係ないかな(笑)。一般的なエコシステムというかプラットフォーム(基盤)が動いていく仕組みとして、Webの場合どんどん変えていく、進んでいるっていうことなのかなと思います。Angularもそれに追随するためにそういう動きをとっていると捉えれば、当然開発者側もそういう体制をとっていく必要があるなと僕はすごく感じます。

なので、受託開発で年に1回大きく予算を取って開発するというよりは、ちゃんと継続的に開発していくような体制をとっていったほうがいいんじゃないかなと思いますね。

Progressive Web Appsは、完全にモバイルアプリとしても動くようになる

えーじ ひとつ面白いのは、こないだのChrome Dev Summitで発表したんですが、PWAをホーム画面に追加するだけじゃなくてバイナリにもなります。apkファイル(Androidのアプリケーションパッケージ)ですね。

白石 それって何か利点があるんですか?

矢倉 ランチャーの中に入ります。

えーじ リソースの管理とかもアプリと同様にできるので、ユーザーからしてみると完全にアプリだと思って使うことができます。

矢倉 設定の中のアプリ一覧の中にリストされたりとかしますね。

白石 なるほど。Androidだと、このアプリはSDカードにデータを保存するとかそういう設定ができますよね。そういうこともできるようになるのかな?

えーじ ちょっとそこまでは把握していないですけど、できるんじゃないですかね。

白石 完璧なアプリ扱いですね。それは面白いな。

Firefox、EdgeのProgressive Web Apps対応状況は?

あとMozillaさんにも聞きたいんですけど、Android版のFirefoxとかでPWAはやっているんですか?

浅井 やっていますよ。PWAをサポートしますっていうのは用語の出来た 2015 年から表明していて、アプリをホーム画面に追加するなど一通りできるようになってきていますが、フルスクリーンで起動するオプションへの対応などが抜け落ちていたり、細部でまだChromeさんに追いついていないところがあるのが正直な状況ですね。

何で遅れてるいるかについては、Firefox OSをやめてMozilla内で開発体制を切り替えていた影響もあります。Firefox OSをやめた理由は、純粋にWeb技術で全てを実現可能にしましょうって自分たちでリードして標準も作っていったんですが、誰も同じ標準を実装してくれない(笑)。それが単独実装の独自仕様状態になってしまなら、それはよくないエコシステム、もうひとつのWebベースのネイティブみたいになってしまうと良くないのでやめました。

スマートフォンだけじゃなくてもっと多くのものがインターネットに繋がる時代なので、その時代に対応していくため力点を変えましょうと、スマートフォン向けのFirefox OSに注力していたモバイル周りの開発体制を切り替えている中で、PWA対応も一部遅れてしまいました。

よく見てる人はわかるかも知れませんが、Android版Firefoxは機能面の追加が少し緩やかな時期があります。ちょっと遅れているところはありますが、PWA対応も普通に入ってくると思ってください。Service Worker対応やホーム画面にアイコンを追加するメニューなどが(一部は開発版だけに)入っている通りです。

白石 Firefoxでホーム画面にアイコンを追加して、それを押すとFirefoxで起動するんですか?

浅井 今は、Firefoxの新しいタブとして起動するっていう形です。Chromeだとオプション次第でフルスクリーンで起動できます。もう一つChromeとの違うのはFirefoxの場合は、今はアプリマニフェストがあるとメニューに「ホーム画面に追加」が出てきます。Chromeの場合には、何度も使っていたり、一週間の別の日に2回以上同じサイトを訪問すると勝手にバナーが出てきて、インストールしませんかと聞いてきますが、それをFirefoxでやるかどうかは未定です。

白石 プッシュ通知はどうですか?

浅井 プッシュ通知は随分昔に実装してますね。

矢倉 Edgeは、どうなんでしょう?

物江 現在、実装中です。もしかしたら次のバージョンで入るかも?

浅井 僕らとしては、みんなで同じようにPWAに対応していくというのはある意味コンセンサスを取りながら実装する取り組みのひとつだと思っています。APIレベルのものってプログレッシブに、使う使わないって判断を段階的にできるから、それぞれのペースで実装したらいいと。

それに対してWeb Assemblyは、JavaScript言語仕様が違うと構文エラーで全く動かなくなるのと同様、バイナリ形式は最初から全員で確実に統一することが必須になるため、自分たちがリードしている取り組みでも先行アナウンスなどはせず、何から何まで各社と同時に行う体制にしているんですね。この辺りは特に頑張って一緒にやることを重視している取り組みです。

次世代ブラウザエンジンを作るMozillaのQuantumプロジェクト

浅井 Firefox OSのときにAPIを作りまくっても、リードしても誰もついてこなくて悲しい思いをするってのはある意味反省点としています。特にハードウェア系のAPI、例えば加速度センサーとか近接センサーなどはAndroid版の初期から実装してましたが、そういう単独でのAPI先行実装は一段落しています。

どちらかというと今はパフォーマンスをすごく重要視していて、Web Assemblyもその一つですが、同時にそもそもAPIレベルじゃなくってブラウザエンジン自体のアーキテクチャ自体を大きく変える余地があるだろうと、GPUを使ったり、CPUのマルチコアを活かすといったところに注力して、ブラウザエンジンを次世代のアーキテクチャに置き換えていく動きをしているところです。

矢倉 Quantumですよね。

浅井 そうですね。Quantumプロジェクトと呼んでいますが、Mozillaでは珍しく一時的に社内Confidentialとされていて、話をまとめて決めてから大々的に発表したプロジェクトです。といっても数ヶ月後にはすぐ発表されたので、長い間秘密にしていたわけではないですが。

えーじ これは、Servoと関係あるんですか?

浅井 関係あります。Servoは何年も前からの取り組みなのですが、高速な並列処理を書きやすいのは勿論セグメンテーション違反などはコンパイル時にエラーとして検出でき、確実で高速な並列処理をガンガン実装できる新言語Rustを作るレベルからブラウザエンジン自体のアーキテクチャまで、全てをイマドキに刷新した、新しいブラウザエンジンを実験的に開発してきたプロジェクトです。並列化大好きなインテルとかサムスンなども参加してくれました。

ただ、Servoというのはあくまで実験的なブラウザエンジンであり、本当にすべてのAPIとかすべてのブラウザ機能を実装することを目標にしているわけじゃないんですね。Servoで新しいアーキテクチャを確認して、検証されたアーキテクチャでうまくいくものを実際のユーザ向け製品であるFirefoxのコンポーネント単位で置き換えていくっていうのがQuantumプロジェクトです。Servoの成果をFirefoxに取り入れるっていうのがQuantumという関係です。

このQuantumプロジェクトでは例えば、レイアウトやCSSのスタイリング処理を高速化します。CSSのスタイリングってまずDOMツリーを使ってそれにCSSのルールを適用していくのですが、DOMツリーって要するにツリーだから、このサブツリーとこのサブツリーを並列処理できるっていうのは当たり前のデータ構造じゃないですか。

構造的に並列化が容易だっていうのは分かっているので、並列化しやすい言語とアーキテクチャを採用して作り直しました。よくブラウザが遅い原因にリフローとか挙げられますけど、そのリフロー時に発生するレイアウト処理時間の半分がスタイリングで、そのスタイリング処理が2倍、4倍とかいうオーダーで高速化します

例えばこちらのビデオなどを見れば違いが分かります。

エフェクトが非常に滑らかになるデモ

たくさんのオブジェクトを高fpsで描画するデモ

こういうのって、やっぱりこれまで十何年もつかっていたブラウザエンジンそのままじゃ難しくって、次の世代のブラウザエンジンを作ろうって取り組みがこのプロジェクトです。Mozillaは、今ここに一番注力しています。

2017年の前半のうちに、今お見せしたスタイルのスタイリングが数倍早くなる実装がFirefoxに入るのを目標にしていたり、WebRenderと呼んでるものなどもなんとか形にしたいなと思っています。他にもネットワークの並列化とか、キャッシュをうまくするとか、そのあたりもQuantamプロジェクトで取り組んでいるところは、まだまだお楽しみにというところです。Mozillaはいま、APIとかよりエンジンの世代交代にエンジニアのリソースをがっつり割いてる感じです。

Mozillaのビジョンは、ブラウザに限らずインターネットのオープン性や、それに触れるための機会をどこまでも広げること

白石 Mozillaさんは、IoTとか、そちらのほうに注力しているというのは存じてますが、そういったあたり、Webブラウザがどこまで広がるのか、広げられるのかとか、そういったビジョンみたいなものをお聞きしたいですね。

浅井 単純にモバイルのスマートフォンだけに注力するってのをやめて、IoT時代のブラウザとかブラウザエンジンみたいなことを考えて開発をしています。だから、個別のデバイスの話よりも、そういうインターネットがどこにでも広がって、Web技術がどこでも使われる時代に適したものを作る。

だから、Quantumのようにマルチコア時代のモダンなCPUをフル活用するプロジェクトに注力するし、日本ではGeckoを組み込み用のハードウェアに移植してブラウザエンジンをより広く使えるようにするプロジェクトGecko Embeddedに取り組んでいます。組み込み機器では普通、スマートフォンとは違うCPU (SoC)を使うんですけど、そちらではChromeもFirefoxもWebKitも、みんなまともにビルドすら通らないし、パフォーマンスも全然でない。

そういう課題をちゃんと解消し、組み込み機器でも使えるブラウザ1個ぐらい作りましょうって取り組みです。全体的に、具体的なプラットフォームや製品よりも、本当にベースラインとしての誰もが使い易いコアの部分を改良をしているという感じです。

白石 じゃあそういったどこまでも広げていこうっていうのがMozillaのビジョンになるわけですね。

浅井 そうですね。もともとインターネットのオープン性とか、それに触れるための機会とかを広げるのが目的で、そのための手段がブラウザなので。じゃあ、そのブラウザっていうのはインターネットが広がるに従って、全部、ブラウザという形をとるのか、ただのJavaScriptエンジンととるのかわからないですが、それを広げるというのが僕らのミッションです。

白石 最後に、Mozillaさんが考えているPWAも、Googleが考えているPWAも変わらなと思っていいんですかね?

浅井 僕らの独自のPWAの定義は作っていません。そういう意味では変わらないと思います。

EdgeはWindowsの一部、当然これからもどんどん改良していく

白石 物江さんにもいろいろお聞きしたいんですが、Microsoftが考えるPWAとかもGoogleやMozillaと変わらないんですかね?

物江 PWA自体の考えは変わらないですね。ただ、こちらにはまだ動いているものが何もなく、それがどういったものになるかということについては、社外で話して良いかどうか許可も取れていないので私の口からはなんとも言えません。だだ、さきほど矢倉さんがおっしゃってた Edge チームの Jacob Rossi の記事によれば、アプリのようにすべてのアクセス権をもっていて、ブラウザなしで実行されるようなものを目指しているようですね。あくまでもこの記事によれば、ですが。

白石 なるほど。PWAをのっけていくプラットフォームというのは、きっとWindowsになると思いますが、そのWindows × PWAっていうのがちょっと面白いところですね。

物江 今、収益の柱はクラウドになっているので、クライアントがなんであるとか、実はあまりに気にしていないんですよね。Azure使ってくれれば。本当にみんなPWAでアプリ作ってAzureを使ってください(笑)。

白石 でもビジネス上の話って結構重要かなと思っていて、Edgeのシェアをどこまで本気で伸ばすつもりがあるのか。ブラウザって直接収益には結びつかないじゃないですか。その上で、Microsoftがどこまで本気で今後もブラウザを改良していくのかっていうところは興味があります。

物江 もちろんどんどんやります。何故かというと、うちのブラウザはWindowsの一部なので、Windowsに付随するところがいろいろあるんですね。例えば、例えば、Windows Defender Application Guardという機能では、Edgeの設定で信頼済みのサイトじゃないところでリンクをクリックするとHyper-Vシステムで完全にOSから仮想化されたプロセスが立ち上がって、そこでブラウザが動くのでマルウェアが動いたとしても外に出れないっていうものがあります。

そういった、Windowsとユーザーの安全、アクセシビリティを守るっていうところに注力していく形で進んでいます。ブラウザはWindowsの一部であり、Windowsユーザーの利便性をあげるために今後も取り組んでいきます

現場でもすごく頑張っていて、DOMのパフォーマンスを上げることに非常に躍起になっています。こないだのアニバーサリーアップデートでも相当早くなりましたが、次回のアップデートでもさらに早くなります。EdgeからIEも起動できますが、IEはブラウザではなくて、従来のIEでしか動かないものを動かすためのランタイムとして見ていただければ。

日本だと大人しく見えるかもしれないですけど、アメリカのほうではEdgeでWebのセッションとかすごくやってますね。Edgeサミットとかもやっていて、オンラインイベントとかも頑張っています。他にもEdgeのデベロッパー向けのサイトには、そこで求人することはまずないんですが、ブラウザ作りませんかっていう求人募集もやっていて、それぐらい力を入れて人を集めています。MozillaさんからもX-tag(Web Componentsのポリフィル)を作ってた方に来ていただいて、今はそれもMicrosoftがやってます。

白石 じゃあ全然やる気ありますよって感じなんですね。ちなみにCordovaにも注力してるって聞いたんですけどほんとですか?

物江 はい、注力してますね。Visual Studioが絡んでいるのもあるし、やはり周り回ってAzureのお客さんになるじゃないですか。ぶっちゃけた話、Windows Phoneがバカ売れしてたらCordovaはやらなくてもいいんですが、お察しのとおり Windows Phone は数が出ていないんですよね(笑)。Webの技術者の方々がアプリを作ってくれて、Azureを使ってくれれば最高です。

白石 なるほど、じゃあMicrosoftは、XamarinやCordovaっていうクロスプラットフォームのテクノロジーに注力していく形ですね。

そして、Appleは…?

白石 話は変わりますが、ここにいないAppleは、どうなんでしょうか。ここにいるひとは、Webに対してものすごくアグレッシブに、こう変えていこう、良くしていこうとしていると思うんですけど、Appleがどう思っているのかは気になります。何かAppleについて知っていること、感じていることがあれば教えてください。

えーじ 面白いと思ったのは、WebKitからBlinkがフォークしたときにShadow DOMが入っていたんですけど、それをWebKitから消したんですよね。にもかかわらず、去年いきなりWeb Componentsの議論にAppleさんが入ってきて、過去に我々が作っていたWeb Components周りの仕様をv0として、Appleが加わって新しく刷新した仕様をv1という形でSafariにもめでたく、Shadow DOMが入りました。今後もCustom Elementなんかも入ってくることを考えるとすごくポジティブに捉えてもいいんじゃないかなと。

白石 いきなり今年頑張り始めて、ECMAScriptとかも一気に対応したんですよね。

浅井 そうそう、なんかテクノロジープレビューだして、すごいアップデートニュース飛ばしまくってるなと思ったら、突然ECMAScriptの対応100%ですってすべてのブラウザをぶち抜いていったっていう。

ちなみに、現在ECMAScript 2015の対応はSafariが100%で、ECMAScript 2017くらいまでの仕様が安定している部分もSafari Technology Previewがリードしてるんですが、仕様議論中の先行実装ではFirefoxがトップでChromeが次、あとはその他大勢という感じで一気に下がるという感じで進められてきました。JavaScriptに限らず先進部分はだいたいその2者で実装していて、ある程度仕様が固まってくるとMSさんが追いついてくる、そんな流れですよね。Appleさんは、標準化されたものをどこかの段階でやるって決めたらいきなり投入してくる、サプライズが好きな会社。そんなイメージを持っています。

矢倉 かなり少数精鋭っていう印象を受けるし、やっぱり1年に1回しかアップデートされないブラウザエンジンというのももう少ないですし、やっぱり過去数年でWeb開発者のフラストレーションが溜まっていて、Safariが新しいIEだと揶揄されていた。そういう風にWeb開発者からの印象が悪かったんですね、それを改善しようって本気になって、例えばテクノロジープレビューを出したりとかWebKitのブログをリニューアルして積極的に情報公開したりとかというのをやっています。

カンファレンスなんかのパネルディスカッションとかにも、あんまり出ないと思うんですけど、彼らは愚直に彼らの思うWebブラウザっていうものに対してしっかり取り組んでいるなっていう印象があります。とくにJavaScript APIも実装するだけじゃなくて、早くなくちゃ意味がないと言ってますし、かなり尖ったことをやっていると。

ただ、新しい機能、例えばService Workerとかに対しては、あまり反応がないってところで、やっぱりSafariがネックになるっていう感じのところはありますけど、別に彼らはAppleストアがあるからってあぐらをかいて、Webに関して注力していないとかそういうわけではないかなと思います。

白石 ここ数年そう見えなくもなかったけど、実はそうでもないと。

矢倉 MacでSafari使うんですが、やっぱり普通に他のより速いんですよね。だからしばらくデフォルトブラウザにしてみたりとかしているんです。開発者ツールの違いや、新しい機能が載るまでに時間がかかる点で、開発者にとってはあんまり嬉しくない部分があるかもしれないですが、でもユーザーにとって使いやすいもの、早いものって考えると、それが彼らにとって一番の価値だろうと思います。もうちょっと開発者のほうにもアピールができるともっと健康的なのかなと思いますけどね。

おわりに

白石 最後に、皆さんからいろいろお話を聞いて、「Webの今後のビジョンとは何か」という問いに対しては、概ねPWAであるという印象を受けましたが、それで良いでしょうか?

物江 いろいろな動向を見ていると、そうとしか思えないですよね。

えーじ 少なくてもGoogleはそう考えています。というよりPWAっていう言葉が全部飲み込んでいるんですよ。なので、細かいところ見るとたぶん各社注力するところは違うと思うんですが、大きな視点で見ると全部PWAと言えるんじゃないかなと思います。そういう意味では、バズワード的な感じでよろしくないのかもしれないですけど、モバイルのWebを良くしていきましょう、クロスプラットフォームの部分を良くしていきましょうという想いなのかなと。

矢倉 えーじさんが最初にバズワードっていうふうに揶揄されてるって言ってましたけど、けどわかりやすいってところでPWAがある。でもPWAの細かいところをつついていくと、ただWebの良さっていうのをもっと全面に押し出していこうというのを具現化したにすぎないのかなと思っていて、まあ新たなマーケティング要素という側面もありますが、ちゃんとWebをWebとしてプロモートするっていうところに再び舵をきったのかなと思います。

白石 なるほど。皆さん、貴重にご意見をどうもありがとうございました! これにて対談を終わりにしたいと思います。

まだデータがありません。

Powered byNTT Communications

tag list

アクセシビリティ イベント エンタープライズ デザイン ハイブリッド パフォーマンス ブラウザ プログラミング マークアップ モバイル 海外 高速化 Angular2 AngularJS Chrome Cordova CSS de:code ECMAScript Edge Firefox Google Google I/O 2014 HTML5 Conference 2013 html5j IoT JavaScript Microsoft Mozilla Node.js PhoneGap Polymer React Safari SkyWay TypeScript UI UX W3C W3C仕様 Webアプリ Web Components WebGL WebRTC WebSocket