エー‐エム‐ピー【AMP】
AMP
AMPとは、モバイル端末におけるウェブページの表示の高速化を実現し、ユーザーエクスペリエンスの向上を図るプロジェクトのこと、および、同プロジェクトを実現するために推奨されている一連の技術のことである。Googleが推進している。
ウェブページは今日ではPCから閲覧されるとは限らず、スマートフォンをはじめとするモバイル端末から閲覧される機会も増えてきている。ただしモバイル端末はインターネット接続環境の面でもレンダリング処理の速度もまだ十分とは言いがたい。AMPは、そうしたモバイル端末でも十分に高速にウェブページを表示され快適に閲覧できるように技術の導入を推奨している。
AMPを実現する技術は、HTML、JavaScript、およびCache（キャッシュ）の3要素を根幹とする。AMPに準拠する技術の枠組みは、それぞれ「AMP HTML」「AMP JS」「Google AMP Cache」と呼ばれている。「AMP HTML」や「AMP JS」は標準的なHTMLおよびJavaScriptに制約を加えた仕様であるにすぎず、技術的な齟齬は原理的に発生しない。
Googleは検索結果ページ上でAMP HTMLに準拠したウェブページ（AMP対応ページ）に専用のラベルを付与して表示しており、ラベルの有無によってユーザーエクスペリエンスの質が判別できるようにしている。
参照リンク
AMPプロジェクト
Accelerated Mobile Pages
出典: フリー百科事典『ウィキペディア（Wikipedia）』 (2025/02/05 23:19 UTC 版)
 | |
| URL | amp.dev |
|---|---|
| 設立者 | |
| 開始 | 2015年10月7日 |
| 現在の状態 | オンライン |
AMP（元々はAccelerated Mobile Pagesの頭字語[1]）は、AMP Open Source Projectにより開発が行われているオープンソースのHTMLフレームワークである[2]。もともとはGoogleがFacebook Instant ArticlesとApple Newsの競合相手として開発したものである[3][4]。AMPはモバイルでのウェブサイト閲覧を高速化するために最適化されている[5]。AMPページは、Microsoft BingやCloudflareなどのCDNのAMPキャッシュでキャッシュされることがあり、キャッシュされていた場合はページをさらに短時間で配信できる[6][7][8]。
AMPは2015年10月7日に初めて発表された[9]。テクニカルレビュー期間を経て、AMPページは2016年2月頃からGoogleのモバイル検索の結果に表示されるようになった[10][11]。AMPは、Googleなどによるウェブに対するコントロールをさらに強める可能性があるとして批判されてきた[12]。AMP Projectは2018年9月18日にオープンガバナンスモデルに移行することを発表し、2019年10月10日以降はOpenJS財団の一部となっている。[13][14]
構成
AMPの成果物である一連の仕様やライブラリなどについてもAMPと呼ぶ。AMPは、従来より用いられているHTMLなどのウェブ技術を改良したもので、中核となるのはAMP HTMLと呼ばれるHTMLの一種である。AMPは、大きく分けて、AMP HTML、AMP JSそしてAMP Cacheの3つの部分からなる[15]。
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である[16]が、区別のために.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形式による構造化データ[17]などを含めて、検索エンジンなどに対して適切に情報を伝えるためのメタ情報を記述することができる。
カスタム要素
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は、アクセスしたウェブページが低速であると多くのユーザーはそのページの閲覧をやめてしまう、というデータを示しており[18]、ページが高速で表示できることはウェブサイトの制作者にとっても有益である。
また、Google検索の検索結果では、適切に記述されたAMPページがAMPのロゴとともに表示されるようになっており、特にニュースなどの一部のコンテンツはカルーセルと呼ばれる特別な見た目によって表示される[19]。
脚注
- ^ “AMP as your web framework”. AMP. 2021年4月21日閲覧。
- ^ “AMP”. GitHub. 2020年2月29日閲覧。
- ^ Matt Kapko (2015年10月14日). “Google takes on Apple News, Facebook Instant Articles with AMP”. CIO. 2020年2月29日閲覧。
- ^ “Google、モバイルWeb高速化のオープンイニシアチブ「AMP」立ち上げ Twitterや大手メディアが参加”. ITmedia NEWS (2015年10月8日). 2017年3月7日閲覧。
- ^ “The Accelerated Mobile Pages Project”. AMP. 6 November 2016閲覧。
- ^ “Google Search guidelines for AMP pages”. Google. 21 August 2017閲覧。
- ^ “Cloudflare AMP Cache”. Cloudflare. March 13, 2020時点のオリジナルよりアーカイブ。2020年2月29日閲覧。
- ^ “Bing AMP Cache”. Bing Webmaster Tools. 2020年2月29日閲覧。
- ^ “Introducing the Accelerated Mobile Pages Project, for a faster, open mobile web”. Google. 2020年2月29日閲覧。
- ^ “AMPing Up in Google Search”. The AMP Blog. 2020年2月29日閲覧。
- ^ Christopher Ratcliff (23 February 2016). “Google has launched Accelerated Mobile Pages”. Search Engine Watch. 3 April 2016閲覧。
- ^ Scott, Mark (2018年6月1日). “Google’s mobile web dominance raises competition eyebrows”. POLITICO. 2020年2月9日閲覧。
- ^ “An open governance model for the AMP Project”. The AMP Blog. May 28, 2021時点のオリジナルよりアーカイブ。2020年2月29日閲覧。
- ^ Lardinois, Frederic (2019年10月10日). “Google takes AMP to the OpenJS Foundation” (英語). TechCrunch. 2023年5月7日時点のオリジナルよりアーカイブ。2023年5月7日閲覧。
- ^ “Overview”. Accelerated Mobile Pages Project. 2017年3月7日閲覧。
- ^ “AMP HTML ページを作成する”. Accelerated Mobile Pages Project. 2017年3月8日閲覧。
- ^ “ついに始まった、Google AMP（Accelerated Mobile Pages）を試してみよう！”. CodeZine (2016年4月15日). 2017年3月7日閲覧。
- ^ “Googleの検索結果で上位表示されるAccelerated Mobile Pagesに、はてブやLINEも対応表明”. @IT (2016年4月18日). 2017年3月7日閲覧。
- ^ “Use AMP HTML” (英語). Google Developers. 2017年3月7日閲覧。
外部リンク
Accelerated Mobile Pages
出典: フリー百科事典『ウィキペディア（Wikipedia）』 (2021/02/19 02:35 UTC 版)
「モバイルサイト」の記事における「Accelerated Mobile Pages」の解説
2015年の秋、 Googleは「 AcceleratedMobilePages 」またはAMPと呼ばれるオープンソースイニシアチブを展開すると発表した。このプロジェクトの目標は、ビデオ、アニメーション、グラフィックスを含むコンテンツが豊富なページの速度とパフォーマンスを向上させることである。現在、人口の大部分がタブレットやスマートフォンを介してWebを消費しているため、これらの製品に最適化されたWebページを持つことがAMPの主なニーズである。 AMPの3つの主要な種類は、AMP HTML 、AMP JS 、Google AMPキャッシュである。
※この「Accelerated Mobile Pages」の解説は、「モバイルサイト」の解説の一部です。
「Accelerated Mobile Pages」を含む「モバイルサイト」の記事については、「モバイルサイト」の概要を参照ください。
「Accelerated Mobile Pages」の例文・使い方・用例・文例
- Accelerated_Mobile_Pagesのページへのリンク
