Google の AMP に対応した HTML を書く

kaiinui.hatenablog.com

先日の記事では、AMP のさわりについて書きましたが、今回は具体的に AMP がどのようなフォーマットとなっているかを追うため実際に AMP HTML を書いてみます。

まず、AMP は HTML を拡張したフォーマットになっています。また、AMP HTML は単体で動き、それ自体が適正な HTML となっています。（ですから、ブラウザで AMP HTML を開いても普通に動きます。）

具体的には、次のようになっています。

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <link rel="canonical" href="hello-world.html" >
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
  <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <style type="text/css">
  body {
    padding: 0;
  }
  h1 {
    background: pink;
    color: white;
    margin: 0;
    padding: .5em;
  }
  </style>
</head>
<body>
<h1>AMPのテスト</h1>
<p>Hello World!</p>
<p><amp-img src="https://dl.dropboxusercontent.com/u/7817937/______film/Photo%202014-10-09%204%2049%2044.webp" width="200px" height="200px" /></p>
<p>このテキストは画像の下にあるよ</p>
</body>
</html>

この HTML は次の URL で試すことができます。

https://dl.dropboxusercontent.com/u/7817937/______film/amp.html

AMP HTML の書き方

さて、AMP HTML の書き方を解説してみます。

まずは、次の HTML から始めます。

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <link rel="canonical" href="SOME_URL" >
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
  <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
</body>
</html>

いくつかの不可解な部分がありますが「おまじない」だと思ってください。

テキストをおく

普通にテキストを置けばいいです。AMP HTML が通常の HTML であることがわかります。

<body>
<p>はろーわーるど</p>
</body>

画像を置く

画像は <amp-img> を使います。<img> ではないことに注意します。

<body>
<p><amp-img src="https://dl.dropboxusercontent.com/u/7817937/______film/Photo%202014-10-09%204%2049%2044.webp" width="200px" height="200px" /></p>
</body>

注意すべきことは次の 2 点です

<p> で囲むこと。
必ず width, height を固定値で指定すること。

CSS を書く

AMP HTML は CSS なのでもちろん CSS も書けます。

<style type="text/css">
  body {
    padding: 0;
  }
  h1 {
    background: pink;
    color: white;
    margin: 0;
    padding: .5em;
  }
  </style>

...

<body>
<h1>タイトルバーっぽいやつ</h1>
<p>テキスト</p>
</body>

Google Analytics を置く

JavaScript は使えませんので、ガラケーのように 1x1 pixel の画像を使ってトラッキングを行います。このとき、<amp-img> を使うと毎回リクエストを行うことが保証されないので、<amp-pixel> を使います。

Google Analytics のトラッキングピクセルは Measurement Protocol という仕様で規定されています。

<amp-pixel src="https://www.google-analytics.com/collect?v=1&tid=UA-XXXX-Y&cid=0000000&t=pageview&dp=%2Fpath_to_this_page" />

UA-XXXX-Y には GA ID を。dp には自身のページの相対 URL を指定します。

Twitter や Facebook の Custom Audiences を使うときも、この <amp-pixel> を使います。

ほか、JavaScript 以外ならなんでもできます。

ということで、以上が主にできることになります。（他、動画や YouTube, Instagram, Twitter, iframe などが使えます。）

まあ普通の HTML だと思って差し支えありません。JavaScript が使えないことを除いて。

これらの構文を使って書いてみた AMP HTML が次の URL です。

https://dl.dropboxusercontent.com/u/7817937/______film/amp.html

テスト（開発）

#development=1 を AMP HTML の URL の末尾につけてアクセスすることで、開発モードにてページを表示することができます。

具体的には、次のような URL です。Chrome などの開発コンソールを開くと、AMP のデバッグログが表示されます。

https://dl.dropboxusercontent.com/u/7817937/______film/amp.html#development=1

ほかは？

github.com

うな(｡･ε･｡)

Android, iOS, AppEngine まわりのめもめも