More than 5 years have passed since last update.

AMPでCSS読み込みとカルーセル実装

Last updated at 2016-02-27Posted at 2016-02-23

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について

CSS総容量は50,000Byte＝50KBまで

これを超えるとエラーがでるので注意

CSSを読み込む

cssは<link rel="stylesheet" href="">みたいな書き方ができないし、head内に直接書き込むしかない
じゃあどうするかというと、phpファイルにcssをコピーしてincludeしよう！
ってなるんだがsassを使ってるとscssをcssにしてそれをコピーして…と非常にめんどくさい。
…そのままincludeしよう！

<?php include="style.css" ?>

以上。

これ`<link rel="stylesheet" href="">`と同じ感じ…

css,jsは外部ファイル読み込みできないんじゃなかったっけ？って最初思ったけど
外部ファイル読み込み禁止とは言ってない。
上記のようにlinkタグでcssとして読み込むと当然エラーがでるけど、それは<link rel="">を使ってるからであって
共通パーツのhtmlなんかは普通にphpで読み込んでるので、これ自体に問題はない
じゃあこの違和感は何かというとincludeしてるのがphpファイルじゃなくてcssファイルだからである

php以外のファイルをincludeすると

ただのテキストとして認識するらしい。
htmlもcssもただのテキストみたいなもんなので、まあ当然の結果なんだけど。
エラーは出てないので今のところこれが正解ぽい

カルーセルの実装

~~これが調べてもなかなか出てこない。~~

先ず、jsを読み込む

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
これを読み込まないと始まらない。
jsがダメというのは、すでに用意してあるもの（カスタムエレメンツ）を使えということらしい
htmlは以下の通り

html

<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はアスペクト比を変えずに幅いっぱいにして、リンクにする）

html



<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>

css



/*カルーセルのスタイル*/

.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は以下のようなかんじ

html

  <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>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

AMPでCSS読み込みとカルーセル実装

AMPでカルーセルを実装してわかったことまとめ

簡単な説明

AMPとは

仕様

Validator

CSSについて

CSS総容量は50,000Byte＝50KBまで

CSSを読み込む

これ<link rel="stylesheet" href="">と同じ感じ…

php以外のファイルをincludeすると

カルーセルの実装

先ず、jsを読み込む

使い方

type

その他属性

左右のボタンを表示

レイアウトを変えたい

カスタムエレメンツ

これ`<link rel="stylesheet" href="">`と同じ感じ…