AMPドキュメント

コンテンツ表示のAMP専用タグ

glTFの3Dモデルを表示

説明

glTFの3Dモデルを表示
glTFとは、JSONによって3Dモデルやシーンを表現するフォーマット

使い方

<amp-3d-gltf 属性>
</amp-3d-gltf>

必要なスクリプト

<script async custom-element="amp-3d-gltf" src="https://cdn.ampproject.org/v0/amp-3d-gltf-0.1.js"></script>

属性

属性名 説明 デフォルト値
src(必須) glTFファイルのパス  
alpha キャンバスの空きスペースを透明にするかどうか false
antialiasing アンチエイリアスをオンにするかどうか false
clearColor キャンバスの空きスペースを塗りつぶす際に使用する色  
maxPixelRatio pixelRatioの上限 window.devicePixelRatio
autoRotate モデルの中央を中心にしてカメラを自動的に回転するかどうか false
enableZoom ズームをオンにするかどうか true
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの  
heights メディア式に基づいた要素の縦サイズ  
layout レイアウト  
media メディア属性  
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF  
on イベントの実行用  
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)  
sizes メディア式に基づいた要素の横サイズ  
width 横幅  
height 高さ  

アクション

アクション名 説明
setModelRotation(x, y, z, xMin, xMax, yMin, yMax, zMin, zMax) モデルの回転を設定

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-3d-gltf
  layout="fixed"
  width="320"
  height="240"
  src="/static/samples/glTF/DamagedHelmet.glb">
</amp-3d-gltf>

キャンパスの空きスペースを透明(alpha)

<amp-3d-gltf
  alpha="true"
  layout="fixed"
  width="320"
  height="240"
  src="/static/samples/glTF/DamagedHelmet.glb">
</amp-3d-gltf>

アンチエイリアスをオン(antialiasing)

<amp-3d-gltf
  antialiasing="true"
  layout="fixed"
  width="320"
  height="240"
  src="/static/samples/glTF/DamagedHelmet.glb">
</amp-3d-gltf>

キャンバスの空きスペースを塗りつぶす色を変更(clearColor)

<amp-3d-gltf
  clearColor="cyan"
  layout="fixed"
  width="320"
  height="240"
  src="/static/samples/glTF/DamagedHelmet.glb">
</amp-3d-gltf>

pixelRatioの上限を設定(maxPixelRatio)

<amp-3d-gltf
  maxPixelRatio="1.5"
  layout="fixed"
  width="320"
  height="240"
  src="/static/samples/glTF/DamagedHelmet.glb">
</amp-3d-gltf>

モデルの中央を中心にしてカメラを自動的に回転(autoRotate)

<amp-3d-gltf
  autoRotate="true"
  layout="fixed"
  width="320"
  height="240"
  src="/static/samples/glTF/DamagedHelmet.glb">
</amp-3d-gltf>

ズームをOFF(enableZoom)

<amp-3d-gltf
  enableZoom="false"
  layout="fixed"
  width="320"
  height="240"
  src="/static/samples/glTF/DamagedHelmet.glb">
</amp-3d-gltf>

アクション(setModelRotation)

<amp-3d-gltf
  id="bottle"
  layout="responsive"
  antialiasing="true"
  maxPixelRatio="1.5"
  width="240"
  height="320"
  src="https://webgears-3d.github.io/3d-gltf-static/m/WaterBottle.glb">
</amp-3d-gltf>
<amp-position-observer
  on="scroll:bottle.setModelRotation(z=event.percent, zMin=6.59, zMax=5.96)"
  intersection-ratios="0.6"
  layout="nodisplay">
</amp-position-observer>

アニメーションGIFなどを表示

説明

アニメーションGIFなどを表示

使い方

<amp-anim 属性>
</amp-anim>

必要なスクリプト

<script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script>

属性

属性名 説明
height(必須) 高さ
width(必須) 横幅
src 画像ファイルのURL
srcset デバイスの解像度で違う画像を表示
alt 画像ファイルを表示できなかった時の代替テキスト
attribution 画像の属性
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
intrinsic 指定したアスペクト比に自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-anim
  layout="responsive"
  height="300"
  width="400"
  src="lemur.gif">
