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>

3Qの動画プレーヤーを表示

説明

3Qの動画プレーヤーを表示

使い方

<amp-3q-player 属性>
</amp-3q-player>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-3q-player
  data-id="c8dbe7f4-7f7f-11e6-a407-0cc47a188158"
  layout="responsive"
  width="480"
  height="270">
</amp-3q-player>

自動再生(autoplay)

<amp-3q-player
  autoplay
  id="video"
  data-id="c8dbe7f4-7f7f-11e6-a407-0cc47a188158"
  layout="responsive"
  height="360"
  width="640">
</amp-3q-player>

ドイツ生まれの少額決済システムLaterPayの設定

説明

ドイツ生まれの少額決済システム(LaterPay)の設定

使い方

表示

権限がある場合
<div amp-access="access" amp-access-hide="">
</div>
権限がない場合
<section amp-access="NOT error AND NOT access" amp-access-hide="">
</section>
エラーの場合
<section class="error-section" amp-access="error" amp-access-hide="">
</section>

設定

<script id="amp-access" type="application/json">
  {
    "vendor": "laterpay",
    "laterpay": {
      "property": value
    }
  }
</script>

必要なスクリプト

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

laterpay オプション

名前 説明
articleTitleSelector(必須) ページ内の要素を決定するCSSセレクタ
articleId 記事と購入オプションをマッチング
jwt 動的な支払い設定用のJWTトークン
locale ロケール
localeMessages 生成した購入オプションのリスト内のテキストをカスタマイズまたはローカライズ
scrollToTopAfterAuth 承認プロセスが成功すると、ページが最上部までスクロールするかどうか
region 地域(eu or us)
sandbox サンドボックスモード

基本的な使い方

<script id="amp-access" type="application/json">
  {
    "vendor": "laterpay",
    "laterpay": {
      "articleTitleSelector": ".content-container > header > h1",
      "localeMessages": {
        "header": "LaterPay"
      }
    }
  }
</script>
<section amp-access="NOT error AND NOT access" amp-access-hide>
  <div id="amp-access-laterpay-dialog" class="amp-access-laterpay"></div>
</section>
<section amp-access="error" amp-access-hide class="error-section">
  Oops... Something broke.
</section>
<div amp-access="access" amp-access-hide class="article-body" itemprop="articleBody">
</div>

Pooolペイウォールを表示

説明

Pooolペイウォールを表示

使い方

HTML

<section poool-access-preview amp-access="NOT access">
</section>
<section poool-access-content amp-access="access" amp-access-hide>
</section>
<section amp-access="NOT error AND NOT access" id="poool">
</section>

設定

<script id="amp-access" type="application/json">
  {
    "vendor": "poool",
    "poool": {
      設定
    }
  }
</script>

必要なスクリプト

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

設定

設定名 説明
bundleID(必須) アプリID(ダッシュボードで確認可能)
itemID(必須) 記事ID
pageType(必須) ユーザがページにアクセスしたことを伝えるキー
debug デバックモード
forceWidget 現在のウィジェット
loginButtonEnabled ログインボタンの有無
signatureEnabled 記事がロックされた時に表示される署名の有無
videoClient 動画の設定
customSegment カスタムグループ/セグメントスラッグでネイティブセグメントをオーバーライド
cookiesEnabled Cookeを無効

基本的な使い方

<script id="amp-access" type="application/json">
  {
    "vendor": "poool",
    "poool": {
      "bundleID": "Q9X1R-27SFS-MYC31-MCYQ1",
      "forceWidget": "gift",
      "cookiesEnabled": "true",
      "itemID": "amp-article-test",
      "customSegment": "amp-segment"
    }
  }
</script>
<section poool-access-preview amp-access="NOT access">
  <p>権限がありません</p>
</section>
<section amp-access="error" amp-access-hide class="error-section">
  Oops... Something broke.
</section>
<section poool-access-content amp-access="access" amp-access-hide>
  <p>権限があります</p>
</section>
<section amp-access="NOT error AND NOT access" id="poool">
</section>

ページに対するアクセス制御

説明

ページに対するアクセス制御

使い方

<script id="amp-access" type="application/json">
  {
    設定
  }
</script>

設定

設定名 説明
authorization 認証エンドポイントのURL
pingback PingbackエンドポイントのURL
noPingback Pingbackの有無
login ログインページのURL
authorizationFallbackResponse 認証に失敗した時に使われるJSON
authorizationTimeout 認証リクエストのタイムアウト時間
type タイプ(client or server)
namespace 名前空間

必要なスクリプト

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

基本的な使い方

<script id="amp-access" type="application/json">
  {
    "authorization": "/documentation/examples/api/amp-access/authorization?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM",
    "pingback": "/documentation/examples/api/amp-access/pingback?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM",
    "login": {
      "sign-in": "/documentation/examples/api/amp-access/login?rid=READER_ID&url=CANONICAL_URL",
      "sign-out": "/documentation/examples/api/amp-access/logout"
    },
    "authorizationFallbackResponse": {
      "error": true,
      "loggedIn": false,
      "powerUser": false
    }
  }
</script>
<span amp-access="NOT loggedIn" role="button" tabindex="0" amp-access-hide>
  <h5>Please login to comment</h5>
  <button on="tap:amp-access.login-sign-in" class="button-primary comment-button">Login</button>
</span>

ログインボタン

<span amp-access="NOT loggedIn" role="button" tabindex="0" amp-access-hide>
  <h5>Please login to comment</h5>
<button>
<script id="amp-access" type="application/json">
  {
    "authorization": "https://ampbyexample.com/samples_templates/comment_section/authorization?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM",
    "noPingback": "true",
    "login": {
      "sign-in": "https://ampbyexample.com/samples_templates/comment_section/login?rid=READER_ID&url=CANONICAL_URL",
      "sign-out": "https://ampbyexample.com/samples_templates/comment_section/logout"
    },
    "authorizationFallbackResponse": {
      "error": true,
      "loggedIn": false
    }
  }
</script>

クリックして開閉するアコーディオン型メニューを表示

説明

クリックして開閉するアコーディオン型メニューを表示

使い方

<amp-accordion [属性]>
    <section>
    </section>

    <section>
    </section>
</amp-accordion>

必要なスクリプト

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

属性

属性名 説明
animate 開閉動作をアニメーション化
disable-session-states 開閉状態を保持しない
expanded sectionに対して設定するとページ読み込み時に展開した状態
expand-single-section 一度に一つのsetionだけが展開
data-* data属性
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

イベント

イベント名 説明
expand 折りたたみ状態から展開状態に変化する時
collapse 展開状態から折りたたみ状態に変化する時

アクション

アクション名 説明
expand 折りたたみ状態から展開
toggle 開閉状態の切り替え
collapse 展開状態から折りたたみ

レイアウト

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

ルール

  • amp-accordionの直接の子要素は、section要素のみ
  • sectionは、必ず2つの子要素が必要
  • sectionの1つ目の子要素は開閉ボタン。見出し要素(h1、h2、h3、h4、h5、h6、header)のみ
  • sectionの2つ目の子要素は内容。任意のタグの指定が可能

アコーディオンを表示

<amp-accordion disable-session-states>
  <section>
    <h2>Section 1</h2>
    <p>Content in section 1.</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <div>Content in section 2.</div>
  </section>
  <section expanded>
    <h2>Section 3</h2>
    <amp-img src="/static/inline-examples/images/squirrel.jpg" width="320" height="256"></amp-img>
  </section>
</amp-accordion>

開閉をアニメーション化

<amp-accordion animate>
  <section>
    <h2>Section 1</h2>
    <p>Content in section 1.</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <div>Content in section 2.</div>
  </section>
</amp-accordion>

開閉状態を保持しない

<amp-accordion id="my-accordion"{\% if not format=='email'\%} disable-session-states{\% endif \%}>
  <section>
    <h2>Section 1</h2>
    <p>Content in section 1.</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <div>Content in section 2.</div>
  </section>
</amp-accordion>

ページ読み込み時に展開した状態

<amp-accordion disable-session-states>
  <section expanded>
    <h2>Section 1</h2>
    <p>Content in section 1.</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <div>Content in section 2.</div>
  </section>
</amp-accordion>

一度に一つのsetionだけが展開

<amp-accordion expand-single-section>
  <section>
    <h2>Section 1</h2>
    <p>Content in section 1.</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <div>Content in section 2.</div>
  </section>
</amp-accordion>

開くボタン・閉じるボタンを使って開閉(data属性使用)

<amp-accordion>
  <section [data-expand]="sectionOne" on="expand:AMP.setState({sectionOne: true});collapse:AMP.setState({sectionOne: false})">
    <h2>Section 1</h2>
    <p>Bunch of awesome content</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <div>Bunch of awesome content</div>
  </section>
</amp-accordion>
<button on="tap:AMP.setState({sectionOne: true})">Expand section 1</button>
<button on="tap:AMP.setState({sectionOne: false})">Collapse section 1</button>

ボタンを使って全開閉(toggle)

<amp-accordion id="myAccordion">
  <section id="section1">
    <h2>Section 1</h2>
    <p>Bunch of awesome content</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <div>Bunch of awesome content</div>
  </section>
</amp-accordion>
<button on="tap:myAccordion.toggle">Toggle All Sections</button>

ボタンを使って指定したsectionの開閉(toggle)

<amp-accordion id="myAccordion">
  <section id="section1">
    <h2>Section 1</h2>
    <p>Bunch of awesome content</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <div>Bunch of awesome content</div>
  </section>
</amp-accordion>
<button on="tap:myAccordion.toggle(section='section1')">Toggle Section 1</button>

ボタンを使って全て展開(expand)

<amp-accordion id="myAccordion">
  <section id="section1">
    <h2>Section 1</h2>
    <p>Bunch of awesome content</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <div>Bunch of awesome content</div>
  </section>
</amp-accordion>
<button on="tap:myAccordion.expand">Expand All Sections</button>

ボタンを使って指定したsectionを展開(expand)

<amp-accordion id="myAccordion">
  <section id="section1">
    <h2>Section 1</h2>
    <p>Bunch of awesome content</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <div>Bunch of awesome content</div>
  </section>
</amp-accordion>
<button on="tap:myAccordion.expand(section='section1')">Expand Section 1</button>

ボタンを使って全て閉じる(collapse)

<amp-accordion id="myAccordion">
  <section id="section1">
    <h2>Section 1</h2>
    <p>Bunch of awesome content</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <div>Bunch of awesome content</div>
  </section>
</amp-accordion>
<button on="tap:myAccordion.collapse">Collapse All Sections</button>

ボタンを使って指定したsectionを閉じる(collapse)

<amp-accordion id="myAccordion">
  <section id="section1">
    <h2>Section 1</h2>
    <p>Bunch of awesome content</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <div>Bunch of awesome content</div>
  </section>
</amp-accordion>
<button on="tap:myAccordion.collapse(section='section1')">Collapse Section 1</button>

sectionを連動

<amp-accordion id="myAccordion">
  <section id="section1" on="expand:myAccordion.expand(section='section2')">
    <h2>Section 1</h2>
    <p>Opening me will open Section 2</p>
  </section>
  <section id="section2" on="collapse:myAccordion.collapse(section='section1')">
     <h2>Section 2</h2>
     <div>Closing me will close Section 1</div>
  </section>
</amp-accordion>

背景を変える(CSS)

amp-accordion {
  background-color:green;
}

再利用可能なアクションを作成

説明

再利用可能なアクションを作成

使い方

<amp-action-macro 属性>
</amp-action-macro>

必要なスクリプト

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

属性

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

基本的な使い方

<amp-action-macro
  id="navigate-action"
  action="AMP.navigateTo('http://www.ampproject.org')">
</amp-action-macro>
<button on="tap:navigate-action"></button>

引数あり

<amp-action-macro
  id="scrollable-carousel-macro-args"
  execute="scrollable-carousel.goToSlide(index=x)"
  arguments="x">
</amp-action-macro>

複数アクション

<amp-action-macro
  id="scrollable-carousel-macro-multi"
  execute="scrollable-carousel.goToSlide(index=x), scrollable-carousel.goToSlide(index=y)"
  arguments="y,x">
</amp-action-macro>

広告をカスタマイズして表示

説明

広告をカスタマイズして表示

使い方

<amp-ad-custom 属性>
</amp-ad-custom>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-ad-custom
  width=300
  height=250
  src="/adzerk/1">
</amp-ad-custom>

レイアウト

<amp-ad-custom
  width=auto
  height=250
  layout="fixed-height"
  src="/adzerk/1">
</amp-ad-custom>

広告内の他の要素に終了を指定

説明

広告内の他の要素に終了を指定

使い方

<amp-ad-exit id="アクション名">
  <script type="application/json">
    {
      フィルターの設定
    }
  </amp-ad-exit>
</amp-ad-exit>

必要なスクリプト

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

フィルター

フィルター名 説明
clickLocation 縁からの最小距離
clickDelay クリックに応答する前に待機する時間
inactiveElement 終了が発生しない

clickLocationのフィルター

フィルター名 説明
top 上端からの距離(px)
right 右端からの距離(px)
bottom 下端からの距離(px)
left 左端からの距離(px)
relativeTo 境界に使用する要素

clickDelayのフィルター

フィルター名 説明
delay ビューポートに入ってからクリックを拒否するまでの時間
startTimingEvent 遅延開始間隔として使用するイベントの名前

inactiveElementのフィルター

フィルター名 説明
selector CSSセレクター

アクション

アクション名 説明
target ターゲット
[a-zA-Z0-9-]+ URLパラメータをこの名前と値に置き換えて、最終URLと追跡URL

レイアウト

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

基本的な使い方

<amp-ad-exit id="exit-api">
  <script type="application/json">
    {
      "targets": {
        "landingPage": {
          "finalUrl": "https://example.com/artisan-baking/?from=_clickArea",
          "vars": {
            "_clickArea": {
              "defaultValue": "headline"
            }
          }
        },
        "flour": {
          "finalUrl": "https://adclickserver.example.com/click?id=af319adec901&x=CLICK_X&y=CLICK_Y&adurl=https://example.com/artisan-baking/flour",
          "filters": ["3sClick", "borderProtection"],
          "behaviors": {
            "clickTarget": "_top"
          }
        },
        "bannetons": {
          "finalUrl": "https://example.com/artisan-baking/bannetons",
          "trackingUrls": [
            "https://adclickserver.example.com/click?id=af319adec901&x=CLICK_X&y=CLICK_Y",
            "https://tracker.adnetwork.example.com/?url=example.com"
          ],
          "filters": ["3sClick", "borderProtection"]
        }
      },
      "filters": {
        "3sClick": {
          "type": "clickDelay",
          "delay": 3000
        },
        "borderProtection": {
          "type": "clickLocation",
          "top": 10,
          "right": 10,
          "bottom": 10,
          "left": 10
        }
      }
    }
  </script>
</amp-ad-exit>
<h1 on="tap:exit-api.exit(target='landingPage')">Artisan Baking Supplies</h1>
<div id="product0" on="tap:exit-api.exit(target='flour')">
  <p>Rye flour</p>
  <amp-img src="..." width="..." height="..."></amp-img>
</div>
<div id="product1" on="tap:exit-api.exit(target='bannetons')">
  <p>Bannetons</p>
  <amp-img src="..." width="..." height="..."></amp-img>
</div>
<div id="footer" on="tap:exit-api.exit(target='landingPage', _clickArea='footer')">
  example.com/artisan-baking
</div>

フィルタ

<amp-ad-exit id="exit-api">
<script type="application/json">
  {
    "targets": {
      "ad": {
      "finalUrl": "...",
      "filters": ["2second", "huge-border"]
      }
    },
    "filters": {
      "2second": {
        "type": "clickDelay",
        "delay": 2000
      },
      "small-border": {
        "type": "clickLocation",
        "top": 5,
        "right": 5,
        "bottom": 5,
        "left": 5
      },
      "huge-border": {
        "type": "clickLocation",
        "top": 100,
        "right": 100,
        "bottom": 100,
        "left": 100
      },
      "border-with-relative-to-element": {
        "type": "clickLocation",
        "top": 10,
        "right": 10,
        "bottom": 10,
        "left": 10,
        "relativeTo": "#headline"
      }
    }
  }
</script>
</amp-ad-exit>

広告を表示

説明

広告を表示
amp-embedの別名

使い方

<amp-ad 属性>
</amp-ad>

必要なスクリプト

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

属性

属性名 説明
type(必須) 広告の種類
src 広告のスクリプトタグ
data-* 広告ごとの詳細設定
json JSON 形式のオプションが必要な場合
data-consent-notification-id 通知関連
data-loading-strategy 別の要素の広告に対して読み込みを開始するよう指示
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

広告の種類

  • 1wo
  • 24smi
  • a8
  • a9
  • accesstrade
  • adagio
  • adblade
  • adbutler
  • adform
  • adfox
  • adgeneration
  • adglare
  • adhese
  • adincube
  • adition
  • adman
  • admanmedia
  • admixer
  • adocean
  • adop
  • adpicker
  • adplugg
  • adpon
  • adreactor
  • adsensor
  • adservsolutions
  • adsloom
  • adsnative
  • adspeed
  • adspirit
  • adstir
  • adstyle
  • adtech
  • adthrive
  • adunity
  • aduptech
  • adventive
  • adverline
  • adverticum
  • advertserve
  • adyoulike
  • affiliateb
  • aja
  • amoad
  • aniview
  • appnexus
  • appvador
  • atomx
  • baidu
  • beaverads
  • bidtellect
  • blade
  • brainy
  • bringhub
  • broadstreetads
  • byplay
  • caajainfeed
  • capirs
  • caprofitx
  • cedato
  • colombia
  • conative
  • connatix
  • contentad
  • criteo
  • dable
  • dianomi
  • directadvert
  • distroscale
  • dotandads
  • dynad
  • eadv
  • eas
  • empower
  • engageya
  • epeex
  • eplanning
  • ezoic
  • f1e
  • f1h
  • felmat
  • flite
  • fluct
  • forkmedia
  • freewheel
  • fusion
  • genieessp
  • giraff
  • gmossp
  • gumgum
  • holder
  • ibillboard
  • idealmedia
  • imedia
  • imobile
  • imonomy
  • improvedigital
  • industrybrains
  • inmobi
  • innity
  • insticator
  • invibes
  • ix
  • jubna
  • kargo
  • kiosked
  • kixer
  • kuadio
  • lentainform
  • ligatus
  • lockerdome
  • logly
  • loka
  • mads
  • mantis
  • medianet
  • mediavine
  • medyanet
  • meg
  • mgid
  • microad
  • miximedia
  • mixpo
  • monetizer101
  • mox
  • mytarget
  • mywidget
  • nativeroll
  • nativery
  • nativo
  • navegg
  • nend
  • netletix
  • noddus
  • nokta
  • nws
  • onead
  • onnetwork
  • openadstream
  • openx
  • opinary
  • outbrain
  • pixels
  • plista
  • polymorphicads
  • popin
  • postquare
  • pressboard
  • promoteiq
  • pubexchange
  • pubguru
  • pubmatic
  • pubmine
  • puffnetwork
  • pulsepoint
  • purch
  • quoraad
  • rbinfox
  • readmo
  • realclick
  • recomad
  • relap
  • revcontent
  • revjet
  • rfp
  • rnetplus
  • rubicon
  • runative
  • sas
  • seedingalliance
  • sekindo
  • sharethrough
  • shemedia
  • sklik
  • slimcutmedia
  • smartadserver
  • smartclip
  • smi2
  • smilewanted
  • sogouad
  • sortable
  • sovrn
  • speakol
  • spotx
  • springAds
  • ssp
  • strossle
  • sulvo
  • sunmedia
  • svknative
  • swoop
  • taboola
  • tcsemotion
  • teads
  • temedya
  • torimochi
  • tracdelight
  • triplelift
  • trugaze
  • uas
  • ucfunnel
  • unruly
  • uzou
  • valuecommerce
  • vdoai
  • videointelligence
  • videonow
  • viralize
  • vmfive
  • webediads
  • weborama
  • whopainfeed
  • widespace
  • wisteria
  • wpmedia
  • xlift
  • yahoo
  • yahoojp
  • yahoonativeads
  • yandex
  • yengo
  • yieldbot
  • yieldmo
  • yieldone
  • yieldpro
  • zedo
  • zen
  • zergnet
  • zucks

