AMPドキュメント

AMP入門

AMPとは

AMP(アンプ)とは

モバイルページを高速に表示させるフレームワーク
GoogleがTwitterと共同で開発を進めているAccelerated Mobile Pagesというプロジェクト

特徴

  • 表示の高速化のためにHTMLに制約を加えた「AMP HTML」
  • 高速にコンテンツのロードするためのJavaScriptコード「AMP JS」
  • コンテンツのキャッシュ配信をする「Google AMP Cache」

ルール

  • 非同期的に実行されるJavaScriptが原則として禁止
  • 動的にサイズが変わるようなコンテンツは提供できない
  • CSSは別ファイルに分離できず、スタイル指定はすべてHTMLソースファイル中に記述
  • CSSのサイズは最大50KB

基本テンプレート

説明

AMPプロジェクトが推奨するAMP用ベーステンプレート

テンプレート

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="https://amp.dev/ja/documentation/guides-and-tutorials/start/create/basic_markup/">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </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>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

必須項目

  • 先頭に<!doctype html>
  • <html ⚡>(<html amp>も可)
  • <head>と<body>
  • <meta charset=”utf-8”>を<head>の最初の子要素
  • <script async src=”https://cdn.ampproject.org/v0.js”></script>を<head>の2番目の子要素
  • <head>内に<link rel=”canonical” href=”$SOME_URL”>
  • <head>内に<meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1”>
  • <head>内にAMPボイラープレートコード

構成要素

AMP HTML宣言

<!doctype html>
<html ⚡ lang="ja">

DOCTYPE宣言をして、html ⚡ のlang属性を指定することが必須
カミナリの部分は「amp」の文字でもOK

headタグとbodyタグ

<head>
</head>
<body>
</body>

headタグとbodyタグの指定が必須

meta要素

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

meta要素でUTF-8とviewportを指定することが必須

boilerplate

<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>

amp-boilerplate(ボイラープレート)はhead内に記述が必須なスタイルシート

AMPのJSライブラリを読み込む

<script async src="https://cdn.ampproject.org/v0.js"></script>

AMP JSライブラリを読み込むことが必須

canonicalタグ

AMPページの元となる通常ページが存在する場合、rel=amphtmlのlink要素にAMPページへのURLを指定
逆に、AMPページのrel=canonicalのlink要素には通常ページのURLを指定

AMPページに埋め込むタグ

<link rel="canonical" href="【オリジナルページのURL】">

AMPの元となるオリジナルページに埋め込むタグ

<link rel="amphtml" href="【対象のAMPページURL】">