AMPページを作るぞ！(基礎)

https://www.ampproject.org/ja/ を参考にしながらAMPページを作る
#準備
以下を通常のhtml(非AMP)ページに追加。URLは任意のAMPページ

```html:document.html
<link rel="amphtml" href="https://www.example.com/url/to/amp/amp.html">
```
#AMP HTML ページを作成する
最低限のマークアップ（Schema.org の定義は省略してます）

```html:amp.html
<!doctype html>
<html amp lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMPs</title>
    <link rel="canonical" href="$SOME_URL">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <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>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>       
```
- 2行目：`<html ⚡>`または`<html amp>`
- 6行目：AMP HTML 版の通常の HTML バージョンを指定する。該当する HTML が存在しない場合は自身を指定する。

#HTMLタグ
##禁止されているタグ
| タグ      |
|-----------------|
|base, frame, frameset, object, param, param, embed|ffff|

##制約があるタグ
|タグ|制約|
|-----------------|-----------------|
|script|タイプが`application / ld + json`だけOK。例外もある|
|img|[amp-img](https://www.ampproject.org/ja/docs/reference/components/amp-img)に置き換える。閉じタグがあるので注意。`<amp-img></amp-img>`|
|video|`amp-video`に置き換える|
|audio|`amp-audio`に置き換える|
|iframe|`amp-iframe`に置き換える|
|form|使用可。[amp-form](https://www.ampproject.org/ja/docs/reference/components/amp-form)の拡張が必要 |
|input要素|`<input[type=image]>`, `<input[type=button]>`, `<input[type=password]>`, `<input[type=file]>`を除いて使用可|
|style|必須タグの`<style amp-boilerplate>`とスタイリング用の`<style amp-custom>`が使用可|
|link|[microformats.org](http://microformats.org/wiki/existing-rel-values)に登録されているrel値はOK|
|meta|`http-equiv`属性禁止|

#スタイルとレイアウト
すべてのCS は、`<head>`の`<style amp-custom>`タグ内に追加する。埋め込めるcssは1つだけ。`<style amp-custom>`タグを複数回使用できない。
ページのCSSは50kb以内にする。

```html:amp.html
<!doctype html>
<html amp lang="ja">
<head>
-省略-
<style amp-boilerplate>-省略-</style>
<style amp-custom>
  body {
    background-color: white;
  }
  amp-img {
    background-color: gray;
    border: 1px solid black;
  }
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
```
こんな感じでインクルードもできる

```html:amp.html
<style amp-custom>
  <!-- #include file="/assets/css/main.min.css" -->
</style>
```
##許可されないスタイル
| スタイル      |
|-----------------|
|!important|
|`<link rel="stylesheet">` カスタムフォントを除く|
|-amp- クラス名、i-amp- タグ名|

##制約があるスタイル
|スタイル|制約|
|-----------------|-----------------|
|transition |現在は opacity 、transform 、-vendorPrefix-transformのみ可|
|`@keyframes {...}`|現在は opacity 、transform 、-vendorPrefix-transformのみ可|


#コンポーネント / タグ
[AMP で使用可能なコンポーネント](https://www.ampproject.org/ja/docs/reference/components)

取り合えず使ったやつから追記
##[amp-carousel](https://www.ampproject.org/ja/docs/reference/components/amp-carousel)
カルーセル(スライダー)を設置する。
###設置
デフォルト

```css:amp.html
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
```
キャプション等つける場合追加

```css:amp.html
<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
```
サムネイルを表示する場合追加

```css:amp.html
<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
```
カルーセルボタン等表示する場合追加

```css:amp.html
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
```
カルーセルを表示

```css:amp.html
<amp-carousel width="450" height="300">
  <amp-img src="images/image1.jpg" width="450" height="300"></amp-img>
  <amp-img src="images/image2.jpg" width="450" height="300"></amp-img>
  <amp-img src="images/image3.jpg" width="450" height="300"></amp-img>
</amp-carousel>
```

|属性|初期値|バリエーション|説明|
|-----------------|-----------------|-----------------|-----------------|
|type|carousel|carousel(すべてのスライドが表示され、水平方向にスクロール可能)、slides(一度に1つのスライドを表示)|カルーセルの表示タイプ|
|height(必須)||数値|高さをピクセル指定|
|controls||論理属性|左右の矢印を表示|
|data-next-button-aria-label|'Next item in carousel'|文字列|カーソルボタン＞のラベル|
|data-prev-button-aria-label|'Previous item in carousel'|文字列|カーソルボタン＜のラベル|
|autoplay||論理属性|自動再生する|
|delay|5000|数値|autoplayが有効な場合、自動で画像が切り替わる秒数を、ミリ秒単位で指定|
|loop||論理属性|type属性にslidesを指定した場合にスライドがループする|
その他[AMPの共通属性](https://www.ampproject.org/docs/reference/common_attributes)を指定できる
参考：https://syncer.jp/Web/AMP/Common_Attribute/

###カーソルボタンのスタイル
下記のようにカーソルボタンを変更できる

```css:amp.css
.amp-carousel-button-prev {
  left: 16px;
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M15 8.25H5.87l4.19-4.19L9 3 3 9l6 6 1.06-1.06-4.19-4.19H15v-1.5z" fill="#fff" /></svg>');
}
```
###サンプル
テキストキャプション、サムネイル表示等カスタマイズも可能
https://ampbyexample.com/advanced/image_galleries_with_amp-carousel/

##[amp-sidebar](https://www.ampproject.org/ja/docs/reference/components/amp-sidebar)　
ナビゲーション、リンク、ボタン、メニューなど、一時的なアクセスを意図したメタコンテンツを表示。
ページにつき1つしか設置できない。幅はスタイルシートで45px〜80vwの間で設定できる。

###開閉ボタン
openがデフォルト

```html:amp.html
<button class="hamburger" on='tap:sidebar1.toggle'></button>
<button on='tap:sidebar1'>Open</button>
<button on='tap:sidebar1.open'>Open</button>
<button on='tap:sidebar1.close'>x</button>
```
###サイドバー

```html:amp.html
<amp-sidebar id="sidebar" layout="nodisplay" side="right">
//ここにリスト
</amp-sidebar>
```

|属性|初期値|バリエーション|説明|
|-----------------|-----------------|-----------------|-----------------|
|side|left|left,right|左右どちらに開くか|
|layout|||表示はnodisplayにしておく|
その他AMPの共通属性を指定できる

##[amp-img](https://www.ampproject.org/ja/docs/reference/components/amp-img)
imgの代替

|属性|初期値|バリエーション|説明|
|-----------------|-----------------|-----------------|-----------------|
|alt|||代替テキスト|
|attribution|||ライセンス等を指定する　例`attribution="CC courtesy of Cats on Flicker"`|
|height , width(必須)||数値|画像のサイズ。画像のアス非を決定するために使用される|
|src|||画像のURL|
|srcset|||HTMLと同様。デバイスごとに画像を指定する|
その他、AMPの共通属性を指定できる

###アスペクト比の設定
幅と高さはアス非があっていればOK。
例えば、width = "900"とheight = "675"を指定する代わりにwidth = "1.33"とheight = "1"を指定するだけで済む。

###デバイスごとに画像を指定する
とりあえず今はリンクだけ貼っとく
[creating responsive AMP pages ](https://www.ampproject.org/docs/design/responsive/responsive_design#displaying-responsive-images)