レイアウト

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

AdSense

<amp-ad
  width="100vw"
  height="320"
  type="adsense"
  data-ad-client="ca-pub-2005682797531342"
  data-ad-slot="7046626912"
  data-auto-format="rspv"
  data-full-width>
  <div overflow></div>
</amp-ad>

Yahoo JP

<amp-ad
  width="320"
  height="50"
  type="yahoojp"
  data-yadsid="79712_113431">
</amp-ad>

カスタム

<amp-ad
  width=300
  height=250
  type="custom"
  data-url="https://foobar.com"
  template="template-1">
</amp-ad>

AddThisのコンテンツを表示

説明

AddThisのコンテンツを表示
AddThisは、ソーシャルボタンをまとめて設置できるサービス

使い方

<amp-addthis 属性>
</amp-addthis>

必要なスクリプト

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

属性

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

レイアウト

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

フローティング

<amp-addthis
  width="320"
  layout="responsive"
  data-pub-id="ra-5c191331410932ff"
  data-widget-id="957l"
  data-widget-type="floating">
</amp-addthis>

インライン

<amp-addthis
  width="320"
  height="92"
  data-pub-id="ra-5c191331410932ff"
  data-widget-id="mv93"
  data-widget-type="inline">
</amp-addthis>

アクセス解析の設定

説明

アクセス解析の設定や送信

使い方

<amp-analytics [属性]>
  <script type="application/json">
    {
      設定
    }
  </script>
</amp-analytics>

必要なスクリプト

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

属性

属性名 説明
type タイプ名
config 設定データの URL

設定

名前 説明
requests 送信するデータの種類
triggers 送信するタイミング
transport 送信方法

transportの要素

属性名 説明
beacon リクエストの送信にnavigator.sendBeaconが使用可能
xhrpost リクエストの送信にXMLHttpRequestが使用可能
image Imageタグを生成することでリクエストを送信可能

データ

属性名 説明
baseUrl リクエストURL
reportWindow リクエストのレポートを停止する期間(秒)
batchInterval 実行する間隔(秒)
extraUrlParams リクエストパラメータ

トリガー

名前 説明
on(必須) 実行するイベント。有効な値は、render-start、ini-load、click、scroll、timer、visible、hidden、user-error、access-_*、video-_*
request(必須) 送信するリクエストの名前
vars Key-Value オブジェクト
important バッチ処理の動作やレポート期間
selector、selectionMethod 一部のトリガーに対して指定可能
scrollSpec(scroll の場合は必須) scroll トリガーと組み合わせて使用
timerSpec(timer の場合は必須) timer トリガーと組み合わせて使用
sampleSpec リクエストを送信する前にサンプリングする方法を定義
videoSpec video-*トリガーと組み合わせて使用

変数

変数名 説明
${ampdocHost} AMPドキュメントホスト
${ampdocHostname} AMPドキュメントのホスト名
${ampdocUrl} AMPドキュメントのURL
${canonicalHost} 正規ホスト
${canonicalHostname} 正規のホスト名
${canonicalPath} 正規パス
${canonicalUrl} 正規URL
${counter} カウンター
${documentCharset} ドキュメントの文字セット
${documentReferrer} ドキュメントリファラー
${externalReferrer} 外部リファラー
${htmlAttr} HTML属性
${sourceUrl} ソースURL
${sourceHost} 送信元ホスト
${sourceHostname} 送信元ホスト名
${sourcePath} ソースパス
${title} タイトル
${viewer} 視聴者
${contentLoadTime} コンテンツの読み込み時間
${domainLookupTime} ドメイン検索時間
${domInteractiveTime} DOMインタラクティブタイム
${navRedirectCount} ナビゲーションリダイレクトカウント
${navTiming} ナビゲーションのタイミング
${navType} ナビゲーションタイプ
${pageDownloadTime} ページのダウンロード時間
${pageLoadTime} ページ読み込み時間
${redirectTime} リダイレクト時間
${serverResponseTime} サーバー応答時間
${tcpConnectTime} TCP接続時間
${availableScreenHeight} 利用可能なスクリーンの高さ
${availableScreenWidth} 利用可能な画面幅
${browserLanguage} ブラウザ言語
${screenColorDepth} 画面の色深度
${screenHeight} スクリーンの高さ
${screenWidth} スクリーン幅
${scrollHeight} スクロール高さ
${scrollWidth} スクロール幅
${scrollLeft} 左にスクロール
${scrollTop} スクロールトップ
${timezone} タイムゾーン
${timezoneCode} タイムゾーンコード
${userAgent} ユーザーエージェント
${viewportHeight} ビューポートの高さ
${viewportWidth} ビューポート幅
${horizontalScrollBoundary} 水平スクロール境界
${totalEngagedTime} 合計エンゲージメント時間
${incrementalEngagedTime} 増分関与時間
${verticalScrollBoundary} 垂直スクロール境界
${backgrounded} バックグラウンド
${backgroundedAtStart} 開始時の背景
${fromSlide} スライドからのカルーセル
${toSlide} カルーセルをスライドさせる
${elementId} 要素ID
${elementHeight} エレメントの高さ
${elementWidth} エレメント幅
${elementX} 要素X
${elementY} 要素Y
${firstSeenTime} 初めて見た時間
${firstVisibleTime} 最初の表示時間
${initialScrollDepth} 初期スクロール深度
${intersectionRatio} 交差比率
${intersectionRect} 交差点の長方形
${lastSeenTime} 最後に見た時間
${lastVisibleTime} 最終表示時刻
${loadTimeVisibility} ロード時間の可視性
${maxContinuousVisibleTime} 最大連続可視時間
${maxScrollDepth} 最大スクロール深度
${maxVisiblePercentage} 最大可視パーセンテージ
${minVisiblePercentage} 最小可視パーセンテージ
${totalTime} 合計時間
${totalVisibleTime} 合計可視時間
${timerDuration} タイマー持続時間
${timerStart} タイマー開始時間
${ampVersion} AMPバージョン
${ampState} AMPの状態
${backgroundState} バックグラウンド状態
${clientId} クライアントID
${extraUrlParams} 追加のURLパラメーター
${pageViewId} ページビューID
${pageViewId64} ページビューID 64
${queryParam} クエリパラメータ
${random} ランダム
${requestCount} リクエスト数
${timestamp} タイムスタンプ
${errorName} エラー名
${errorMessage} エラーメッセージ

タイプ

タイプ名 説明
googleanalytics Googleアナリティクス
acquialift Acquia Lift
adobeanalytics Adobe Analytics
afsanalytics AFS Analytics
alexametrics AT Internet
baiduanalytics Baidu Analytics
burt Burt
chartbeat Chartbeat
clicky Clicky Web Analytics
comscore comScore Unified Digital Measurement
cxense Cxense Insight
dynatrace Dynatraceのリアルユーザーモニタリング
euleriananalytics オイラーテクノロジーアナリティクス
facebookpixel Facebookピクセル
gemius Gemius Audience/Gemius Prismの分析
googleadwords Google AdWordsのコンバージョントラッキングやリマーケティング
infonline INFOnlineやIVW
krux Krux
linkpulse Linkpulse
lotame Lotame
mediametrie Médiamétrieのトラッキングページ
mediarithmics mediarithmics
mparticle mParticle
newrelic New Relic Browserを利用してAMPのスループットとパフォーマンスを測定
nielsen Nielsen DCR
nielsen-marketing-cloud Nielsen Marketing Cloud
oewa OEWA
parsely Parsely
piano Piano
quantcast Quantcast Measurement
segment Segment
mpulse SOASTA mPulse
simplereach Snowplow Analytics
top100 Rambler/TOP-100
topmailru Top.Mail.Ru
umenganalytics Umeng+ Analytics
treasuredata Treasure Data
webtrekk_2 Webtrekk
metrika Yandex Metrica

googleanalytics

<amp-analytics type="googleanalytics" id="analytics1">
  <script type="application/json">
    {
      "vars": {
        "account": "UA-XXXXX-Y"  // Replace with your property ID.
      },
      "triggers": {
        "trackPageview": {  // Trigger names can be any string. trackPageview is not a required name.
          "on": "visible",
          "request": "pageview"
        }
      }
    }
  </script>
</amp-analytics>

第三者へ送信

<amp-analytics type="nielsen">
  <script type="application/json">
  {
    "vars": {
      "apid": "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX",
      "apv": "1.0",
      "apn": "My AMP Website",
      "section": "Entertainment",
      "segA": "Music",
      "segB": "News",
      "segC": "Google AMP"
    }
  }
  </script>
</amp-analytics>

URLで送信

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

2秒ごとに送信

<amp-analytics>
<script type="application/json">
{
  "requests": {
    "timer": {
      "baseUrl": "https://example.com/analytics?",
      "batchInterval": 2,
    }
  }
  "triggers": {
    "timer": {
      "on": "timer",
      "request" : "timer",
      "timerSpec": {
        "interval": 1
      },
      "extraUrlParams": {
        "rc": "${requestCount}"
      }
    }
  }
}
</script>
</amp-analytics>

50%のリクエストでサンプリング

<amp-analytics>
<script type="application/json">
{
  "requests": {
    "pageview": "https://foo.com/pixel?RANDOM"
  },
  'triggers': {
    'sampledOnRandom': {
      'on': 'visible',
      'request': 'request',
      'sampleSpec': {
        'sampleOn': '${random}',
        'threshold': 50
      }
    }
  }
}
</script>
</amp-analytics>

アニメーション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>

Apesterのコンテンツを表示

説明

エイプスター(Apester)のコンテンツを表示

使い方

<amp-apester-media 属性>
</amp-apester-media>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

 <amp-apester-media
   height="390"
   data-apester-media-id="#">
 </amp-apester-media>

プレイリスト

<amp-apester-media
  height="390"
  data-apester-channel-token="#">
</amp-apester-media>

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

説明

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

使い方

<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>

広告を動的に表示

説明

広告を動的に表示

使い方

<amp-auto-ads 属性>
</amp-auto-ads>

必要なスクリプト

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

属性

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

設定

{
  Configオブジェクト,
}

Config オブジェクトの属性

属性名 説明
placements(必須) 広告の設置場所
attributes amp-ad要素に適用する属性値へのマッピングを指定
adConstraints ページ上に広告を掲載する場合に使用する必要がある制約を指定

placements の属性

属性名 説明
anchor(必須) 要素の検索に使用する情報
pos(必須) 相対的な位置
type(必須) タイプ
style スタイル
attributes amp-ad要素に適用する属性値へのマッピングを指定

anchor の属性

属性名 説明
selector(必須) CSSセレクタ
index インデックス
all 選択されたすべての要素を含める必要があるか
min_c 最小の長さ
sub 任意の要素内で要素を選択

style の属性

属性名 説明
top_m 上余白(px)
bot_m 下余白(px)

pos の値

説明
1 直前
2 最初の子要素
3 最後の子要素
4 直後

tupe の値

説明
1 バナー広告の位置

adConstraints の属性

属性名 説明
initialMinSpacing(必須) 既存の広告との最短距離
subsequentMinSpacing 広告の間隔
maxAdCount 広告の最大数

subsequentMinSpacing の属性

属性名 説明
adCount(必須) 広告数
spacing(必須) 広告の最小間隔

タグ

<amp-auto-ads
  type="adsense"
  data-ad-client="ca-pub-5439573510495356">
</amp-auto-ads>

設定

{
  "placements": [
    {
      "anchor": {
        "selector": "DIV#domId",
        "index": 2,
        "sub": {
          "selector": "P.paragraph",
          "all": true,
        },
      },
      "pos": 4,
      "type": 1,
      "style": {
        "top_m": 5,
        "bot_m": 10,
      },
    },
  ]
}

オートコンプリート

説明

オートコンプリート

使い方

<amp-autocomplete 属性>
  <input />
  <script type="application/json">
    {"items": 配列}
  </script>
</amp-autocomplete>

必要なスクリプト

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

属性

属性名 説明
filter(必須) フィルタリングの種類。詳しくはfilterの種類を参照
src 表示されるJSONのエントリーポイント
query クエリパラメータ
filter-expr filter==customの場合
filter-value クライアント側のフィルタ
min-characters ユーザ入力の最小文字数
max-entries 表示される最大アイテム数
suggest-first 最初のアイテムをアクティブ
submit-on-enter Enterキーで送信
highlight-user-entry 一致する文字をハイライト
items レスポンスJSON内の配列へのキー
inline インライン
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

filter の種類

種類 説明
substring サブストリング
prefix プレフィックス
token-prefix マルチワードのプレフィックス
fuzzy タイプミスなども含む
none なし
custom amp-bind ifで条件を指定

イベント

イベント名 説明
select オプションが選択されたら実行

レイアウト

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

基本的な使い方

<amp-autocomplete filter="substring" id="myAutocomplete">
  <input />
  <script type="application/json">
    {"items": ["a", "b", "c"]}
  </script>
</amp-autocomplete>

静的データ

<amp-autocomplete filter="prefix">
  <input />
  <script type="application/json">
    {}
  </script>
</amp-autocomplete>

リモートデータ

<amp-autocomplete
  filter="prefix"
  src="https://data.com/articles.json?ref=CANONICAL_URL">
  <input />
</amp-autocomplete>

テキストエリア

<amp-autocomplete
  filter="prefix"
  src="https://data.com/articles.json?ref=CANONICAL_URL">
  <textarea></textarea>
</amp-autocomplete>

テキストエリアで属性あり

<amp-autocomplete
  filter="prefix"
  src="https://data.com/articles.json?ref=CANONICAL_URL">
  <textarea autoexpand placeholder="Reply"></textarea>
</amp-autocomplete>

クエリあり

<amp-autocomplete
  filter="prefix"
  src="https://data.com/articles.json?ref=CANONICAL_URL"
  query="q">
  <input />
</amp-autocomplete>

リクエスト先を動的に変更

<amp-autocomplete filter="prefix" [src]="foo.bar">
  <input />
</amp-autocomplete>

searchタイプ

<amp-autocomplete filter="prefix">
  <input type="search" />
  <script type="application/json">
    {}
  </script>
</amp-autocomplete>

filter=token-prefix

<amp-autocomplete filter="token-prefix">
  <input />
  <script type="application/json">
    {}
  </script>
</amp-autocomplete>

filter=substring

<amp-autocomplete filter="substring">
  <input />
  <script type="application/json">
    {}
  </script>
</amp-autocomplete>

filter=fuzzy

<amp-autocomplete filter="fuzzy">
  <input />
  <script type="application/json">
    {}
  </script>
</amp-autocomplete>

filter=none

<amp-autocomplete filter="none">
  <input />
  <script type="application/json">
    {}
  </script>
</amp-autocomplete>

filter=custom

<amp-autocomplete filter="custom" filter-expr="true">
  <input />
  <script type="application/json">
    {}
  </script>
</amp-autocomplete>

inline=@

<amp-autocomplete inline="@" filter="prefix">
  <input />
  <script type="application/json">
    {}
  </script>
</amp-autocomplete>

items=property

<amp-autocomplete filter="prefix" items="property">
  <input />
  <script type="application/json">
    {}
  </script>
</amp-autocomplete>

ユーザ入力の最小文字数(min-characters)

<amp-autocomplete filter="prefix" min-characters="3">
  <input />
  <script type="application/json">
    {}
  </script>
</amp-autocomplete>

表示される最大アイテム数(max-entries)

<amp-autocomplete filter="prefix" max-entries="10">
  <input />
  <script type="application/json">
    {}
  </script>
</amp-autocomplete>

最初のアイテムをアクティブ(suggest-first)

<amp-autocomplete suggest-first filter="prefix">
  <input />
  <script type="application/json">
    {}
  </script>
</amp-autocomplete>

一致する文字をハイライト(highlight-user-entry)

<amp-autocomplete filter="prefix" highlight-user-entry>
  <input type="text" />
  <script type="application/json">
    {}
  </script>
</amp-autocomplete>

Enterキーで送信(submit-on-enter)

<amp-autocomplete filter="prefix" submit-on-enter>
  <input />
  <script type="application/json">
    {}
  </script>
</amp-autocomplete>

テンプレートをカスタマイズ

<amp-autocomplete filter="prefix">
  <input />
  <script type="application/json">
    {}
  </script>
  <template type="amp-mustache" id="amp-template-default">
    <div class="city-item" data-value="">
      <div></div>
      <div class="custom-population">Population: </div>
    </div>
  </template>
</amp-autocomplete>

template=”amp-mustache”

<amp-autocomplete filter="prefix">
  <input />
  <script type="application/json">
    {}
  </script>
  <script type="text/plain" template="amp-mustache">
    <div class="city-item" data-value="">
      <div></div>
      <div class="custom-population">Population: </div>
    </div>
  </script>
</amp-autocomplete>

説明

カルーセルを表示

使い方

<amp-base-carousel 属性>
</amp-base-carousel>

必要なスクリプト

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

属性

属性名 説明 デフォルト値
attr-name 構成要素  
mixed-length 各スライドに既存の幅を使用するか false
visible-count 特定の時間に表示するスライド数 1
advance-count 次に移動する時に進むスライド数 1
auto-advance 自動的に進む false
auto-advance-count 自動的に進む時のスライド数 1
auto-advance-interval 自動的に進む時の時間(ミリ秒) 1000
auto-advance-loops ループ回数 無限
snap スクロール時にカルーセルがスライドにスナップするかどうか true
snap-align スライドの位置(startかcenter) start
snap-by スナップの粒度 1
slide 表示される最初のスライド 0
loop ループするか true
horizontal 水平レイアウトにするか true
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの  
heights メディア式に基づいた要素の縦サイズ  
layout レイアウト  
media メディア属性  
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF  
on イベントの実行用  
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)  
sizes メディア式に基づいた要素の横サイズ  
width 横幅  
height 高さ  

イベント

イベント名 説明
slideChange カルーセルによって表示されるインデックスが変更されたときに実行

