Web制作に関わっている方は「カルーセル」と言えば、以下のような「横にスクロールするもの」を想像する方も多いと思います。
ところで、カルーセルを実装する理由って何ですか？
この「カルーセル」ってのは、1ページに表示するコンテンツ量が多いために、上下にスクロールさせる操作を閲覧者にあまりさせないための施策、つまり「上下のスクロール量を減らす」目的として採用することがあります。
また、1つの話題に対して関連する複数の選択肢を「カルーセル」として1つにまとめて、横に並べることで前後関係を把握しながら閲覧してもらえる、というメリットもあるんじゃないかと思います。
上記の内容を端的に表現すると「モバイルでの操作性や利便性を高めるために、カルーセルを実装することもあるよ」ということですね。
そんなカルーセルを、AMP対応ページにも実装したいよね！
実装しました
さっそく実装しました。以下はキャプチャ画像ですが、実際のページをモバイル端末（スマートフォンで見てね）でアクセスしてもらえると、操作もできます。
というわけで、今回は上記のようなAMP対応ページにカルーセルを実装（表示）する方法について書きました。興味がある方はご参考ください。
対応については、AMPのドキュメント「amp-carousel.md」を参考にしています。
スクリプトを読み込もう
まずは、カルーセルを実装するためには「<head></head>」内に以下のスクリプトを読み込む必要があります。
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
読み込み順は「<meta charset=”utf-8″>」以降に読み込み「<style amp-boilerplate>」の前に読み込みました。
スクリプトを読み込む際には要素があるかどうか注意しよう
後から出てきますが、ページ中に「amp-carousel」要素がない状態で上記のスクリプトを読み込むとエラーになります。
デバッグをすると、以下のように「まもなくエラーになるよ」っていうメッセージが表示がされていました。
The tag 'amp-carousel' is missing or incorrect, but required by 'amp-carousel extension .js script'. This will soon be an error. (see https://www.ampproject.org/docs/reference/extended/amp-carousel.html)
スクリプトを読み込む場合は注意が必要ですね。
次はコードについて見ていきましょう。
HTMLを書いてカルーセルの仕組みを理解しよう
スクリプトを読みこんだ後は、HTMLを書きます。
「amp-carousel」というAMP専用の要素を使って、カルーセルさせたい要素を囲みます。
例えば、以下のような感じです。
「p」要素をカルーセルさせたい場合
<amp-carousel> <p>1</p> <p>2</p> <p>3</p> </amp-carousel>
「div」要素をカルーセルさせたい場合
<amp-carousel> <div>1</div> <div>2</div> <div>3</div> </amp-carousel>
「img」要素をカルーセルさせたい場合
<amp-carousel> <amp-img src="image1.png" width="320" height="240" layout="responsive"></amp-img> <amp-img src="image2.png" width="320" height="240" layout="responsive"></amp-img> <amp-img src="image3.png" width="320" height="240" layout="responsive"></amp-img> </amp-carousel>
何となく法則が見えてきませんか。つまり、「amp-carousel」の子要素を指定すればOKってことですね。
属性を指定すると、いろんなパターンのカルーセルを実装できる
「amp-carousel」要素に属性を指定することで、いくつかのパターンでカルーセルの実装ができます。
以下に使える属性を一覧化しました。
「amp-carousel」要素で使える属性（2016/10/15 時点）
| width | カルーセルの幅 | 数値を指定 |
|---|---|---|
| height | カルーセルの高さ | 数値を指定 |
| layout | カルーセルのレイアウト | fill, fixed, fixed-height, flex-item, nodisplay, responsive いずれかを指定 |
| controls | カルーセルを左右に送るボタン | 常に表示させておくかどうか（デフォルトだと、カルーセルがディスプレイの領域に表示されたときに少しの時間だけ表示される） |
| type | カルーセルのタイプ | carousel, slides いずれかを指定 |
| loop | カルーセルのループ | type=”slides” が指定されている場合のみ有効 |
| autoplay | 自動でカルーセルを動かす | 〃 |
| delay | 自動でカルーセルを動かす間隔 | autoplayが指定されている場合のみ有効 |
※属性は組み合わせによって使えなかったり、必須の場合もあります。
デバッグ（AMPページのURLの末尾に「#development=1」を付ける」または「テストツール」）などを使って、補助をしてもらいながらの実装がおすすめです。
まとめ
スルスルっと動くのがとても気分がいいですね。「カルーセルを実装してみたい！」という方は、ご参考いただけますと幸いです。
このページを共有する