AMP HTML とカスタム HTML タグ
今回は AMP を実装時に扱う AMP HTML のタグについてです。
AMP はモバイルページを高速表示するプロジェクトやフレームワークです。
AMP では AMP HTML と呼ばれる HTML タグの制限と AMP 専用の HTML タグの用意があり、AMP HTML のルールに沿った記述が必要になります。それは AMP が高速表示を実現する為に外部リソースに制限や読み込みの処理をかけているからです。詳しい AMP の仕組みは下記の記事で紹介しています。
AMP | fff
AMPはモバイルページを高速表示する技術です。AMPの特徴や高速表示の仕組み、AMPを実装する方法やルールを紹介します。
AMP HTML で制限・禁止される要素
AMP HTML では特定の HTML タグが使い方に制限を設けられていたり、AMP HTML 専用のカスタムタグに置き換えられています。
| 要素 | 説明 |
|---|---|
| script | script要素の使用には制限があります。script要素は AMP ランタイムや AMP の拡張コンポーネントをロードする為の使用か、type属性がapplication/ld+jsonもしくはtext/plainでない限り使用を禁止されています。 |
| style | style要素の使用には制限があります。AMP ボイラープレートコードの使用に必須で、他にカスタム目的で style要素を使う場合はhead要素内に1つだけ記述でき、<style amp-custom></style>のようにamp-custom属性を設定します。 |
| base | base要素の使用は禁止されています。base要素はページ内の全ての相対 URL の起点となる URL を指定する要素で、ページ内ではhead要素で1度しか使用できません。 |
| img | img要素の使用は禁止されており、amp-img要素を使います。 |
| video | video要素の使用は禁止されており、amp-video要素を使います。 |
| audio | audio要素の使用は禁止されており、amp-audio要素を使います。 |
| iframe | iframe要素の使用は禁止されており、amp-iframe要素を使います。 |
| frame | frame要素の使用は禁止されています。frame要素はframeset要素により分割されたフレームの表示内容を指定する要素です。なお、frame要素は HTML5 では非推奨となっています。 |
| frameset | frameset要素の使用は禁止されています。frameset要素はウィンドウをいくつかのフレームに分割する要素です。なお、frameset要素は HTML5 では非推奨となっています。 |
| object | object要素の使用は禁止されています。object要素は画像や HTML 文書、プラグインをはじめ様々な形式の外部データを組み込む為の要素です。 |
| param | param要素の使用は禁止されています。param要素はobject要素により呼び出されるプラグインのパラメータを設定する要素です。 |
| applet | applet要素の使用は禁止されています。applet要素は Java アプレットを組み込む為の要素です。なお、applet要素は HTML5 では廃止され、object要素の使用が推奨されています。 |
| embed | embed要素の使用は禁止されています。embed要素は外部アプリケーションやインタラクティブコンテンツ等をプラグインを使って組み込む為の要素です。 |
| a | a要素の使用には制限があります。href属性にjavascript:から始まる値を設定することができず、設定する場合はtarget属性を_blankにしなければなりません。 |
広告と分析の AMP HTML 要素
| 要素 | 説明 |
|---|---|
| amp-ad | 広告を表示する要素です。 |
| amp-ad-exist | A4A (AMP for Asd) の広告を終了する動作を提供する要素です。 |
| amp-analytuics | AMP ドキュメントからアナリティクスデータを収集する要素です。 |
| amp-auto-ads | リモートで提供される設定ファイルを使用して AMP ページに広告を動的に挿入する要素です。 |
| amp-call-tracking | ハイパーリンク内の電話番号を動的に置き換えてコールトラッキングを有効にする要素です。 |
| amp-experiment | AMP ドキュメントのユーザーエクスペリエンステストを行う為に使用する要素です。 |
| amp-pixel | ページビューをカウントするトラッキングピクセルの要素です。 |
| amp-sticky-ad | ページの下部に広告コンテンツを表示して貼り付ける要素です。 |
動的コンテンツの AMP HTML 要素
| 要素 | 説明 |
|---|---|
| amp-access-laterpay | サイト運営者が LaterPay マイクロペイメントプラットフォームと統合できる要素です。 |
| amp-access | AMP ペイウォールとサブスクリプションのサポートを提供する要素です。 |
| amp-bind | データバインドや JavaScript に似た単純な式を使用してユーザーの操作やデータの変更に応じた要素の変更を可能にする要素です。 |
| 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 HTML 要素
| 要素 | 説明 |
|---|---|
| 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 HTML 要素
| 要素 | 説明 |
|---|---|
| amp-3q-player | 3Q SDN の動画を組み込む要素です。 |
| amp-anim | アニメーション画像を管理する要素です。 |
| amp-apester-media | Apester スマートユニットを表示する要素です。 |
| amp-audio | 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 | img要素を置き換える要素です。img要素と異なり<amp-img></amp-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 | video要素を置き換える要素です。 |
| amp-vimeo | Vimeo の動画を表示する要素です。 |
| amp-youtube | YouTube の動画を表示する要素です。 |
プレゼンテーションの AMP HTML 要素
| 要素 | 説明 |
|---|---|
| amp-animation | アニメーションを定義して表示する要素です。 |
| amp-dynamic-css-classes | CSS の動的なクラス名を HTML 要素にいくつか追加する要素です。 |
| amp-fit-text | 任意のスペースにコンテンツが収まるようにフォントサイズを拡大もしくは縮小する要素です。 |
| amp-font | カスタムフォントの読み込みをトリガーし処理を監視する要素です。 |
| amp-timeago | 日時と時刻の形式に time ago の記述を加えファジーなタイムスタンプを提供する要素です。 |
| amp-viz-vega | Vega のデータ可視化の文法を使用して作成したビジュアル要素を表示する要素です。 |
ソーシャルの AMP HTML 要素
| 要素 | 説明 |
|---|---|
| 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 スタイルの埋め込みを表示する要素です。 |