レイアウト

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

基本的な使い方

<amp-base-carousel
  width="4"
  height="3">
</amp-base-carousel>

自動的に進む(auto-advance)

<amp-base-carousel
  auto-advance="true"
  width="4"
  height="3">
</amp-base-carousel>

media query

<amp-base-carousel
  auto-advance="(min-width: 800px) true, false">
  width="4"
  height="3"
</amp-base-carousel>

multiple media queries

<amp-base-carousel
  auto-advance="(min-width: 800px) true, (max-height: 1000px) true, false"
  width="4"
  height="3">
</amp-base-carousel>

次に移動する時に進むスライド数(advance-count)

<amp-base-carousel
  advance-count="2"
  width="4"
  height="3">
</amp-base-carousel>

特定の時間に表示するスライド数(visible-count)

<amp-base-carousel
  visible-count="2"
  width="4"
  height="3">
</amp-base-carousel>

少数

<amp-base-carousel
  visible-count="3.2"
  width="4"
  height="3">
</amp-base-carousel>

BeOpのコンテンツを表示

説明

BeOpのコンテンツを表示
BeOpは主にヨーロッパの主要メディアと連携している広告サイト

使い方

<amp-beopinion 属性>
</amp-beopinion>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-beopinion
  width="375"
  height="472"
  layout="responsive"
  data-account="589446dd42ee0d6fdd9c3dfd"
  data-content="5a703a2f46e0fb00016d51b3"
  data-name="content-slot">
</amp-beopinion>

動的なコンテンツの作成

説明

動的なコンテンツの作成

使い方

初期化

<amp-state id="ID名">
  <script type="application/json">
    {
      初期化したいkeyとvalue
    }
  </script>
</amp-state>

更新

refresh
<amp-state id="ID名" ...></amp-state>
<button on="tap:ID名.refresh"></button>
AMP.setState
<button on="tap:AMP.setState({更新したいkeyとvalue})"></button>
AMP.setState
<button on="tap:AMP.pushState({新したいkeyとvalue})"></button>

必要なスクリプト

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

使える JavaScript 関数

配列

関数名 説明
concat 結合
filter 条件に一致した要素だけ抽出
includes 指定した要素が配列に含まれているか
indexOf 指定した要素が配列に含まれている場合にその位置を取得
join 配列を結合して文字列に変換
lastIndexOf 指定した要素が配列に含まれているか後ろから検索しその位置を取得
map 配列のすべての要素に対して、指定した処理を実行し新しい配列を生成
reduce 配列の値を左から右に一つにまとめる
slice 分割
some 配列のいずれかの要素が指定した条件を満たしているか
sort ソート
splice 指定した要素の削除や変更

数値

関数名 説明
toExponential 指数形式に変換
toFixed 小数点以下を指定した桁数で四捨五入して文字列に変換
toPrecision 指定した精度で文字列に変換
toString 文字列に変換

文字列

関数名 説明
charAt 指定された位置の文字を取得
charCodeAt UTF-16に変換
concat 結合
indexOf 指定した文字で検索し、初めに現れたインデックスを取得
lastIndexOf 指定した文字で後ろから検索し、初めに現れたインデックスを取得
slice 文字列の一部を取り出す
split 指定した区切り文字で分割して配列を作成
substr 開始位置から文字数分の部分文字列を取り出す
substring 指定された範囲の文字列を取り出す
toLowerCase ローワーキャメルケース変換
toUpperCase アッパーキャメルケース変換

計算

関数名 説明
abs 数値の絶対値を取得
ceil 指定した値以上で最小の整数を取得
floor 指定した値以下で最大の整数を取得
max 最大値
min 最小値
random ランダム
round 四捨五入
sign 正数、ゼロ、負数を判定

オブジェクト

関数名 説明
keys キー名を取得
values バリューを取得

グローバル

関数名 説明
encodeURI URLエンコード
encodeURIComponent UTF-8文字エンコード

バインドが使える属性

タグ名 属性
amp-brightcove [data-account] [data-embed] [data-player] [data-player-id] [data-playlist-id] [data-video-id]
amp-carousel type=”slides” [slide]*
amp-date-picker [min] [max]
amp-google-document-embed [src] [title]
amp-iframe [src]
amp-img [alt] [attribution] [src] [srcset]
amp-lightbox [open]*
amp-list [src]
amp-selector [selected]* [disabled]
amp-state [src]
amp-video [alt] [attribution] [controls] [loop] [poster] [preload] [src]
amp-youtube [data-videoid]
a [href]
button [disabled] [type] [value]
details [open]
fieldset [disabled]
image [xlink:href]
input [accept] [accessKey] [autocomplete] [checked] [disabled] [height] [inputmode] [max] [maxlength] [min] [minlength] [multiple] [pattern] [placeholder] [readonly] [required] [selectiondirection] [size] [spellcheck] [step] [type] [value] [width]
option [disabled] [label] [selected] [value]
optgroup [disabled] [label]
select [autofocus] [disabled] [multiple] [required] [size]
source [src] [type]
track [label] [src] [srclang]
textarea [autocomplete] [autofocus] [cols] [disabled] [maxlength] [minlength] [placeholder] [readonly] [required] [rows] [selectiondirection] [selectionend] [selectionstart] [spellcheck] [wrap]

基本的な使い方

<p [text]="foo">After clicking the button below, this will read 'foo'<p>
<p id="foo" [text]="foo + 'bar'">And this will read 'foobar'<p>
<p [text]="myState.myStateKey1">This will read 'myStateValue1'<p>
<button [disabled]="isButtonDisabled">This button will be disabled</button>
<p [class]="textClass">This text will have have a red background color</p>
<amp-img src="https://amp.dev/static/samples/img/Border_Collie.jpg" [src]="imgSrc" width=100 [width]="imgSize || 100" height=100 [height]="imgSize || 100" alt="asdf" [alt]="imgAlt" [aria-label]="'Image of a ' + imgAlt"></amp-img>
<p>The image above will increase in size and change its src</p>
<div>
  <button on="tap:AMP.setState({'foo': 'foo', 'isButtonDisabled': true, 'textClass': 'redBackground', 'imgSrc': 'https://amp.dev/static/samples/img/Shetland_Sheepdog.jpg', 'imgSize': 200, 'imgAlt': 'Sheepdog'})">Click me</button>
</div>
<amp-state id="myState">
  <script type="application/json">
    {
      "myStateKey1": "myStateValue1"
    }
  </script>
</amp-state>

カルーセルの画像を選択して文字を変更

<p [text]="'Selected slide: ' + selectedSlide">Selected slide: None<p>
<amp-carousel controls type=slides width=400 height=300
  [slide]="selectedSlide" on="slideChange:AMP.setState({selectedSlide: event.index})">
  <amp-img src="https://amp.dev/static/samples/img/image1.jpg" width=400 height=300></amp-img>
  <amp-img src="https://amp.dev/static/samples/img/image2.jpg" width=400 height=300></amp-img>
</amp-carousel>

カルーセルの画像をクリックしたら選択済みに変更

<amp-carousel controls width=400 height=100>
  <amp-img src="https://amp.dev/static/samples/img/image1.jpg" width=100 height=75
    [class]="selectedSlide == 0 ? 'selected' : ''" on="tap:AMP.setState({selectedSlide: 0})"></amp-img>
  <amp-img src="https://amp.dev/static/samples/img/image2.jpg" width=100 height=75
    [class]="selectedSlide == 1 ? 'selected' : ''" on="tap:AMP.setState({selectedSlide: 1})"></amp-img>
</amp-carousel>

ボタンでカルーセルの画像を切り替える

<button on="tap:AMP.setState({selectorDisabled: !selectorDisabled})">Toggle selector[disabled]</button>
<amp-selector layout=container name="carousel-selector" [selected]="selectedSlide"
  on="select:AMP.setState({selectedSlide: event.targetOption})"
  [disabled]="selectorDisabled">
  <amp-carousel controls width=400 height=100>
    <amp-img src="https://amp.dev/static/samples/img/image1.jpg" width=100 height=75 option=0></amp-img>
    <amp-img src="https://amp.dev/static/samples/img/image2.jpg" width=100 height=75 option=1></amp-img>
  </amp-carousel>
</amp-selector>

ボタンをクリックしたら表示(details)

<amp-state id="detailsOpen">false</amp-state>
<button on="tap:AMP.setState({ detailsOpen: ! detailsOpen })" [text]="detailsOpen ? 'Toggle Closed' : 'Toggle Open'">Toggle Open</button>
<details [open]="detailsOpen">
  <summary>Learn more</summary>
  <p>This is more information.</p>
</details>

Form

<button on="tap:AMP.setState({selected: 1})">1</button>
<button on="tap:AMP.setState({selected: 2})">2</button>
<button on="tap:AMP.setState({selected: 3})">3</button>
<button on="tap:AMP.setState({selected: 4})">4</button>
<p [text]="'$' + selectedRange">$0</p>
<p>Color Selection: <span [text]="colorSelection || 'red'">red</span>
<button on="tap:AMP.setState({nameVar: 'Alice', emailVar: 'alice@fake.com'}), myForm.submit">
  Set name/email with amp-bind and submit (chained action)
</button>
<form method="post"
  action-xhr="/form/echo-json/post"
  target="_blank"
  id="myForm">
  <fieldset>
    <label>
      <span>Your name</span>
      <input type="text" name="name" id="name1" [value]="nameVar" required>
    </label>
    <label>
      <span>Your email</span>
      <input type="email" name="email" id="email1" [value]="emailVar" required>
    </label>
    <label>
      <span>Your choice</span>
      <select on="change:AMP.setState({colorSelection: event.value})">
        <option value="red">red</option>
        <option value="green">green</option>
        <option value="blue">blue</option>
        <option value="yellow">yellow</option>
      </select>
    </label>
    <label>
      <span>Your offer</span>
      $100
      <input type="range" min="100" max="200" step="10" on="change:AMP.setState({selectedRange: event.value})"/>
      $200
    </label>
    <input type="submit" value="Subscribe">
  </fieldset>
  <div submit-success>
    <template type="amp-mustache">
      Success! Thanks  for entering your email: 
      <p>You have selected: <span [text]="selected ? selected : 'No selection'">No selection</span></p>
    </template>
  </div>
  <div submit-error>
    <template type="amp-mustache">
      Error! Failure to register:  : 
      <p>You have selected: <span [text]="selected ? selected : 'No selection'">No selection</span></p>
    </template>
  </div>
</form>

iframe

<button on="tap:AMP.setState({bling: 'https://giphy.com/embed/DKG1OhBUmxL4Q'})">Change iframe src</button>
<amp-iframe width="500" height="281"
  sandbox="allow-scripts allow-same-origin allow-popups" allowfullscreen frameborder="0"
  src="https://player.vimeo.com/video/140261016" [src]="bling">
</amp-iframe>

URLを指定してリスト更新(amp-list)

<button on="tap:AMP.setState({src:'/list/fruit-data/get'})">Show Fruit</button>
<template id="my-template" type="amp-mustache">
  <strong>name</strong> 
</template>
<amp-list layout="responsive" src="/list/fruit-data/get" [src]="src || '/list/fruit-data/get'" width="600" height="100" template="my-template">
  <div placeholder>(Placeholder)</div>
</amp-list>

JSONを指定してリスト更新(amp-list)

<amp-state id="otherFoods">
  <script type="application/json">
    [{
      "name": "pizza"
    }, {
      "name": "ice cream"
    }]
  </script>
</amp-state>
<button on="tap:AMP.setState({src: otherFoods})">Show Other Foods</button>
<template id="my-template" type="amp-mustache">
  <strong>name</strong> 
</template>
<amp-list layout="responsive" src="/list/fruit-data/get" [src]="src || '/list/fruit-data/get'" width="600" height="100" template="my-template">
  <div placeholder>(Placeholder)</div>
</amp-list>

ボタンをクリックして指定したJSONで更新

<button on="tap:AMP.setState({
  src: [{
    name: 'pizza'
  }, {
    name: 'burger'
  }]
})">Show Junk Food</button>
<template id="my-template" type="amp-mustache">
  <strong>name</strong> 
</template>
<amp-list layout="responsive" src="/list/fruit-data/get" [src]="src || '/list/fruit-data/get'" width="600" height="100" template="my-template">
  <div placeholder>(Placeholder)</div>
</amp-list>

live-list

<button on="tap:AMP.setState({favoriteFood: 'pizza'})">Pizza</button>
<button on="tap:AMP.setState({favoriteFood: 'pasta'})">Pasta</button>
<button on="tap:AMP.setState({favoriteFood: 'cake'})">Cake</button>
<amp-live-list
  layout="container"
  data-poll-interval="15000"
  data-max-items-per-page="5"
  id="live-blog-1">
  <button id="live-list-update-button" update class="button"
    on="tap:live-blog-1.update">You have updates</button>
  <div items>
    <div id="live-blog-item-1" data-sort-time="1466669033418">
      <h3 class="headline">
        <a href="#live-blog-item-1">Bacon ipsum dolor amet</a>
      </h3>
      <div class="article-body">
        As you can see, bacon is far superior to <b><span [text]='favoriteFood'>everything!</span></b>!
      </div>
    </div>
  </div>
</amp-live-list>

amp-bind-macro

<amp-bind-macro id="add" expression="a + b" arguments="a, b"></amp-bind-macro>
<p [text]="three || '1 + 2 = ?'">1 + 2 = ?</p>
<button on="tap:AMP.setState({three: add(1, 2)})">Compute</button>

svgimage

<svg height="500" width="500">
  <image xlink:href="https://amp.dev/static/samples/img/Border_Collie.jpg" [xlink:href]='href'></image>
</svg>
<button on="tap:AMP.setState({'href': 'https://amp.dev/static/samples/img/Shetland_Sheepdog.jpg'})">update image</button>

ボタンでYouTubeを切り替える

<amp-youtube width=480 height=270 data-videoid="lBTCB7yLs8Y"
  [data-videoid]="youtubeId || 'lBTCB7yLs8Y'">
</amp-youtube>
<p>
  <button on="tap:AMP.setState({
    youtubeId: 'WrpkFROqR0Q'
  })">Change amp-youtube</button>
</p>

条件で出力する文字を変更

<p [text]="charState">
  Try typing a few characters into the textbox.
</p>
<input type="textbox"
  on="input-throttled:AMP.setState({
    charState: event.value.length < 10 ?
    'There are under 10 characters, type more!' :
    'You
  })">

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>

Brid.tvの動画プレーヤーを表示

説明

Brid.tvの動画プレーヤーを表示

使い方

<amp-brid-player 属性>
</amp-brid-player>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-brid-player
  id="myVideo"
  data-partner="264"
  data-player="4144"
  data-video="13663"
  layout="responsive"
  width="480" height="270">
</amp-brid-player>
<button on="tap:myVideo.play">Play</button>
<button on="tap:myVideo.pause">Pause</button>
<button on="tap:myVideo.mute">Mute</button>
<button on="tap:myVideo.unmute">Unmute</button>
<button on="tap:myVideo.fullscreen">Fullscreen</button>

自動再生(autoplay)

<amp-brid-player
  autoplay
  data-partner="264"
  data-player="4144"
  data-video="13663"
  layout="responsive"
  width="480" height="270">
</amp-brid-player>

ストリームユニットIDを指定(data-outstream)

<amp-brid-player
  autoplay
  data-partner="6205"
  data-player="0"
  data-outstream="3828"
  layout="responsive"
  width="480" height="270">
</amp-brid-player>

Brightcoveの動画プレーヤーを表示

説明

ブライトコーブ(Brightcove)の動画プレーヤーを表示

使い方

<amp-brightcove 属性>
</amp-brightcove>

必要なスクリプト

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

属性

属性名 説明
data-account(必須) アカウントID
data-video-id(必須) 動画ID
data-player プレーヤーID(推奨)
data-player-id プレーヤーID
data-embed ビデオID
data-playlist-id プレイリストID
data-referrer リファラー
data-param-* Brightcoveの詳細設定
autoplay 自動再生するか
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

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

基本的な使い方

<amp-brightcove
  id="myPlayer"
  data-referrer="EXTERNAL_REFERRER"
  data-account="1290862519001"
  data-video-id="ref:amp-docs-sample"
  data-player-id="SyIOV8yWM"
  layout="responsive" width="480" height="270">
</amp-brightcove>
<button on="tap:myPlayer.play">Play</button>
<button on="tap:myPlayer.pause">Pause</button>
<button on="tap:myPlayer.mute">Mute</button>
<button on="tap:myPlayer.unmute">Unmute</button>
<button on="tap:myPlayer.fullscreen">Fullscreen</button>

自動再生(autoplay)

<amp-brightcove
  id="myPlayer"
  autoplay
  data-account="1290862519001"
  data-video-id="ref:amp-docs-sample"
  data-player-id="SyIOV8yWM"
  layout="responsive" width="480" height="270">
</amp-brightcove>

BySideの動画プレーヤーを表示

説明

BySideの動画プレーヤーを表示

使い方

<amp-byside-content 属性>
</amp-byside-content>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-byside-content
  data-webcare-id="D6604AE5D0"
  data-lang="en"
  data-label="amp-responsive"
  layout="responsive"
  height="500"
  width="1024">
</amp-byside-content>

言語指定

<amp-byside-content
  data-webcare-id="D6604AE5D0"
  data-label="amp-simple"
  height="300"
  layout="fixed-height">
</amp-byside-content>

リンク内の電話番号を電話用に変更

説明

リンク内の電話番号を電話用に変更

使い方

<amp-call-tracking 属性>
</amp-call-tracking>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-call-tracking
  config="https://example.com/calltracking.json">
  <a href="tel:12345678">+1 (23) 45-678</a>
</amp-call-tracking>

説明

カルーセル(画像などを横に並べた、スクロール機能付きの表示エリア)を表示

使い方

<amp-carousel 属性>
  表示したい要素
</amp-carousel>

必要なスクリプト

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

属性

属性名 説明
type(必須) カルーセルの表示タイプ
controls 矢印などのナビゲートを表示
data-next-button-aria-label 次のアイテムのラベル
data-prev-button-aria-label 前のアイテムのラベル
data-button-count-format カウント形式
autoplay 自動再生
delay 自動再生時の次のスライドに切り替わる時間(ミリ秒)
loop ループするか
slide 初めに表示されるインデックス番号
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

タイプ

タイプ名 説明
carousel(デフォルト) 全てのスライドが表示され水平方向にスクロール可能
slides 一度に一つのスライドを表示

レイアウト

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

基本的な使い方

<amp-carousel
  id="scrollable-carousel"
  width="800"
  height="300"
  layout="fixed"
  type="carousel">
  <amp-img src="https://picsum.photos/1600/900?image=110"
    width="400"
    height="225"
    aria-label="Aria labels are cool."></amp-img>
  <amp-img src="https://picsum.photos/1600/900?image=112"
    width="400"
    height="225"></amp-img>
</amp-carousel>
button on="tap:scrollable-carousel.goToSlide(index=0)">Go to slide 0</button>
<button on="tap:scrollable-carousel.goToSlide(index=3)">Go to slide 3</button>
<button on="tap:scrollable-carousel.goToSlide(index=5)">Go to slide 5</button>

