この記事は Chrome、テクニカル プログラム マネージャー、Paul Rossman による Chromium Blog の記事 "Extending Chrome App Support on Chrome OS" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。

この記事は Leo Postovoit による The AMP Blog の記事 "Powerful impact: Why we AMPized the Australian pop culture site – GOAT" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。


NOVA Entertainment はオーストラリアでも特に有名なメディア ブランドで、過去 19 年間にわたってラジオ、メディア、ローカル コンテンツに携わってきました。その NOVA がポップカルチャーやニュース、エンターテイメント向けのモバイル ファースト プラットフォームとして構築したのが GOAT です。

GOAT は、プログレッシブを重視した WordPress ビルドの開発によって恩恵を受けた最初の NOVA のサイトです。GOAT の編集者たちの目標の 1 つは、アクセスしやすく便利で高速なフォーマットによってコンテンツを届けることです。パフォーマンスとユーザビリティは最優先事項です。ここでは、GOAT の技術革新において AMP と PWA がどのようなインパクトをもたらしたのかについて説明します。

課題
GOAT ウェブサイトには、パフォーマンスとユーザビリティに関する問題が発生していました。ユーザー エクスペリエンスを改善して多くの端末との互換性を向上させるための最優先事項は、サイトのパフォーマンスを向上させることでした。サイトがコンテンツやアセットをレンダリングする際に遅延が生じ、ユーザーやオンサイト体験、共有体験の妨げになっていました。これは驚くべきことではありません。サイトへのエンゲージメントのレベルにパフォーマンスがどれほど重要かは、複数の調査結果が一貫して示しています。
今年東京で開催された技術カンファレンスの講演の冒頭で、Google 社員の Jeany Halliman は、Google がメディアサイトの訪問者を対象に「サイトを見る際に一番嫌なこと」を尋ねた調査について触れました。

「広告業界出身の私は、いつも（訪問者が嫌うのは）広告だと思っていました。しかし、ユーザーの大半は、遅いウェブサイトと答えたのです」 – Jeany Halliman

この回答と、ページのスピードが直帰率に与える影響を細かく観測した結果には、明らかに相関性があります。しかし、過大な広告戦略が注目され、多くのメディアサイトがそれに対する「反動」を受けていることを考えれば、多くの方にとって、スピードがページの広告よりも上位に来ていることは驚きだったはずです。

チャンス
NOVA は、WordPress エンジニアリング エコシステムのリーダー的存在であり、Google と連携して公式の AMP Plugin for WordPress のメンテナンスを行っている XWP に連絡しました。XWP は、Rolling Stone、News Corp Australia、Rogers などの大手パブリッシャーや、Cloudinary、Google、BigCommerce、Automattic などの技術パートナー向けに美しく複雑なソリューションを開発していることで知られ、ウェブを進化させることを重視して仕事に取り組んでいます。

NOVA のステークホルダーが示した主要な目標は、パフォーマンス、拡張性、ユーザビリティでした。そのため、XWP にとっては、向かうべき道がプログレッシブ AMP によるアプローチであることは明白でした。

一方で、AMP ファースト戦略に移行するにあたって最も重要な目的は明らかでした。ユーザーが繰り返し利用し、喜んで共有してくれる高速な体験を作成するには、CI/CD、自動テスト、高可用性ホスティングを含む開発のベスト プラクティスを駆使して確実に拡張性や安定性を実現することも重要です。GOAT サイトは、コードの品質が高く、最新の WordPress の実装に関する留意点を踏まえて構築されているので、早いだけでなく、長く使えるものとして作られています。

解決策
AMP やその他のパフォーマンス改善策に精通している XWP は、NOVA が GOAT サイトで達成したい目標を実現するため、さまざまな実装を検討しました。最も適していたのは、1 つのコードベースで開発を効率化できる AMP ファースト戦略でした。

そこからさらに一歩進めた GOAT は、PWA 機能プラグイン（これも XWP と Google が連携して開発しています）のすばらしい事例とも言えるでしょう。このプラグインは、Service Worker を活用してオフライン モードや通知などの追加機能を提供します。また、この定義済みソリューションでは、AMP と PWA のメリットを今までになく簡単に組み合わせることができる amp-install-serviceworker コンポーネントが活用されています。

現在含まれている PWA 機能の範囲は限定的ですが、長期的な目標として、PC やモバイル端末へのインストール機能、さらに充実したオフライン モードやプリフェッチ ページ、ネイティブのプッシュ通知などを追加したいと考えています。これらの機能は、ウェブのあちこちに見られる強力な PWA と同様のものです。

広告の組み込み 
広告の読み込みが適切に設定されていない場合、ページのパフォーマンスが低下する原因となる可能性があります。GOAT のようなメディア重視のサイトでは、特にその傾向が顕著です。AMP を使うということは、XWP が GOAT の広告スタックを実装する際に、AMP 標準に準拠したアプローチを採用しなければならないということです。  完全に AMP 対応されていない広告プロバイダを利用するために多少の妥協は必要になりましたが、結果的には、広告収入を頼りにするメディアサイトとしてかなり高いパフォーマンスを実現しました。これは 2 つの長所を兼ね備えています。すなわち、優れたユーザー エクスペリエンスを実現でき、広告の読み込みも次善の方法で最適化されているので、パフォーマンスの低下につながることはありません。

結果 
ここまで説明してきたように、GOAT は NOVA のサイトで初めて統合編集ワークフローとパフォーマンスを重視したテーマビルドを実稼働させたものです。これは PWA サイトであると同時に、すべてのテンプレートがネイティブ AMP として構築されています。パフォーマンス面での成果は明らかです。

• 複数のプロパティの編集操作を統合しています。
• モバイルの Google Pagespeed Insights スコアは 7 から 77 に上昇しました。
• WebPageTest 3G テスト: 実装前 / 実装後。ポイント: レンダリング開始時間（Start Render）が 1.5 秒短縮されました。操作が可能になるまでの時間は、43 秒からわずか 10 秒になりました。
• Lighthouse テスト: 実装前 / 実装後。最初のコンテンツ描画（First Contentful Paint）が 5.8 秒から 2.5 秒になりました（3.3 秒短縮）。パフォーマンス スコアは 7 から 65 に上昇しました。最初の CPU アイドル時間（First CPU Idle）は 16.2 秒から 5.9 秒に短縮されました。
• GTmetrix: 実装前 / 実装後。PageSpeed スコアは D（63%）から B（82%）に上昇しました。

AMP の活用を始める
GOAT サイトの AMP ファースト戦略で達成した結果をもとに、AMP を活用して現在のビジネスの課題を解決する方法について、さらに学習することをお勧めします。

• AMP の詳細については、amp.dev にあるプロジェクトのホームページをご覧ください。  
• 自分のサイトの互換性を評価し、AMP によってパフォーマンスとユーザー エクスペリエンスの恩恵を得られるかを確認してみたい方は、AMPized.com（WordPress サイトで AMP のメリットを実現する XWP のサービス）をご覧ください。

執筆者: XWP ストラテジスト、Leo Postovoit

Reviewed by Chiko Shimizu - Developer Relations Team

この記事は 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