以前AMPでカルーセルを実装した際、情報が少なくて苦労しました。
ということで、とりあえずカルーセルが動くまでを簡単にまとめてみました。
AMPとは
モバイル端末でのウェブページの表示を高速化するためのフレームワークで、
AMPのフォーマットでモバイルサイトを構成すると、リンク先のページを高速に表示することが可能になる。
仕様
・<html ⚡>か<html amp>で始める
・cssはheadタグ内に書くかstyle要素でインラインスタイルを当てる
・JavaScript原則禁止
・img, video, audio, iframeは、代わりにamp-imgなどのカスタムエレメンツを使う
・↑これを使うためにhttps://cdn.ampproject.org/v0.jsを読み込む（後述）
・object, form, input等は禁止
Validator
urlの末尾に#development=1をつけて開発者ツールを開くと、バリデーションが実行されエラーがコンソールに表示される
問題がなければAMP validation successful.が表示される
CSSを読み込む
<?php include=”style.css” ?>
以上。
cssは<link rel=”stylesheet” href=””>みたいな書き方ができないし、head内に直接書き込むしかない
じゃあどうするかというと、phpファイルにcssをコピーしてincludeしよう！
ってなるんだがsassを使ってるとscssをcssにしてそれをコピーして…と非常にめんどくさい。
…じゃあそのままincludeしよう！ってなった結果がこれです。
これ<link rel=”stylesheet” href=””>と同じ感じ…
css,jsは外部ファイル読み込みできないんじゃなかったっけ？って思いましたが、
外部ファイルの読み込み禁止とは言ってないんですね。
上記のようにlinkタグでcssとして読み込むと当然エラーがでますが、それは<link rel=””>を使ってるからであって、共通パーツのhtmlなんかは普通にphpで読み込んでるので、これ自体に問題はないはずです。
じゃあこの違和感は何かというとincludeしてるのがphpファイルじゃなくてcssファイルだから！
php以外のファイルをincludeすると
ただのテキストとして認識するらしい。
htmlもcssもただのテキストみたいなもんなので、まあ当然の結果ですが・・・
エラーは出てないので今のところこれが正解ぽいです。
ちなみに、CSS総容量は50,000Byte＝50KB迄で、これを超えるとエラーがでます。
カルーセルの実装
先ず、jsを読み込む
<script async custom-element=”amp-carousel” src=”https://cdn.ampproject.org/v0/amp-carousel-0.1.js”></script>
これを読み込まないと始まりません。
当たり前のようですが、これについて調べてもなかなか情報がなかったので。
jsが使えないというのは、専用のもの（カスタムエレメンツ）を使えということらしいです。
htmlは以下の通り。
1 2 3 4 5 | <amp-carousel width=○○ height=○○ layout=responsive type=slides autoplay loop> <amp-img width=○○ height=○○ layout=responsive src=""></amp-img> <amp-img width=○○ height=○○ layout=responsive src=""></amp-img> <amp-img width=○○ height=○○ layout=responsive src=""></amp-img> </amp-carousel> |
これだけでとりあえず動きます。
使い方
表示したい画像を<amp-carousel></amp-carousel>でネストする
これで中の画像をカルーセルで表示できる
layout=responsiveで画像を幅いっぱいに
type
- carousel
- slides
carouselはlayout=responsiveに対応していないので
画像の幅を可変にしたいときは必然的にslidesを使うことになる
slidesはデフォルとでは自動でスライドしない、スワイプで次を表示
その他属性
以下の属性はtype=slidesにしか使えない
- loop
順にスワイプした時、最初と最後をつなげる
例：1→2→3→1→2→3
– autoplay
自動でスライドする、デフォルトの速さは5000ミリ秒 - delay
autoplayに追加で指定、スライドの速さを変える。ミリ秒でdelay=5000のように指定
左右のボタンを表示
デフォルトで非表示になっているので、
amp-carousel-button amp-carousel-button-next
このクラスにスタイルをあてると表示できる。
ボタンの画像の変更や位置の調整もこのクラスにあてればOK
レイアウトを変えたい
こんな感じで画像を小さくしてボタンを外に表示、中の要素だけスライドしたいとき
（内側の画像とテキストのboxはアスペクト比を変えずに幅いっぱいにして、リンクにする）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <amp-carousel width="320" height="195" type="slides" autoplay layout="responsive"> <div class="c-outer"> <a href="campaign1.php"> <div class="c-inner"> <amp-img layout="responsive" width="290" height="110" src="img/banner.png" alt="キャンペーン!"></amp-img> <div class="campaign-text-wrapper"> <p class="campaign-name">キャンペーン名</p> <p class="campaign-term">期間限定：20XX/2/29まで</p> </div> </div> </a> </div> <div class="c-outer"> <a href="campaign2.php"> <div class="c-inner"> <amp-img layout="responsive" width="290" height="110" src="img/banner.png" alt="キャンペーン!"></amp-img> <div class="campaign-text-wrapper"> <p class="campaign-name">キャンペーン名</p> <p class="campaign-term">期間限定：20XX/2/29まで</p> </div> </div> </a> </div> <div class="c-outer"> <a href="campaign3.php"> <div class="c-inner"> <amp-img layout="responsive" width="290" height="110" src="img/banner.png" alt="キャンペーン!"></amp-img> <div class="campaign-text-wrapper"> <p class="campaign-name">キャンペーン名</p> <p class="campaign-term">期間限定：20XX/2/29まで</p> </div> </div> </a> </div> </amp-carousel> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | /*カルーセルのスタイル*/ .c-outer{ padding: 20px 15px; box-sizing: border-box; background-color: #fff5d4; } .c-inner{ width: 100%; height: 100%; background-color: #fff; } .campaign-text-wrapper{ padding: 5px; background: #fff; font-size: 9px; } .campaign-name{ display: inline-block; border-bottom: 1px solid #a3b9da; color: #015cb1; } .campaign-term{ color: #222; } /* ボタンのスタイル*/ .amp-carousel-button{ visibility: visible; background-color: rgba(0,0,0,0); } .amp-carousel-button-next { right: 0; background-image: url('img/btn-next.png'); background-size: 10px 20px; } .amp-carousel-button-prev { left: 0; background-image: url('img/btn-prev.png'); background-size: 10px 20px; } .amp-carousel-button-prev{ left: -5px; } .amp-carousel-button-next{ right: -5px; } |
まず、タグの種類に関係なく<amp-carousel></amp-carousel>の直下の要素がスライドされるので
実際には中の画像だけでなく、ボタンを含むイメージ画像全体がスライドすることになる
ボタンは<amp-carousel></>の外側にやるとoverflow:hiddenで消えてしまうので、黄色い枠をつくるときは
スライドさせたい内側の要素（<a href=”campaign1.php”>）にマージンをつけるのではなく、それを囲むbox（<div class=”c-outer”>）をつくりパディングを設定してやる
これでボタンは<amp-carousel></>のboxの中ならどこでも移動できるので、画像の外（パディングの部分）に設置できる
<div class=”c-outer”>のパディング（背景色：黄色）をスライド全部で同じにすれば、ボタンは移動しないので
内側の要素だけスライドするようなカルーセルを実装できる
カスタムエレメンツ
ちなみに他のjsは以下のようなかんじ
1 2 3 4 5 6 7 8 9 10 11 | <script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script> <script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script> <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script> <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script> <script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script> <script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script> <script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script> <script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script> <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script> <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 src="https://cdn.ampproject.org/v0.js"></script> |