いろいろな要素

<amp-carousel width=400 height=300 layout=responsive type=slides>
  <div>hello world</div>
  <amp-img src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n" layout=fill>
  </amp-img>
</amp-carousel>

自動再生(autoplay)

<amp-carousel layout="fixed" width=500 height=500 autoplay delay>
</amp-carousel>

自動再生時の次のスライドに切り替わる時間を指定(delay)

<amp-carousel layout="fixed" width=500 height=500 autoplay delay=5000>
</amp-carousel>

自動再生回数を指定

<amp-carousel layout="fixed" width=500 height=500 autoplay=5>
</amp-carousel>

クラウドホストの動画プレーヤーを表示

説明

クラウドホストの動画プレーヤーを表示

使い方

<amp-connatix-player 属性>
</amp-connatix-player>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-connatix-player
  data-player-id="f721b0d8-7a79-42b6-b637-fa4e86138ed9"
  layout="responsive"
  width="150"
  height="80">
</amp-connatix-player>

Media Idを指定

<amp-connatix-player
  data-media-id="527207df-2007-43c4-b87a-f90814bafd2e"
  data-player-id="f721b0d8-7a79-42b6-b637-fa4e86138ed9"
  layout="responsive"
  width="480"
  height="270">
</amp-connatix-player>

説明

ユーザから同意を取るためのUIを表示

使い方

<amp-consent layout="nodisplay" id="consent-element">
  <script type="application/json">
    {
      設定
    }
  </script>
  <div id="consent-ui">
    <button on="tap:consent-element.accept" role="button">Accept</button>
    <button on="tap:consent-element.reject" role="button">Reject</button>
    <button on="tap:consent-element.dismiss" role="button">Dismiss</button>
  </div>
</amp-consent>

必要なスクリプト

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

設定

要素名 説明
consentInstanceId 識別子
checkConsentHref 指定したURLから構成要素を取得
consentInstanceId 同意のインスタンスID

応答要素

要素名 説明
consentRequired ユーザの同意が必要かどうか
consentStateValue 現在の同意状態
consentString 同意文字列
expireCache キャッシュのクリアが必要かどうか

レイアウト

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

基本的な使い方

<amp-consent id='ABC' layout='nodisplay' type='_ping_'>
  <script type="application/json">
    {
      "consents": {},
      "postPromptUI": "postPromptUI",
      "clientConfig": {
        "CMP_id": "test_id",
        "other_info": "test_info"
      }
    }
  </script>
  <div id="postPromptUI">
    Post Prompt UI
    <button on="tap:ABC.prompt(consent=_ping_)" role="button">Manage</button>
  </div>
</amp-consent>

Dailymotionの動画プレーヤーを表示

説明

Dailymotionの動画プレーヤーを表示

使い方

<amp-dailymotion 属性>
</amp-dailymotion>

必要なスクリプト

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

属性

属性名 説明
data-videoid(必須) ビデオID
height(必須) 高さ
width(必須) 横幅
autoplay 自動再生
data-mute ミュート
data-endscreen-enable 再生終了後に関連動画を表示するか
data-sharing-enable シェアボタンを表示するか
data-start 再生開始位置を指定(秒単位)
data-ui-highlight ハイライトの色
data-ui-logo Dailymotionのロゴを表示するか
data-info 動画のタイトルを表示するか
data-param-* Dailymotionの詳細設定
dock 最小化するか
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ

レイアウト

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

基本的な使い方

<amp-dailymotion
  data-videoid="x2m8jpp"
  width="500"
  height="281">
</amp-dailymotion>

layoutを指定

<amp-dailymotion
  layout="responsive"
  data-videoid="jx2m8pp"
  width="500"
  height="281">
</amp-dailymotion>

属性設定

<amp-dailymotion
  data-videoid="jx2m8pp"
  width="500"
  height="281"
  layout="responsive"
  data-mute="true"
  data-endscreen-enable="false"
  data-sharing-enable="true"
  data-start="42"
  data-ui-highlight="ef0122"
  data-ui-logo="false"
  data-info="true">
</amp-dailymotion>

ハイライトの色を設定

<amp-dailymotion
  data-ui-highlight="fff"
  data-videoid="jx2m8pp"
  width="500"
  height="281">
</amp-dailymotion>

指定した時間までの残り時間を表示

説明

指定した時間までの残り時間を表示

使い方

<amp-date-countdown 属性>
</amp-date-countdown>

必要なスクリプト

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

属性

属性名 説明
end-date(必須) 終了日
timestamp-ms タイムスタンプ(ミリ秒)
timestamp-seconds タイムスタンプ(秒)
timeleft-ms 残された秒数(ミリ秒)
offset-seconds オフセット
when-ended 終了時にタイマーを停止するか
locale ロケール
biggest-unit 最大単位
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

イベント

イベント名 説明
timeout タイムアウトした時に実行

時間の形式

フォーマット 説明
d 日: 0、1、2、…
dd 日: 00、01、02、03 ..
h 時間: 0、1、2、…
hh 時間: 01、02、03 ..
m 分: 0、1、2、…
mm 分: 01、01、02、03 ..
ss 秒: 00、01、02、03 ..
days 日の国際化文字列
hours 時間の国際化文字列
minutes 分の国際化文字列
seconds 秒の国際化文字列

レイアウト

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

基本的な使い方

<amp-date-countdown
  timestamp-seconds="2147483648"
  layout="fixed-height"
  height="50">
  <template type="amp-mustache">
    <p class="p1">
       days,  hours,  minutes and  seconds until
      <a href="https://en.wikipedia.org/wiki/Year_2038_problem">Y2K38</a>.
    </p>
  </template>
</amp-date-countdown>

テンプレート

<template type="amp-mustache" id="myTemplate">
  <div class="date-count-down">
    \{\{#d\}\} \{\{d\}\} <span>\{\{days\}\}</span> \{\{/d\}\}
    \{\{h\}\} <span>\{\{hours\}\}</span>
    \{\{m\}\} <span>\{\{minutes\}\}</span>
    \{\{s\}\} <span>\{\{seconds\}\}</span>
  </div>
</template>
<amp-date-countdown timestamp-ms="1521880470000" offset-seconds="1521880470" when-ended="stop" locale='zh-tw' height="50" width="360" template="myTemplate">
</amp-date-countdown>

時間を表示

説明

時間を表示

使い方

<amp-date-display 属性>
</amp-date-display>

必要なスクリプト

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

属性

属性名 説明
datetime 日付時刻
timestamp-ms タイムスタンプ(ミリ秒)
timestamp-seconds タイムスタンプ(秒)
locale ロケール
display-in UTCに変換
offset-seconds オフセット
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

時間の形式

フォーマット 説明
day 1, 2, …12, 13, etc.
dayName 文字列
dayNameShort 文字列
dayPeriod string,
dayTwoDigit 01, 02, 03, …, 12, 13, etc.
hour 0, 1, 2, 3, …, 12, 13, …, 22, 23
hour12 1, 2, 3, …, 12, 1, 2, …, 11, 12
hour12TwoDigit 01, 02, …, 12, 01, 02, …, 11, 12
hourTwoDigit 00, 01, 02, …, 12, 13, …, 22, 23
iso ISO8601
minute 0, 1, 2, …, 58, 59
minuteTwoDigit 00, 01, 02, …, 58, 59
month 1, 2, 3, …, 12
monthName 国際化された月名文字列
monthNameShort 国際化された短縮月名文字列
monthTwoDigit 01, 02, …, 11, 12
second 0, 1, 2, …, 58, 59
secondTwoDigit 00, 01, 02, …, 58, 59
year 0, 1, 2, …, 1999, 2000, 2001, etc.
yearTwoDigit 00, 01, 02, …, 17, 18, 19, …, 98, 99

レイアウト

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

基本的な使い方

<amp-date-display
  datetime="2017-08-02T15:05:05.000Z"
  layout="fixed"
  width="360"
  height="20">
  <template type="amp-mustache"></template>
</amp-date-display>

タイムスタンプ(timestamp-seconds)

<amp-date-display
  timestamp-seconds="1501686305"
  layout="fixed"
  width="360"
  height="20">
  <template type="amp-mustache"></template>
</amp-date-display>

タイムスタンプ(timestamp-ms)

<amp-date-display
  timestamp-ms="1501686305000"
  layout="fixed"
  width="360"
  height="20">
  <template type="amp-mustache"></template>
</amp-date-display>

UTC に変換(display-in)

<amp-date-display
  display-in="utc"
  datetime="now"
  layout="fixed"
  width="360"
  height="20">
  <template type="amp-mustache"></template>
</amp-date-display>

テンプレート(template)

<amp-date-display
  template="myTemplate"
  datetime="now"
  display-in="utc"
  layout="fixed"
  width="360"
  height="20">
</amp-date-display>
<template type="amp-mustache" id="myTemplate"></template>

カレンダーウィジェットを表示

説明

カレンダーウィジェットを表示

使い方

<amp-date-picker 属性>
</amp-date-picker>

必要なスクリプト

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

属性

属性名 説明 デフォルト値
mode カレンダーのモード static
type カレンダーのタイプ single
input-selector 入力フィールド 非表示フィールドを自動生成
start-input-selector 開始日入力フィールド 非表示フィールドを自動生成
end-input-selector 終了日入力フィールド 非表示フィールドを自動生成
min 選択できる最も早い日付 現在の日付
max 選択できる最も遅い日付 なし
month-format 月の形式 MMMM YYYY
format 入力フィールドのフォーマット YYYY-MM-DD
week-day-format 平日のフォーマット  
locale ロケール en
maximum-nights 日付範囲内でユーザーが選択できる夜の数 0
minimum-nights 日付範囲で選択する必要がある夜の数 1
number-of-months 一度に表示する月数 1
first-day-of-week 週の最初の日 0(日曜日)
blocked ユーザーがカレンダーで選択できない  
highlighted ハイライト  
day-size 日付セルのサイズ(px) 39
allow-blocked-end-date 開始日の選択後に終了日を選択  
allow-blocked-ranges 範囲指定  
src JSONを取得するURL  
fullscreen 全画面表示  
open-after-select 日付を選択後もカレンダーを開き続ける  
open-after-clear 日付をクリア後もカレンダーを開き続ける  
hide-keyboard-shortcuts-panel ピッカーの下部にあるキーボードショートカットパネルを非表示  
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの  
heights メディア式に基づいた要素の縦サイズ  
layout レイアウト  
media メディア属性  
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF  
on イベントの実行用  
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)  
sizes メディア式に基づいた要素の横サイズ  
width 横幅  
height 高さ  

イベント

イベント名 説明
activate カレンダーがアクティブになった時に実行
deactivate カレンダーがアクティブではなくなった時に実行
select 日付が選択された時に実行

アクション

アクション名 説明
clear クリア
setDate 日付が選択
setDates 日付を範囲指定
today 現在の日付が選択
startToday 開始日が選択
endToday 終了日が選択

表示モード

モード名 説明
static(デフォルト) 静的なカレンダー
overlay 必須の入力フィールドを操作後にカレンダー表示

タイプ

タイプ名 説明
single 一日指定
range 範囲で日付指定

レイアウト

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

基本的な使い方

<amp-date-picker
  layout="fixed-height"
  height="360">
</amp-date-picker>

必須の入力フィールドを操作後にカレンダー表示(overlay)

<amp-date-picker
  mode="overlay"
  input-selector="[name=date1]">
  <input type="text" name="date1">
</amp-date-picker>

静的なカレンダー(static)

<amp-date-picker
  mode="static"
  layout="fixed-height"
  height="360">
</amp-date-picker>

一日指定(single)

<amp-date-picker
  type="single"
  layout="fixed-height"
  height="360">
</amp-date-picker>

範囲で日付指定(range)

<amp-date-picker
  type="range"
  layout="fixed-height"
  height="360">
</amp-date-picker>

複数要素

<amp-date-picker
  type="range"
  mode="overlay"
  start-input-selector="[name=date2]"
  end-input-selector="[name=date3]">
  <input type="text" name="date2">
  <input type="text" name="date3">
</amp-date-picker>

入力フィールド(input-selector)

<amp-date-picker
  input-selector="#a1"
  type="single"
  layout="fixed-height"
  height="360">
</amp-date-picker>

全画面表示(fullscreen)

<amp-date-picker
  fullscreen
  mode="static"
  layout="fill">
</amp-date-picker>

日付セルのサイズ(day-size)

<amp-date-picker
  day-size="50"
  type="range"
  layout="fixed-height"
  height="360">
</amp-date-picker>

一度に表示する月数(number-of-months)

<amp-date-picker
  number-of-months="12"
  type="range"
  layout="fixed-height"
  height="360">
</amp-date-picker>

週の最初の日(first-day-of-week)

<amp-date-picker
  first-day-of-week="1"
  type="range"
  layout="fixed-height"
  height="360">
</amp-date-picker>

JSONを取得するURL(src)

<amp-date-picker
  src="https://data.com/dates.json?ref=CANONICAL_URL"
  layout="fixed-height"
  height="360">
</amp-date-picker>

テンプレート(template)

<amp-date-picker
  layout="fixed-height"
  height="360">
  <template type="amp-mustache" date-template default></template>
</amp-date-picker>

日付範囲内でユーザーが選択できる夜の数(maximum-nights)

<amp-date-picker
  maximum-nights="3"
  type="range"
  layout="fixed-height"
  height="360">
</amp-date-picker>

日付範囲で選択する必要がある夜の数(minimum-nights)

<amp-date-picker
  minimum-nights="0"
  type="range"
  layout="fixed-height"
  height="360">
</amp-date-picker>

start-dateとend-date

<amp-date-picker
  start-date="2018-01-01"
  end-date="2018-01-01"
  type="range"
  layout="fixed-height"
  height="360">
</amp-date-picker>

touch-keyboard-editable

<amp-date-picker
  touch-keyboard-editable
  mode="overlay"
  input-selector="#a4">
  <input id="a4">
</amp-date-picker>

maxとmin

 <amp-date-picker
   [min]="min"
   [max]="max"
   layout="fixed-height"
   height="360">
</amp-date-picker>

開始日の選択後に終了日を選択(allow-blocked-end-date)

<amp-date-picker
  allow-blocked-end-date
  layout="fixed-height"
  height="360">
</amp-date-picker>

ピッカーの下部にあるキーボードショートカットパネルを非表示(hide-keyboard-shortcuts-panel)

<amp-date-picker
  hide-keyboard-shortcuts-panel
  layout="fixed-height"
  height="360">
</amp-date-picker>

Delight Playerの動画プレーヤーを表示

説明

Delight Playerの動画プレーヤーを表示

使い方

<amp-delight-player 属性>
</amp-delight-player>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-delight-player
  data-content-id="-LJmX7wyfNmRe5LHw7Hy"
  layout="responsive"
  width="16"
  height="9">
</amp-delight-player>

動的なCSSクラス名をHTML要素に追加

説明

動的なCSSクラス名をHTML要素に追加

使い方

<style amp-custom>
  処理
</style>

必要なスクリプト

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

基本的な使い方

<style amp-custom>
  body:not(.amp-referrer-pinterest-com) .if-pinterest,
</style>

広告を表示

説明

広告を表示
amp-adの別名
amp-adを推奨

使い方

<amp-embed 属性>
</amp-embed>

必要なスクリプト

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

属性

属性名 説明
type(必須) 広告の種類
src 広告のスクリプトタグ
data-* 広告ごとの詳細設定
json JSON形式のオプションが必要な場合
data-consent-notification-id 通知関連
data-loading-strategy 別の要素の広告に対して読み込みを開始するよう指示
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

広告の種類

  • 1wo
  • 24smi
  • a8
  • a9
  • accesstrade
  • adagio
  • adblade
  • adbutler
  • adform
  • adfox
  • adgeneration
  • adglare
  • adhese
  • adincube
  • adition
  • adman
  • admanmedia
  • admixer
  • adocean
  • adop
  • adpicker
  • adplugg
  • adpon
  • adreactor
  • adsensor
  • adservsolutions
  • adsloom
  • adsnative
  • adspeed
  • adspirit
  • adstir
  • adstyle
  • adtech
  • adthrive
  • adunity
  • aduptech
  • adventive
  • adverline
  • adverticum
  • advertserve
  • adyoulike
  • affiliateb
  • aja
  • amoad
  • aniview
  • appnexus
  • appvador
  • atomx
  • baidu
  • beaverads
  • bidtellect
  • blade
  • brainy
  • bringhub
  • broadstreetads
  • byplay
  • caajainfeed
  • capirs
  • caprofitx
  • cedato
  • colombia
  • conative
  • connatix
  • contentad
  • criteo
  • dable
  • dianomi
  • directadvert
  • distroscale
  • dotandads
  • dynad
  • eadv
  • eas
  • empower
  • engageya
  • epeex
  • eplanning
  • ezoic
  • f1e
  • f1h
  • felmat
  • flite
  • fluct
  • forkmedia
  • freewheel
  • fusion
  • genieessp
  • giraff
  • gmossp
  • gumgum
  • holder
  • ibillboard
  • idealmedia
  • imedia
  • imobile
  • imonomy
  • improvedigital
  • industrybrains
  • inmobi
  • innity
  • insticator
  • invibes
  • ix
  • jubna
  • kargo
  • kiosked
  • kixer
  • kuadio
  • lentainform
  • ligatus
  • lockerdome
  • logly
  • loka
  • mads
  • mantis
  • medianet
  • mediavine
  • medyanet
  • meg
  • mgid
  • microad
  • miximedia
  • mixpo
  • monetizer101
  • mox
  • mytarget
  • mywidget
  • nativeroll
  • nativery
  • nativo
  • navegg
  • nend
  • netletix
  • noddus
  • nokta
  • nws
  • onead
  • onnetwork
  • openadstream
  • openx
  • opinary
  • outbrain
  • pixels
  • plista
  • polymorphicads
  • popin
  • postquare
  • pressboard
  • promoteiq
  • pubexchange
  • pubguru
  • pubmatic
  • pubmine
  • puffnetwork
  • pulsepoint
  • purch
  • quoraad
  • rbinfox
  • readmo
  • realclick
  • recomad
  • relap
  • revcontent
  • revjet
  • rfp
  • rnetplus
  • rubicon
  • runative
  • sas
  • seedingalliance
  • sekindo
  • sharethrough
  • shemedia
  • sklik
  • slimcutmedia
  • smartadserver
  • smartclip
  • smi2
  • smilewanted
  • sogouad
  • sortable
  • sovrn
  • speakol
  • spotx
  • springAds
  • ssp
  • strossle
  • sulvo
  • sunmedia
  • svknative
  • swoop
  • taboola
  • tcsemotion
  • teads
  • temedya
  • torimochi
  • tracdelight
  • triplelift
  • trugaze
  • uas
  • ucfunnel
  • unruly
  • uzou
  • valuecommerce
  • vdoai
  • videointelligence
  • videonow
  • viralize
  • vmfive
  • webediads
  • weborama
  • whopainfeed
  • widespace
  • wisteria
  • wpmedia
  • xlift
  • yahoo
  • yahoojp
  • yahoonativeads
  • yandex
  • yengo
  • yieldbot
  • yieldmo
  • yieldone
  • yieldpro
  • zedo
  • zen
  • zergnet
  • zucks

レイアウト

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

AdSense

<amp-embed
  width="100vw"
  height="320"
  type="adsense"
  data-ad-client="ca-pub-2005682797531342"
  data-ad-slot="7046626912"
  data-auto-format="rspv"
  data-full-width>
  <div overflow></div>
</amp-embed>

Yahoo JP

<amp-embed
  width="320"
  height="50"
  type="yahoojp"
  data-yadsid="79712_113431">
</amp-embed>

カスタム

<amp-embed
  width=300
  height=250
  type="custom"
  data-url="https://foobar.com"
  template="template-1">
</amp-embed>

Embedlyカードを表示

説明

Embedly カードを表示

使い方

<amp-embedly-card 属性>
</amp-embedly-card>

必要なスクリプト

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

属性

属性名 説明
data-url(必須) 埋め込み情報を取得するURL
data-card-via カードのビアコンテンツ
data-card-theme テーマ
data-card-embed ビデオまたはリッチメディアへのURL
data-card-image 画像のURL
data-card-controls 共有アイコンを有効にするか
data-card-align カードの表示方法
data-card-recommend 埋め込みの推奨を有効にするか
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-embedly-card
  data-url="https://www.youtube.com/watch?v=lBTCB7yLs8Y"
  layout="responsive"
  width="100"
  height="50">
</amp-embedly-card>

テーマを指定

<amp-embedly-card
  data-url="https://twitter.com/AMPhtml/status/986750295077040128"
  layout="responsive"
  width="150"
  height="80"
  data-card-theme="dark"
  data-card-controls="0">
</amp-embedly-card>

ユーザーエクスペリエンスの実験するために使用

説明

ユーザーエクスペリエンスの実験(A/Bテストなど)するために使用

使い方

<amp-experiment>
  <script type="application/json">
    {
      設定内容
    }
  </script>
</amp-experiment>

必要なスクリプト

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

設定

キー名 説明
variants(必須) トラフィックの割合(0-100)
sticky スティッキーかどうか
consentNotificationId 実行する前に却下される要素の要素ID
cidScope CIDスコープ
group グループ名

基本的な使い方

<amp-experiment>
  <script type="application/json">
    {
      "background-color-test": {
        "variants": {
          "yellow": 50,
          "green": 50
        }
      },
      "font-color-test": {
        "sticky": false,
        "variants": {
          "blue": 20,
          "red": 20
        }
      },
      "border-test": {
        "consentNotificationId": "amp-user-notification",
        "variants": {
          "solid": 50,
          "dashed": 50
        }
      }
    }
  </script>
</amp-experiment>

Facebookのコメントを表示

説明

Facebookのコメントを表示

使い方

<amp-facebook-comments 属性>
</amp-facebook-comments>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-facebook-comments
  width=486
  height=657
  layout="responsive"
  data-href="http://www.directlyrics.com/adele-25-complete-album-lyrics-news.html">
</amp-facebook>

time

<amp-facebook-comments width=552 height=310
  layout="responsive"
  data-numposts="5"
  data-order-by="time"
  data-href="https://developers.facebook.com/docs/plugins/comments">
</amp-facebook-comments>

social

<amp-facebook-comments width=552 height=310
  layout="responsive"
  data-numposts="5"
  data-order-by="social"
  data-href="https://developers.facebook.com/docs/plugins/comments">
</amp-facebook-comments>

Facebookのいいねボタンを表示

説明

Facebookのいいねボタンを表示

使い方

<amp-facebook-like 属性>
</amp-facebook-like>

必要なスクリプト

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

属性

属性名 説明
data-href(必須) いいねされるページのURL
data-locale ロケール
data-action ボタンに表示するアクション
data-colorscheme 外側のテキストの色
data-kd_site 13歳未満の子供に向けコンテンツかどうか
data-layout レイアウト
data-ref 参照を追跡するためのラベル
data-share いいねボタンの横に共有ボタンを含めるか
data-show_faces ボタンの下にプロファイル写真を表示するかどうか
data-size ボタンのサイズ
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

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

基本的な使い方

<amp-facebook-like width=90 height=20
  layout="fixed"
  data-layout="button_count"
  data-href="https://www.facebook.com/testesmegadivertidos/">
</amp-facebook-like>

ロケール(data-locale)

<amp-facebook-like width=90 height=20
  layout="fixed"
  data-layout="button_count"
  data-href="https://www.facebook.com/testesmegadivertidos/"
  data-locale="fr_FR">
</amp-facebook-like>

ボタンの下にプロファイル写真を表示する(data-show-faces)

<amp-facebook-like width=225 height=80
  layout="fixed"
  title="Facebook Like"
  data-layout="standard"
  data-size="large"
  data-show-faces="true"
  data-href="https://www.facebook.com/GoogleBrasil">
</amp-facebook-like>

Facebookページを表示

説明

Facebookページを表示

使い方

<amp-facebook-page 属性>
</amp-facebook-page>

必要なスクリプト

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

属性

属性名 説明
data-href(必須) FacebookページのURL
data-locale ロケール
data-tabs レンダリングするタブを指定
data-hide-cover ヘッダーのカバー写真を非表示
data-show-facepile 好きな友達のプロフィール写真を表示
data-hide-cta アクションボタンのカスタム呼び出しを非表示
data-small-header 小さいヘッダー
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

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

基本的な使い方

<amp-facebook-page width=552 height=310
  layout="responsive"
  data-tabs="timeline"
  data-href="https://www.facebook.com/barackobama/">
</amp-facebook-page>

好きな友達のプロフィール写真を表示(data-show-facepile)

<amp-facebook-page width="300" height="300"
  layout="fixed"
  data-adapt-container-width="true"
  data-show-facepile="true"
  data-href="https://www.facebook.com/itsdougthepug">
</amp-facebook-page>

Facebookの投稿や動画を表示

説明

Facebookの投稿や動画を表示

使い方

<amp-facebook 属性>
</amp-facebook>

必要なスクリプト

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

属性

属性名 説明 デフォルト値
data-href(必須) コンテンツのURL  
height(必須) 高さ  
width(必須) 横幅  
data-embed-as コンテンツの種類。投稿(post)、動画(video)、コメント(comment) post
data-include-comment-parent コメントの返信を表示するか false
data-align-center 中央揃えにするか false
data-locale ロケール  
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの  
heights メディア式に基づいた要素の縦サイズ  
layout レイアウト  
media メディア属性  
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF  
on イベントの実行用  
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)  
sizes メディア式に基づいた要素の横サイズ  
width 横幅  
height 高さ  

