投稿者: Istio、Dan Ciruli

Reviewed by Chiko Shimizu - Developer Relations Team



ウェブは進化し、私たちは Google Earth をウェブ プラットフォームで利用できるようにしたいと考えました。そうすれば多くの人が、全世界を体験簡単に体験できるようになるからです。ウェブアプリは優れたユーザー エクスペリエンスを実現できます。これはリンクを張ることができるためです。つまりリンクを共有することで、クリック 1 つでアプリにアクセスできるのです。またソフトウェアをダウンロードする際に、ウイルスが紛れ込むリスクもないため安全です。さらにウェブの他の部品に埋め込み、他の機能と組み合わせて使うこともできます。


WebAssembly(Wasm)は、ウェブでネイティブ コードを使えるようにする W3C のウェブ標準です。Earth チームは、Google Earth を複数のブラウザで動作させるために検討を続けてきました。そして、WebAssembly にその解を見つけました。Google Earth が初めてウェブに登場したのは 2 年ほど前です。そのときは、Chrome 限定のソリューションであるネイティブ クライアント(NaCl)が使われました。ブラウザでネイティブ コードを実行し、ユーザーがモダンなウェブ アプリケーションに期待するパフォーマンスを実現する方法は、これしかありませんでした。しかし、すべてのブラウザが同じように新技術をサポートしているとは限らないので、ブラウザ間の互換性を実現するのは容易なことではありません。 


今回、Google Earth に WebAssembly を使った経験から、WebAssembly にはさまざまなブラウザからアプリにアクセスできるようにするだけでなく、オンライン体験をスムーズにできる可能性があると感じています。Google Earth のベータ版プレビューを試せるので、Earth チームが実現したことをご確認ください。実装の詳細については、こちらをご覧ください。


WebAssembly と複数のスレッドを利用するアプリケーションを連携させる方法
WebAssembly を使ってみようと考えている方は、いくつかの仕様を理解しておくことが重要です。特に、スレッドに関することが重要になります。


ブラウザには、マルチスレッドをサポートしているものも、そうでないものもあります。Google Earth では、データが常にブラウザにストリーミングされ、圧縮されたデータが復元され、画面にレンダリングする準備が行われています。この作業をバックグラウンド スレッドで行うことができれば、ブラウザでの Google Earth のパフォーマンスは明らかに向上します。


Chromium ベースのブラウザ(Chrome、将来のバージョンの Edge、Opera など)は、すべて WebAssembly をサポートしています(マルチスレッドに対応しているものも、していないものもあります)。Chromium をベースとした新バージョンの Edge が配布されれば、Edge でも Chrome と同じように WebAssembly アプリが動作するようになるでしょう。Firefox は WebAssembly をサポートしていますが、SharedArrayBuffer の問題により、マルチスレッドのサポートは無効にせざるを得ませんでした。また、Opera は Chromium ベースですが、現在のバージョンの Opera はシングル スレッドでしか WebAssembly をサポートしていません。Safari の WebAssembly 実装は強力ですが、WebGL2 を完全にはサポートしていません。各ブラウザの WebAssembly のサポート状況の詳細については、詳しい技術解説の投稿をご覧ください。


Emscripten: Google Earth のブラウザ移植を実現したツール
ネイティブ オペレーティング システム向けに作られたアプリケーションをウェブに移植するのは、簡単な作業ではありません。Emscripten ツールチェーンは、デベロッパーが C++ を WebAssembly にコンパイルし、ネイティブ アプリケーションが使うたくさんの OS インターフェースをエミュレートする際に役立ちます。たとえば、アプリケーションでは、OS にファイルを開くように伝える POSIX API の fopen を使っているかもしれません。Emscripten がこの呼び出しを見つけると、ローカル ストレージなどのブラウザで使える適切な動作を提示してくれます。OpenGL å‘¼ã³å‡ºã—ã‚’ WebGL 呼び出しに変換するときも、同じことをしてくれます。他の多くの機能と同様、この機能もネイティブ アプリケーションをウェブに移植する作業を大幅に簡素化するものです。


Emscripten は、他のアプリケーションをウェブに移植する際にも使われています。たとえば、35 年前に作られた AutoCAD のコードベースや、それよりも新しい Sketchup のようなアプリケーションなどです。


