2019 年の AMP のロードマップ

2019年にAMPでリリース予定の機能

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を「見やすさ」と「使いやすさ」にこだわり紹介しています。

Google が精力的に開発をしているのが AMP 。

2018年 には、今後の Web サイトを変えるかもしれない amp-story がリリースされました。

2019年 も大きな変化が予定されています。

公開されている AMP のロードマップの中から、2019 年にリリース予定の気になるものをピックアップしてみました。

2018 年にリリースされた amp-story

2019 年のロードマップを見る前に、2018 年の AMP で最大の変化をもたらした amp-story を少し振り返ってみます。

amp-story とは何か?

それは、ワシントン・ポストの 3 つの記事をご覧になると分かると思います。ワシントン・ポストは、最も効果的に amp-story を使っている Web サイトの 1 つです。

Web サイトと本を足したようなページです。

また、テキスト・画像・動画・音声を効果的に使えます。3 つ目のページは、まるでポッドキャストを組み合わせたような感じです。

さらに、ページとページの間に広告を設置できます。

このようなページを JavaScript を一切使わず、HTML だけで作れる。それが amp-story です。

米 Google では、検索結果で有名な人物の出来事などをまとめた amp-story を作るとのこと。

参考自動生成されたAMPストーリーとGoogle Lensが検索で利用可能に

Google も amp-story がお気に入りのもよう。

では、2019 年には、どのようなものが AMP で実装されるのでしょうか。

JavaScript が使用可能に

2019 年の AMP で最大の出来事になりそうなのが、JavaScript の使用の解禁です。

AMP では、ずっと JavaScript を使えませんでした。

しかし、現在アルファ版が公開中の WorkerDOM を使うことで、AMP でも JavaScript が使えるようになります。

参考WorkerDOM: DOM に対応した同時実行 JavaScript プログラミング

今のところ Google からの発表はこれだけですが、AMP のロードマップを見ると、もう少し詳しいことが分かってきます。

現在、amp-script と名付けられた拡張コンポーネントが試験運用中です。

説明を見ると、WorkerDOM で作った JavaScript ファイルを amp-script で指定することで、AMP でも JavaScript を使えるようにするみたい。

気になるのは、正式なリリース時期。Google のエンジニアさんが「2019 年の第 2 四半期に amp-script をリリースできたらいいね」と言っていることから、もう少し待つ必要がありそうです。

参考JS in AMP

JavaScript が使えるようになれば、AMP の制限がほぼなくなります。

また、TypeScript を AMP で使えるようにしたいとの提案もロードマップにあります。

参考TypeScript in AMP

無限スクロール

AMP では、現在 2 つのタイプの無限スクロールが開発中です。

1 つは、すでに試験運用中の amp-next-page

このコンポーネントは、記事や製品詳細ページなどのコンテンツの最後に到達した時に、任意のドキュメント(次の記事など)を呼び出すもの。

記事を読み終えた段階で別の記事を表示できるため、サイト滞在時間を延ばす効果が期待できます。また、一覧ページのページネーションの代わりにもできるようです。

もう 1 つのタイプは、リストに対する無限スクロール。

こちらは、amp-list のアップデートでの実装が予定されています。

amp-list で作るリストの最後に到達すると、データを追加するタイプです。関連記事や関連商品の表示に適しているように思えます。

参考Element-level infinite scroll

このリストに対する無限スクロールは、現在の AMP でも実装は可能です。ただ、けっこう面倒。

参考Show More Button

それが簡単に実装できそうなので、期待しています。

また、シームレスなページ遷移を実現するという提案もロードマップに含まれています。

参考Seamless page transitions

  • 白フラッシュがない、よりシームレスなページ遷移
  • 再読み込みした要素に対するロードアニメーションの適用

たった 1 行で PWA を実装

Web サイトの高速化のために、Google は PWA も開発しています。

そして、amp-install-serviceworker を使えば、現在の AMP ページでも PWA の根幹となる Service Worker のインストールが可能。

ただ、自前で Service Worker の JavaScript ファイルを書くには、ある程度の JavaScript の知識が必要です。

AMP では、このハードルの高さにメスを入れようとしています。

なんと、たった 1 行を追加するだけで、AMP と PWA の適切な組み合わせの実装ができるようになるとのこと。

参考One-line PWA

提案内容を見ると、ワクワクしてきます。

  • キャッシュからレスポンスを返却
  • ページ共通のコンテンツを再読み込みすることがない SPA のようなスムーズで速いページ遷移
  • クリティカルパスの自動先読み
  • ホーム画面への追加機能

本当に実現するのであれば、すごい!

スクロールフリーズエフェクト

最近の Web サイトで、よく見かける表現方法があります。

それが、ページ全体のスクロールが止まったように見えながら、スクロールに応じてコンテンツを変化させるもの。

この表現方法をよく使うのが Apple 。

Apple Music の「音楽の楽しさを楽々と。」のエリアが、該当部分です。

Apple Musicのスクロールフリーズエフェクト

また、iPhone XSiPhone XR の詳細ページでも使われています。

このようなスクロールに応じたエフェクトを AMP でも実装できるように、新たなコンポーネントの開発が進んでいるもようです。

参考Scroll-freeze effect

CSS の position: sticky; でいいんじゃない?という気はするけれど。

ただ、CSS には限度があるので、もっと柔軟にエフェクトを表現できるのかもしれません。

例えば、The Bewegen Bike Share System のような表現は、CSS だけでは無理。

The Bewegen Bike Share Systemのスクロールフリーズエフェクト

広告表示が速く

AMP への不満によく挙がるのが、広告表示の遅さです。

そこで、AMP ページの速度は犠牲にせず、広告表示の高速化が予定されています。

参考Instrument & tweak legacy ad performance with no impact to UX

参考Rewrite the AMP Runtime for ads

他にも続々と

2019 年に AMP でリリースされるであろう機能などを見てきました。

ただ、これまで書いたもの以外にも待ち遠しいリリースがあります。

その 1 つが、amp-list のアップデート。

現在の amp-list は、子要素に応じて高さが動的に可変しません。そのため、レイアウトがしにくい欠点があります。

ですが、アップデートでこの欠点が解消される予定です。

参考Improved resizing rules for amp-list

また、amp-carousel もアップデートされ、amp-list などで作る動的なコンテンツをサポートする予定。

参考amp-carousel v2

さらに、AMP ページでの支払い方法の選択が広がります。EC サイトには嬉しい予定です。

参考Payment component in AMP

参考AMP Google Pay

その他、スクロールに応じて動画を画面の隅に最小化する機能の実装も予定されています(おそらく、クリックの必要がないピクチャー・イン・ピクチャー(PIP)のようなものだと思います)。

参考Minimize video to corner on scroll

より速く、より美しく、そしてより使いやすく。

AMP は 2019 年も進化していきます。