AMP HTML でアコーディオンやカルーセル表示などを実装する拡張コンポーネントを使ってみる

AMP 拡張コンポーネントには、カルーセルやスライドショー、あるいはアコーディオン式の UI を実装したり、ソーシャルボタンを設置するためのコンポーネントも用意されています。そこで個人的に気になったものをいくつか取り上げて、簡単に解説してみたいと思います。

公開日: 2016-05-28 09:59
更新日: 2020-05-27 16:03

以前、AMP （Accelerated Mobile Pages） HTML に関する基本的な記事と、拡張コンポーネントを利用した AMP HTML への Google Analytics 導入方法について記事を書きました（下記リンク参照）。

AMP の拡張コンポーネント（Extended components）には、上記で書いた、amp-analytics コンポーネント以外にも色々と用意されていて、その中には、AMP HTML 内でカルーセルやスライドショー、あるいはアコーディオン式の UI を実装したり、ソーシャルボタンを設置するための拡張コンポーネントが用意されています。そこで、個人的に気になったものをいくつか取り上げて、簡単に解説してみたいと思います。

以下に解説する各拡張コンポーネントのサンプルは下記にあります。本文とあわせて参照してみてください。サンプルのソースコードを確認すればよりわかりやすいと思います。

AMP 拡張コンポーネントサンプル

amp-carousel コンポーネント

amp-carousel コンポーネントは、AMP HTML 上でカルーセルやスライドショー UI を実装するための拡張コンポーネントです。

基本的な使い方

まず head 要素内で下記のように、拡張コンポーネント用 JavaScript を読み込みます。

<script async
        custom-element="amp-carousel"
        src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"
>
</script>

なお、拡張コンポーネント用の JavaScript を読み込む際は、必須の AMP ライブラリよりも前に記述しましょう。サンプルとしては下記のような感じです。

<!DOCTYPE html>
<html ⚡ lang="ja" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>AMP サンプル</title>
  <link rel="canonical" href="https://example.com/article/sample.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style amp-custom>
    /* CSS */
  </style>
  <!-- ↓ 拡張コンポーネント用のライブラリ -->
  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
  <!-- ↓ 必須の記述 -->
  <style amp-boilerplate>body{･･･（略）･･･}</style><noscript><style amp-boilerplate>body{･･･（略）･･･}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
･･･（略）･･･
</head>
<body>

カルーセル部分の HTML は下記のような感じになります。

<amp-carousel width="300" height="400">
  <amp-img src="sample01.jpg" width="300" height="400" alt=""></amp-img>
  <amp-img src="sample02.jpg" width="300" height="400" alt=""></amp-img>
  <amp-img src="sample03.jpg" width="300" height="400" alt=""></amp-img>
</amp-carousel>

amp-carousel 要素には、下記の属性が付与できます。

type 属性： carousel （初期値）、もしくは slides を指定可能。type="carousel" の場合、layout="responsive" はサポートしないので注意。
loop 属性（type 属性値が slides の場合のみ）：セットされるとスライドがループしますので、ユーザーは最後の画像まで行ってさらにつぎに進むと最初の画像に戻ることができます。
autoplay 属性（type 属性値が slides の場合のみ）：自動でスライドをスタートします。デフォルトでは 5000ms ごとに画像が切り替わりますが、これは delay 属性で上書き可能。
delay 属性（type 属性値が slides の場合のみ）：数値（単位は ms）を指定することで autoplay 属性が付与されたスライドの切り替え時間を設定できます。delay="8000" と記述すれば 8 秒ごとに切り替わるようになります。

type="slides" の場合、layout="responsive" が使えますので、下記のように、amp-carousel 要素、およびその子要素の amp-img などに layout="responsive" しておけば、画面サイズに応じてアスペクト比を保ったまま柔軟にレイアウトしてくれます。

<amp-carousel type="slides" loop autoplay layout="responsive" width="500" height="333">
  <amp-img src="sample01.jpg" layout="responsive" width="500" height="333" alt=""></amp-img>
  <amp-img src="sample02.jpg" layout="responsive" width="500" height="333" alt=""></amp-img>
  <amp-img src="sample03.jpg" layout="responsive" width="500" height="333" alt=""></amp-img>
</amp-carousel>

見た目のカスタマイズですが、例えば左右送り用の矢印表示を変えたければ、デフォルトでは .amp-carousel-button.amp-carousel-button-prev、および .amp-carousel-button.amp-carousel-button-next に対して背景画像で左右矢印の SVG が埋め込まれますので、これを CSS で上書きしてしまえばよいということになります。

参考までに .amp-carousel-button、.amp-carousel-button-prev に適用されている CSS は下記のようになっていますので、必要に応じて head 要素内のカスタム CSS で上書きしてしまいましょう。

