AMP HTML ライブラリで提供されるコンポーネントは、次のように分類されます。

  • 組み込みコンポーネント: amp-imgamp-pixel のような、基本ライブラリに含まれるコンポーネント。
  • 拡張コンポーネント: 基本ライブラリを拡張するもので、カスタム要素としてドキュメントに明示的に含める必要のあるコンポーネント(例: <script async custom-element="amp-audio" ...)。
  • 試験運用コンポーネント: リリースされているが、まだ一般公開する前の段階にあるコンポーネント。

カテゴリとそれに含まれるコンポーネントは次のとおりです。

広告と分析

コンポーネント 説明
amp-ad 広告を表示するコンテナです。
amp-ad-exit A4A(AMP for Ads)の広告を終了する動作を提供します(設定可能)。
amp-analytics AMP ドキュメントからアナリティクス データを収集します。
amp-auto-ads リモートで提供される設定ファイルを使用して、AMP ページに広告を動的に挿入します。
amp-call-tracking ハイパーリンク内の電話番号を動的に置き換えて、コール トラッキングを有効にします。
amp-experiment AMP ドキュメントのユーザー エクスペリエンス テストを行うために使用できます。
amp-pixel ページビューをカウントするトラッキング ピクセルです。
amp-sticky-ad ページの下部に広告コンテンツを表示して貼り付けることができます。

動的コンテンツ

コンポーネント 説明
amp-access-laterpay このコンポーネントにより、サイト運営者は LaterPay マイクロペイメント プラットフォームと簡単に統合できます。
amp-access AMP ペイウォールとサブスクリプションのサポートを提供します。
amp-bind データ バインディングや JS に似た単純な式を使用して、ユーザーの操作やデータの変更に応じた要素の変更を可能にします。
amp-form フォームのサポートを提供します。
amp-gist GitHub Gist を表示します。
amp-install-serviceworker ServiceWorker をインストールします。
amp-list データを動的にダウンロードし、テンプレートを使用してリスト項目を作成します。
amp-live-list コンテンツの表示と更新をライブで行えるようにします。
amp-mustache Mustache.js テンプレートのレンダリングを可能にします。
amp-selector オプションのメニューを表示して、ユーザーに選択を求めるコントロールを表示します。
amp-user-notification 非表示に切り替えることが可能な通知をユーザーに表示します。
amp-web-push ユーザーがウェブプッシュ通知を受け取れるようにします。

レイアウト

コンポーネント 説明
amp-accordion 閲覧者がコンテンツの概要を一目で把握し、選択した任意のセクションにジャンプできるようにします。
amp-app-banner アプリのインストールを促すフレーズが表示されたクロスプラットフォームの固定位置バナー用ラッパーと最小限の UI です。
amp-carousel 横軸に沿って複数の類似コンテンツを表示します。
amp-fx-flying-carpet 子画面を固有の全画面スクロール コンテナにラップして、ビューポート全体を占めることなく全画面広告を表示できるようにします。
amp-fx-parallax 要素に 3 次元的な効果を付けられる属性です。
amp-iframe iframe を表示します。
amp-lightbox 「ライトボックス」または同様のエクスペリエンスを実現します。
amp-position-observer ユーザーがスクロールするときのビューポート内の要素の位置を監視し、他のコンポーネントとともに使用できるイベントをディスパッチします。
amp-sidebar ナビゲーション、リンク、ボタン、メニューなど、一時的なアクセスを意図したメタコンテンツを表示できます。

メディア

コンポーネント 説明
amp-3q-player 3Q SDN の動画を埋め込みます。
amp-anim アニメーション画像(通常は GIF)を管理します。
amp-apester-media Apester スマート ユニットを表示します。
amp-audio HTML5 の audio タグを置き換えます。
amp-brid-player Brid.tv プレーヤーを表示します。
amp-brightcove Brightcove Video Cloud または Perform プレーヤーを表示します。
amp-dailymotion Dailymotion の動画を表示します。
amp-google-vrview-image VR イメージを表示します。
amp-hulu Hulu のシンプルな埋め込み動画を表示します。
amp-ima-video IMA SDK に統合されたインストリーム動画広告用の動画プレーヤーを埋め込みます。
amp-image-lightbox 「画像ライトボックス」または同様のエクスペリエンスを実現します。
amp-img HTML5 の img タグを置き換えます。
amp-imgur Imgur の投稿を表示します。
amp-izlesene Izlesene の動画を表示します。
amp-jwplayer クラウドでホストされる JW Player を表示します。
amp-kaltura-player Kaltura 動画プラットフォームで使用される Kaltura Player を表示します。
amp-nexxtv-player nexxOMNIA プラットフォームからのメディア ストリームを表示します。
amp-o2-player AOL O2Player を表示します。
amp-ooyala-player Ooyala の動画を表示します。
amp-playbuzz Playbuzz の任意のコンテンツ(リスティクルや投票など)を表示します。
amp-reach-player Beachfront Reach の動画プレーヤーを表示します。
amp-soundcloud Soundcloud のクリップを再生します。
amp-springboard-player Springboard Platform の動画プレーヤーを表示します。
amp-video HTML5 の video タグを置き換えます。
amp-vimeo Vimeo の動画を表示します。
amp-youtube YouTube の動画を表示します。

プレゼンテーション

コンポーネント 説明
amp-animation アニメーションを定義して表示します。
amp-dynamic-css-classes CSS の動的なクラス名を HTML 要素にいくつか追加します。
amp-fit-text 任意のスペースにコンテンツが収まるようにフォント サイズを拡大または縮小します。
amp-font カスタム フォントの読み込みをトリガーし、処理を監視します。
amp-timeago 日付と時刻の形式に「time ago」の記述を加え(3 時間前など)、ファジーなタイムスタンプを提供します。
amp-viz-vega Vega のデータ可視化の文法を使用して作成したビジュアル要素を表示します。

ソーシャル

コンポーネント 説明
amp-facebook-comments Facebook のコメント プラグインを埋め込みます。
amp-facebook-like Facebook のいいね!ボタン プラグインを埋め込みます。
amp-facebook Facebook の投稿や動画を表示します。
amp-gfycat Gfycat の動画 GIF を表示します。
amp-instagram Instagram の埋め込みを表示します。
amp-pinterest Pinterest のウィジェットや Pin It ボタンを表示します。
amp-reddit Reddit のコメントや投稿の埋め込みを表示します。
amp-social-share ソーシャル共有ボタンを表示します。
amp-twitter Twitter のツイートを表示します。
amp-vine Vine の「Simple」スタイルの埋め込みを表示します。