</amp-anim>

画像の属性(attribution)

<amp-anim
  alt="Lemurs"
  attribution="National Geographic Channel"
  layout="responsive"
  height="300"
  width="400"
  src="lemur.gif"
  object-fit="cover"
  object-position="left center">
</amp-anim>

アニメーションを定義して表示

説明

アニメーションを定義して表示

使い方

<amp-animation layout="nodisplay">
  <script type="application/json">
    {
      設定
    }
  </script>
</amp-animation>

必要なスクリプト

<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>

レイアウト

レイアウト名 説明
nodisplay 要素が非表示

基本的な使い方

<amp-animation layout="nodisplay">
  <script type="application/json">
    {
      "target": "target1",
      "duration": 1000,
      "keyframes": {"opacity": 1}
    }
  </script>
</amp-animation>

アプリのインストールを促進するバナーを表示

説明

アプリのインストールを促進するバナーを表示

使い方

<amp-app-banner 属性>
</amp-app-banner>

必要なスクリプト

<script async custom-element="amp-app-banner" src="https://cdn.ampproject.org/v0/amp-app-banner-0.1.js"></script>

属性

属性名 説明
id(必須) 識別子
layout(必須) nodisplay限定
open-button(必須) buttonタグの属性。アプリをインストールするバナーなどを開く
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

制約

  • 子要素として、<amp-ad>、<amp-sticky-ad>、<amp-embed>、<amp-iframe>はNG
  • 高さは100pxまで
  • <body>の子要素
  • 複数設置はNG

基本的な使い方

<amp-app-banner layout="nodisplay" id="demo-app-banner-2134">
  <amp-img src="https://example.com/icon.png" width="60" height="51">
  </amp-img>
  <h3>App Name</h3>
  <p>Experience a richer experience on our mobile app!</p>
  <div class="actions">
    <button open-button>Get the app</button>
  </div>
</amp-app-banner>

音声プレーヤーを表示

説明

音声プレーヤー(HTML5のaudioタグ)を表示

使い方

<amp-audio 属性>
</amp-audio>

必要なスクリプト

<script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>

属性

属性名 説明
src 音声ファイルのパス
preload ページがロードされる時に音声ファイルをロードするか
autoplay 自動再生
loop ループ再生
muted デフォルトでミュート状態
controlsList controlsList属性
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

メディア属性

属性名 説明
artwork アートワーク画像のURL
artist アーティスト名
album アルバム名
title 曲名

レイアウト

レイアウト名 説明
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
nodisplay 要素が非表示

メディア属性を指定

<amp-audio
  width="400"
  height="300"
  src="https://yourhost.com/audios/myaudio.mp3"
  artwork="https://yourhost.com/artworks/artwork.png"
  title="Awesome music"
  artist="Awesome singer"
  album="Amazing album">
  <source type="audio/mpeg" src="foo.mp3" />
</amp-audio>

ロード(preload)

<amp-audio
  preload="auto"
  width="400"
  height="300"
  autoplay
  src="https://yourhost.com/audios/myaudio.mp3">
  <div fallback>
    <p>Your browser doesn’t support HTML5 audio</p>
  </div>
  <source type="audio/mpeg" src="foo.mp3">
  <source type="audio/ogg" src="foo.ogg">
</amp-audio>

ボタンで曲を切り替える

<amp-audio
  id="audio"
  width="auto"
  height="50"
  src="av/audio.mp3"
  [src]="source"
  artist="Example Artist"
  [artist]="artist"
  layout="fixed-height">
</amp-audio>
<button on="tap:AMP.setState({source: 'https://ccrma.stanford.edu/~jos/mp3/bachfugue.mp3'})">Change src</button>
<button on="tap:AMP.setState({artist: 'The AMP Team'})">Set artist (Media Session)</button>

再生ボタン・停止ボタン

<amp-audio
  id="audio"
  width="auto"
  height="50"
  src="av/audio.mp3"
  artist="Example Artist"
  layout="fixed-height">
</amp-audio>
<button on="tap:audio.play">Play</button>
<button on="tap:audio.pause">Pause</button>

