AMPコンポーネントではコンテンツの埋め込みやカルーセル・モーダルボックスなどの動的なUIまで様々な機能が提供されています。今回の記事ではAMP対応サイトでよく使われるような拡張コンポーネントの実装例を紹介いたします。

チャレンジ&ナレッジ最終更新日: 20190920

AMPコンポーネントでWEBサイトを作成する

  • このエントリーをはてなブックマークに追加

AMP(Accelarated Mobile Pages)の拡張コンポーネントではコンテンツの埋め込みやカルーセル・モーダルボックスなどの動的なUIまで様々な機能が提供されています。 今回の記事ではAMP対応サイトでよく使われるような拡張コンポーネントの実装例を紹介します。

AMPコンポーネントの概要

AMPではコンポーネントシステムを採用しており、サイトに応じて柔軟に機能を追加できるようになっています。

コンポーネントは大きく分けて組み込みコンポーネント、拡張コンポーネント、試験運用コンポーネントの三種に分類されます。

組み込みコンポーネントは基本のamp.jsライブラリに含まれているコンポーネントで、現在はamp-img, amp-layout, amp-pixelが該当します。

拡張コンポーネントは基本ライブラリを拡張するもので、機能ごとに専用スクリプトを読み込む必要のあるコンポーネントとなります。

試験運用コンポーネントはリリースされているが試験運用段階のコンポーネントです。

拡張コンポーネント実装例

それでは実際にAMP拡張コンポーネントの実装例を見てみましょう。

amp-sidebar(サイドバーUI用コンポーネント)

amp-sidebarはAMPでサイドバーを実装する為のコンポーネントです。

まずは必須スクリプトの読み込み。headタグ内のamp.js読み込みより後に記述します。

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

サイドバーに表示させたいコンテンツを amp-sidebarタグで囲んで記述いたします。

<amp-sidebar id="sidebar1" layout="nodisplay" side="right">
    <ul>
        <li><a href="#menu1">メニュー1</a></li>
        <li><a href="#menu2">メニュー2</a></li>
        <li><a href="#menu3">メニュー3</a></li>
        <li><a href="#menu4">メニュー4</a></li>
    </ul>
</amp-sidebar>

id属性の指定は必須でlayout属性の指定は”nodisplay”のみとなります。またサイドバーの表示位置は”left”または”right”の指定が可能です。

サイドバーのみでは表示・非表示の操作ができないのでサイドバー操作用のボタンを追記します。

<button on='tap:sidebar1.open'>開く</button>
        <amp-sidebar id="sidebar1" layout="nodisplay" side="right">
        <button on='tap:sidebar1.close'>閉じる</button>
        <ul>
            <li><a href="#menu1">メニュー1</a></li>
            <li><a href="#menu2">メニュー2</a></li>
            <li><a href="#menu3">メニュー3</a></li>
            <li><a href="#menu4">メニュー4</a></li>
        </ul>
</amp-sidebar>

上記サンプルではbuttonのon属性でイベント・アクションを指定しています。

amp-sidebarのサンプルイメージamp-sidebarのサンプルイメージ

on属性での書式

tap: (操作するサイドバーのid).(アクション)

アクションは open(サイドバーを開く)、close(サイドバーを閉じる)、toggle(サイドバーの状態を切り替える)が指定可能です。
on属性でのアクション・イベントについての詳細は
“<amp-actions-and-events> – amp.dev”.2019.amp.dev.
https://amp.dev/ja/documentation/guides-and-tutorials/learn/amp-actions-and-events/?format=websites
をご確認ください。(英語)

amp-social-share(ソーシャル共有ボタン用コンポーネント)

amp-social-shareはソーシャル共有ボタン表示用のコンポーネントです。

まずは必須スクリプトの読み込み。headタグ内のamp.js読み込みより後に記述します。

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

amp-social-shareのタグは下記のような記述になります。(type属性でソーシャルメディアを指定)

※facebookの場合はdata-param-app_idでFacebookのapp_idを指定する必要があります。

amp-social-shareサンプル

<div>
    <amp-social-share type="email"></amp-social-share">
    <amp-social-share type="facebook"data-param-app_id="##fb_app_id##"></amp-social-share>
    <amp-social-share type="twitter"></amp-social-share>
    <amp-social-share type="line"></amp-social-share>
</div>

サンプルでは日本のサイトでよく使用されるSNSボタンを記述していますが、この他にもTumblrやPinterestなど様々なソーシャルサービスに標準で対応しています。

amp-social-shareのサンプルイメージamp-social-shareのサンプルイメージ

amp-accordion(アコーディオンUI用コンポーネント)

amp-accordionはコンテンツの折りたたみ・展開機能を可能にするコンポーネントです。