.amp-carousel-button-prev {
  left: 16px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="%23fff" viewBox="0 0 18 18"><path d="M15 8.25H5.87l4.19-4.19L9 3 3 9l6 6 1.06-1.06-4.19-4.19H15v-1.5z" /></svg>');
  background-size: 18px 18px;
}
.amp-carousel-button {
  position: absolute;
  box-sizing: border-box;
  top: 50%;
  height: 34px;
  width: 34px;
  border-radius: 2px;
  pointer-events: all;
  background-color: rgba(0,0,0,.5);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  transform: translateY(-50%);
  z-index: 10;
}

なお、amp-carousel 要素内では、amp-youtube 要素や amp-video 要素など様々な要素が使用できますので、動画のスライドショーなんていうのも実現可能です。

amp-accordion コンポーネント

amp-accordion コンポーネントは、AMP HTML 上でアコーディオン UI を実装するための拡張コンポーネントです。

基本的な使い方

まず head 要素内で下記のように、拡張コンポーネント用 JavaScript を読み込みます。

<script async
        custom-element="amp-accordion"
        src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"
>
</script>

アコーディオン部分の HTML は下記のような感じになります。

<amp-accordion>
  <section>
    <h2>Section 1</h2>
    <p>text</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <p>text</p>
  </section>
  <section>
    <h2>Section 3</h2>
    <p>text</p>
  </section>
</amp-accordion>

amp-accordion 要素内の section 要素がアコーディオンするようになります。section 要素以外は駄目です。また section 要素内はアウトラインが適切になるよう、見出しを設置する必要がありますが、この見出し要素（上のサンプルソースでいうと各 h2 要素）が開閉をトグルする UI になります。

section 要素に expanded 属性を付与することで、その要素は初期状態で開いた状態になります。

<amp-accordion>
  <section expanded>
    <h2>Section 1</h2>
    <p>text</p>
  </section>
  ...省略...
</amp-accordion>

amp-image-lightbox コンポーネント

amp-image-lightbox コンポーネントは、AMP HTML 上で Lightbox（モーダルダイアログ） UI を実装するための拡張コンポーネントです。拡大画像をレイヤー表示します。

基本的な使い方

まず head 要素内で下記のように、拡張コンポーネント用 JavaScript を読み込みます。

<script async
        custom-element="amp-image-lightbox"
        src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"
>
</script>

画像とレイヤー表示部分の HTML は下記のような感じになります。

<amp-img
  on="tap:lightbox-01"
  role="button"
  tabindex="0"
  src="sample01.jpg" width="250" height="166" alt=""></amp-img>
<amp-image-lightbox id="lightbox-01" layout="nodisplay"></amp-image-lightbox>

amp-image-lightbox 要素に付与した id 属性値と、amp-img 要素の on="tap:lightbox-01" 内、lightbox-01 を一致させます。

もし画像が複数ある場合でも、amp-image-lightbox 要素は 1つで問題ありません。

<amp-img
  on="tap:lightbox-01"
  role="button"
  tabindex="0"
  src="sample01.jpg" width="250" height="166" alt=""></amp-img>
<amp-img
  on="tap:lightbox-01"
  role="button"
  tabindex="0"
  src="sample02.jpg" width="250" height="166" alt=""></amp-img>
<amp-img
  on="tap:lightbox-01"
  role="button"
  tabindex="0"
  src="sample03.jpg" width="250" height="166" alt=""></amp-img>
<amp-image-lightbox id="lightbox-01" layout="nodisplay"></amp-image-lightbox>

amp-lightbox コンポーネント

amp-lightbox コンポーネントは、AMP HTML 上で Lightbox（モーダルダイアログ） UI を実装するための拡張コンポーネントです。amp-image-lightbox コンポーネントは画像用でしたが、こちらはテキストなどを含め、要素ブロック全体をレイヤー表示します。

基本的な使い方

まず head 要素内で下記のように、拡張コンポーネント用 JavaScript を読み込みます。

<script async
        custom-element="amp-lightbox"
        src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"
>
</script>

レイヤー表示部分の HTML は下記のような感じになります。

<button on="tap:lightbox-area">レイヤーを表示</button>

<amp-lightbox id="lightbox-area" layout="nodisplay">
  <div class="lightbox">
    <h1>レイヤー</h1>
    <amp-img src="img/sample01.jpg" width="500" height="333" alt="" on="tap:lightbox-area.close"></amp-img>
  </div>
</amp-lightbox>

amp-lightbox 要素に id="lightbox-area" のように任意の id 属性を付与した上で、上の例だと button 要素から on="tap:lightbox-area" でタップ時の動作を指定します。