Adobe After Effectsで生成されたJSONからアニメーションを表示

説明

Adobe After Effectsで生成されたJSONからアニメーションを表示

使い方

<amp-bodymovin-animation 属性>
</amp-bodymovin-animation>

必要なスクリプト

<script async custom-element="amp-bodymovin-animation" src="https://cdn.ampproject.org/v0/amp-bodymovin-animation-0.1.js"></script>

属性

属性名 必須
src(必須) ファイルへのパス
loop ループするか
noautoplay 自動再生OFFにするか
renderer 専用のレンダリング
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-bodymovin-animation
  layout="fixed"
  width="200"
  height="200"
  src="https://nainar.github.io/loader.json">
</amp-bodymovin-animation>

5回ループ

<amp-bodymovin-animation
  layout="fixed"
  width="200"
  height="200"
  src="https://nainar.github.io/loader.json"
  loop="5">
</amp-bodymovin-animation>

自動再生OFF

<amp-bodymovin-animation
  id="anim"
  layout="fixed"
  width="200"
  height="200"
  src="https://nainar.github.io/loader.json"
  loop="true"
  name="ripple_1"
  noautoplay>
</amp-bodymovin-animation>

renderer属性

<amp-bodymovin-animation
  renderer="html"
  layout="fixed"
  width="200"
  height="200"
  src="https://nainar.github.io/loader.json"
  loop>
</amp-bodymovin-animation>

インラインフレームを表示

説明

インラインフレームを表示

使い方

<amp-iframe 属性>
</amp-iframe>

必要なスクリプト

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

属性

属性名 説明
src コンテンツのURL
srcdoc コンテンツのURL。src属性よりも優先
frameborder フレームの枠
allowfullscreen フルスクリーンを許可するかどうか
allowtransparency インラインフレームの背景を透過にするかどうか
referrerpolicy 読み込む際にリファラーの送信方法をキーワードで指定
sandbox センドボックス
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
intrinsic 指定したアスペクト比に自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-iframe
  width="200"
  height="200"
  src="https://example.com">
</amp-iframe>

属性を指定

<amp-iframe
  width="200"
  height="200"
  src="https://example.com"
  allow="geolocation; microphone"
  allowfullscreen
  allowpaymentrequest
  allowtransparency
  frameborder="0"
  referrerpolicy="origin"
  tabindex="-1"
  resizable
  sandbox="allow-same-origin allow-scripts"
  scrolling="no">
</amp-iframe>

画像を表示

説明

画像を表示
AMPではimgタグは使えないので、こちらを使う

使い方

<amp-img 属性>
</amp-img>

属性

属性名 説明
height(必須) 高さ
width(必須) 横幅
src 画像ファイルのURL
srcset デバイスの解像度によって、違う画像を表示
alt 代替テキスト
attribution 画像の属性
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-img
  alt="A view of the sea"
  src="/static/inline-examples/images/sea.jpg"
  width="900"
  height="675"
  layout="responsive">
</amp-img>

フォールバック画像の指定

<amp-img
  alt="Mountains"
  width="550"
  height="368"
  src="/static/inline-examples/images/mountains.webp">
  <amp-img
    fallback
    alt="Mountains"
    width="550"
    height="368"
    src="/static/inline-examples/images/mountains.jpg"></amp-img>
</amp-img>

アスペクト比を設定

<amp-img
  width="1.33"
  height="1"
  alt="A view of the sea"
  src="/static/inline-examples/images/sea.jpg"
  layout="responsive">
</amp-img>

データを動的に読み込み、指定したテンプレートを使って表示

説明

データを動的に読み込み、指定したテンプレートを使って表示

使い方

<amp-list 属性>
  <template type="amp-mustache">
    表示内容
  </template>
</amp-list>

必要なスクリプト

<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>

属性

属性名 説明
src(必須) コンテンツのURL
credentials credentialsオプションを定義
items レンダリングする配列を特定する式を定義
max-items 最大数
single-item 単一の要素配列のように扱う
reset-on-refresh アクションによって更新されたときに再表示
[is-layout-container] amp-listのレイアウトがCONTAINERに変更
binding 評価に基づいてレンダリングをブロックするかどうか
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-list
  width=10
  height=10
  src="https://data.com/articles.json?ref=CANONICAL_URL">
  <div></div>