WebAssembly の今後
今後 WebAssembly には、いくつかの機能が追加される予定です。以下の機能は、Google Earth のウェブ エクスペリエンスの改善にも役立ちます。


SIMD サポート: SIMD(single instruction, multiple data)では、1 つの CPU 命令が複数のデータに影響を与えます。SIMD を適切に設定すると、データ処理のスループットが上昇します。今年中には、SIMD の一部が初めて WebAssembly でサポートされる予定です。これによって、Google Earth のパフォーマンスが大きく向上することを期待しています。 


ダイナミック リンク: この機能によって、Google Earth の読み込み時間が最適化される可能性があるので、Google Earth を別のウェブページやオンライン体験に埋め込む道が開かれます。現在のところ、連携が必要なモジュールは、すべて同時にコンパイルする必要があります。ダイナミック リンクが利用できれば、アプリケーションをたくさんのモジュールに分割し、小さなクライアントを配布して他のパーツを徐々に読み込むことができます(遅延読み込みと呼ばれています)。


デバッグの強化: 現在の Wasm ではソースマップがサポートされているので、デベロッパー ツールでソースコードを確認できます。これは大きな第一歩ですが、デベロッパーが変数の内容を調べたり、適切なスタック トレースを表示したりできるようにしたいと考えています。

Google Earth は、大きな一歩を踏み出してクロスブラウザ標準を採用しました。これにより、アプリケーションをさらに多くのブラウザに移植できるようになりましたが、今後もさらに改善を重ねる予定です。ぜひ自分のネイティブ コードで WebAssembly を試してみてください。高速で一貫性のある体験をすべてのユーザーに提供しましょう。



投稿者: Web Assembly、V8 およびウェブ機能担当プロダクト マネージャー、Thomas Nattestad


Reviewed by Chiko Shimizu - Developer Relations team


Service Worker
Service Worker API の導入は、ウェブに最近加えられた最も重要な改善の 1 つです。Service Worker はバックグラウンドで動作して、ネットワーク リクエストを横取りし、リクエストを処理して、ウェブアプリがオフラインで動作できるようにします。そのため、デベロッパーはページの限られたライフサイクルから解放されます。Service Worker を使用すると、サイトでプッシュ通知を受け取ったり、バックグラウンドでデータを同期したりできます。Apple は今年の 3 月、iOS および MacOS に搭載された Safari 11.1 に Service Worker のサポートを追加し、Microsoft Edge には先週から Service Worker が付属するようになりました。つまり、現在、すべての最新ブラウザでこの規格がサポートされています。Service Worker の使用はアーキテクチャに対する大きな変更になる可能性があるため、手軽に使用できるように、Google は Workbox を作成し、汎用的かつ強力な多くの Service Worker パターンを使いやすい API にまとめています。このライブラリのバージョン 3 がリリースされているので、モジュールにビルドして、必要な機能のみを使用することができます。

プログレッシブ ウェブアプリ(PWA)
Service Worker は PWA の多くの機能を根底から支えています。世界中のさまざまな業種の企業が、PWA をビルドして大きな成功を収めています。PWA サイトを昨年から公開している Starbucks では、毎日のアクティブ ユーザーの数が 2 倍に増えました。実際、Google が計測したアドバタイジング サイトでは、サイトが PWA に移行した後、モバイル コンバージョン率が平均して 20% 増加しました。

多くの初期 PWA はモバイルに重点を置いていましたが、そのメリットは PC にも広がっています。Chrome では、PC に PWA を「インストール」する機能が間もなく提供されます。サイトには独自のアイコンが付与され、スタンドアロンのウィンドウで表示されます。また、ページ内検索、共有可能な URL、Google Cast のサポートなど、ユーザーがブラウザに期待する強力な機能が維持されます。I/O では、Spotify がデスクトップ PWA としてリッチメディア エクスペリエンスをどのようにデプロイしているかを紹介しました。デスクトップ PWA の「インストール」サポートは、6 月上旬に ChromeOS の Chrome 67 に追加され、今年中に Windows および macOS にも導入される予定です。



