最近注目されているAMPですが、今回は導入から基本的な対応とブラウザでのデバッグについてまとめていきたいと思います。ここでは本格的なコーディングの前に押さえておくべきところに絞っていますので、詳しくは別記事でもまとめていきたいと思います。
AMPとは？
AMPとは「Accelerated Mobile Pages」の略で、Googleが推奨している次世代のモバイルサイトの規格のようなもので、AMPにHTMLを対応させるフレームワークを指します。通常のウェブページとは異なり、Googleが世界各地のサーバーでWebページ自体をキャッシュすることなどで、ページ表示を高速化させることを目的としています。
ただし、AMPでは高速化のため様々な制約があります。例えば、外部CSSの読み込みができなかったり、従来のjavascriptが使えなかったり、一部HTMLタグも対応していないので注意が必要です。
AMPのメリットと可能性
モバイルサイト高速化を目的としているAMPはいろんなメリットと可能性を秘めています。何と言っても最大の強みは表示のスピードです。通信速度が制限された環境下でも快適に閲覧できるくらいで、一瞬で表示されるようになります。
またグーグルが推奨していることからAMP対応のページはSEOで有利になると言われています。検索結果でもコンテンツのサムネイル画像がついたカルーセルの形で関連ページも
表示されるので、見た目もかなりリッチになります。
従来のHTMLをAMP対応にする
それでは通常のHTMLをAMP対応にするにはどうすればいいのでしょうか、ここでは一部ですが公式サイトのドキュメントを参考に基本となるテンプレートを見ていきます。
基本となるHTMLはこのような形になります。これがAMP対応の最小限のテンプレートになりますので、ここから追記していきます。
【HTML（AMP）】
<!doctype html>
<html amp lang="ja">
<head>
<meta charset="utf-8">
<title>AMPデモページ</title>
<link rel="canonical" href="https://example.com">
<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>AMPページのテスト</h1>
</body>
</html>
通常のHTMLと比べて異なる点がいくつかありますが、注目すべき点は下記でしょうか。
・ファイルの先頭は以下の宣言で始める
<!doctype html>
・htmlタグをこのような形に変更する
<html amp> もしくは <html ⚡>
・headタグ内の最初に文字コードをUTF-8で指定する
<meta charset="utf-8">
・headタグ内にカノニカルを指定する
<link rel="canonical" href="SITEURL">
・headタグ内にビューポートを指定する
<meta name="viewport" content="width=device-width,minimum-scale=1">
・headタグ内に下記を記述してAMP用のjavascriptファイルを読み込む
<script async src="https://cdn.ampproject.org/v0.js"></script>
また、headタグ内に下記のコードを記述し、AMPのBoilerplate Codeを読み込ませます。これはAMPで使用する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>
デベロッパーツールでのデバッグ
これで先ほどのHTMLをブラウザで確認してみます。ローカル環境の場合はウェブサーバー内にファイルを設置しないとエラーが出るので注意が必要です。
アクセスするときにはURLの最後に「#development=1」を追加することでAMPのバリデーションが有効になり詳しいエラーを確認することができます。
ブラウザで表示できたらデベロッパーツールも起動させます。コンソールにこのような表示があるか確認します。
Powered by AMP ⚡ HTML – Version ************* http://localhost/*********#development=1
上記の表示があればこのページはAMPに対応しているという状態です。またエラーがない場合には下記のようなメッセージが表示されています。
AMP validation successful.
この2つが表示されていればひとまずはOKです。あとはこのページを実装していく中でいろんなエラーが出るので一つずつ確認していきます。
いかがでしょうか、AMPでも最小限であればそこまで難しくないので導入時のハードルは高くないかと思います。これ以外にもいろんなルールがあるようですが、また別記事でまとめていく予定です。
（参考）
初めての AMP ページを作成する
