はじめに
Google が精力的に開発をしているのが AMP 。
2018年 には、今後の Web サイトを変えるかもしれない amp-story がリリースされました。
2019年 も大きな変化が予定されています。
公開されている AMP のロードマップの中から、2019 年にリリース予定の気になるものをピックアップしてみました。
2018 年にリリースされた amp-story
2019 年のロードマップを見る前に、2018 年の AMP で最大の変化をもたらした amp-story を少し振り返ってみます。
amp-story とは何か？それは、ワシントン・ポストの 3 つの記事をご覧になると分かると思います。ワシントン・ポストは、最も効果的に amp-story を使っている Web サイトの 1 つです。
- Caught in the inferno: How the Camp Fire overwhelmed Paradise（音声を出せます）
- What the year’s best photos tell us about 2018
- Stories of the segregated South: A folklorist’s promise（音声を出せます）
Web サイトと本を足したようなページです。また、テキスト・画像・動画・音声を効果的に使えます。3 つ目のページは、まるでポッドキャストを組み合わせたような感じです。さらに、ページとページの間に広告を設置できます。
このようなページを JavaScript を一切使わず、HTML だけで作れる。それが amp-story です。
米 Google では、検索結果で有名な人物の出来事などをまとめた amp-story を作るとのこと。
Google も amp-story がお気に入りのもよう。
では、2019 年には、どのようなものが AMP で実装されるのでしょうか。
JavaScript が使用可能に
2019 年の AMP で最大の出来事になりそうなのが、JavaScript の使用の解禁です。
AMP では、ずっと JavaScript を使えませんでした。しかし、現在アルファ版が公開中の WorkerDOM を使うことで、AMP でも JavaScript が使えるようになります。
今のところ Google からの発表はこれだけですが、AMP のロードマップを見ると、もう少し詳しいことが分かってきます。
現在、amp-script と名付けられた拡張コンポーネントが試験運用中です。
説明を見ると、JavaScript ファイルを amp-script に指定することで AMP でも JavaScript を使えるようにするみたい。
気になるのは、正式なリリース時期。Google のエンジニアさんが「2019 年の第 2 四半期に amp-script をリリースできたらいいね」と言っていることから、もう少し待つ必要がありそうです。
JavaScript が使えるようになれば、AMP の制限がほぼなくなります。
また、TypeScript を AMP で使えるようにしたいとの提案もロードマップにあります。
2019 年 8 月に amp-script が一般公開され、AMP でも JavaScript が使えるようになりました。
無限スクロール
AMP では、現在 2 つのタイプの無限スクロールが開発中です。
1 つは、すでに試験運用中の amp-next-page 。
このコンポーネントは、記事や製品詳細ページなどのコンテンツの最後に到達した時に、任意のドキュメント（次の記事など）を呼び出すもの。記事を読み終えた段階で別の記事を表示できるため、サイトの滞在時間を延ばす効果が期待できます。また、一覧ページのページネーションの代わりにもできるようです。
もう 1 つのタイプは、リストに対する無限スクロール。
こちらは、amp-list のアップデートでの実装が予定されています。amp-list で作るリストの最後に到達するとデータを追加するタイプです。関連記事や関連商品の表示に適しているように思えます。
amp-list の無限スクロールは、2019 年 3 月にリリースされました。
WordPress への実装方法は、WordPress の AMP ページに amp-list の無限スクロールを実装する方法にて解説しています。
また、シームレスなページ遷移を実現するという提案もロードマップに含まれています。
- 白フラッシュがない、よりシームレスなページ遷移
- 再読み込みした要素に対するロードアニメーションの適用
たった 1 行で PWA を実装
Web サイトの高速化のために、Google は PWA も開発しています。
そして、amp-install-serviceworker を使えば、現在の AMP ページでも PWA の根幹となる Service Worker のインストールが可能です。ただ、自前で Service Worker の JavaScript ファイルを作るのは、ある程度の JavaScript の知識が必要です。
AMP では、このハードルの高さにメスを入れようとしています。
なんと、たった 1 行を追加するだけで、AMP と PWA の適切な組み合わせの実装ができるようになるとのこと。
提案内容を見ると、ワクワクしてきます。
- キャッシュからレスポンスを返却
- ページ共通のコンテンツを再読み込みすることがない SPA のようなスムーズで速いページ遷移
- クリティカルパスの自動先読み
- ホーム画面への追加機能
本当に実現するのであれば、すごい！
2019 年 8 月に AMP Service worker がリリースされ実装されました。
AMP Service worker の使い方は、AMP に最適な PWA を 1 行で実装する「AMP Service Worker」の使い方にて解説しています。
スクロールフリーズエフェクト
最近の Web サイトで、よく見かける表現方法があります。
それが、ページ全体のスクロールが止まったように見えながら、スクロールに応じてコンテンツを変化させるもの。
この表現方法をよく使うのが Apple 。Apple Music の「音楽の楽しさを楽々と。」のエリアが、該当部分です。
また、iPhone の詳細ページなどでも使われています。
このようなスクロールに応じたエフェクトを AMP でも実装できるように、新たなコンポーネントの開発が進んでいるもようです。
CSS の position: sticky; でいいんじゃない？という気はするけれど。ただ、CSS には限度があるので、もっと柔軟にエフェクトを表現できるのかもしれません。
この案は廃止になりました。理由は、amp-position-observer と amp-animation でスクロールアニメーションを実装できるためです。
amp-position-observer と amp-animation によるスクロールアニメーションは、AMP 公式のサンプルページ Mood | Breaking the Status Quo でご覧いただけます。
広告表示が速く
AMP への不満によく挙がるのが、広告表示の遅さです。
そこで、AMP ページの速度は犠牲にせず、広告表示の高速化が予定されています。
他にも続々と
2019 年に AMP でリリースされるであろう機能などを見てきました。
ただ、これまで書いたもの以外にも待ち遠しいリリースがあります。
その 1 つが、amp-list のアップデート。現在の amp-list は、子要素に応じて高さが動的に可変しません。そのため、レイアウトがしにくい欠点があります。ですが、アップデートでこの欠点が解消される予定です。
2019 年 6 月に amp-list はアップデートされました。
また、amp-carousel もアップデートされ、amp-list などで作る動的なコンテンツをサポートする予定。
さらに、AMP ページでの支払い方法の選択が広がります。EC サイトには嬉しい予定です。
参考
Google Pay の実装は廃止になりました。
その他、スクロールに応じて動画を画面の隅に最小化する機能（クリックの必要がないピクチャー・イン・ピクチャー）の実装も予定されています。
動画の最小化機能を実装するためのコンポーネント amp-video-docking がリリースされました。
より速く、より美しく、そしてより使いやすく。AMP は 2019 年も進化していきます。