Accelerated Mobile Pages

出典: フリー百科事典『ウィキペディア（Wikipedia）』

これはこのページの過去の版です。竹麻呂 (会話 | 投稿記録) による 2017年3月7日 (火) 19:31 （個人設定で未設定ならUTC）時点の版であり、現在の版とは大きく異なる場合があります。

Accelerated Mobile Pages (AMP) は、Googleが中心となって立ち上げた、モバイルでのウェブサイト閲覧を高速化することを目的とするオープンソースプロジェクトである[1]。また、AMPの成果物である一連の仕様やライブラリなどについてもAMPと呼ぶ。AMPは、従来より用いられているHTMLなどのウェブ技術を改良したもので、中核となるのはAMP HTMLと呼ばれるHTMLの一種である。

構成

AMPは、大きく分けて、AMP HTML、AMP JSそしてAMP Cacheの3つの部分からなる[2]。

AMP HTMLは、ウェブページを記述するためのマークアップ言語であり、通常のウェブページで用いられるHTMLの亜種である。AMP HTMLでは画像などの表示にHTMLと異なる専用のタグを用いることになっているほか、HTMLの一部の機能は使用が制限されている。

AMP JSは、AMP HTMLを正しく高速に表示するためのライブラリであり、JavaScriptによって記述されている。AMP JSはまた、AMP HTML専用の機能と、一般のHTMLにのみ対応したブラウザとの橋渡しの役割をも担っている。AMP HTMLでは、このライブラリを呼び出して利用することになる。

AMP Cacheは、AMPページをキャッシュし配信するCDNであり、AMP対応のウェブページにさらなるパフォーマンスの改善をもたらす。閲覧者は、検索エンジンからAMP対応のウェブページを閲覧する際に、最適化が施されたキャッシュへアクセスすることになる。AMP Cacheは、Google AMP CacheとしてGoogleにより運用されている。

AMP HTML

AMPページを作成するには、通常のウェブページ作成においてHTMLを作成するように、AMP HTMLを作成することになる。AMP HTMLの多くの部分はHTMLと同様に記述できる。拡張子もHTMLと同様に.htmlである[3]が、区別のために.amp.htmlとすることもある。

AMP HTMLの詳細な仕様はAMPプロジェクトのウェブサイトにおいて公開されている。以下にその特徴的な部分を述べる。

冒頭部

AMP HTMLの最初の部分は次のようになる。 

<!doctype html>
<html amp lang="ja">
    <head>

DOCTYPE宣言は通常のHTML5のものとまったく同じである。AMP HTMLでは、<html>開始タグを<html amp>または絵文字を使用した<html ⚡>とする。

<head>タグには、charsetおよびviewportメタタグ、定型の<style>要素、AMP JSライブラリを読み込むための<script>要素などを含めることが必須とされている（一部は順序も指定されている）。さらに、JSON-LD形式による構造化データ[4]などを含めて、検索エンジンなどに対して適切に情報を伝えるためのメタ情報を記述することができる。

カスタム要素

AMP HTMLでは、通常のHTMLの要素に加えて、カスタム要素と呼ばれる独自の要素（タグ）を使用できる。カスタム要素の例としては、画像を表示するための<amp-img>（通常の<img>要素に代えて使用する）、レイアウトされたサイドバーのための<amp-sidebar>、外部のサイトのコンテンツを表示するための<amp-facebook>や<amp-twitter>、などが挙げられる。

AMPではユーザーJavaScriptが使用できないので、カスタム要素にはこれらの代替となるような要素がある。例えば、広告のための<amp-ad>やアクセス解析のための<amp-analytics>などはその典型である。

一部のカスタム要素を使用するためには、追加でJavaScriptライブラリを読み込む（<head>タグ内において）必要がある。

スタイル

AMPページのスタイル・レイアウトには、通常のページと同じようにCSSを用いる。ただし、CSSは外部ファイルに記述したり個々の要素のstyle属性として記述することはできず、AMP HTML冒頭の<head>タグに1個の<style>要素として記述しなければならない（サーバー側で動的にCSSを生成してAMP HTMLに埋め込むことは可能である）。メディアクエリや多くのセレクタ・プロパティなどCSSの機能のほとんどは使用可能であるが、!important修飾子や*セレクタなど、使用できないものもある。

また、レイアウトを制御するために、要素のlayout属性を使用することができる。例えば、レスポンシブな画像は、<amp-img layout="responsive">と記述する。

HTMLの制限

一部のHTML要素や属性は、使用が制限されている。特に画像などメディア関連についてはAMP独自のカスタム要素に置き換えられている。

スクリプティング

AMPでは、ユーザーが作成したJavaScriptや、jQueryやAngularJSのような一般のJavaScriptライブラリは、原則として使用することができない。インタラクティブなウェブページを作成するために、代替としてAMP HTMLのカスタム要素を使用することができる。

利点

AMPを使用したウェブページは、高速で読み込まれ表示される。ユーザー（ウェブページの閲覧者）は、リンクをクリックした後に待ち時間なくページの内容を閲覧することができる。Googleは、アクセスしたウェブページが低速であると多くのユーザーはそのページの閲覧をやめてしまう、というデータを示しており[5]、ページが高速で表示できることはウェブサイトの制作者にとっても有益である。

また、Google検索の検索結果では、適切に記述されたAMPページがAMPのロゴとともに表示されるようになっており、特にニュースなどの一部のコンテンツはカルーセルと呼ばれる特別な見た目によって表示される[6]。

脚注

  1. ^ “Google、モバイルWeb高速化のオープンイニシアチブ「AMP」立ち上げ　Twitterや大手メディアが参加”. ITmedia NEWS (2015年10月8日). 2017年3月7日閲覧。
  2. ^ “Overview”. Accelerated Mobile Pages Project. 2017年3月7日閲覧。
  3. ^ “AMP HTML ページを作成する”. Accelerated Mobile Pages Project. 2017年3月8日閲覧。
  4. ^ “ついに始まった、Google AMP（Accelerated Mobile Pages）を試してみよう！”. CodeZine (2016年4月15日). 2017年3月7日閲覧。
  5. ^ “Googleの検索結果で上位表示されるAccelerated Mobile Pagesに、はてブやLINEも対応表明”. @IT (2016年4月18日). 2017年3月7日閲覧。
  6. ^ “Use AMP HTML” (英語). Google Developers. 2017年3月7日閲覧。

外部リンク

「https://ja.wikipedia.org/w/index.php?title=Accelerated_Mobile_Pages&oldid=63272644」から取得