モバイルの表示が爆速になるAMP(Accelerated Mobile Pages)

去年Googleが提唱したAMP(Accelerated Mobile Pages) が、最近また活発になってきたようです。

というわけで、今回はAMPをご紹介いたします。

AMP(Accelerated Mobile Pages)とは

www.ampproject.org

Accelerated Mobile Pages Project

AMPはGoogleが行っている、モバイル端末でのウェブページの表示を高速化するというプロジェクトです。

簡単に言うと、「JavaScriptを使わない静的なHTMLとCSSで出来たページは表示を速くしますよ!」というものです。

AMP HTMLの書き方

「html」に「amp」または 「⚡」を記述します。また、「script async」でampのライブラリを読み込みます。

「body」内はいつも通り普通に記述します。

「AMP HTML」はインラインスタイルでCSSを記述します。

AMPでは現在インラインスタイルのみが認められているようです。

画像を記述するときは、「<amp-img>」というタグを使用し、「p」で囲みます。また、「<amp-img>」は必ず「width」と「height」を記述します。

GitHub – ampproject/amphtml: AMP HTML source code, samples, and documentation. See below for more info.

以上が基本になります。

「AMP HTML」は「YouTube」、「Twitter」、 「iframe」 なども使えるようです。JavaScript以外ならリッチな表現も可能のようです。

AMP HTML Extended Components

「AMP HTML」はJavaScriptの使用が認められていないため、JavaScriptを使用してのリッチコンテンツを「AMP HTML」内で表現することはできません。ですが代替要素が用意されているので、リッチコンテンツを表現したい場合は、それらの各種代替要素を利用することになります。

代替要素は下記のようになります。

コンポーネント 概要
amp-anim アニメーションGIFを表示。
amp-audio オーディオプレーヤーを表示。
amp-brightcove 「ブライトコーブ」の「Video Cloud」か「perform」の動画プレーヤーを表示。
amp-carousel カルーセルを表示。
amp-fit-text 内容にフィットするフォントを表示。
amp-font カスタムフォントを読み込んで表示。
amp-iframe インラインフレームを表示。
amp-image-lightbox 画像をライトボックス表示。
amp-instagram Instagramを表示。
amp-install-serviceworker ServiceWorkerをインストール。
amp-lightbox ライトボックスを表示。
amp-list 動的にリストアイテムを作成し、表示。
amp-twitter Twitterを表示。
amp-vine 動画ファイルを表示。
amp-youtube YouTubeを表示。

AMP HTML化してみた

当サイトも「AMP HTML」にしてみようと思い、HTMLの記述を変更しようと思ったのですが、そこは「WordPress」、既に「AMP」という名称でプラグインがあったので、早速導入してみました。

「AMP」プラグインを入れて、サイトをスマホで表示します。記事ページであればどこでもいいので、URLの末尾に「/amp/」と入力します。

URL例

すると、下記の画像のようにシンプルな表示になります。

AMPで表示
スマホでのAMP表示

シンプルなだけあり表示は速いです。

ただ、プラグインを適用しただけなので、WordPressの表示が出てしまったり、当サイトらしさはほとんどありません。

CSSはインラインとなっているので、AMPプラグインでのデザインになっています。デザインを残したい場合は、インラインスタイルでCSSを記述する必要があります。

AMPページの構造化でエラーがなく、GoogleのCDNにキャッシュされると、モバイルの検索結果に下記のようなアイコン(⚡)と「AMP」というテキストが表示されます。

モバイルの検索結果にAMPが表示される
モバイルの検索結果にAMPが表示される

上記のAMP表示があるページは高速でブラウザに表示されます。

ソース

AMPのURLで表示したスマホのソースを見てみると、AMP形式でソースが変更されていました。下記のソースの一部で、「img」が「amp-img」になっていることが分かります。

まとめ

  • 「html」に「amp」または 「⚡」を記述。
  • 「script async」でampのライブラリを読み込む。
  • CSSはインラインスタイルで記述。
  • 画像は「<amp-img>」を使用し、「p」で囲み、「<amp-img>」は必ず「width」と「height」を記述。
  • JavaScriptの使用は認められていない。
  • リッチコンテンツを表現したい場合は、各種代替要素を利用する。
  • WordPressには「AMP」というプラグインがある
  • 「AMP」プラグインを使用する場合、URLの末尾に「/amp/」とするとAMP表示がされる。
  • AMPでの表示速度は速い。
  • AMPで独自のデザインを当て込む場合は、インラインスタイルでCSSを記述する必要がある。

「AMP HTML」の記述自体は難しくないので、HTMLができる方であればいつものコーディングと変わらないと思います。

ただ、PCとモバイルを別のディレクトリでコーディングする場合は気にする必要はないのですが、「AMP HTML」はHTMLタグが独特なのと、CSSの使用はインラインになるので、PCとスマホのソースがワンソースになる場合は、何らかの方法でソースを切り替える必要があります。

また、「AMP HTML」で独自のデザインを当て込む場合は、インラインスタイルでCSSを記述する必要があるので、よりシンプルなデザインが求められるでしょう。

2016年の今年からGoogleは「AMP HTML」を本格的に採用するようなので、できるだけ多く触れて慣れ親しみ、モバイル表示にやさしいサイトを作っていきましょう。

記事のタイトルとURLをコピーする

シェアする

フォローする

モバイルの表示が爆速になるAMP(Accelerated Mobile Pages)
この記事をお届けした
PC ウェブログの最新ニュース情報を、
いいねしてチェックしよう!