必須スクリプトの読み込み。headタグ内のamp.js読み込みより後に記述します。

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

amp-accordionは記述にいくつかのルールがあります。

  • amp-accordionタグの子に一つ以上のsectionを配置可能です(それぞれが開閉可能な要素となります)
  • sectionには2つの子要素が必要で1番目の子要素は見出しタグである必要があります(1番目の要素をタップすることで各sectionを開閉させます)
  • sectionの2番目の子要素は任意のタグでsectionの内容を表します

amp-accordionサンプル

<amp-accordion animate>
    <section expanded>
    <h2>項目1</h2>
    <p>項目1</p>
    </section>
    <section>
    <h2>項目2</h2>
    <p>項目2</p>
    </section>
    <section>
    <h2>項目2</h2>
    <p>項目2</p>
    </section>
    <section>
    <h2>項目3</h2>
    <p>項目3</p>
    </section>
</amp-accordion animate>

amp-accordionの属性オプション
animate・・・
開閉時にアニメーションさせます。指定しない場合瞬時に開閉します。
disable-session-states・・・
通常開閉の状態はセッションで保存されますが、disable-session-statesを指定すると保存されなくなります。
expand-single-section・・・
常に一つのsectionだけ展開される状態となります。
各sectionの属性オプション
expanded・・・
初期状態で展開された状態となります。

amp-accordionのサンプルイメージamp-accordionのサンプルイメージ

amp-lightboxモーダルボックス表示用コンポーネント)

amp-lightboxはモーダルウィンドウを表示させる為のコンポーネントです。

必須スクリプトの読み込み。headタグ内のamp.js読み込みより後に記述します。

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

モーダルウィンドウで表示させるコンテンツをamp-lightboxタグで囲みます。

<amp-lightbox id="lightbox1" layout="nodisplay">
    <p>ライトボックス1</p>
    <amp-img src="image.png" width="300" height="200"></amp-img>
</amp-lightbox>

id属性は必須、layoutは”nodisplay”指定のみとなります。scrollableオプションを追記するとモーダルウィンドウ内のスクロールが可能になります。

モーダルウィンドウ操作のためのボタンを設置します。

<button on="tap:lightbox1">開く</button>
    <amp-lightbox id="lightbox1" layout="nodisplay">
    <p>ライトボックス1</p>
        <amp-img src="image.png" width="300" height="200"></amp-img>
        <button on="tap:lightbox1.close">閉じる</button>
    </amp-lightbox>

amp-sidebarのサンプルイメージamp-sidebarのサンプルイメージ

amp-carousel(カルーセル・スライダー表示用コンポーネント)

pamp-carouselはカルーセル・スライドショーを実装するためのコンポーネントです。

必須スクリプトの読み込み。headタグ内のamp.js読み込みより後に記述します。

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

amp-carousel実装サンプル。今回はシンプルなスライドショーの実装例です。

<amp-carousel layout="responsive" width=”300” height="200" type="slides" autoplay delay=”3000” loop>
    <amp-img src="image.png" width="300" height="200" layout=”responsive”></amp-img>
    <amp-img src="image2.png" width="300" height="200" layout=”responsive”></amp-img>
    <amp-img src="image3.png" width="300" height="200" layout=”responsive”></amp-img>
</amp-carousel>

type属性でカルーセルの種類を選択します。

type属性 説明
slides スライドを1枚ずつ表示させます。指定できるレイアウトはresponsive, fill, fixed, fixed-height, flex-item, nodisplayです。
autoplay属性で自動再生、
loop属性でスライドのループ表示、
delayでautoplay時のスライド間隔をミリ秒単位で指定可能です。
なおスライドのアニメーション速度に関しては2019年7月時点では指定するオプションがないようです。
carousel スライドを横方向にスクロール表示させます。指定できるlayoutはfixed, fixed-height, nodisplayです。
下限額:40万円

amp-carouselのサンプルイメージamp-carouselのサンプルイメージ

ここまで見てきたように、AMPコンポーネントを使用することでWebコンテンツのデータ量を抑えながら、動きのあるユーザーインターフェイスを実現することができます。

また、これらのAMPコンポーネントは他のJavaScriptライブラリのように、通常のWebページでも使用することができます。特にスマートフォン向けのWebコンテンツでは動作の軽いAMPコンポーネントは有力な選択肢になると思いますので、選択肢の一つに加えたいところです。

パソコン工房 NEXMAG[ネクスマグ]編集部アイコン画像
ライタープロフィール パソコン工房NEXMAG
[ネクスマグ] 編集部

パソコンでできるこんなことやあんなこと、便利な使い方など、様々なパソコン活用方法が「わかる!」「みつかる!」記事を書いています。

記事を
シェア