</amp-list>

Bind(data-amp-bind-src)

<amp-list
  data-amp-bind-src="foo.bar"
  width=10
  height=10>
  <div></div>
</amp-list>

アクションによって更新されたときに再表示(reset-on-refresh)

<amp-list
  reset-on-refresh
  width=10
  height=10
  src="https://data.com/articles.json?ref=CANONICAL_URL">
  <div></div>
</amp-list>

評価に基づいてレンダリングをブロックするかどうか(binding)

<amp-list
  binding="refresh"
  width=10
  height=10
  src="https://data.com/articles.json?ref=CANONICAL_URL">
  <div></div>
</amp-list>

auto-resize

<amp-list
  width=10
  height=10
  src="https://data.com/articles.json?ref=CANONICAL_URL"
  auto-resize>
  <div></div>
</amp-list>

load-more

<amp-list
  width=10
  height=10
  src="https://data.com/articles.json?ref=CANONICAL_URL"
  load-more="auto">
</amp-list>

load-more-bookmark

<amp-list
  width=10
  height=10
  src="https://data.com/articles.json?ref=CANONICAL_URL"
  load-more="manual"
  load-more-bookmark="next">
</amp-list>

custom children

<amp-list
  width=10
  height=10
  src="https://data.com/articles.json?ref=CANONICAL_URL"
  load-more="manual"
  load-more-bookmark="next">
  <amp-list-load-more load-more-button></amp-list-load-more>
  <amp-list-load-more load-more-loading></amp-list-load-more>
  <amp-list-load-more load-more-failed></amp-list-load-more>
  <amp-list-load-more load-more-end></amp-list-load-more>
</amp-list>

データを動的に読み込み、指定したテンプレートを使って動的に表示

説明

データを動的に読み込み、指定したテンプレートを使って動的に表示

使い方

<amp-live-list 属性>
</amp-live-list>

必要なスクリプト

<script async custom-element="amp-live-list" src="https://cdn.ampproject.org/v0/amp-live-list-0.1.js"></script>

属性

属性名 説明
id(必須) ID
data-poll-interval 新しいコンテンツのチェック間隔(ミリ秒)
data-max-items-per-page 1ページあたりの最大データ数
disabled 無効化
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

items の属性

属性名 説明
id(必須) 子のID
data-sort-time(必須) 並べ替え時間
data-update-time 更新時間
data-tombstone 削除されたアイテム
sort ソート

アクション

アクション名 説明
update 更新された時に実行

レイアウト

レイアウト名 説明
container 子要素に応じて自動的にサイズ調整
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整

基本的な使い方

<amp-live-list
  id="my-live-list"
  data-max-items-per-page="20">
  <button update on="tap:my-live-list.update">You have updates!</button>
  <div items></div>
  <div pagination></div>
</amp-live-list>

data-poll-intervalとdata-max-items-per-page

<amp-live-list
  data-poll-interval="15000"
  data-max-items-per-page="20"
  id="my-live-list-1">
  <button update>You have updates!</button>
  <ul items>
    <li id="1" data-sort-time="42" data-update-time="42">1</li>
    <li id="2" data-sort-time="43" data-update-time="44">2</li>
  </ul>
  <div pagination></div>
</amp-live-list>

ボタンで更新

<amp-live-list
  id="my-live-list-3"
  data-poll-interval="15000"
  data-max-items-per-page="20">
  <button update on="tap:my-live-list.update">You have updates!</button>
  <button update on="tap:my-live-list.update">You have updates!</button>
  <div items></div>
  <div pagination></div>
  <div pagination></div>
</amp-live-list>

iframeを作成し、MathML式を表示

説明

iframe を作成し、MathML 式を表示

使い方

<amp-mathml 属性>
</amp-mathml>

必要なスクリプト

<script async custom-element="amp-mathml" src="https://cdn.ampproject.org/v0/amp-mathml-0.1.js"></script>

属性

