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

#AMPでカルーセルを実装してわかったことまとめ
![bazzinga](https://qiita-image-store.s3.amazonaws.com/0/106705/e4260291-6819-bf44-df45-dfcd370ca4f6.jpeg)

##簡単な説明
###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: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

###レイアウトを変えたい
![名称未設定 1.png](https://qiita-image-store.s3.amazonaws.com/0/106705/95377932-8f95-cda2-fefe-ed8a4647df40.png)
こんな感じで画像を小さくしてボタンを外に表示、中の要素だけスライドしたいとき
（内側の画像とテキストのboxはアスペクト比を変えずに幅いっぱいにして、リンクにする）





```html: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: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: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>
```