2016年11月29日

AMPコンポーネントの使用方法とその効果

UI開発者木村

以前投稿したAMP対応でモバイルユーザーを獲得するという記事で、AMP対応においてサイトの機能性やデザインの再現性への影響が大きいと思われる制約の一つとして、「AMP JS以外のJavaScriptの記述と読み込みの禁止」という項目があることをご紹介しました。今回はそれを補うための手段をご紹介します。

AMP JS以外のJavaScriptの記述や、読み込みが禁止されていることによる影響の大きさはサイトによって様々ですが、jQueryやlodashなどのライブラリやフレームワーク、スクラッチで開発したJavaScriptファイルを読み込むこと、script要素を用いてHTMLソース内にJavaScriptソースを記述することも禁止されています。

AMP HTMLでカルーセルやアコーディオンメニュー等の機能を実装するためには、AMPコンポーネントを使用します。

AMPコンポーネント

AMPコンポーネントとは、外部ライブラリやオリジナルのJavaScriptによって表示パフォーマンスが低下する可能性を低くするために、現在AMPのサポート対象であるニュースサイトやブログ等でよく使用される機能を実装するためのAMP HTMLの拡張機能です。AMPコンポーネントは、AMP HTMLの仕様に準拠した作りになっているので通常のHTML5ページと比較し、機能性をできるかぎり維持したまま表示パフォーマンスを向上させることが可能です。

AMPコンポーネントは、HTML5で作成することのできる機能をすべて再現できるというわけではありませんが、機能の種類も徐々に増えてきており、AMP発表当初は実装することができなかったform要素も、執筆現在ではまだ一部実験中ではありますが、AMPコンポーネントを使用することによって実装可能になってきています。現在どのようなAMPコンポーネントが実装可能であるかは、AMP Projectのリファレンス内にあるComponents / Tagsというページで確認することができます。

次のサイトでは、AMPコンポーネントの実装例が充実しているので、それぞれのコンポーネントがどのような動作をすることができるのか確認することもできます。

AMP by Example

カルーセルの実装

実際にAMPコンポーネントを使用して、簡易的なカルーセルを実装してみます。カルーセルを実装するためには、amp-carouselというAMPコンポーネントを使用します。

次のソースはamp-carouselを使用してカルーセルを実装したサンプルソースです。

<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<title>amp-carousel</title>
<link rel="canonical" href="$$$dummy$$$">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
h1 {
  text-align: center;
}
p {
  line-height: 1.2;
  margin: 0 0 16px 0;
  padding: 0 8px;
}
.carousel {
  background-color: #eee;
  padding: 8px 0;
  margin: 0 0 16px 0;
}
.amp-carousel-button {
  border-radius: 50%;
}
</style>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>

<h1>amp-carousel</h1>

<amp-carousel height="300" layout="fixed-height" type="carousel" class="carousel">
<amp-img src="/img/sample-01.png" width="400" height="300"></amp-img>
<amp-img src="/img/sample-02.png" width="400" height="300"></amp-img>
<amp-img src="/img/sample-03.png" width="400" height="300"></amp-img>
<amp-img src="/img/sample-04.png" width="400" height="300"></amp-img>
</amp-carousel>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere obcaecati, dolore asperiores illo et, vitae repellendus, accusantium dolorum nostrum ea beatae expedita porro dignissimos architecto autem nulla sed, quaerat voluptate.</p>

</body>
</html>

サンプルソースで実装されたカルーセル

こちらのサンプルソースで、amp-carouselに関係するソースは以下の3点です。

<style amp-custom>

/* 省略 */

.carousel {
  background-color: #eee;
  padding: 8px 0;
  margin: 0 0 16px 0;
}
.carousel .amp-carousel-button {
  border-radius: 50%;
}
</style>

カルーセルにスタイルを付与しています。.carouselはamp-carousel要素に自分で付与したスタイルなのでclass名は自由で、.amp-carousel-buttonはAMP JSに自動で出力される要素で、style[amp-custom]内でスタイルを上書きすることが可能です。AMP JSによる自動出力のためclass名は固定です。これらのスタイルでは、カルーセル自体の背景をグレーにし、デフォルトでは四角い前後ボタンを円形に変更しています。

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

script要素でamp-carouselを読み込んでおり、amp-carouselを使用する場合は必須になります。

<amp-carousel height="300" layout="fixed-height" type="carousel" class="carousel">
<amp-img src="/img/sample-01.png" width="400" height="300"></amp-img>
<amp-img src="/img/sample-02.png" width="400" height="300"></amp-img>
<amp-img src="/img/sample-03.png" width="400" height="300"></amp-img>
<amp-img src="/img/sample-04.png" width="400" height="300"></amp-img>
</amp-carousel>

カルーセル部分のマークアップは非常にシンプルで、amp-carousel要素内にカルーセル表示させたい画像をamp-img要素を配置するだけでカルーセルが実装できてしまいます。カルーセルを実装するにあたって必要な他の要素はAMP JSによって自動出力されます。

オプションの変更

AMPコンポーネントの中には、独自の属性を用いて動作を調節することができる物もあります。先ほどのカルーセルでは、画像の切り替えを行うには、フリック操作もしくは前後ボタンをタップする必要がありました。そこで、例としてオプションを変更し、画像の切り替えを一定間隔で自動に切り替わるように変更します。

先ほどのカルーセル部分のマークアップを次のソースに変更します。

<amp-carousel height="300" layout="fixed-height" type="slides" delay="3000" loop autoplay class="carousel">
<amp-img src="/img/sample-01.png" width="400" height="300"></amp-img>
<amp-img src="/img/sample-02.png" width="400" height="300"></amp-img>
<amp-img src="/img/sample-03.png" width="400" height="300"></amp-img>
<amp-img src="/img/sample-04.png" width="400" height="300"></amp-img>
</amp-carousel>

変更点は、amp-carousel要素のtype属性をcarouselからslidesに変更し、delay属性、loop属性、autoplay属性を追加しました。こうすることによって、先ほどのカルーセルが3秒ごとに画像を自動で切り替えるようになります。このように、機能の動作を手軽に編集できることもAMPコンポーネントの魅力の一つだと思います。

AMP HTMLで、AMP JS以外のJavaScriptの使用が禁止されていることによって、AMP対応を見送っていたり、AMP対応ページでは機能を無くしてしまっている、ということもあるかもしれません。ですが、AMPコンポーネントを使用することによってサイトの機能性をできるかぎり維持したままパフォーマンスの向上を図ることができるので、AMP＋AMPコンポーネントの導入を積極的に検討してみてはいかがでしょうか？

2016年の記事一覧に戻る