裏紙に書く程度の内容

AMP入門 とりあえず作ってみる

AMP(Accelerated Mobile Pages)に従ってみます。

AMPとは

AMPってなんでしょ?

AMP(Accelerated Mobile Pages)はオープンソース仕様に沿って作成されたウェブページです。検証された AMP ページは Google の AMP キャッシュに保存されます。キャッシュに保存することでページをこれまで以上にすばやく表示できるようになります。

AMP ページの Google 検索ガイドライン

要は、AMP仕様にのっとってHTMLを書けば、スマホとかでの表示が早くなるよ、ってことみたいです。

AMP対応ページを作ってみる

Create Your First AMP Pageに従って、AMPページを作ってみます。

HTMLの構成

https://www.ampproject.org/docs/get_started/create/basic_markup.html

サンプルそのままですが、AMP対応したHTMLの例です。

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <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>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

<style amp-boilerplate>のところ、改行がなくて見にくいですが、コピペして使う場合はこのまま使用してください。改行等を入れるとエラーになります。

何やらjsonで定義していますが、ここの解説は乗っていませんでした。まあ、よくわからないのでとりあえず進みましょう。

doctypeを指定

Start with the doctype <!doctype html>

ファイルの先頭は<!doctype html>で始めること。

html5対応ですね。

htmlタグ属性”amp”を指定

Contain a top-level <html> tag (<html amp> is accepted as well).

2行目の<html>開始タグの属性にampを指定します。

head,bodyタグを含むこと

Contain <head> and <body> tags (They are optional in HTML).

これは当たり前だと思いますが、<head>``<body>タグが必要です。
説明にはHTMLではオプショナルなタグですって書いてありますが、省略してるサイトは見たことないかも。

“canonical”を指定

Contain a <link rel="canonical" href="$SOME_URL" /> tag inside their head that points to the regular HTML version of the AMP HTML document or to itself if no such HTML version exists.

<head>内に”canonical”を指定します。元のページがあればそのURL、ない場合は自身のURLを指定します。

meta charset 指定

Contain a <meta charset="utf-8"> tag as the first child of their head tag.

<head>内最初の要素は<meta charset="utf-8">にします。

※utf-8オンリーかな?

viewport指定

Contain a <meta name="viewport" content="width=device-width,minimum-scale=1"> tag inside their head tag. It’s also recommended to include initial-scale=1.

<head>内には”viewport”を指定します。”initial-scale=1”にするのがおすすめだってさ。

AMP JS ライブラリのロード

Contain a <script async src="https://cdn.ampproject.org/v0.js"></script> tag as the last element in their head (this includes and loads the AMP JS library).

<head>内でAMP JS ライブラリをロードします。<script async src="https://cdn.ampproject.org/v0.js"></script>の部分。

styleを指定

Contain the following in their tag: …

上記サンプルの<style amp-boilerplate></noscript>までを<head>タグ内に入れます。

※これは固定でいいのかな?

上記を満たせばAMP対応の準備はできているらしいです。とりあえず、”おまじない”って思っておけばOK。

使用できるタグについて

https://www.ampproject.org/docs/get_started/create/include_image.html

Most HTML tags can be used directly in AMP HTML, but certain tags, such as the tag, are replaced with equivalent or slightly enhanced custom AMP HTML tags (and a few problematic tags are outright banned, see HTML Tags in the specification).

殆どのHTMLタグはそのまま使えるけど、一部<img>とかはAMP HTMLタグにしないとダメなようです。
また、使用が禁止のタグもいくつかあります。

https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md#html-tags

上記リンク先の一覧に書いてあることを要約すると、以下のような感じです。

Tag AMP HTMLでの扱い
script type=application/ld+jsonのみ許可
img amp-img に置き換え
video amp-video に置き換え
audio amp-audio に置き換え
iframe amp-iframe に置き換え
base, frame, frameset, object, param, applet, embed 使用禁止
input elements input, textarea, select, option は使用禁止
form 使用禁止(今後サポートされる予定)
button 許可
style 不透明度設定のため、styleタグが必要。カスタマイズのため、<head>内に1個だけ追加の<style>が設定可能。
link rel値はmicroformats.orgに登録されているものが許可。但し、stylesheet,reconnect, prerender,prefectchなど、ブラウザ依存があるものは不可。
meta http-equivは不可。それ以外はOK。
a hrefでjavascriptを使っちゃダメ。やりたい場合はtarget=_blankにすること。そうじゃなければOK.
svg 大体の属性はOK

(style,linkについて翻訳が怪しいですが。)

<img>タグであれば下記のように代わりに<amp-img>タグにする必要があります。

<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>

スタイルのカスタマイズ

https://www.ampproject.org/docs/get_started/create/presentation_layout.html

スタイルのカスタマイズについてです。

前述表にstyleについてはカスタマイズように1個だけ<style>が設定できるよ、って書いてありました。

実際にはamp-custom属性を明記して、

<style amp-custom>
  /* any custom style goes here */
  body {
    background-color: white;
  }
  amp-img {
    background-color: gray;
    border: 1px solid black;
  }
</style>

のようになります。

また、AMPではレイアウト関連のスタイルについては厳格な規則があるようです。

詳細はHow to Control Layoutを参照とのこと。

プレビュー、動作確認

https://www.ampproject.org/docs/get_started/create/preview_and_validate.html

通常のHTMLを確認するのと同じようにプレビューできます。特別な前処理等はいりません。

とりあえず、最初のHTMLを表示してみるとこんな感じです。

preview-1

動作確認するには、URLに#development=1を追加して表示します。

ブラウザのデバッガでコンソールを表示すると、チェック結果が出力されています。ここで”AMP validation successful”となっていればOK。

preview-2

エラーがある場合はエラーメッセージが表示されます。

preview-3

エラーが発生した場合はValidate AMP Pagesでチェック。

公開の準備

https://www.ampproject.org/docs/get_started/create/prepare_for_discovery.html

非AMPページもある場合

実際に作ったページを公開する場合、AMPページとAMPではない通常のページを公開するケースがあると思います。

Goole検索で通常ページがヒットした場合、AMPバージョンのページがあることを明記する必要があります。

通常(非AMP)ページの<head>内に以下を設定

<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

href部分はAMPページのアドレスです。

AMPページの<head>内に以下を設定

<link rel="canonical" href="https://www.example.com/url/to/full/document.html">

最初のサンプルで記載済みですが、canonicalで通常ページアドレスを明記しておきます。

AMPページのみの場合

一方、通常(非AMP)ページがない場合について。

この場合もcanonicalは必要です。hrefは自身のアドレスを指定します。

最終ステップ

https://www.ampproject.org/docs/get_started/create/publish.html

Create Your First AMP Page のステップは続いていますが、既にページはできています。

最終ステップのページには特に何も書いて有りません。開発環境とかのアドバイス?にリンクしているだけみたいです。

まとめ

ポイントをざっくり整理すると

  • AMP JS ライブラリをロードする
  • ヘッダ部に必要な設定をする
  • AMP対応タグに注意する

といったところです。

Create Your First AMP Page はほぼヘッダのあたりの解説でした。

参考

AMP HTML Specification

URABLO
広告
Index
広告