AMPページにおける3つの特徴〜AMPタグ・styleタグCSS・AMP JSライブラリ

2019年3月6日2019年3月7日

寡聞にして自分の周囲にはAMP(Accelated Mobile Pages)ページを作成したという方はいません。ですのでAMPを理解するために、AMPのチュートリアルを見ながらAMPページを作成してみました。

AMPページのチュートリアルを紹介

自分の手を使って写経したチュートリアルは以下の3つの箇所です。それぞれ自分で写経した内容をGitHubにおいてコードを公開しています。

AMPのチュートリアル

GitHub

AMPページの3つの特徴

技術的な詳細はAMPのチュートリアルに譲ります。今回の記事は、チュートリアルをやったものとしてAMPページと従来から存在する静的なHTML/CSS/JavaScriptのページとどう異なるのか、AMPページの特徴を挙げながらざっくりと説明します。

AMPタグについて

[php]
<amp-img src="img/welcome.jpg" alt="Welcome" height="425" width="640"></amp-img>
[/php]

AMPページにおいても従来から存在するHTMLタグはおおむね使用可能です。ですが上記imgタグのようにAMPページでは使用が禁止されているタグも一部存在します。どのタグをAMPに対応させるかは英語版の仕様が参考になります。

styleタグCSSについて

[php]
<style amp-custom>
/* any custom style goes here */
body {
background-color: gray;
}
amp-img {
background-color: gray;
border: 2px solid orange;
}
</style>
[/php]

AMPでは外部ファイルでCSSを読むことが禁止されています。上記styleタグのようにHTMLのheadタグの中で記述することが推奨されています。またlikタグ自体も、AMPページと非AMPページをお互いに読み込む時に使う場合を除き、使うことはできません。

AMP JSライブラリについて

[php]
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
[/php]

AMPは同期で読み込むJavaScriptライブラリを使うことはできません。上記のscriptタグのように非同期で読み込むAMP JSライブラリを使うことが推奨されています。

ただしAMPにおいてサードパーティのJavaScriptライブラリ・フレームワークがまったく使えないということはありません。