TIPS
vol.44
モバイルページ高速化 AMP HTMLを作成してみよう
こんにちは。エンジニアの毛利です。
PCと同等のWeb環境が見られるスマホが普及し、年々Webコンテンツは肥大化しています。
Webページ表示の高速化は、限られた通信環境で快適な閲覧をするために必須となっています。
高速化のアプローチ方法は、Webプログラミングの最適化、画像の最適化、サーバー強化、チューニング、検索エンジンへの最適化など様々な方法があります。
Googleをはじめとして様々な検索エンジンはユーザーのニーズに応えるため、検索エンジンでの表示をモバイル最適化を優先、優遇しています。
「モバイルファースト」の概念が、一般的に定着してつつある中、
Googleはスマートフォンで静的なページを瞬時に表示できるようなフレームワークの提供を開始しました。
それが「AMP」。
今回はWebを高速表示させるための新しい枠組み「AMP」についてご紹介します。
AMPとは
Accelerated Mobile Pagesのことで、Google主導のもと、モバイルページの速度向上のために発足したオープンソースプロジェクトです。
Google Developers Japan
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 | 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_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として表示させるために色々と模索していきたいと思っています。
- CATEGORY
- RECENT POSTS
-
vol.72
夏を感じさせるデザインのポイント 10選
夏を感じさせるグラフィックデザインの要素を、実際の事例を交えながらご紹介
-
vol.71
srcsetで画像をレスポンシブやRetinaディスプレイに最適化
画像をレスポンシブやRetinaディスプレイに対応した最適の状態で表示させる
-
vol.70
映画にみる色使いのこだわり
監督の色・こだわりがよく見えるのは映画のよいところ
-
vol.69
2017年度版 Webデザイン・UIのトレンド10選
一時的な流行ではなく多くのサイトで一般的に見られるようになったWebデザイン
-
vol.68
常時SSL化のススメ Let's EncryptでWebサイトを暗号化
無料かつ迅速にセキュアな独自SSL「Let's Encrypt」証明書をサーバーにインストール
- RANKING
- ARCHIVES
お仕事の依頼やご相談
企画・編集、情報設計、デザイン、アートディレクションなどクリエイティブワークを得意とするブランディングオフィスです。ブランディング・Webサイト・印刷物、システム開発等を通じ、ビジネス価値向上をお手伝いします。