amp-lightbox 要素には layout="nodisplay" が指定されているため、初期状態では非表示になりますが、ボタンを押すことで、この要素がレイヤー表示されます。

また、amp-img 要素に on="tap:lightbox-area.close" を指定していますが、これによって、画像をタップすれば、レイヤー表示が解除されます。

レイヤー表示時のスタイルは別途当ててあげないといけません。例えば、div.lightbox に対して下記のように CSS を書いてあげれば、画面が暗転してレイヤーが表示される、よくある見た目になります。

.lightbox {
  background: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  position: absolute;
}
.lightbox h1 {
  color: white;
}

amp-sidebar コンポーネント

amp-sidebar コンポーネントは、AMP HTML 上でスライドメニュー UI を実装するための拡張コンポーネントです。

基本的な使い方

まず head 要素内で下記のように、拡張コンポーネント用 JavaScript を読み込みます。

<script async
        custom-element="amp-sidebar"
        src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"
>
</script>

レイヤー表示部分の HTML は下記のような感じになります。

<button on="tap:sidebar-menu">スライドメニューを表示</button>

<amp-sidebar id="sidebar-menu" layout="nodisplay">
  <ul>
    <li>Nav item 1</li>
    <li>Nav item 2</li>
    <li>Nav item 3</li>
    <li>Nav item 4</li>
    <li>Nav item 5</li>
    <li>Nav item 6</li>
    <li>Nav item 7</li>
    <li>Nav item 8</li>
    <li>Nav item 9</li>
    <li class="close">
      <button on="tap:sidebar-menu.close">× 閉じる</button>
    </li>
  </ul>
</amp-sidebar>

amp-sidebar 要素に id="sidebar-menu" のように任意の id 属性を付与した上で、上の例だと button 要素から on="tap:sidebar-menu" でタップ時の動作を指定します。

amp-sidebar 要素には layout="nodisplay" が指定されているため、初期状態では非表示になりますが、ボタンを押すことで画面サイドからスライドメニューが表示されます。

また、li 要素のひとつに on="tap:sidebar-menu.close" を指定していますが、これによって、この要素をタップすれば、表示されていたメニューが閉じられます。

amp-social-share コンポーネント

amp-social-share コンポーネントは、AMP HTML 上で各種 SNS のシェアボタンなどを実装するための拡張コンポーネントです。

基本的な使い方

まず head 要素内で下記のように、拡張コンポーネント用 JavaScript を読み込みます。

<script async
        custom-element="amp-social-share"
        src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"
>
</script>

シェア表示部分の HTML は下記のような感じになります。

<amp-social-share type="twitter"></amp-social-share>
<amp-social-share type="facebook"></amp-social-share>
<amp-social-share type="pinterest"></amp-social-share>
<amp-social-share type="linkedin"></amp-social-share>
<amp-social-share type="gplus"></amp-social-share>
<amp-social-share type="email"></amp-social-share>

上記サンプルの SNS は初期設定されている SNS なので、ソースはこれだけで終わり。これで SNS ボタンを表示してくれます。楽ちんですね。

初期設定されていない SNS の場合は、下記のようにエンドポイント URL などを指定しつつ記述し、CSS で見た目を整えればよいと。

<amp-social-share type="whatsapp"
                  layout="container"
                  data-share-endpoint="whatsapp://send"
                  data-param-text="Check out this article: TITLE - CANONICAL_URL"
>
                  Share on Whatsapp
</amp-social-share>

TITLE と CANONICAL_URL は予約されている変数で、自動的にページのタイトルと、 head 要素に記述された link rel="canonical" から URL を取得してくれます。

amp-social-share 要素の type 属性は必須。data-share-endpoint 属性は上記の通り、初期設定されていない SNS の場合はエンドポイント URL の指定をするため必須です。

ラインで送るボタンを作ってみる

試しに Line （ライン）で記事の URL を送るボタンを作ってみると下記のようになります。

<amp-social-share type="line"
                  data-share-endpoint="line://msg/text/<CONTENT KEY>"
                  width="60" height="44"
>
</amp-social-share>

ラインで送るボタンの仕様は下記のページにあります。

設置方法： Line で送るボタン

書式はいくつかありますが、AMP がモバイル向けのページということを考えれば、下記のようにアプリ起動用のエンドポイントを指定すればよいと思います。

line://msg/<CONTENT TYPE>/<CONTENT KEY>

<CONTENT TYPE> は text で固定でよいです。<CONTENT KEY> にはページタイトル、URL が入れられますが、値は UTF-8 で URL エンコードしてあげないといけないので、CMS を使用しているならエンコードした URL が <CONTENT KEY> に入るようにテンプレートを書いてあげればよいと思います。