WebAssembly
WebAssembly を使用すると、C や C++ などの言語で記述された、高パフォーマンスの低レベルコードをウェブサイトで実行し、ウェブ プラットフォーム上にまったく新しいクラスのコンテンツを展開することができます。3 月に、Autodesk の AutoCAD チームはウェブ自体よりも古い 35 年の歴史を持つコードベースをコンパイルし、WebAssembly を使ってブラウザ内で直接実行できるようにしました。AutoCAD の機能がリンクされるため、使用している端末やオペレーティング システムに関係なく、ブラウザ内で CAD 図面を直接編集できるようになりました。AutoCAD のエンジニアリング チームは、単一の C++ コードベースを使用して、デスクトップ チームが変更を加えたときに、ウェブアプリにも簡単に変更を組み込めるようにしました。

コードを移植したり、独自のコードを記述したりする方法については、C ライブラリと DOM の連携を解説している WebAssembly コードラボをご覧ください。C で記述された複雑なライブラリを使用しているか、新しいコーデックをウェブ プラットフォームに組み込む必要があるか、または Unity や Unreal Engine などのエンジンを使用しているかどうかに関係なく、どの場合でも WebAssembly は有用です。

Lighthouse
Lighthouse はウェブサイトの品質を分析するためのツールで、サイトのパフォーマンスを測定し、ユーザー エクスペリエンスを改善するためのガイダンスを提供します。Lighthouse は、Chrome の DevTools 内から直接アクセスできるほか、コマンドラインから実行したり、他の開発ツールと統合したりできます。2018 年だけで、50 万人のデベロッパーがサイトに対して Lighthouse を定期的に実行しています。Google はウェブの変化が速いことを認識しています。Lighthouse を使用すると、パフォーマンスに関する最新のベスト プラクティスを常に把握できます。I/O で発表された Lighthouse 3.0 はすでに一般公開されました。

Lighthouse により、制御された環境でサイトの読み込みパフォーマンスが明確に把握できるようになります。ただし、現実世界の実際のユーザーに対するサイトのパフォーマンスを知る必要がある場合は、Chrome ユーザー エクスペリエンス レポートをご覧ください。このレポートでは、最もアクセスが多い 400 万のウェブサイトについてオリジンレベルのパフォーマンス指標が提供されます。これらのツールやその他のツールでサイトのパフォーマンスを包括的に確認する方法の詳細については、スピードツールのインフォグラフィックをご覧ください。

AMP
AMP は、さまざまな優れたユーザー エクスペリエンスを備えた信頼性の高い高速のウェブサイトをビルドするための Web Component ライブラリおよびエコシステムです。現在、4600 万個のドメインに 60 億以上の AMP ページがあり、Google 検索からのページ読み込み時間の中央値は 1 秒未満です。企業は AMP を活用して成功を収めています。たとえば、世界規模のオンライン小売りマーケットプレイスである AliExpress は、AMP を活用したプログレッシブ ウェブアプリとして新しいモバイルサイトを最近公開しました。この新しいサイトでは、非検索トラフィックのコンバージョン率が 31% も増加しました。

モバイルでコンテンツを消費する方法は変化し続けており、全画面で短いストーリーを配信する方式の人気がますます高まっています。AMP プロジェクトでは、サイトオーナーのニーズを満たすため、モバイルファーストのストーリー配信用にビルドされた豊富なウェブ コンポーネントである AMP ストーリーの開発を最近発表しました。このフォーマットの開発は継続中であり、デベロッパーの皆さんには、独自のストーリーをビルドしてみることをおすすめします。AMP チームは、デベロッパーの皆さんからのフィードバックをお待ちしています。



Web Packaging
Web Packaging ã¯ä¸€é€£ã®æ–°ã—いテクノロジーであり、Google では、ウェブ コンテンツがウェブに配布されて、ユーザーに共有される方法が Web Packaging によって再定義されるだろうと考えています。Web Packaging ã‚’使用すると、サイトオーナーは、HTTPS の整合性保証を維持しながら、他のパーティから配布されるコンテンツをバンドルすることができます。Web Packaging ã«ã‚ˆã£ã¦å¯èƒ½ã«ãªã‚‹æ–°ã—いユースケースを探っているときに、AMP には興味深い使用方法があることに気づきました。AMP チームおよびウェブ コミュニティとの連携を通じて、AMP ドキュメントが AMP キャッシュから提供された際にサイトオーナーの元の URL を保持できるソリューションを設計することができました。

