個人用メモ AMP

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

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

シンプルなAMP 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で抜き出して、指定しましょう。
以下、サンプルコード。

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タグで、AdSenseやAd Generationなどの広告を表示させることが可能。
以下、サンプル。

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

更新データ

作成日:2016-11-25 2:15
ad-scriptの追加:2016-11-25 2:30

Link:まとめ

AMP
APM 仕様書の HTML タグ
 amp-ad
AdSense
Ad Generation
CSS Minifiler

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