Google I/O 2018 で発表されたウェブの現状
2018年6月12日火曜日
この記事は Malte Ubl、Ben Galbraith による Chromium Blog の記事 "The State of the Web at Google I/O 2018" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
ウェブは世界にとって貴重な存在で、多くのメリットを備えています。ウェブは比類のない配信プラットフォームで、世界中の人々がさまざまなコンテンツにアクセスでき、企業はあらゆる場所の顧客にアプローチできます。ウェブの成功を支えているのはそのコミュニティとオープンな一連の規格です。こうしたコミュニティと規格のおかげで、ウェブのダイナミックな性質が維持され、すべての人々がウェブを利用できます。
Google は、PageRank から Chromium に至るまで、ウェブの継続的な成功に深く関与してきました。先月、毎年開催されるデベロッパー カンファレンスである Google I/O で、ウェブの現状について発表し、ウェブの継続的な発展を推進して、すべての人々に対して適切に機能させようとする Google の最近の取り組みの一部を紹介しました。主要なテーマを次にまとめていますが、YouTube ですべての発表を視聴することをおすすめします。
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 テクノロジーが可能にする未来に期待するとともに、デベロッパーからの支援を通じて構想を洗練させていくことを楽しみにしています。
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
ウェブは世界にとって貴重な存在で、多くのメリットを備えています。ウェブは比類のない配信プラットフォームで、世界中の人々がさまざまなコンテンツにアクセスでき、企業はあらゆる場所の顧客にアプローチできます。ウェブの成功を支えているのはそのコミュニティとオープンな一連の規格です。こうしたコミュニティと規格のおかげで、ウェブのダイナミックな性質が維持され、すべての人々がウェブを利用できます。
Google は、PageRank から Chromium に至るまで、ウェブの継続的な成功に深く関与してきました。先月、毎年開催されるデベロッパー カンファレンスである Google I/O で、ウェブの現状について発表し、ウェブの継続的な発展を推進して、すべての人々に対して適切に機能させようとする Google の最近の取り組みの一部を紹介しました。主要なテーマを次にまとめていますが、YouTube ですべての発表を視聴することをおすすめします。
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