[レベル: 上級]
AMPプロジェクトは、AMPページのなかでサイドバーやアコーディオン型UI、ソーシャルシェアを使える拡張機能を公開しました。
拡張機能公開の背景
高速化を徹底的に実現するためにAMPコンテンツは基本的に、「閲覧するだけ」の機能しか持ちません。
なかったとしてもコンテンツの閲覧に大きな支障を与えない要素を極限までそぎ落としています。
しかしたとえ速かったとしても、便利な機能が欠けている状態は逆にユーザー体験を低下させてしまうこともあります。
そこで、AMPプロジェクトはいくつかの拡張機能を公開しました。
今回公開した拡張機能は次の4つです。
- サイドバー
- アコーディオン
- ソーシャルシェア
- ダイナミックCSS
サイドバー
AMPページにサイドバーを設置することができます。
コンテンツの閲覧を妨げないように普段は隠れていて、タップすると横から出現します。
もう一度タップすると隠れます。
こちらは公式アナウンス記事で紹介されていたデモ画像です。
スクリーンの左からサイドバーメニューが出現して、また収まるのがわかります。
AMPページのサイドバーは <amp-sidebar> で実装します。
<amp-sidebar> の仕様はGithubで公開されています。
サンプルコードはこちらで見ることができます。
アコーディオン
タップするとコンテンツが展開するアコーディオン型のUIを使うことができます。
ユーザーのアクションに応じて、非表示にしていたコンテンツを表示します。
こちらは公式アナウンス記事で紹介されていたデモ画像です。
「Section 1」「Sectoin 2」「Section 3」の見出しのパーツが、アコーディオンとして展開しています。
「Section 3」からは画像が出現してますね。
アコーディオンは、<amp-accordion> で実装します。
<amp-accordion> の仕様はGithubで公開されています。
サンプルコードはこちらで見ることができます。
ソーシャルシェア
AMPページにソーシャルメディアのシェアボタンを設置することができます。
対応しているソーシャルメディアは今のところは次のとおりです。
- Google+
- Email（メールでの共有）
AMPページであってもシェアされたいので、これは良いですね。
シェアされたURLをタップしたフォロワーも高速でコンテンツを閲覧できます。
ソーシャルシェアは、<amp-social-share> で実装します。
<amp-social-share> の仕様はGithubで公開されています。
サンプルコードはこちらで見ることができます。
ダイナミックCSS
ダイナミックCSS (AMP Dynamic CSS Classes) では、CSSのクラスを動的に追加できます。
たとえばリファラーによってページのスタイルを変更できます。
Twitterからやってきたユーザーにはこのクラスを適用させ、Pinterestからやってきたユーザーにはこのクラスを適用させるということが可能です。
Google検索からやって来たユーザーにだけ特定のCSSを適用させるなんていうこともできそうです。
ダイナミックCSSは、<amp-dynamic-css-classes> で実装します。
<amp-dynamic-css-classes> の仕様はGithubで公開されています。
AMPページの表示は確かに速いのですが、殺風景で「見るだけ〜」なのも事実です。
“速い”だけでは、ユーザー体験を向上させるには不十分です。
拡張機能によって、AMPコンテンツのユーザー体験をさらに向上させることができるでしょう。
まだ公開されたばかりなので不具合や改善点が出てくるはずです。
AMPプロジェクトはフィードバックを求めています。
もし実装するのであれば公式アナウンスも必ずお読みください。