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

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のサンプルイメージ

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-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-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-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属性でカルーセルの種類を選択します。

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

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

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

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