私たちの取り組みを示すものとして、AMP プロジェクトの協力企業である Food Network と Pinterest は、以下のような Web Packaging ã®ãƒ‡ãƒ¢ã‚’作成しています。さらに詳しく知りたい方のために、AMP チームは、Web Packaging ãŒãƒ¦ãƒ¼ã‚¶ãƒ¼ã¨ã‚µã‚¤ãƒˆã‚ªãƒ¼ãƒŠãƒ¼ã«ã©ã®ã‚ˆã†ãªãƒ¡ãƒªãƒƒãƒˆã‚’もたらすかについて、こちらの記事で詳しく説明しています。AMP アプリケーションに加えて、Web Packaging ãƒ†ã‚¯ãƒŽãƒ­ã‚¸ãƒ¼ãŒå¯èƒ½ã«ã™ã‚‹æœªæ¥ã«æœŸå¾…するとともに、デベロッパーからの支援を通じて構想を洗練させていくことを楽しみにしています。

Google 検索から読み込まれた AMP ページでウェブ パッケージングを使用しているデモ

Polymer
Polymer とは、再利用可能なカスタム Web Component を作成して、他のデベロッパーと共有したり、そのコンポーネントを組み合わせて高性能なメンテナンス性の高いアプリをビルドしたりできるようにする JavaScript ライブラリです。I/O では、このライブラリのバージョン 3.0 を発表しました。これにより、Polymer エコシステムが大幅にアップグレードされています。パッケージ管理システムとして NPM を、そして構成単位として ES6 モジュールを使用するためのサポートが全面的に提供されるため、Polymer ベースの Web Component ã‚’他のお気に入りのウェブ開発ツールやフレームワークと簡単に併用できるようになりました。

また、Web Component ã®æ–°ã—い基本クラスである LitElement が導入されました。このクラスでは、Lit-HTML の表現力と Web Component ãŒçµ„み合わされ、最新の表現力の高いテンプレート構文を使用して軽量のリアクティブ コンポーネントを作成することがより簡単になっています。

Web Component é§†å‹•型の PWA をビルドするための包括的な開始点となる PWA Starter Kit もリリースしました。これらの PWA は、高速で信頼性と応答性が高く、テーマ設定が可能であり、Lighthouse PWA およびパフォーマンス基準において最高点を獲得しています。

Angular
今年の I/O で、Angular チームはコミュニティの成長に関する概要を発表し、コア フレームワーク、CLI、およびバージョン 6 の Angular マテリアル ライブラリに追加されたすばらしい新機能をいくつか紹介しました。Angular は何百万人ものデベロッパーによって使用されており、大きな推進力を得て、すばらしいエコシステムが構築されています。「ng update」や「ng add」など、バージョン 6 でリリースされた新しいコマンドを使用すると、アプリケーションを最新の状態に維持できるほか、Angular チームによって引き続き安定性と革新のバランスが保たれるため、デベロッパーは開発を加速させることができます。

また、Angular チーム は、Project Ivy で Angular に加えられるいくつかの改善点を少しだけ紹介しました。これらの改善により、Angular では既存のアプリケーションと連携しながら、デバッグが簡単になり、コンパイルおよび実行がさらに高速化されます。チームは、小さな Hello World アプリケーションの形式でこれらの改善のユーティリティを紹介し、使用されない Angular 機能がアプリケーションの JavaScript バンドルから自動的に削除されることを示しました。

Google および Chrome のミッションは、コミュニティと協力して、統合された高速かつ信頼性の高い魅力的なエクスペリエンスを構築することです。オープン ウェブ プラットフォームになった新しい強力な機能と、ユーザー向けに高品質のサイトをすばやく作成できるようにする包括的な一連のツールに大きな期待を寄せています。ウェブの最新の進化に関する情報を確認するには、デベロッパー ポータルにアクセスするか、Google Developers YouTube チャンネルで今年の I/O の動画をご覧ください。今年の後半に開催される Chrome Dev Summit でデベロッパーの皆さんとお会いするのを楽しみにしています。



Reviewed by Eiji Kitamura - Developer Relations Team


Posted by Yoshifumi Yamaguchi - Developer Relations Team
Share on Twitter Share on Facebook