レイアウト

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

基本的な使い方

<amp-facebook
  width=486
  height=657
  layout="responsive"
  data-href="https://www.facebook.com/zuck/posts/10102593740125791">
</amp-facebook>

ロケール(data-locale)

<amp-facebook
  width=486
  height=657
  layout="responsive"
  data-href="https://www.facebook.com/zuck/posts/10102593740125791"
  data-locale="fr_FR">
</amp-facebook>

動画(video)

<amp-facebook
  width=552
  height=574
  layout="responsive"
  data-embed-as="video"
  data-href="https://www.facebook.com/zuck/videos/10102509264909801/">
</amp-facebook>

コメント(comment)

<amp-facebook
  width=552
  height=200
  layout="responsive"
  data-embed-as="comment"
  data-include-parent="true"
  data-href="https://www.facebook.com/zuck/posts/10102735452532991?comment_id=717538375088203">
</amp-facebook>

中央揃え(data-align-center)

<amp-facebook
  width=552
  height=350
  layout="responsive"
  data-href="https://www.facebook.com/notes/facebook-engineering/under-the-hood-the-javascript-sdk-truly-asynchronous-loading/10151176218703920/"
  data-align-center="true">
</amp-facebook>

テキストのフォントを自動で調整して表示

説明

テキストのフォントを自動で調整して表示

使い方

<amp-fit-text 属性>
</amp-fit-text>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-fit-text
  layout="responsive"
  height="200"
  width="200">
  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt
</amp-fit-text>

最大のフォントサイズ(max-font-size)

<amp-fit-text
  max-font-size="22"
  layout="responsive"
  height="200"
  width="200">
  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt
</amp-fit-text>

最小のフォントサイズ(min-font-size)

<amp-fit-text
  min-font-size="40"
  layout="responsive"
  height="200"
  width="200">
  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt
</amp-fit-text>

Webフォント読み込み時の設定

説明

Web フォント読み込み時の設定

使い方

<amp-font 属性>
</amp-font>

必要なスクリプト

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

属性

属性名 説明
font-family Webフォント名
timeout タイムアウト時間
on-load-add-class ロード時にドキュメントルートに追加されるCSSクラス名
on-load-remove-class ロード時にドキュメントルートから削除されるCSSクラス名
on-error-add-class タイムアウト時にドキュメントルートに追加されるCSSクラス名
on-error-remove-class タイムアウト時にドキュメントルートから削除されるCSSクラス名
font-weight フォントの太さ
font-style フォントのスタイル
font-variant フォントのスモールキャップ
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

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

基本的な使い方

<amp-font
  layout="nodisplay"
  font-family="My Font"
  timeout="3000"
  on-error-remove-class="my-font-loading"
  on-error-add-class="my-font-missing">
</amp-font>

on-load-add-class

<amp-font
  layout="nodisplay"
  font-family="Comic AMP"
  timeout="2000"
  on-error-remove-class="comic-amp-font-loading"
  on-error-add-class="comic-amp-font-missing"
  on-load-remove-class="comic-amp-font-loading"
  on-load-add-class="comic-amp-font-loaded">
</amp-font>

フォントの太さ(font-weight)

<amp-font
  layout="nodisplay"
  font-family="Comic AMP Bold"
  timeout="3000"
  font-weight="bold"
  on-error-remove-class="comic-amp-bold-font-loading"
  on-error-add-class="comic-amp-bold-font-missing"
  on-load-remove-class="comic-amp-bold-font-loading"
  on-load-add-class="comic-amp-bold-font-loaded">
</amp-font>

高機能な入力フォームを表示

説明

高機能な入力フォームを表示

使い方

<amp-form 属性>
</amp-form>

必要なスクリプト

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

属性

属性名 説明
target フォームの送信後に回答を表示する場所
action フォームの入力を処理するサーバのURL
action-xhr(POST の場合は必須) フォームの入力を処理し、XMLHttpRequestで送信するサーバーのURL
accept-charset サーバが使える文字エンコーディングのリスト
autocomplete ブラウザーによる値の入力補完を受けるか
enctype コンテンツのMIMEタイプ
method HTTPメソッド
name フォームの名前
novalidate 送信するときに検証しない
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

基本的な使い方

<form method="post" action-xhr="/form/echo-json/post" target="_blank">
  <textarea name="textarea-ctrl-submit">Press Ctrl+Enter to submit this text</textarea><br>
  <input name="submit-button" type="submit" value="Submit" />
  <div submit-success>
    <template type="amp-mustache">
      Success! 
    </template>
  </div>
</form>

GET

<form method="get" action="/form/search-html/get" target="_blank">
  <fieldset>
    <label>
      <span>Search for</span>
      <input type="search" name="term" required>
    </label>
    <input name="submit-button" type="submit" value="Search">
  </fieldset>
</form>

Bind

<amp-state id="ampBindStateGetNonXhrSameOrigin">
  <script type="application/json">
    "Not Changed"
  </script>
</amp-state>
<form id="amp-bind-form-get-non-xhr-same-origin" method="get" action="/form/search-html/get" target="_blank">
  <fieldset>
    <input name="clientId" type="hidden" value="CLIENT_ID(poll)" data-amp-replace="CLIENT_ID">
    <input name="canonicalUrl" type="hidden" value="RANDOM and CANONICAL_URL" data-amp-replace="CANONICAL_URL RANDOM">
    <label>
      <span>Search for</span>
      <input type="search" name="term" required>
    </label>
    <input hidden type="text" name="ampBind" [value]="ampBindStateGetNonXhrSameOrigin">
  </fieldset>
  <button type="button" on="tap:AMP.setState({ ampBindStateGetNonXhrSameOrigin: 'Changed Amp Bind State for ampBindStateGetNonXhrSameOrigin' }), amp-bind-form-get-non-xhr-same-origin.submit">
    Submit AMP Bind Search
  </button>
</form>

events

<div id="msg">This message will hide when the form is submitted</div>
<form method="post"
  action-xhr="/form/echo-json/post"
  target="_blank"
  on="submit:msg.hide;submit-success:success-lightbox;submit-error:error-lightbox">
  <fieldset>
    <label>
        <span>Your name</span>
        <input type="text" name="name" id="name3" required>
    </label>
    <label>
        <span>Your email</span>
        <input type="email" name="email" id="email3" required>
    </label>
    <input name="submit-button" type="submit" value="Subscribe">
  </fieldset>
  <div class="form-message invalid-message">
    There are some input that needs fixing. Please fix them.
  </div>
  <div class="form-message valid-message">
    Everything looks good, you can submit now!
  </div>
  <div class="form-message submitting-message">
    Please hold on while we submit your answer!
  </div>
  <div submit-success>
    <template type="amp-mustache">
      Success! Thanks  for subscribing! Please make sure to check your email 
      to confirm!
    </template>
  </div>
  <div submit-error>
    <template type="amp-mustache">
      Oops! , We apologies something went wrong. Please try again later.
    </template>
  </div>
</form>

フェードイン・フェードアウトのような視覚効果のエフェクトを設定

説明

フェードイン・フェードアウトのような視覚効果のエフェクトを設定
任意の要素に付与できる属性が追加させる

使い方

<任意のタグ amp-fx="視覚効果の種類" 属性>
</任意のタグ>

必要なスクリプト

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

視覚効果の種類

名前 説明
parallax 視差
fade-in フェードイン
fade-in-scroll フェードインスクロール
float-in-top 上のスクロール
float-in-bottom 下にスクロール
fly-in-bottom 下に移動
fly-in-left 左に移動
fly-in-right 右に移動
fly-in-top 上に移動
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

parallax の属性

属性名 説明
data-parallax-factor スクロール速度

fade-in の属性

属性名 説明
data-duration アニメーションが行われる期間
data-easing アニメーションの継続時間全体にわたって変化
data-margin-start アニメーションの実行タイミング

fade-in-scroll の属性

属性名 説明
data-margin-start アニメーションの実行タイミング
data-margin-end アニメーションの終了タイミング
data-repeat 繰り返し

fly-in-bottom の属性

属性名 説明
data-duration アニメーションが行われる期間
data-easing アニメーションの継続時間全体にわたって変化
data-fly-in-distance 移動距離
data-margin-start アニメーションの実行タイミング

fly-in-left の属性

属性名 説明
data-duration アニメーションが行われる期間
data-easing アニメーションの継続時間全体にわたって変化
data-fly-in-distance 移動距離
data-margin-start アニメーションの実行タイミング

fly-in-right の属性

属性名 説明
data-duration アニメーションが行われる期間
data-easing アニメーションの継続時間全体にわたって変化
data-fly-in-distance 移動距離
data-margin-start アニメーションの実行タイミング

fly-in-top の属性

属性名 説明
data-duration アニメーションが行われる期間
data-easing アニメーションの継続時間全体にわたって変化
data-fly-in-distance 移動距離
data-margin-start アニメーションの実行タイミング

視差(parallax)

<div amp-fx="parallax" data-parallax-factor="0.8"></div>

画像

<amp-img amp-fx="parallax" data-parallax-factor="1.2" width="20" height="20" layout="responsive" src="https://example.com"></amp-img>

h1

<h1 amp-fx="parallax"></h1>

フェードイン(fade-in)

<div amp-fx="fade-in"></div>

フェードインスクロール(fade-in-scroll)

<amp-img amp-fx="fade-in-scroll" width="20" height="20" layout="responsive" src="https://example.com"></amp-img>

下に移動(fly-in-bottom)

<h1 amp-fx="fly-in-bottom"></h1>

左に移動(fly-in-left)

<h1 amp-fx="fly-in-left"></h1>

右に移動(fly-in-right)

<h1 amp-fx="fly-in-right"></h1>

上に移動(fly-in-top)

<h1 amp-fx="fly-in-top"></h1>

複数指定

<amp-img amp-fx="fade-in parallax" width="20" height="20" layout="responsive" src="https://example.com"></amp-img>

上のスクロール

<h1 amp-fx="float-in-top"></h1>

下のスクロール

<h1 amp-fx="float-in-bottom"></h1>

フライングカーペットを表示

説明

フライングカーペット(フルスクリーンで画面を表示するUI)を表示

使い方

<amp-fx-flying-carpet 属性>
</amp-fx-flying-carpet>

必要なスクリプト

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

属性

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

基本的な使い方

<amp-fx-flying-carpet height="300px">
  <amp-img src="fullscreen.png" width="100vw" height="100vh"></amp-img>
</amp-fx-flying-carpet>

地理位置情報インターフェイス

説明

地理位置情報インターフェイス

使い方

<amp-geo layout="nodisplay">
</amp-geo>

必要なスクリプト

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

レイアウト

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

基本的な使い方

<amp-geo layout="nodisplay">
  <script type="application/json">
  {
    "ISOCountryGroups": {
      "soccer": [ "au", "ca", "ie", "nz", "us", "za" ],
      "football": [ "unknown" ]
    }
  }
  </script>
</amp-geo>

Gfycat Videoの動画プレーヤーを表示

説明

Gfycat Videoの動画プレーヤーを表示

使い方

<amp-gfycat 属性>
</amp-gfycat>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-gfycat
  data-gfyid="TautWhoppingCougar"
  width="640"
  height="360"
  layout="responsive">
</amp-gfycat>

自動再生しない(noautoplay)

<amp-gfycat
  data-gfyid="LeanMediocreBeardeddragon"
  width="640"
  height="360"
  noautoplay>
</amp-gfycat>

iframeを作成しGitHubからGistを表示

説明

iframeを作成しGitHubからGistを表示

使い方

<amp-gist 属性>
</amp-gist>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-gist
  layout="fixed-height"
  height="241"
  data-gistid="b9bb35bc68df68259af94430f012425f">
</amp-gist>

データファイル(data-file)

<amp-gist
  data-file="hi.c"
  layout="fixed-height"
  height="197"
  data-gistid="a19e811dcd7df10c4da0931641538497">
</amp-gist>

Googleドライブでサポートされているドキュメントファイルを表示

説明

Googleドライブでサポートされているドキュメントファイルを表示

使い方

<amp-google-document-embed 属性>
</amp-google-document-embed>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-google-document-embed
  src="https://www.example.com/document.pdf"
  width="800"
  height="600">
</amp-google-document-embed>

layout

<amp-google-document-embed
  layout="responsive"
  src="https://www.example.com/document.pdf"
  width="800"
  height="600">
</amp-google-document-embed>

Huluの動画を表示

説明

Huluの動画を表示

使い方

