寡聞にして自分の周囲には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ライブラリ・フレームワークがまったく使えないということはありません。
- 非同期のJavaScript（scriptタグでasync属性を指定したもの）
- AMPライブラリ用とAMPコンポーネント用のscript
AMPサイトのサードパーティのJavaScriptを除外するというページでは、上記の2点に該当する場合はAMPにおいてscriptタグを使用することができます。
チュートリアルのすすめ
AMPページと従来から存在する静的ページにはさまざまな違いが存在すると思います。ご興味のある方は一度チュートリアルを見ながら、簡単なAMPページを作成してみることをおすすめします。
環境さえ整っていればチュートリアルのページは、それぞれ10分程度で作成できます（コードをコピペするだけなので）。