属性名 説明
data-formula(必須) レンダリングする数式
inline インライン
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
container 子要素に応じて自動的にサイズ調整

基本的な使い方

<amp-mathml
  layout="container"
  data-formula="\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]">
</amp-mathml>

inline

<amp-mathml
  inline
  layout="container"
  data-formula="\(x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\)">
</amp-mathml>

ストーリー分析

説明

ストーリー分析

使い方

<amp-story-analytics 属性>
</amp-story-analytics>

必要なスクリプト

<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-0.1.js"></script>

トリガー

構造

"triggers": {
  "ストーリー名": {
    "on": "イベント名",
    "request": "リクエスト"
  }
}

ストーリー

名前 説明
storyPageId ストーリーページID
storyPageIndex ストーリーページのゼロベースのインデックス値
storyPageCount ページの総数
storyProgress ストーリーのユーザーの進行状況
storyIsMuted ストーリーがミュートされたかどうか
storyBookendComponentPosition ユーザーがクリックしたブックエンドコンポーネントのインデックスを表す数値
storyBookendComponentType クリックされたブックエンドのコンポーネントのタイプ
storyBookendTargetHref クリックされたブックエンドコンポーネントのURL

イベント

イベント名 説明
story-page-visible ページが表示されたときにイベントが実行
story-last-page-visible 最後のページがユーザーに表示されたときに実行
story-bookend-enter ブックエンドの入力後に実行
story-bookend-exit ブックエンドの離脱後に実行
story-bookend-click ブックエンド内でクリックしたら実行
story-audio-muted ミュートしたら実行
story-audio-unmuted ミュートを解除したら実行
story-page-attachment-enter 添付ファイルを開いたら実行
story-page-attachment-exit 添付ファイルをキャンセルしたら実行

基本的な使い方

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "pageview": "https://foo.com/pixel?RANDOM"
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "pageview"
        }
      }
    }
  </script>
</amp-analytics>

ストーリーページを表示

説明

ストーリーページを表示

使い方

<amp-story 属性>
  <amp-story-page 属性>
    <amp-story-grid-layer 属性>
    </amp-story-grid-layer>
  </amp-story-page>
</amp-story>

必要なスクリプト

<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>

amp-story の属性

属性名 説明
standalone(必須) ストーリーであることの識別子
title(必須) ストーリーのタイトル
publisher(必須) ストーリーのパブリッシャーの名前
publisher-logo-src(必須) パブリッシャーのロゴへのURL
poster-portrait-src(必須) サムネイル画像へのURL(3x4)
poster-square-src サムネイル画像へのURL(1x1)
poster-landscape-src サムネイル画像へのURL(4x3)
supports-landscape 横向きのサポートを有効
background-audio 音声ファイルへの RL
live-story ライブストーリー機能を有効
live-story-disabled ライブストーリー機能を無効
data-poll-interval 新しいコンテンツのチェック間の時間間隔(ミリ秒)
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

アニメーション属性

属性 説明
animate-in 出現
animate-in-duration 出現期間
animate-in-timing-function アニメーションカーブ
animate-in-delay 開始する前の遅延
animate-in-after チェーンまたはシーケンス
scale-start 開始
scale-end 終了
translate-x 画像の水平を指定
translate-y 画像の垂直を指定

アニメーション効果

効果名 説明
drop-in ドロップイン
fade-in フェードイン
fly-in-bottom 下に移動
fly-in-left 左に移動
fly-in-right 右に移動
fly-in-top 上に移動
rotate-in-left 左回転
rotate-in-right 右回転
twirl-in 回転
whoosh-in-left 左のヒューシュ効果
whoosh-in-right 右のヒューシュ効果
pan-left 左にスライド
pan-right 右にスライド
pan-down 下にスライド
pan-up 上にスライド
zoom-in ズームイン
zoom-out ズームアウト

基本的な使い方