<amp-hulu 属性>
</amp-hulu>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-hulu
  layout="responsive"
  width="412"
  height="213"
  data-eid="4Dk5F2PYTtrgciuvloH3UA">
</amp-hulu>

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

説明

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

使い方

<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>

IMA SDKに統合されているインストリーム動画広告用の動画プレーヤーを表示

説明

IMA SDKに統合されているインストリーム動画広告用の動画プレーヤーを表示

使い方

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

必要なスクリプト

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

属性

属性名 説明
data-tag(必須) VAST広告ドキュメントのURL
data-src ビデオコンテンツの RL
data-crossorigin クロスホストを許可するか
data-poster ビデオの再生が開始される前に表示されるフレームの画像
data-delay-ad-request 広告リクエストを遅延
data-ad-label 広告の再生時に広告を表示するために使用
dock 最小化するか
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

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

基本的な使い方

<amp-ima-video
  width=640
  height=360
  layout="responsive"
  autoplay
  data-src="https://s0.2mdn.net/4253510/google_ddm_animation_480P.mp4"
  data-tag="https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator="
  data-poster="path/to/poster.png">
</amp-ima-video>

画像専用のライトボックスを表示

説明

画像専用のライトボックスを表示

使い方

<amp-image-lightbox 属性>
</amp-image-lightbox>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-image-lightbox
  id="lightbox1"
  layout="nodisplay">
</amp-image-lightbox>
<amp-img on="tap:lightbox1"
  role="button"
  tabindex="0"
  src="image1.jpg"
  width="200" height="100">
</amp-img>

閉じるボタンに使用するラベル(data-close-button-aria-label)

<amp-image-lightbox
  data-close-button-aria-label="Close"
  id="image-lightbox1"
  layout="nodisplay">
</amp-image-lightbox>

2つの画像を比較するスライダーを表示

説明

2 つの画像を比較するスライダーを表示

使い方

<amp-image-slider 属性>
</amp-image-slider>

必要なスクリプト

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

属性

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

アクション

アクション名 説明
seekTo スライダーバーを移動したら実行

レイアウト

レイアウト名 説明
fixed 指定した横幅と高さで固定
intrinsic 指定したアスペクト比に自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-image-slider
  tabindex="0"
  layout="responsive"
  width="1024"
  height="600">
  <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
</amp-image-slider>

ヒントを再表示しない(disable-hint-reappear)

<amp-image-slider
  disable-hint-reappear
  class="hint-hidden"
  tabindex="0"
  layout="responsive"
  width="1024"
  height="600">
  <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
  <div first class="label">BEFORE</div>
  <div second class="label">AFTER</div>
</amp-image-slider>

画像を表示

説明

画像を表示
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>

Imgurの投稿を表示

説明

Imgurの投稿を表示

使い方

<amp-imgur 属性>
</amp-imgur>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-imgur
  data-imgur-id="2CnX7"
  height="480"
  width="640"
  layout="responsive">
</amp-imgur>

説明

ページネーションドットやサムネイルを付与したカルーセルを表示

使い方

<amp-inline-gallery 属性>
</amp-inline-gallery>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-inline-gallery layout="container">
  <div>
    <amp-inline-gallery-thumbnails layout="fixed-height" height="96">
    </amp-inline-gallery-thumbnails>
  </div>
</amp-inline-gallery>

ratio specified

<amp-inline-gallery layout="container">
  <amp-inline-gallery-thumbnails layout="fixed-height" height="96" aspect-ratio-height="2.0" aspect-ratio-width="3">
  </amp-inline-gallery-thumbnails>
</amp-inline-gallery>

loop

<amp-inline-gallery layout="container">
  <amp-inline-gallery-thumbnails layout="fixed-height" height="96" loop="true">
  </amp-inline-gallery-thumbnails>
</amp-inline-gallery>

入力マスキング機能

説明

入力マスキング機能

必要なスクリプト

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

属性

属性名 説明
mask 入力要素に適用するマスクを指定
mask-trim-zeros マスクが貼り付けられた値からカスタムマスクに削除するゼロの数を指定
mask-output フォームが入力値を送信する方法を指定
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

サポートされている要素

  • input[type=text]
  • input[type=tel]
  • input[type=search]

基本的な使い方

<input mask="L0L_0L0">

フォームが入力値を送信する方法を指定(mask-output)

<input mask="L0L_0L0" mask-output="raw">

マスクが貼り付けられた値からカスタムマスクに削除するゼロの数を指定(mask-trim-zeros)

<input mask="00000" mask-trim-zeros="0" type="tel">

Instagramの投稿を表示

説明

Instagramの投稿を表示

使い方

<amp-instagram 属性>
</amp-instagram>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-instagram
  data-shortcode="fBwFP"
  width="381"
  height="381"
  layout="responsive">
</amp-instagram>

data-captioned

<amp-instagram
  data-captioned
  data-shortcode="BR3g5NDBvBu"
  data-default-framing
  width="500"
  height="500"
  layout="responsive">
  <div overflow>Show Caption</div>
</amp-instagram>

ServiceWorkerを埋め込む

説明

ServiceWorkerを埋め込む

使い方

<amp-install-serviceworker 属性>
</amp-install-serviceworker>

必要なスクリプト

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

属性

属性名 説明
src(必須) ServiceWorkerのURL
data-iframe-src インストールするHTMLドキュメントのURL
data-scope スコープ
layout レイアウト
data-no-service-worker-fallback-url-match 書き換えられるURLに一致する正規表現
data-no-service-worker-fallback-shell-url 書き換えるために使用するシェルのURL
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

基本的な使い方

<amp-install-serviceworker
  src="https://www.your-domain.com/serviceworker.js"
  data-iframe-src="https://www.your-domain.com/install-serviceworker.html"
  layout="nodisplay">
</amp-install-serviceworker>

Izleseneの動画を表示

説明

Izleseneの動画を表示

使い方

<amp-izlesene 属性>
</amp-izlesene>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-izlesene
  data-videoid="7221390"
  width="480"
  height="270">
</amp-izlesene>

レイアウト

<amp-izlesene
  layout="responsive"
  data-videoid="7221390"
  width="480"
  height="270"></amp-izlesene>

JW Playerの動画プレーヤーを表示

説明

JW Playerの動画プレーヤーを表示

使い方

<amp-jwplayer 属性>
</amp-jwplayer>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-jwplayer
  data-player-id="BjcwyK37"
  data-media-id="BZ6tc0gy"
  layout="responsive"
  width="160" height="90">
</amp-jwplayer>

data-content-searchとdata-content-backfill

<amp-jwplayer
  data-content-search="__CONTEXTUAL__"
  data-content-backfill=true
  data-player-id="BjcwyK37"
  data-media-id="BZ6tc0gy"
  layout="responsive" width="160" height="90">
</amp-jwplayer>

Kalturaの動画プレーヤーを表示

説明

Kalturaの動画プレーヤーを表示

使い方

<amp-kaltura-player 属性>
</amp-kaltura-player>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-kaltura-player
  data-uiconf="33502051"
  data-partner="1281471"
  data-entryid="1_3ts1ms9c"
  data-param-streamerType = "auto"
  layout="responsive" width="480" height="270">
</amp-kaltura-player>

レスポンシブレイアウト

説明

レスポンシブレイアウト

使い方

<amp-layout 属性>
</amp-layout>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-layout
  layout="responsive"
  width="2"
  height="1">
  This `amp-layout` acts like a `div` that always keeps a `2x1` aspect ratio.
</amp-layout>

説明

閉じるまで表示されるライトボックスを表示

使い方

amp-img

<amp-img lightbox amp-imgの属性></amp-img>
<amp-carousel lightbox amp-carouselの属性></amp-carousel>

必要なスクリプト

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

基本的な使い方

<amp-img
  src="/awesome.png"
  width="300"
  height="300"
  lightbox>
</amp-img>

amp-video

<amp-video
  lightbox
  src="../av/ForBiggerJoyrides-short.mp4"
  width="720"
  height="405"
  layout="responsive"
  controls>
</amp-video>

amp-youtube

<amp-youtube
  lightbox
  data-videoid="lBTCB7yLs8Y"
  width="358"
  height="204"
  layout="responsive">
</amp-youtube>
<amp-carousel
  width=400
  height=300
  layout="responsive"
  type=slides
  lightbox>
</amp-carousel>

ライトボックスを表示

説明

ライトボックスを表示

使い方

<amp-lightbox 属性>
</amp-lightbox>

必要なスクリプト

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

属性

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

アクション

アクション名 説明
open ライトボックスを開く
close ライトボックスを閉じる

レイアウト

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

基本的な使い方

<amp-lightbox
  id="lb-0"
  layout="nodisplay">
</amp-lightbox>

アニメーションのスタイル(animate-in)

<amp-lightbox
  id="lb-3"
  layout="nodisplay"
  animate-in="fly-in-bottom">
</amp-lightbox>

閉じるボタン

<amp-lightbox
  scrollable
  id="lightbox-scrollable"
  layout="nodisplay"
  animate-in="fly-in-bottom">
  <button on="tap:lightbox-scrollable.close" class="lightbox-close-button">
    Close Scrollable Lightbox
  </button>
  <p class="fixed">
    <amp-img src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w300-h200-no" width=300 height=200></amp-img>
  </p>
</amp-lightbox>

開くボタン

<amp-lightbox
  scrollable
  id="lightbox-scrollable"
  layout="nodisplay"
  animate-in="fly-in-bottom">
  <p class="fixed">
    <amp-img src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w300-h200-no" width=300 height=200></amp-img>
  </p>
</amp-lightbox>
<button on="tap:lightbox-scrollable">
  Open Scrollable Lightbox
</button>

説明

パターンに基づいて URL を書き換える

使い方

<amp-link-rewriter 属性>
  <script type="application/json">
    設定
  </script>
</amp-link-rewriter>

必要なスクリプト

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

属性

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

JSON の設定

名前 説明
output(必須) URL
section URL書き換えが動作する領域
attribute フィルター処理されたセクションから取得されたアンカー要素に一致するルール

レイアウト

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

基本的な使い方

<amp-link-rewriter layout="nodisplay">
  <script type="application/json">
    {
      "output": "https://visit.foo.net?pid=110&url=${href}&cid=${data.customerId}&mid=${data.merchantId}&ref=DOCUMENT_REFERRER&location=SOURCE_URL&rel=${rel}",
      "section": [
        "#track-section"
      ],
      "attribute": {
        "href": "((?!\bskip\\.com\b).)*",
        "class": "content"
      },
      "vars": {
        "customerId": "12345",
        "merchantId": "3234"
      }
    }
  </script>
</amp-link-rewriter>

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

説明

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

使い方

<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-mega-menu 属性>
</amp-mega-menu>

必要なスクリプト

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

属性

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

含められるタグ

  • <h1>、<h2>、<h3>、<h4>、<h5>、<h6>
  • <a>
  • <button>
  • <span>
  • <div>

レイアウト

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

基本的な使い方

<amp-mega-menu layout="fixed-height" height="80">
  <nav>
    <ul>
      <li>
        <button>item</button>
        <div role="dialog">
          <ul>
            <li><div role="menu"></div></li>
          </ul>
        </div>
      </li>
      <li>
        <a>link</a>
      </li>
    </ul>
  </nav>
</amp-mega-menu>

テンプレートあり(template)

<amp-mega-menu layout="fixed-height" height="80">
  <amp-list layout="fill" src=".">
    <template type="amp-mustache">
      <nav>
        <ul>
          
          <li>
            <div role="button"></div>
            <div role="dialog"></div>
          </li>
          
        </ul>
      </nav>
    </template>
  </amp-list>
</amp-mega-menu>

Megaphone.fmポッドキャストエピソードまたはプレイリストを表示

説明

Megaphone.fmポッドキャストエピソードまたはプレイリストを表示

使い方

<amp-megaphone 属性>
</amp-megaphone>

必要なスクリプト

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

属性

属性名 説明
data-episode Megaphone.fm ID
data-playlist プレイリストのMegaphone.fm ID
data-start エピソードを開始する時間(秒)
data-episodes 表示するエピソードの数
data-tile モード
data-light テーマ
data-sharing 共有ボタン
width 横幅
height 高さ
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ

レイアウト

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

基本的な使い方

<amp-megaphone
  height="166"
  layout="fixed-height"
  data-episode="OSC7749686951"
  data-light>
</amp-megaphone>

エピソードを開始する時間(data-start)

<amp-megaphone
  data-start="56"
  height=166
  data-episode="OSC7749686951"
  layout="fixed-height">
</amp-megaphone>

ミニッツメディアプレーヤーを表示

説明

ミニッツメディアプレーヤーを表示

使い方

<amp-minute-media-player 属性>
</amp-minute-media-player>

必要なスクリプト

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

属性

属性名 説明
data-content-type Minute Mediaプレーヤーのタイプ
data-content-id Minute MediaプレーヤーID
data-scanned-element-type 特性
data-scanned-element 選択されたスキャン要素タイプ
data-tags タグ
data-minimum-date-factor 最後の日数
data-scoped-keywords タグ
autoplay 自動再生
dock 最小化
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

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

基本的な使い方

<amp-minute-media-player
  data-content-type="curated"
  data-content-id="fSkmeWKF"
  width="500"
  height="334"
  layout="responsive"
  autoplay>
</amp-minute-media-player>

Mow Playerを表示

説明

Mow Playerを表示

使い方

<amp-mowplayer 属性>
</amp-mowplayer>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-mowplayer
    data-mediaid="v-myfwarfx4tb"
    layout="responsive"
    width="16"
    height="9">
  </amp-mowplayer>

Mustache形式のテンプレートを表示

説明

Mustache形式のテンプレートを表示

使い方

テンプレート

<template type="amp-mustache">
</template>

script

<script type="text/plain" template="amp-mustache">
</script>

必要なスクリプト

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

amp-list

<amp-list
  width="auto"
  height="100"
  layout="fixed-height"
  src="/example.json">
  <template type="amp-mustache">
    <amp-analytics>
      <script type="application/json">
        \{\{\{ json_data \}\}\}
      </script>
    <amp-analytics/>
  </template>
</amp-list>

template

<template type="amp-mustache">
  <div>
    <script type="text/plain" template="amp-mustache">
      Nested Template script tags are not allowed.
    </script>
  </div>
</template>

タップするとネストされたサブメニューを開くメニューを表示

説明

タップするとネストされたサブメニューを開くメニューを表示

使い方

<amp-nested-menu 属性>
</amp-nested-menu>

必要なスクリプト

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

属性

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

アクション

アクション名 説明
reset 開いているサブメニューをすべて閉じて、ルートメニューに戻る

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整

基本的な使い方

<amp-sidebar layout="nodisplay">
  <amp-nested-menu layout="fill" side="left">
    <ul>
      <li>
        <div amp-nested-submenu-open>open submenu 1</div>
        <div amp-nested-submenu>
          <div amp-nested-submenu-close>close submenu 1</div>
          <amp-img layout="fill" src="img"></amp-img>
        </div>
      </li>
      <li>
        <h2 amp-nested-submenu-open>open submenu 2</h2>
        <div amp-nested-submenu>
          <h2 amp-nested-submenu-close>close submenu 2</h2>
          <amp-accordion></amp-accordion>
        </div>
      </li>
    </ul>
  </amp-nested-menu>
</amp-sidebar>

dynamic template

