AMP HTML 入門 – AMP HTML を効率良く身につける –

AMP HTML HTML5

AMPとは?AMPを5W1Hに沿って理解しよう!ではAMP(Accelerated Mobile Pages)とは何かについて書きましたが、How(どのように)については概要のみとなってしまいました。この記事ではHowに相当する技術AMP HTMLについて学んでみましょう。

※この記事は主にWEBデザイナー・コーダー・エンジニア向けとなります。

HTML5の知識が大前提

AMP HTMLはパフォーマンスを保証するための制約が設けられたHTMLのサブセットです。HTMLを知らない場合は、まずHTML5を学ぶ必要があります。

AMP HTML学習の心構え

HTML5を習得しているなら、AMP HTMLを学ぶこと自体は非常に簡単!ざっくり学ぶだけなら1日あれば十分です。

注)
<amp-img>, <amp-ad>, <amp-twitter> のようなAMP HTML独自のタグがほんの少しありますが、AMP HTML はHTML5から使える機能を制限しただけのものです。そのため、HTML5のうちのこれこれが使えないのだな、と把握するだけで学習完了です。

 

AMP HTML 入門

1. AMP HTMLとは?

正確のため、公式Githubからの引用します。

AMP HTML is a subset of HTML for authoring content pages such as news articles in a way that guarantees certain baseline performance characteristics.

Being a subset of HTML, it puts some restrictions on the full set of tags and functionality available through HTML but it does not require the development of new rendering engines: existing user agents can render AMP HTML just like all other HTML.

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

かいつまむと…

・一定基準のパフォーマンスを保証するための制約が設けられたHTMLのサブセット
・ニュース記事のような記事コンテンツからなるページのためのもの
・新しいレンダリングエンジンの開発を必要とするものではない

さりげなく重要なのが for authoring content pages such as news articles の部分です。AMP HTML は主に記事ページ、静的コンテンツのページ向けに策定されたHTMLで、たとえばお問い合わせフォーム、グリグリ移動できる地図、ユーザーの入力に応じて変わるコンテンツ等を含むページはAMP HTMLでは対応できません。

注)
AMPページでは原則としてJavaScriptは使えません。また、<input>, <select>, <textarea> といった入力関連タグも使用そのものが禁止されています。

2. AMP HTMLの基本フォーマット

AMP HTMLの基本フォーマットは非常に簡単です。5分で読めるので、どこぞのブログ記事ではなく、必ず下記の公式ドキュメントに目を通しましょう。

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

基本フォーマットが理解できたら次はAMPで使えないタグを把握するとスムーズです。

3. 使用禁止されているタグを把握

<h1>,<p>,<div>などHTML5で使用可能なタグの多くはAMP HTMLでも使用可能です。しかし、<img>, <form>, <input>のようなHTML5では基本かつ必須といえるタグでも使用禁止のものがあります。しっかり把握しましょう。

どこぞのブログ記事ではなく、きちんと公式ドキュメントをチェックしましょう。公式ドキュメントで「Prohibited」となっているタグはAMPでの使用を禁止されています。
https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md#user-content-html-tags

上記の公式ドキュメントがすべてなのですが、いくつかピックアップしてみます。

<img>
使用禁止です。<amp-img>というAMP独自のタグを使用しなければなりません。

<iframe>
使用禁止です。<amp-iframe>というAMP独自のタグを使用しなければなりません。

<form>
使用禁止です。ただし、将来的にはサポート予定です。

<input>等
<input>, <select>, <option> , <textarea> といった入力関連のタグは使用禁止です。

[補足] 2016年10月末から拡張を導入することでAMPページでもフォーム関連タグが使用できるようになりました

 

4. 使用できるが制限のあるタグを把握

タグ自体は使用できるが、制限のあるものもあります。

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

上記の公式ドキュメントがすべてなのですが、いくつかピックアップしてみます。

<stript>
<script>タグは基本的に使えません(<script type=”application/ld+json”>  … </script> のみ例外的に使用可能です)。つまり、AMP HTMLではJavaScriptは使えません。

補足
<amp-iframe> の中でJavaScriptを動作させる等の仕組みはありますが、独自実装のJavaScriptを使うことはできません(公式ドキュメントではAMP pages can’t include any author-written JavaScript.と記されています)。Google Analytics のJSタグも当然ながら機能しないので、AMP用に特別対応をする必要があります。

<a>
アンカータグは使用できます。ただし、<a href=”javascript:void(0)”> … </a> のように href属性値を javascript: から始めてはいけません。
あともう1点。target 属性値をつける場合には_blankのみOKです。target=”_parent”, target=”_top” のような _blank 以外の属性値をつけてはいけません。

その他、<p style=”color:red”> … </p> のようなstyle属性値も使ってはいけない等、知らないとハマってしまう制限はたくさんあります。公式ドキュメントをチェックしましょう。

5. AMP HTMLで使用可能なタグを把握

上の項目3と項目4のように禁止や制限のあるタグはありますが、HTML5のタグの大多数が問題なく使用できます。使用可能なタグにざっと目を通しましょう。
https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md

以上を抑えればAMP HTMLの学習は完了で、あとは実践あるのみです。

 

[補足] 実践は難しい・・・

散々持ちあげといて突き落とすようですが…AMP HTMLを学ぶのと実践するのはまったくの別物で、実践はとても難しいです。というのも…

HTMLは一貫して表現力を高め、HTML5ではアプリケーションのようなリッチコンテンツを提供できる程に進化を遂げてきました。一方、AMP対応ページでは、JavaScriptの使用禁止に代表されるようにHTML5では当たり前のことができません。Google Analyticsタグもアドネットワークのタグも(そのままでは)全く動きません!実践となると「あれもできない!これもできない!」という問題に直面するでしょう。

もし、請負制作・開発の場合にはクライアントの十分な理解を得る必要があり、弊社でも十分理解をいただいた上で実施しています。