これからのAMPめとめ{個人用メモリスト}

# [個人用メモ][] AMP
[AMP][]とは...AMP を使用してウェブページを作成すると、静的コンテンツを高速でレンダリングが可能。 AMPは以下3つの要素で構成される。
「AMP HTML」、「AMP JS」、「Google AMP Cache」

また、AMP HTML ページ内のタグは、ほとんどが通常の HTML タグですが、 一部の HTML タグは AMP 専用のタグに置き換わっている。

・[APM 仕様書の HTML タグ][APM仕様書]

### シンプルなAMP HTML
```html:AMP.html
<!doctype html>
<html ⚡ lang="ja"> or <html amp lang="ja">
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
/* main.min.css */
/* ここには、圧縮（ミニファイ）したcssを記述しましょう */
</style>
   <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>
　　　　　　Hello World!
　　　　　<amp-img src="img/user_1.jpg" alt="user" height="193" width="193"></amp-img>
　　</body>

</html>
```
ガイドラインとして、CSSは基本的に圧縮リソース(ミニファイ)を使用すること。
また、jsは定められたもの以外は、使用不可。
イメージは通常タグではなく、`<amp-img></amp-img>`を使用すること、
画像は、必ず`height="size" width="size"`sizeを指定すること。

# iconの挿入
iconを挿入したい場合は、iconがまとまった画像を用意し、cssで抜き出して、指定しましょう。
以下、サンプルコード。

```html:icon_css-Sample_amp.css
    time {
      position: relative;
      display: inline-block;
      color: #f9f6f6;
      font-weight: normal;
      line-height: 1em;
      font-size: 12px;
      padding-left: 18px;
      margin-bottom: 10px;
    }

    time:before {
      background: rgba(255, 255, 255, 0) url(./fonts/icons-preview.png) no-repeat -158px -92px;
      background-image: url(./fonts/icons-preview.png);
      background-position-x: -592px;
      background-position-y: -472px;
      background-size: 173px;
      background-repeat-x: no-repeat;
      background-repeat-y: no-repeat;
      background-attachment: initial;
      background-origin: initial;
      background-clip: initial;
      background-color: rgba(255, 255, 255, 0);
      background-size: 993px;
      content: "";
      display: inline-block;
      height: 33px;
      left: 0;
      top: 0;
      width: 44px;
    }
```
# 広告を出す
AMPでは、[`amp-ad`][amp-ad]タグで、[AdSense][]や[Ad Generation][AdGeneration]などの広告を表示させることが可能。
以下、サンプル。

```html:ad-Sample_amp.html
<head>
   ...
   <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
   ...
</head>
<aside>
  <amp-ad id='content' width=300 height=250
    type="adsense"
    data-ad-client="ca-pub-3398940292382984"
    data-ad-slot="9805909352"></ins>
  </amp-ad>

  <amp-ad width=300 height=250
    type="adgeneration"
    data-id="10722">
  </amp-ad>
</aside>
```

# おまけ
CSSミニファイサポート用 Webアプリ
[CSS Minifiler][cssminifier]

# 更新データ
作成日:2016-11-25 2:15
ad-scriptの追加:2016-11-25 2:30

<!-- LINK まとめ -->
# Link:まとめ
[AMP][]
[APM 仕様書の HTML タグ][APM仕様書]
[amp-ad][amp-ad]
[AdSense][]
[Ad Generation][AdGeneration]
[CSS Minifiler][cssminifier]

<!-- LINK's -->
[Link]:#
[個人用メモ]:#個人用メモ-amp
[APM仕様書]:https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md
[AMP]:https://www.ampproject.org/
[amp-ad]:https://www.ampproject.org/docs/reference/components/amp-ad
[AdSense]:https://github.com/ampproject/amphtml/blob/master/ads/google/adsense.md
[AdGeneration]:https://github.com/ampproject/amphtml/blob/master/ads/adgeneration.md
[cssminifier]:https://syncer.jp/css-minifier