<amp-sidebar layout="nodisplay">
  <amp-list layout="fill" src="list" single-item>
    <template type="amp-mustache">
      <amp-nested-menu layout="fill">
        \{\{#items\}\}
        <div>
          <h4 amp-nested-submenu-open>\{\{name\}\}</h4>
          <div amp-nested-submenu>
            <button amp-nested-submenu-close>back</button>
            <a href="\{\{link\}\}">link</a>
          </div>
        </div>
        \{\{/items\}\}
      </amp-nested-menu>
    </template>
  </amp-list>
</amp-sidebar>

ページを先行でロード

説明

ページを先行でロード

使い方

<amp-next-page 属性>
</amp-next-page>

必要なスクリプト

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

属性

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

基本的な使い方

<amp-next-page src="https://foo.com/data.json">
  <div separator>
    READ ANOTHER ARTICLE FROM OUR SITE!
  </div>
</amp-next-page>

nexxOMNIAプラットフォームからのメディアストリームを表示

説明

nexxOMNIAプラットフォームからのメディアストリームを表示

使い方

<amp-nexxtv-player 属性>
</amp-nexxtv-player>

必要なスクリプト

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

属性

属性名 説明
data-mediaid(必須) 再生するメディアのID
data-client(必須) ドメインID
data-streamtype メディアストリーミングタイプ
data-seek-to メディアの開始点
data-mode データモード
data-origin ドメインメディア
data-disable-ads 広告を有効になっているか
data-streaming-filter ストリーミングフィルター
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

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

基本的な使い方

<amp-nexxtv-player
  data-mediaid="71QQG852413DU7J"
  data-client="761"
  data-streamtype="video"
  data-seek-to="2"
  data-mode="static"
  data-origin="https://embed.nexx.cloud/"
  data-disable-ads="1"
  data-streaming-filter="nxp-bitrate-2500"
  layout="responsive"
  width="480"
  height="270">
</amp-nexxtv-player>

AOL O2の動画プレーヤーを表示

説明

AOL O2 の動画プレーヤーを表示

使い方

<amp-o2-player 属性>
</amp-o2-player>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-o2-player
  data-pid="573d9bf1e4b02a3388f42c36"
  data-bcid="50d595ec0364e95588c77bd2"
  layout="responsive" width="480" height="270">
</amp-o2-player>

data-macros

<amp-o2-player
  data-pid="573d9bf1e4b02a3388f42c36"
  data-bcid="50d595ec0364e95588c77bd2"
  data-bid="573d9bd3e4b00df34e4325ed"
  data-macros="m.playertype=HTML5"
  layout="responsive" width="480" height="270">
</amp-o2-player>

Ooyalaの動画プレーヤーを表示

説明

Ooyalaの動画プレーヤーを表示

使い方

<amp-ooyala-player 属性>
</amp-ooyala-player>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-ooyala-player
  data-embedcode="Vxc2k0MDE6Y_C7J5podo3UDxlFxGaZrQ"
  data-pcode="5zb2wxOlZcNCe_HVT3a6cawW298X"
  data-playerid="6440813504804d76ba35c8c787a4b33c"
  width="640"
  height="360">
</amp-ooyala-player>

傾きと連動したアニメーション

説明

傾きと連動したアニメーション

使い方

<amp-orientation-observer 属性>
</amp-orientation-observer>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-orientation-observer
  layout="nodisplay">
</amp-orientation-observer>

on

<amp-orientation-observer
  beta-range="0 180"
  on="beta:clockAnim1.seekTo(percent=event.percent)"
  layout="nodisplay" smoothing="5">
</amp-orientation-observer>

インタラクティブコンテンツの表示

説明

インタラクティブコンテンツの表示

使い方

<amp-layout layout="responsive" width="4" height="3">
  <amp-pan-zoom 属性>
    <svg>
      ...
    </svg>
  </amp-pan-zoom>
</amp-layout>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-pan-zoom
  layout="responsive"
  width="1"
  height="1">
  <amp-img
    id="img0"
    src="/examples/img/sample.jpg"
    width="641"
    height="481"
    layout="fixed">
  </amp-img>
</amp-pan-zoom>

Pinterestのコンテンツを表示

説明

Pinterestのコンテンツを表示

使い方

<amp-pinterest 属性>
</amp-pinterest>

必要なスクリプト

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

保存ボタンの属性

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

フォローボタンの属性

属性名 説明
height(必須) 高さ
width(必須) 横幅
data-do(必須) コンテンツの種類
data-href フォロー対象のユーザーのURL
data-label フォローボタンのテキスト

ウィジェットの属性

属性名 説明
height(必須) 高さ
width(必須) 横幅
data-do(必須) コンテンツの種類
data-url(必須) コンテンツのURL
alt 代替テキスト

レイアウト

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

Save button

<amp-pinterest
  height="20"
  width="40"
  data-do="buttonPin"
  data-url="http://www.flickr.com/photos/kentbrew/6851755809/"
  data-media="http://farm8.staticflickr.com/7027/6851755809_df5b2051c9_z.jpg"
  data-description="Next stop: Pinterest">
</amp-pinterest>

Pin widget

<amp-pinterest
  width="245"
  height="330"
  data-do="embedPin"
  data-url="https://www.pinterest.com/pin/99360735500167749/">
</amp-pinterest>

Follow button

<amp-pinterest
  height="20"
  width="94"
  data-do="buttonFollow"
  data-href="https://www.pinterest.com/kentbrew/"
  data-label="Kent Brewster">
</amp-pinterest>

ページビューをカウントするための追跡ピクセルを設定

説明

サーバへデータを送信
ページビューの送信などに使われる

使い方

<amp-pixel 属性>
</amp-pixel>

属性

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

レイアウト

レイアウト名 説明
fixed 指定した横幅と高さで固定
nodisplay 要素が非表示

基本的な使い方

<amp-pixel
  src="https://foo.com/tracker/foo"
  layout="nodisplay">
</amp-pixel>

リンク先にアクセスする時のリファラーポリシー(referrerpolicy)

<amp-pixel
  src="https://foo.com/tracker/foo"
  layout="nodisplay"
  referrerpolicy="no-referrer">
</amp-pixel>

Playbuzzの動画プレーヤーを表示

説明

Playbuzzの動画プレーヤーを表示

使い方

<amp-playbuzz 属性>
</amp-playbuzz>

必要なスクリプト

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

属性

属性名 説明
src PlaybuzzアイテムのURL
data-item PlaybuzzアイテムのアイテムID
data-item-info 作成日、作成者名などのデータ情報を表示するかどうか
data-share-buttons 共有ボタンを表示するかどうか
data-comments ユーザーのコメントを表示するかどうか
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

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

data-item

<amp-playbuzz
  data-item="a6aa5a14-8888-4618-b2e3-fe6a30d8c51b"
  layout="responsive"
  height="300"
  width="300"
  data-item-info="false"
  data-share-buttons="false"
  data-comments="false">
</amp-playbuzz>

src

<amp-playbuzz
  src="https://www.playbuzz.com/HistoryUK/10-classic-christmas-movies"
  layout="responsive"
  height="300"
  width="300"
  data-item-info="false"
  data-share-buttons="false"
  data-comments="false">
</amp-playbuzz>

任意の位置でボタンの表示と非表示を切り替えるアニメーションを表示

説明

任意の位置でボタンの表示と非表示を切り替えるアニメーションを表示

使い方

<amp-position-observer 属性>
</amp-position-observer>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-position-observer
  layout="nodisplay">
</amp-position-observer>

on

<amp-position-observer
  on="enter:foo;exit:bar;scroll:baz(percent=event.percent)"
  layout="nodisplay">
</amp-position-observer>

Powrのプレーヤーを表示

説明

Powrのプレーヤーを表示

使い方

<amp-powr-player 属性>
</amp-powr-player>

必要なスクリプト

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

属性

属性名 説明
data-account(必須) アカウントID
data-player(必須) プレーヤーID
data-video ビデオID
data-terms 表示するページを説明するキーワード
data-referrer リファラー
data-param-* Powrへのパラメータ
autoplay 自動再生
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

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

基本的な使い方

<amp-powr-player
  data-account="12345"
  data-player="12345"
  data-video="12345"
  layout="responsive"
  width="480"
  height="270">
</amp-powr-player>

Beachfront Reachの動画プレーヤーを表示

説明

Beachfront Reachの動画プレーヤーを表示

使い方

<amp-reach-player 属性>
</amp-reach-player>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-reach-player
  data-embed-id="default"
  layout="responsive"
  width="560"
  height="315">
</amp-reach-player>

reCAPTCHA v3トークンをフォーム送信する設定を追加

説明

reCAPTCHA v3トークンをフォーム送信する設定を追加

使い方

<amp-recaptcha-input 属性>
</amp-recaptcha-input>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-reach-player
  data-embed-id="default"
  layout="responsive"
  width="560"
  height="315">
</amp-reach-player>

Red Bullの動画プレーヤーを表示

説明

Red Bullの動画プレーヤーを表示

使い方

<amp-redbull-player 属性>
</amp-redbull-player>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-redbull-player
  id="rbvideo"
  data-param-videoid="rrn:content:videos:3965a26c-052e-575f-a28b-ded6bee23ee1:en-INT"
  data-param-skinid="com"
  data-param-locale="en"
  height="360"
  width="640">
</amp-redbull-player>

Redditの投稿やコメントを表示

説明

Reddit の投稿やコメントを表示

使い方

<amp-reddit 属性>
</amp-reddit>

必要なスクリプト

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

属性

属性名 説明
data-embedtype(必須) タイプ
data-src(必須) 投稿またはコメントのパーマリンク
height(必須) 高さ
width(必須) 横幅
data-uuid コメント埋め込み用に提供されたUUID
data-embedcreated コメントの埋め込みの日時文字列
data-embedlive コメントの埋め込みの日時文字列
data-embedparent 埋め込みコメントを更新するかどうか
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ

レイアウト

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

投稿

<amp-reddit
  layout="responsive"
  width="300"
  height="400"
  data-embedtype="post"
  data-src="https://www.reddit.com/r/me_irl/comments/52rmir/me_irl/?ref=share&amp;ref_source=embed">
</amp-reddit>

コメント

<amp-reddit
  layout="responsive"
  width="400"
  height="400"
  data-embedtype="comment"
  data-src="https://www.reddit.com/r/sports/comments/54loj1/50_cents_awful_1st_pitch_given_a_historical/d8306kw"
  data-uuid="b1246282-bd7b-4778-8c5b-5b08ac0e175e"
  data-embedcreated="2016-09-26T21:26:17.823Z"
  data-embedparent="true"
  data-embedlive="true">
</amp-reddit>

Riddleコンテンツを表示

説明

Riddleコンテンツを表示

使い方

<amp-riddle-quiz 属性>
</amp-riddle-quiz>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-riddle-quiz
  layout="responsive"
  width="600"
  height="400"
  data-riddle-id="25799">
</amp-riddle-quiz>

独自のJavaScriptを実行

説明

独自の JavaScript を実行

使い方

<amp-script 属性>
</amp-script>

ローカル要素から読み込む

<head>
  <meta
    name="amp-script-src"
    content="スクリプトハッシュ"/>
</head>
<amp-script width="200" height="50" script="ID">
</amp-script>
<script id="ID" type="text/plain" target="amp-script">
</script>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-script
  layout=container
  src="/examples/amp-script/amp-script-demo.js">
  <button id="hello">Insert Hello World!</button>
</amp-script>

ローカルスクリプト

<amp-script
  script="local-script"
  width=300
  height=20>
  Should say "Hi there!".
</amp-script>
<script
  id="local-script"
  type="text/plain"
  target="amp-script">
  document.body.textContent = 'Hi there!';
</script>

サンドボックス(sandbox)

<amp-script
  sandbox="allow-forms"
  width=300
  height=20
  script="sandbox-allow-forms">
  Should add an input field.
</amp-script>
<script
  type="text/plain"
  target="amp-script"
  id="sandbox-allow-forms">
  document.body.appendChild(document.createElement('input'));
</script>

localStorage

<amp-script
  width=300
  height=40
  script="local-storage"
  sandbox="allow-forms">
  <input id=input type=text>
</amp-script>
<script type="text/plain" target="amp-script" id="local-storage">
  const input = document.querySelector('#input');
  const output = document.querySelector('#output');
  const get = document.querySelector('#get');
  const set = document.querySelector('#set');
  const remove = document.querySelector('#remove');
  const clear = document.querySelector('#clear');
  input.addEventListener('change', () => {});
  get.addEventListener('click', () => {
    output.value = input.value ? localStorage.getItem(input.value) : JSON.stringify(localStorage);
  });
  set.addEventListener('click', () => {
    const tuple = input.value.split('=');
    localStorage.setItem(tuple[0], tuple[1]);
  });
  remove.addEventListener('click', () => {
    localStorage.removeItem(input.value);
  });
  clear.addEventListener('click', () => {
    localStorage.clear();
  });
</script>

Canvas

<amp-script width=300 height=120 src="/examples/amp-script/canvas.js">
  <canvas id="canvas"></canvas>
</amp-script>

amp-state

<p [text]="bar">Should read "123" after tapping button below.</p>
<button on="tap: AMP.setState({})">setState()</button>
<amp-script width=300 height=80 script="bind">
  <pre>AMP.setState({bar: 123})</pre>
  <pre>Prints AMP.getState('foo')</pre>
</amp-script>
<script type="text/plain" target="amp-script" id="bind">
  AMP.setState({bar: 123});
  AMP.getState('foo').then(state => console.log(state));
</script>
<amp-state id="foo">
  <script type=application/json>
    {
      "bar": "foobar"
    }
  </script>
</amp-state>

フォームの選択肢を表示

説明

フォームの選択肢を表示

使い方

<amp-selector 属性>
</amp-selector>

必要なスクリプト

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

属性

属性名 説明
disabled 使用不可能にする
form Form要素
multiple 複数選択可能
name パラメータ名
keyboard-select-mode キーボードナビゲーション動作
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

イベント

イベント名 説明
select ユーザーがオプションを選択したとき実行

レイアウト

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

基本的な使い方

<amp-selector
  class="sample-selector"
  layout="container">
  <ul>
    <li option="1">Option 1</li>
    <li option="2">Option 2</li>
  </ul>
</amp-selector>

複数選択可能

<amp-selector
  multiple
  layout="container"
  class="sample-selector">
  <ul>
    <li option="1">Option 1</li>
    <li option="2">Option 2</li>
  </ul>
</amp-selector>

アクション

<amp-selector
  id="actionsSample"
  layout="container"
  class="sample-selector"
  multiple>
  <ul>
    <li option="1">Option 1</li>
    <li option="2">Option 2</li>
  </ul>
</amp-selector>
<button on="tap:actionsSample.clear">clear</button>
<button on="tap:actionsSample.selectUp">selectUp</button>
<button on="tap:actionsSample.selectUp(delta=2)">selectUp(delta=2)</button>
<button on="tap:actionsSample.selectDown">selectDown</button>
<button on="tap:actionsSample.selectDown(delta=2)">selectDown(delta=2)</button>
<button on="tap:actionsSample.toggle(index=1)">toggle(index=1)</button>
<button on="tap:actionsSample.toggle(index=1, value=true)">toggle(index=1, value=true)</button>

サイドバーを表示

説明

サイドバーを表示

使い方

<amp-sidebar 属性>
</amp-sidebar>

必要なスクリプト

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

属性

属性名 説明
layout(必須) レイアウト
side ページのどちら側からサイドバーを開くのかを指定
open サイドバーが開いているときに存在
data-close-button-aria-label 閉じるボタンのARIAラベル
toolbar ツールバーを表示
toolbar-target 指定IDにツールバーを配置
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

アクション

アクション名 説明
open サイドバーを開く
close サイドバーを閉じる

toggle |サイドバーの状態を切り替る

レイアウト

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

ルール

  • amp-sidebarは、bodyの直接の子
  • サイドバーを表示できるのは、ページの左側または右側
  • サイドバーの最大高さは100vh。超えた場合は垂直スクロールバーが表示

基本的な使い方

<amp-sidebar id="sidebar1" layout="nodisplay" side="right">
  <ul>
    <li>Nav item 1</li>
    <li><a href="#idTwo" on="tap:idTwo.scrollTo">Nav item 2</a></li>
  </ul>
</amp-sidebar>

ツールバー

<amp-sidebar id="sidebar1" layout="nodisplay" side="right">
  <ul>
    <li>Nav item 1</li>
    <li><a href="#idTwo" on="tap:idTwo.scrollTo">Nav item 2</a></li>
  </ul>
  <nav toolbar="(max-width: 767px)" toolbar-target="target-element">
    <ul>
      <li>
        <input placeholder="Search..."/>
      </li>
    </ul>
  </nav>
</amp-sidebar>
<div id="target-element">
</div>

説明

スキムリンクを実行

使い方

<amp-skimlinks 属性>
</amp-skimlinks>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-skimlinks
  layout="nodisplay"
  publisher-code="123X456">
</amp-skimlinks>

説明

Narrativの機能を表示

使い方

<amp-smartlinks 属性>
</amp-smartlinks>

必要なスクリプト

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

属性

属性名 説明
nrtv-account-name(必須) Narrativアカウント名
linkmate Linkmateサービスを実行するためのフラグ
exclusive-links 排他的リンク
link-attribute URLを異なる要素属性に保存する場合
link-selector 収益化するすべてのリンクを取得
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

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

基本的な使い方

<amp-smartlinks
  layout="nodisplay"
  nrtv-account-name="supercoolpublisher"
  linkmate>
</amp-smartlinks>

属性あり

<amp-smartlinks
  layout="nodisplay"
  nrtv-account-name="examplepublisher"
  linkmate
  exclusive-links
  link-attribute="href"
  link-selector="a">
</amp-smartlinks>

ソーシャルシェアボタンを表示

説明

ソーシャルシェアボタンを表示

使い方

<amp-social-share 属性>
</amp-social-share>

必要なスクリプト

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

属性

属性名 説明
type(必須) プロバイダのタイプ
data-target ターゲットをどこに開くのか(_blank or _top)
data-share-endpoint 共有エンドポイントのURL
data-param-* 各サービスに渡すパラメータ
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

タイプ

タイプ名 説明
system Web Share API
email メール
facebook Facebook
linkedin LinkedIn
pinterest Pinterest
gplus Google+
tumblr Tumblr
twitter Twitter
whatsapp WhatsApp
line LINE
sms SMS

レイアウト

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

基本的な使い方

<amp-social-share type="twitter"></amp-social-share>

Email

<amp-social-share
  type="email"
  data-param-subject="Hello World"
  data-param-body="What's up?"
  data-param-recipient="sample@xyz.com"
  aria-label="Share by email">
</amp-social-share>

Twitter

<amp-social-share
  type="twitter"
  aria-label="Share to Twitter">
</amp-social-share>

Facebook

<amp-social-share
  type="facebook"
  data-param-text="Hello world"
  data-param-href="https://example.com/?ref=URL"
  data-param-app_id="145634995501895"
  aria-label="Share to Facebook">
</amp-social-share>

Line

<amp-social-share
  type="line"
  aria-label="Share to line">
</amp-social-share>

whatsapp

<amp-social-share
  type="whatsapp"
  aria-label="Share to Whatsapp">
</amp-social-share>

Pinterest

<amp-social-share
  type="pinterest"
  data-param-media="https://lh3.googleusercontent.com/qNn8GDz8Jfd-s9lt3Nc4lJeLjVyEaqGJTk1vuCUWazCmAeOBVjSWDD0SMTU7x0zhVe5UzOTKR0n-kN4SXx7yElvpKYvCMaRyS_g-jydhJ_cEVYmYPiZ_j1Y9de43mlKxU6s06uK1NAlpbSkL_046amEKOdgIACICkuWfOBwlw2hUDfjPOWskeyMrcTu8XOEerCLuVqXugG31QC345hz3lUyOlkdT9fMYVUynSERGNzHba7bXMOxKRe3izS5DIWUgJs3oeKYqA-V8iqgCvneD1jj0Ff68V_ajm4BDchQubBJU0ytXVkoWh27ngeEHubpnApOS6fcGsjPxeuMjnzAUtoTsiXz2FZi1mMrxrblJ-kZoAq1DJ95cnoqoa2CYq3BTgq2E8BRe2paNxLJ5GXBCTpNdXMpVJc6eD7ceijQyn-2qanilX-iK3ChbOq0uBHMvsdoC_LsFOu5KzbbNH71vM3DPkvDGmHJmF67Vj8sQ6uBrLnzpYlCyN4-Y9frR8zugDcqX5Q=w400-h300-no"
  aria-label="Share to Pinterest">
</amp-social-share>

Baidu

<amp-social-share
  type="baidu"
  layout="responsive"
  width="40"
  height="40"
  data-share-endpoint="http://cang.baidu.com/do/add"
  data-param-iu="CANONICAL_URL"
  data-param-it="TITLE"
  aria-label="Share to Baidu">
  B
</amp-social-share>

SMS

<amp-social-share
  type="sms"
  layout="responsive"
  width="40"
  height="40"
  aria-label="Share via SMS">
</amp-social-share>

パラメータを渡す

<amp-social-share
  type="linkedin"
  width="60"
  height="44"
  data-param-text="Hello world"
  data-param-url="https://example.com/">
</amp-social-share>

data-share-endpoint

<amp-social-share
  type="vote-this-up"
  layout="container"
  data-share-endpoint="https://example.com/vote-this-up"
  data-param-text="Check this out: TITLE - CANONICAL_URL">
  Share on Whatsapp
</amp-social-share>

サイドバー

<amp-sidebar layout="nodisplay">
  <amp-social-share
    type="vote-this-up"
    layout="container"
    data-share-endpoint="https://example.com/vote-this-up"
    data-param-text="Check this out: TITLE - CANONICAL_URL">
    Share on Whatsapp
  </amp-social-share>
</amp-sidebar>

Soundcloudの音声プレーヤーを表示

説明

Soundcloudの音声プレーヤーを表示

使い方

<amp-soundcloud 属性>
</amp-soundcloud>

必要なスクリプト

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

属性

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

レイアウト

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

Visual Mode

<amp-soundcloud
  width="480"
  height="480"
  layout="responsive"
  data-trackid="243169232"
  data-visual="true">
</amp-soundcloud>

Classic Mode

<amp-soundcloud
  width="480"
  height="480"
  layout="responsive"
  data-trackid="243169232"
  data-color="ff5500">
</amp-soundcloud>

Springboardの動画プレーヤーを表示

説明

Springboardの動画プレーヤーを表示

使い方

<amp-springboard-player 属性>
</amp-springboard-player>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-springboard-player
  data-site-id="261"
  data-mode="video"
  data-content-id="1578473"
  data-player-id="test401"
  data-domain="test.com"
  data-items="10"
  layout="responsive"
  width="480"
  height="270">
</amp-springboard-player>

画面下部に常時表示される広告を表示

説明

画面下部に常時表示される広告を表示

使い方

<amp-sticky-ad 属性>
</amp-sticky-ad>

必要なスクリプト

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

属性

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

レイアウト

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

ルール

  • amp-sticky-adは最大で1つ
  • amp-sticky-adは、直接の子要素に1つのamp-adが必須
  • 広告はページの下部に表示
  • 広告の高さは100px以下
  • amp-sticky-adの横幅は100%
  • amp-sticky-adの不透明度は1
  • amp-sticky-adの背景色は不透明
  • 広告はビューポート1つ分をスクロールした後に表示
  • 広告は一番下までスクロールしたら非表示
  • 横長モードの場合に広告は中央揃え
  • 広告がない場合は表示されない

基本的な使い方

<amp-sticky-ad layout=nodisplay>
  <amp-ad
    width=300
    height=250
    type="a9"
    data-aax_size="300x250"
    data-aax_pubname="test123"
    data-aax_src="302">
  </amp-ad>
</amp-sticky-ad>

ストーリー分析

説明

ストーリー分析

使い方

<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-auto-ads>
    <script type="application/json">
      {
        設定
      }
    </script>
  </amp-story-auto-ads>
</amp-story>

必要なスクリプト

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

トリガー

トリガー名 説明
story-ad-request 広告がリクエスト
story-ad-load 広告がロード
story-ad-insert 広告が挿入
story-ad-view 広告が表示
story-ad-click 広告のCTAボタンがクリッ
story-ad-exit ユーザーが広告を見ることをやめる
story-ad-discard 設定が無効なため、広告は破棄

変数

変数名 説明
adIndex トリガーを生成する広告のインデックス
adUniqueId ID
requestTime 広告がリクエストされたときのタイムスタンプ
loadTime 広告がINI_LOAD信号を発信するときのタイムスタンプ
insertTime 広告がストーリーに挿入されたときのタイムスタンプ
viewTime 広告ページがアクティブページになったときのタイムスタンプ
clickTime 広告がクリックされたときのタイムスタンプ
exitTime 広告ページがアクティブ・非アクティブから移動したときのタイムスタンプ
discardTime 不正なメタデータなどにより広告が破棄されたときのタイムスタンプ
position 親ストーリー内の位置
ctaType 挿入された広告のCTAタイプを指定

基本的な使い方

<amp-story-auto-ads>
  <script type="application/json">
    {
        "ad-attributes": {
          "type": "custom",
          "data-url": "./amp-story-auto-ads-payload.json"
        }
    }
  </script>
  <template type="amp-mustache" id="template-1">
    <amp-img class="fill-img" layout="fill" src=""></amp-img>
  </template>
</amp-story-auto-ads>

ストーリーページを表示

説明

ストーリーページを表示

使い方

<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>

Subscribe with Googleのサブスクリプションスタイルのアクセスプロトコルを実装

説明

Subscribe with Googleのサブスクリプションスタイルのアクセスプロトコルを実装

使い方

<script type="application/json" id="amp-subscriptions">
  {
    "services": [
      {
        // Local service configuration
      },
      {
        "serviceId": "subscribe.google.com"
      }
    ]
  }
</script>

必要なスクリプト

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

基本的な使い方

<script type="application/json" id="amp-subscriptions">
  {
    "services": [
      {
         // Local service configuration
        "authorizationUrl": "https://...",
        "pingbackUrl": "https://...",
        "actions":{
          "login": "https://...",
          "subscribe": "https://..."
        }
      },
      {
        "serviceId": "subscribe.google.com"
      }
    ]
  }
</script>
<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "NewsArticle",
    {...},
    "isAccessibleForFree": "False",
    "publisher": {
      "@type": "Organization",
      "name": "The Norcal Tribune",
      "logo": {...}
    },
    "hasPart": {
      "@type": "WebPageElement",
      "isAccessibleForFree": "False",
      "cssSelector" : ".paywall"
    },
    "isPartOf": {
      "@type": ["CreativeWork", "Product"],
      "name" : "The Norcal Tribune",
      "productID": "norcal_tribune.com:basic"
    }
  }
</script>

ペイウォールコンテンツを設定

説明

ペイウォールコンテンツを設定

使い方

JSON-LD

<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "NewsArticle",
    "isAccessibleForFree": false,
    "publisher": {
      "@type": "Organization",
      "name": "The Norcal Tribune"
    },
    "hasPart": {...},
    "isPartOf": {
      "@type": ["CreativeWork", "Product"],
      "name" : "The Norcal Tribune",
      "productID": "norcal_tribune.com:basic"
    }
  }