あとは見た目を作らないといけません。ボタンの画像はダウンロードできますので、CSS で見た目を作ってあげましょう。

amp-social-share[type=line] {
  background: url(img/line-40x40.png) no-repeat center center #00c300;
  background-size: 40px 40px;
}

その他オプション指定

amp-social-share 要素には、data-param-* 属性を使用することで、様々な値をセットすることができます。

初期設定されている SNS は上記したとおり簡単なソースコードで実装できますが、さらに data-param-url 属性で、SNS でシェアする URL を指定もできます。指定しなければ、初期値は link rel="canonical" でセットした URL になりますので、通常は指定の必要はないと思いますが、何らかの理由で変えたい場合は使用できます。

<amp-social-share type="twitter"
                  data-param-url="http:example.com/sample"
>
</amp-social-share>

さらに type="email" の場合、任意で data-param-subject 属性、data-param-body 属性を指定して、件名や本文に指定のテキストを渡すことができます。

<amp-social-share type="email"
                  data-param-subject="メールの件名"
                  data-param-body="メールの本文"
>
</amp-social-share>

amp-dynamic-css-classes コンポーネント

amp-dynamic-css-classes コンポーネントは、body 要素に動的に class 属性値をセットするための拡張コンポーネントです。

基本的な使い方

まず head 要素内で下記のように、拡張コンポーネント用 JavaScript を読み込みます。

<script async
        custom-element="amp-dynamic-css-classes"
        src="https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js"
>
</script>

基本これだけ。で、この拡張コンポーネントが読み込まれているページにリファラーとして「www.google.com」を持ったユーザーがアクセスしてくると、body 要素に class="amp-referrer-com amp-referrer-www-google-com" がセットされます。

amp-referrer-com は共通。amp-referrer-www-google-com の amp-referrer- 以降はリンク元のドメインによって動的に変化します。

これ、何に使うんですかね...... 特定のドメインからの訪問者に対して、何らかの表示切り替えをしたいといった場合に使えるかもしれません。

さて、ちょっと長くなってしまったので、他にも気になるものがあるのですが一旦これでやめときます。拡張コンポーネントは結構追加されているみたいですので、色々とできることが今後も増えそうですね。

ただ、ちょっと気をつけないといけないのが Web アクセシビリティの部分かもしれません。

今回紹介したスライドショーやアコーディオン用の拡張コンポーネントは、生成される HTML に WAI-ARIA を自動付与するなど、比較的アクセシビリティに気を配った実装がされていますが、例えば SNS ボタンなんかは実装方法によってはアクセシブルでないソースコードになりますので、実装時に配慮が必要です。

ということで、最初にも書きましたが、ここで解説した各拡張コンポーネントのサンプルは下記にありますので参考にどうぞ。

AMP 拡張コンポーネントサンプル

AMP HTML でアコーディオンやカルーセル表示などを実装する拡張コンポーネントを使ってみる

amp-carousel コンポーネント

基本的な使い方

amp-accordion コンポーネント

基本的な使い方

amp-image-lightbox コンポーネント

基本的な使い方

amp-lightbox コンポーネント

基本的な使い方

amp-sidebar コンポーネント

基本的な使い方

amp-social-share コンポーネント

基本的な使い方

ラインで送るボタンを作ってみる

その他オプション指定

amp-dynamic-css-classes コンポーネント

基本的な使い方

関連エントリー

関連記事

著書 「できるポケット HTML&CSS 全事典」 が 3 度目の全面改訂、「改訂 4 版」 の発売が決定しました

オープンソースのヘッドレス CMS 「Strapi」をさくらの VPS でセルフホストしてみる

details 要素の name 属性によるグルーピングが全ブラウザで利用可能に

X（Twitter） API を使用して、投稿データ用の JSON から定期的に自動投稿する Python スクリプトを書いてみた

CSS Pseudo-Elements Module Level 4 に追加された ::details-content 疑似要素はブラウザサポートされると便利そう

font-size-adjust プロパティのブラウザサポートが足並みそろった件

Dify を さくらの VPS でセルフホストしてみる

Dify をアップデートしたらナレッジのデータソースで 「Web サイト」 を指定可能になっていた件

popover 属性 （含む関連属性） がすべてのモダンブラウザで利用可能に

Windows で npm run dev したときに listen EADDRINUSE エラーが出た場合の対処法メモ

著書「できるポケット HTML&CSS 全事典」が 3 度目の全面改訂、「改訂 4 版」の発売が決定しました

Dify をさくらの VPS でセルフホストしてみる

Dify をアップデートしたらナレッジのデータソースで「Web サイト」を指定可能になっていた件

popover 属性（含む関連属性）がすべてのモダンブラウザで利用可能に