vol.44 モバイルページ高速化 AMP HTMLを作成してみよう
こんにちは。エンジニアの毛利です。 PCと同等のWeb環境が見られるスマホが普及し、年々Webコンテンツは肥大化しています。
Webページ表示の高速化は、限られた通信環境で快適な閲覧をするために必須となっています。
高速化のアプローチ方法は、Webプログラミングの最適化、画像の最適化、サーバー強化、チューニング、検索エンジンへの最適化など様々な方法があります。
Googleをはじめとして様々な検索エンジンはユーザーのニーズに応えるため、検索エンジンでの表示をモバイル最適化を優先、優遇しています。
「モバイルファースト」の概念が、一般的に定着してつつある中、 Googleはスマートフォンで静的なページを瞬時に表示できるようなフレームワークの提供を開始しました。
それが「AMP」。
今回はWebを高速表示させるための新しい枠組み「AMP」についてご紹介します。
AMPとは
Accelerated Mobile Pagesのことで、Google主導のもと、モバイルページの速度向上のために発足したオープンソースプロジェクトです。
AMP HTMLという新しいフレームワークの規則に沿って、コーディングを進めていきます。
従来HTMLそのままの形だと、画像やインタラクションなど、流用できない部分が多々あり、新たにデザイン、コーディングが必要になるものが多いです。 ただ、タグに関してはほとんどHTMLのマークアップ規則のもとで記述できるので、コツさえおさえれば間違いのないものになります。
プロジェクトが発足してすでにページに組み込まれているAMPですが、現在も開発が進んでおり、今後AMP専用の新しいカスタムタグが増えるそうです。
基本的なサンプルは以下のサイトで書かれていますので、これらを実際にコーディングをしてポイントをおさえていきます。
https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md（英語）
AMPのよい所
・表示速度が早い
単純な高速化だけではなくAMP HTMLでマークアップすることで検索エンジン側のサーバーにキャッシュされる仕組みとなっています。
・AMPコンテンツとして画像付きでわかりやすい一覧が表示される
検索トップに画像付き一覧で表示されるため、他コンテンツと比較し目立ちます。
AMPの注意点
・AMP HTMLフレームワークの規則に沿ってコーディングをするため、従来のHTMLを変えなくてはならない
記述そのものに制約や独自のきまりがあり、外部から自分で記述したcssやjsも読み込めません。
・タグの使用に制限がある（img、iframe、form、inputなど）
高速化、コンテンツ最適化のためにいくつかのタグは使用することを制限、もしくは禁止されています。
imgやiframe等はそれぞれamp-img、amp-iframeなどのカスタムタグを使うように決められています。
formやinput等は仕様が禁止されています。
h1などの見出しタグ、div、p、ul、li、tableタグなど基本的なタグは使用可能です。
・JSが使えない
Javascriptは原則使えません。AMPページを検索結果に表示する時に必要な「application/ld+json」のみ記述できます。
AMPでコーディング
コーディングを進めていくためのポイントを解説していきます。
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>Sample document</title>
<link rel="canonical" href="オリジナルページのリンク">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
h1 {color: red}
</style>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Article headline",
"image": [
"thumbnail1.jpg"
],
"datePublished": "2015-02-05T08:00:00+08:00"
}
</script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></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>Sample document</h1>
<p>
Some text
<amp-img src=sample.jpg width=300 height=300></amp-img>
</p>
</html>
!doctype
宣言はhtml5と同様になります。
html
「<html ⚡>」もしくは「<html amp>」と記述します。
link rel="canonical"
オリジナルページのURLを記述します。
meta name="viewport"
content="width=device-width,minimum-scale=1,initial-scale=1"
<style amp-custom>
オリジナルのCSSはここに記述します。外部CSSを読み込むことはできません。
<script type="application/ld+json">
schemaの記述ができます。
amp-carousel-0.1.js
必ず読み込みます。
<style amp-boilerplate>
必ず記述します。内容の変更はできません。
img
画像はamp-imgというカスタムタグで読み込みます。
width、heightが必須項目です。layoutというオプションが4種類あります。
amp-pixel
analyticsコードを入れます。
tid=アナリティクスID
画像のlayoutオプション一覧です。
fixed
width、heightに従い、固定幅になります。
responsive
コンテンツ幅に応じて、画像が拡縮します。画像比率はwidth、heightに基づきます。
fixed-height
縦幅のみ固定になります。widthは指定しない、もしくはautoにします。
fill
ブラウザの有効幅いっぱいに表示されます。画像比率は保持されません。
json Schemaの記述です。必須項目を抜粋しました。
Google Developerから情報が出てますので、推奨項目も含めた詳しい情報はこちらを参照下さい。
Mark Up Your Content Items | Search | Google Developers
headline
見出しを110 文字以内で書きます。
image
記事の画像です。
image.url
画像URLです。
image.height
image.width
画像の幅を設定します。画像の横幅は696px以上です。
publisher
記事の発行者を書くのに必要な項目です。
publisher.name
発行者の名前です。
publisher.logo
ロゴの名前です。
publisher.logo.height
publisher.logo.width
ロゴの幅を設定します。
datePublished
記事が公開された日時です。ISO形式で書きます。
author
記事の著者情報の項目です。
author.name
著者名です。
最後にオリジナルページに下記のタグを挿入します。
<link rel="amphtml" href="./amp/vol44_amp.html">
なお、公式のガイドラインは下記のページにのっていますので一度目を通してみてください。
https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md#html-tags（英語）
まとめ
以上がAMPのためのコーディングのポイントになります。
現状、AMPが検索エンジンに適用されているサイトがあまりなく、確実に確認できるのがGoogleがAMPプロジェクトのパートナーとして認めているメディアサイトでしょうか。
（産経新聞やマイナビニュースなどをGoogle検索すると確認できます。）
検索方法も確立しておらず、どうすればAMPが表示されるかはしばらく試行錯誤が必要なのではないでしょうか。
今回TIPSで作ったHTMLを設置し、サイトをAMPとして表示させるために色々と模索していきたいと思っています。