<amp-story standalone>
  <amp-story-page id="cover" auto-advance-after="5s">
    <amp-story-grid-layer template="vertical">
      <h1>Hello World</h1>
      <p>This is the cover page of this story.</p>
    </amp-story-grid-layer>
  </amp-story-page>
  <amp-story-page id="page-1" auto-advance-after="5s">
    <amp-story-grid-layer template="vertical">
      <h1>First Page</h1>
      <p>This is the first page of this story.</p>
    </amp-story-grid-layer>
  </amp-story-page>
  <amp-story-page id="page-2">
    <amp-story-grid-layer template="vertical">
      <h1>Second Page</h1>
      <p>This is the second page of this story.</p>
    </amp-story-grid-layer>
  </amp-story-page>
</amp-story>

bookend

<amp-story
  title="Helloworld-bookend amp-story example"
  publisher="The AMP Team"
  publisher-logo-src="https://example.com/logo/1x1.png"
  poster-portrait-src="https://example.com/my-story/poster/3x4.jpg"
  poster-square-src="https://example.com/my-story/poster/1x1.jpg"
  poster-landscape-src="https://example.com/my-story/poster/4x3.jpg"
  standalone>
  <amp-story-page id="cover">
    <amp-story-grid-layer template="vertical">
      <h1>Cover page - manual advance</h1>
      <p>3 page story with a bookend at the end</p>
    </amp-story-grid-layer>
  </amp-story-page>
  <amp-story-page id="page-1" auto-advance-after="3s">
    <amp-story-grid-layer template="vertical">
      <h1>Page 1 - auto advance after 3s</h1>
    </amp-story-grid-layer>
  </amp-story-page>
  <amp-story-page id="page-2">
    <amp-story-grid-layer template="vertical">
      <h1>Page 2 - manual advance</h1>
    </amp-story-grid-layer>
  </amp-story-page>
  <amp-story-bookend src="./bookendv1.json" layout=nodisplay>
  </amp-story-bookend>
</amp-story>

zoom-in

<amp-story standalone>
  <amp-story-grid-layer template="fill">
    <div animate-in="zoom-in" animate-in-duration="30s" scale-start="1" scale-end="3" class="img-container">
      <amp-img id="ken-burns-img1" src="https://picsum.photos/1600/1200?image=1077" animate-in="pan-left" animate-in-duration="30s"
        layout="fixed" width="1600" height="1200">
      </amp-img>
    </div>
  </amp-story-grid-layer>
</amp-story>

fade-in

<amp-story standalone>
  <div animate-in="fade-in" animate-in-after="ken-burns-img2" animate-in-duration="1s" class="img-container">
    <div animate-in="zoom-out" animate-in-duration="5s" class="img-container" animate-in-after="ken-burns-img2">
      <amp-img id="ken-burns-img3" src="https://picsum.photos/1600/1200?image=1026" layout="fixed" width="1600" height="1200" animate-in="pan-down"
        animate-in-duration="5s" animate-in-after="ken-burns-img2">
      </amp-img>
    </div>
  </div>
</amp-story>

amp-story-auto-ads

<amp-story standalone supports-landscape>
  <amp-story-auto-ads>
    <script type="application/json">
      {
        "ad-attributes": {
          "type": "doubleclick",
          "data-slot": "/30497360/a4a/amp_story_dfp_example"
        }
      }
    </script>
  </amp-story-auto-ads>
  <amp-story-page id="page-1">
    <amp-story-grid-layer class="container" template="vertical">
      <p class="num">1</p>
    </amp-story-grid-layer>
  </amp-story-page>
</amp-story>

live-story

<amp-story id="story1" live-story
  standalone
  publisher="AMP Team"
  title="Live Story"
  publisher-logo-src="https://example.com/logo/1x1.png"
  poster-portrait-src="https://example.com/my-story/poster/3x4.jpg"
  poster-square-src="https://example.com/my-story/poster/1x1.jpg"
  poster-landscape-src="https://example.com/my-story/poster/4x3.jpg">
  <amp-story-page id="cover" data-sort-time="1552330790">
    <amp-story-grid-layer template="vertical">
      <p>Append a new page!</p>
    </amp-story-grid-layer>
  </amp-story-page>
