AMPでカルーセルを実装する

AMPでカルーセルを実装する

以前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は以下の通り。

これだけでとりあえず動きます。

使い方

表示したい画像を<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

レイアウトを変えたい

95377932-8f95-cda2-fefe-ed8a4647df40
こんな感じで画像を小さくしてボタンを外に表示、中の要素だけスライドしたいとき
(内側の画像とテキストのboxはアスペクト比を変えずに幅いっぱいにして、リンクにする)

まず、タグの種類に関係なく<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は以下のようなかんじ

 


Previous: css3のアニメーションを活用してみよう Next: セールスレターを書く前に。特徴を売れるパーツに変換するワークって?

© 2017 ALL CONNECT Inc. All Rights Reserved.