1. TOPTOP
  2. Webサービス
  3. AMP
  4. AMPページにおける3つの特徴〜AMPタグ・styleタグCSS・AMP JSライブラリ

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

|

amp_three_features_0

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

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

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

AMPのチュートリアル

GitHub

AMPページの3つの特徴

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

AMPタグについて

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

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

styleタグCSSについて

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

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

AMP JSライブラリについて

<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>

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

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

  • 非同期のJavaScript(scriptタグでasync属性を指定したもの)
  • AMPライブラリ用とAMPコンポーネント用のscript

AMPサイトのサードパーティのJavaScriptを除外するというページでは、上記の2点に該当する場合はAMPにおいてscriptタグを使用することができます。

チュートリアルのすすめ

AMPページと従来から存在する静的ページにはさまざまな違いが存在すると思います。ご興味のある方は一度チュートリアルを見ながら、簡単なAMPページを作成してみることをおすすめします。

環境さえ整っていればチュートリアルのページは、それぞれ10分程度で作成できます(コードをコピペするだけなので)。