</amp-story>
<amp-story standalone publisher-logo-src="https://placekitten.com/g/64/64">
  <amp-consent id='ABC' layout='nodisplay'>
    <script type="application/json">{
      "consents": {
        "DEF": {
          "checkConsentHref": "http://localhost:8000/get-consent-v1",
          "promptUI": "ui0"
        }
      }
    }</script>
    <amp-story-consent id="ui0" layout="nodisplay">
      <script type="application/json">{
        "title": "Headline.",
        "message": "This is some more information about this choice. Here's a list of items related to this choice.",
        "vendors": ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8", "Item 9", "Item 10"],
        "externalLink": {
          "title": "Data Privacy Settings",
          "href": "https://example.com"
        }
      }</script>
    </amp-story-consent>
  </amp-consent>
  <amp-story-page id="cover" auto-advance-after="5s">
    <amp-story-grid-layer template="vertical">
      <h1>You just accepted or rejected the consent!</h1>
    </amp-story-grid-layer>
  </amp-story-page>
  <amp-story-bookend src="bookendv1.json" layout="nodisplay">
  </amp-story-bookend>
</amp-story>

iFrameに動画プレーヤーを表示

説明

iFrameに動画プレーヤーを表示

使い方

<amp-video-iframe 属性>
</amp-video-iframe>

必要なスクリプト

<script async custom-element="amp-video-iframe" src="https://cdn.ampproject.org/v0/amp-video-iframe-0.1.js"></script>

属性

属性名 説明
src(必須) URL
poster(必須) 動画の読み込み中に表示される画像URL
autoplay 自動再生
dock 最小化
implements-media-session media-session
implements-rotate-to-fullscreen フルスクリーン
referrerpolicy referrerpolicy
data-param-* パラメータ
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
intrinsic 指定したアスペクト比に自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-video-iframe
  layout="responsive"
  width="16"
  height="9"
  src="/my-video-player.html"
  poster="/my-video-poster.jpg">
</amp-video-iframe>

自動再生(autoplay)

<amp-video-iframe
  autoplay
  layout=fill
  width=300
  height=500
  src="https://foo.com"
  poster="images/kitten-playing.png">
</amp-video-iframe>

rotate-to-fullscreen

<amp-video-iframe
  rotate-to-fullscreen
  layout=fill
  width=300
  height=500
  src="https://foo.com"
  poster="images/kitten-playing.png">
</amp-video-iframe>

動画プレーヤーを表示

説明

動画プレーヤーを表示

使い方

<amp-video 属性>
</amp-video>

必要なスクリプト

<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>

属性

属性名 説明
height(必須) 高さ
width(必須) 横幅
src 動画ファイルのURL
poster 動画の再生を開始する前に表示するサムネイル画像
autoplay 自動再生
controls コントローラを表示
controlsList インターフェイスを表示
dock 最小化
loop ループ
crossorigin オリジン
disableremoteplayback リモート再生UI
noaudio 動画に音声がないことを示すアノテーション
rotate-to-fullscreen 横向きに回転すると、動画が全画面表示
artwork 動画のアートワークとして使用するサムネイル画像
artist 動画ファイルの作成者
album 動画のアルバム名
title 動画のタイトル
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-video
  controls
  width="640"
  height="360"
  layout="responsive"
  poster="/static/inline-examples/images/kitten-playing.png">
  <source src="/static/inline-examples/videos/kitten-playing.webm" type="video/webm" />
  <source src="/static/inline-examples/videos/kitten-playing.mp4" type="video/mp4" />
  <div fallback>
    <p>This browser does not support the video element.</p>
  </div>
</amp-video>

Media Session 属性あり

<amp-video
  width="720"
  height="305"
  layout="responsive"
  src="https://yourhost.com/videos/myvideo.mp4"
  poster="https://yourhost.com/posters/poster.png"
  artwork="https://yourhost.com/artworks/artwork.png"
  title="Awesome video"
  artist="Awesome artist"
  album="Amazing album">
</amp-video>

横向きに回転すると、動画が全画面表示(rotate-to-fullscreen)

<amp-video
  rotate-to-fullscreen
  layout=fill
  width=300
  height=500
  loop
  preload="metadata"
  controls>
</amp-video>

自動再生(autoplay)

<amp-video
  autoplay
  src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4"
  width="720"
  height="405"
  layout="responsive"
  controls>
</amp-video>