</script>

Microdata

<div itemscope itemtype="http://schema.org/NewsArticle">
  <meta itemprop="isAccessibleForFree" content="false" />
  <div
    itemprop="isPartOf"
    itemscope
    itemtype="http://schema.org/CreativeWork http://schema.org/Product">
    <meta itemprop="name" content="The Norcal Tribune" />
    <meta itemprop="productID" content="norcal_tribute.com:basic" />
  </div>
</div>

必要なスクリプト

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

日付をTwitterなどで使われる「3時間前」などのフォーマットに変換

説明

日付を Twitter などで使われる「3 時間前」などのフォーマットに変換

使い方

<amp-timeago 属性>
</amp-timeago>

必要なスクリプト

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

属性

属性名 説明
datetime 日付と時刻(ISO datetime)
locale ロケール
cutoff 指定された日付を秒単位で渡して表示
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

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

基本的な使い方

<amp-timeago
  layout="fixed"
  width="160"
  height="20"
  datetime="2017-04-11T00:37:33.809Z"
  locale="en"
  cutoff="8640000">
  Saturday 11 April 2017 00.37
</amp-timeago>

ロケール(locale)

<amp-timeago
  layout="fixed"
  width="160"
  height="20"
  datetime="2017-08-11T18:58:58.000Z"
  locale="fr" cutoff="8640000">
  Lundi 14 août 2017
</amp-timeago>

指定された日付を秒単位で渡して表示(cutoff)

<amp-timeago
  layout="fixed"
  width="160"
  height="20"
  datetime="2017-04-11T00:37:33.809Z">
  Saturday 11 April 2017 00.37
</amp-timeago>

長いテキストを省略記号で切り捨てて表示

説明

長いテキストを省略記号で切り捨てて表示

使い方

<amp-truncate-text 属性>
</amp-truncate-text>

必要なスクリプト

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

属性

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

レイアウト

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

子要素

要素名 説明
slot = “collapsed” 要素に切り捨てられたテキストがある場合に表示
slot = “expanded” 要素が展開されたときに表示
slot = “persistent” 常に表示

基本的な使い方

<amp-truncate-text
  layout="fixed"
  height="3em"
  width="20em">
  Some text that may get truncated.
  <button slot="collapsed">See more</button>
  <button slot="expanded">See less</button>
</amp-truncate-text>

overflow-style

<amp-truncate-text
  overflow-style="right"
  layout="fixed"
  width="150"
  height="80">
  Hello world
  <div slot="collapsed">Expand</div>
</amp-truncate-text>

Twitterのツイートを表示

説明

Twitterのツイートを表示

使い方

<amp-twitter 属性>
</amp-twitter>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-twitter
  width="375"
  height="472"
  layout="responsive"
  data-tweetid="885634330868850689">
</amp-twitter>

Moments

<amp-twitter
  width=486
  height=1312
  layout="responsive"
  data-momentid="1009149991452135424"
  data-limit="2">
</amp-twitter>

Timelines

<amp-twitter
  width=486
  height=1312
  layout="responsive"
  data-timeline-source-type="profile"
  data-timeline-screen-name="amphtml"
  data-tweet-limit="5">
</amp-twitter>

ユーザーに通知を表示

説明

ユーザーに通知を表示

使い方

<amp-user-notification 属性>
</amp-user-notification>

必要なスクリプト

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

属性

属性名 説明
data-show-if-href 通知を表示するかどうか
data-show-if-geo 国グループのリストのいずれかに一致した場合にのみ
data-show-if-not-geo 国グループが指定されたリストと一致しない場合にのみ
data-dismiss-href 指定したURLへのCORS POSTリクエストを送信
data-persist-dismissal 通知の却下を記憶しない
enctype エンコードタイプ
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

アクション

アクション名 説明
dismiss ユーザー通知を閉じる

レイアウト

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

基本的な使い方

<amp-user-notification
  layout=nodisplay
  id="amp-user-notification1"
  data-show-if-href="https://example.com/api/show?timestamp=TIMESTAMP"
  data-dismiss-href="https://example.com/api/echo/post">
  This site uses cookies to personalize content.
  <a href="#learn-more">Learn more.</a>
 <button on="tap:amp-user-notification1.dismiss">I accept</button>
</amp-user-notification>

通知を表示するかどうか(data-show-if-href)

<amp-user-notification
  layout=nodisplay
  id="amp-user-notification2"
  data-dismiss-href="https://example.com/api/echo/post">
  This site uses cookies to personalize content.
  <a href="#learn-more">Learn more.</a>
 <button on="tap:amp-user-notification1.dismiss">I accept</button>
</amp-user-notification>

指定したURLへのCORS POSTリクエストを送信(data-dismiss-href)

<amp-user-notification
  layout=nodisplay
  id="amp-user-notification3"
  data-show-if-href="https://example.com/api/show?timestamp=TIMESTAMP">
  This site uses cookies to personalize content.
  <a href="#learn-more">Learn more.</a>
 <button on="tap:amp-user-notification1.dismiss">I accept</button>
</amp-user-notification>

動画を最小化する機能を追加

説明

動画を最小化する機能を追加

使い方

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

必要なスクリプト

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

サポート

  • amp-brightcove
  • amp-dailymotion
  • amp-delight-player
  • amp-ima-video
  • amp-video
  • amp-video-iframe
  • amp-youtube

amp-youtube

<amp-youtube
  dock
  layout=fill
  width=300
  height=500
  data-videoid="dQw4w9WgXcQ">
</amp-youtube>

amp-brightcove

<amp-brightcove
  dock
  data-account="1290862519001"
  data-video-id="ref:amp-docs-sample"
  data-player-id="SyIOV8yWM"
  layout="responsive" width="480" height="270">
</amp-brightcove>

amp-dailymotion

<amp-dailymotion
  dock
  data-videoid="x2m8jpp" width="500" height="281">
</amp-dailymotion>

amp-delight-player

<amp-delight-player
  data-content-id="-LLoCCZqWi18O73b6M0w"
  layout="fixed"
  width="960"
  height="540"
  dock>
</amp-delight-player>

amp-ima-video

<amp-ima-video
  dock
  width=640 height=360 layout="responsive"
  data-src="https://s0.2mdn.net/4253510/google_ddm_animation_480P.mp4"
  data-tag="https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator="
  data-poster="path/to/poster.png">
</amp-ima-video>

amp-video-iframe

<amp-video-iframe
  dock
  layout=fill
  width=300
  height=500
  poster="https://foo.com/image.png"
  src="https://foo.com/video">
</amp-video-iframe>

amp-video

<amp-video
  dock
  layout=fill
  width=300
  height=500
  controls>
</amp-video>

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>

Vimeoの動画プレーヤーを表示

説明

Vimeoの動画プレーヤーを表示

使い方

<amp-vimeo 属性>
</amp-vimeo>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-vimeo
  data-videoid="27246366"
  width="500"
  height="281">
</amp-vimeo>

自動再生(autoplay)

<amp-vimeo
  data-videoid="27246366"
  width="500"
  height="281"
  layout="responsive"
  noloading
  autoplay>
</amp-vimeo>

noloading

<amp-vimeo
  data-videoid="27246366"
  width="500"
  height="281"
  layout="responsive"
  noloading="noloading">
</amp-vimeo>

Vineの動画プレーヤーを表示

説明

Vine の動画プレーヤーを表示

使い方

<amp-vine 属性>
</amp-vine>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-vine
  width="400"
  height="400"
  data-vineid="MdKjXez002d">
</amp-vine>

Viqeoの動画プレーヤーを表示

説明

Viqeoの動画プレーヤーを表示

使い方

<amp-viqeo-player 属性>
</amp-viqeo-player>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-viqeo-player
  data-profileid="184"
  data-videoid="b51b70cdbb06248f4438"
  width="640"
  height="360"
  layout="responsive">
</amp-viqeo-player>

自動再生(autoplay)

<amp-viqeo-player
  width="640"
  height="400"
  data-profileid="184"
  data-videoid="922d04f30b66f1a32eb2"
  layout="responsive"
  autoplay>
</amp-viqeo-player>

VKの投稿を表示

説明

VKの投稿を表示

使い方

<amp-vk 属性>
</amp-vk>

必要なスクリプト

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

属性

属性名 説明
data-embedtype 埋め込みのタイプ(post or poll)
data-owner-id 投稿の所有者ID
data-post-id 投稿の投稿ID
data-hash ウィジェット接続のセキュリティハッシュ
data-api-id 投票のAPI ID
data-poll-id 投票ID
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fixed 指定した横幅と高さで固定
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
responsive 画面サイズに応じて自動的にサイズ調整

post

<amp-vk
  width="500"
  height="300"
  data-embedtype="post"
  layout="responsive"
  data-owner-id="1"
  data-post-id="45616"
  data-hash="Yc8_Z9pnpg8aKMZbVcD-jK45eAk">
</amp-vk>

poll

<amp-vk
  width="400"
  height="300"
  layout="responsive"
  data-embedtype="poll"
  data-api-id="6183531"
  data-poll-id="274086843_1a2a465f60fff4699f">
</amp-vk>

プッシュ通知の購読設定

説明

プッシュ通知の購読設定

使い方

<amp-web-push-widget 属性>
</amp-web-push-widget>

必要なスクリプト

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

属性

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

レイアウト

レイアウト名 説明
nodisplay  

構成

<amp-web-push
  helper-iframe-url = "https://example.com/helper-iframe.html"
  permission-dialog-url = "https://example.com/permission-dialog.html"
  service- worker-url = "https://example.com/service-worker.js">
</ amp-web-push >

設定

名前 説明
helper-iframe-url helper-iframe.htmlへのURL
permission-dialog-url permission-dialog.htmlへのURL
service-worker-url JavaScriptサービスワーカーファイルへのURL
service-worker-scope インストールするService Workerのスコープ

基本的な使い方

<amp-web-push
  id="amp-web-push"
  layout="nodisplay"
  helper-iframe-url="https://example.com/helper-iframe.html"
  permission-dialog-url="https://example.com/permission-dialog.html"
  service-worker-url="https://example.com/service-worker.js">
</amp-web-push>

service-worker-scope

<amp-web-push
  id="amp-web-push"
  layout="nodisplay"
  helper-iframe-url="https://example.com/helper-iframe.html"
  permission-dialog-url="https://example.com/permission-dialog.html"
  service-worker-url="https://example.com/service-worker.js"
  service-worker-scope="/">
</amp-web-push>

購読

<amp-web-push-widget
  visibility="unsubscribed"
  layout="fixed"
  width="250"
  height="80">
  <button on="tap:amp-web-push.subscribe">Subscribe to Notifications</button>
</amp-web-push-widget>

解除

<amp-web-push-widget
  visibility="subscribed"
  layout="fixed"
  width="250"
  height="80">
  <button on="tap:amp-web-push.unsubscribe">
    Unsubscribe from Notifications
  </button>
</amp-web-push-widget>

Wistiaの動画を表示

説明

Wistiaの動画を表示

使い方

<amp-wistia-player 属性>
</amp-wistia-player>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-wistia-player
  data-media-hashed-id="u8p9wq6mq8"
  width="512"
  height="360">
</amp-wistia-player>

Yotpoのオンサイトウィジェットを表示

説明

Yotpoのオンサイトウィジェットを表示

使い方

<amp-yotpo 属性>
</amp-yotpo>

必要なスクリプト

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

属性

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

レイアウト

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

ボトムラインウィジェット

<amp-yotpo
  width="550"
  height="100"
  data-app-key="liSBkl621ZZsb88tsckAs6Bzx6jQeTJTv8CDf8y5"
  data-widget-type="BottomLine"
  data-product-id="9408616206">
</amp-yotpo>

レビューウィジェット

<amp-yotpo
  width="550"
  height="700"
  layout="responsive"
  data-app-key="liSBkl621ZZsb88tsckAs6Bzx6jQeTJTv8CDf8y5"
  data-widget-type="MainWidget"
  data-product-id="9408616206"
  data-name="hockey skates"
  data-url="https://ranabram.myshopify.com/products/hockey-skates"
  data-image-url="https://ichef.bbci.co.uk/news/320/media/images/83351000/jpg/_83351965_explorer273lincolnshirewoldssouthpicturebynicholassilkstone.jpg"
  data-descriptipn="skates"
  data-yotpo-element-id="1">

</amp-yotpo>

YouTubeの動画プレーヤーを表示

説明

YouTubeの動画プレーヤーを表示

使い方

<amp-youtube 属性>
</amp-youtube>

必要なスクリプト

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

属性

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

レイアウト

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

基本的な使い方

<amp-youtube
  width="480"
  height="270"
  data-videoid="dQw4w9WgXcQ">
</amp-youtube>

自動再生(autoplay)

<amp-youtube
  autoplay
  data-videoid="lBTCB7yLs8Y"
  width="358"
  height="204"
  layout="responsive">
</amp-youtube>

Live Channel Id

<amp-youtube
  id="myLiveChannel"
  data-live-channelid="UCB8Kb4pxYzsDsHxzBfnid4Q"
  width="358"
  height="204"
  layout="responsive">
  <amp-img
    src="https://i.ytimg.com/vi/Wm1fWz-7nLQ/hqdefault_live.jpg"
    placeholder
    layout="fill"/>
</amp-youtube>

loop

<amp-youtube
  loop
  width="480"
  height="270"
  data-videoid="dQw4w9WgXcQ">
</amp-youtube>

広告について

広告について

今までのWebページ(非AMPページ)では、JavaScriptのコードをページに追加して広告の表示をしていた。
AMPページではパフォーマンスとセキュリティ上の理由から専用のタグを使って広告を表示する。

簡単な手順

ここでは例として、a9ネットワークの広告を追加する時の手順

amp-adスクリプトを追加

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

amp-adタグを追加

<amp-ad type="a9">
</amp-ad>

サイズを追加

<amp-ad
  width="300"
  height="250"
  type="a9">
</amp-ad>

広告ごとに必要なパラメータを追加

<amp-ad
  data-aax_size="300x250"
  data-aax_pubname="test123"
  data-aax_src="302"
  type="a9"
  width="300"
  height="250">
</amp-ad>

プレースホルダを指定(省略可)

<amp-ad type="a9" width="300" height="250" data-aax_size="300x250" data-aax_pubname="test123" data-aax_src="302">
  <amp-img
    placeholder
    src="placeholder-image.jpg">
  </amp-img>
</amp-ad>

フォールバックを指定(省略可)

<amp-ad type="a9" width="300" height="250" data-aax_size="300x250" data-aax_pubname="test123" data-aax_src="302">
  <amp-img fallback src="fallback-image.jpg"></amp-img>
</amp-ad>