AMPドキュメント

特殊なAMP専用タグ

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

説明

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

使い方

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

動的なコンテンツの作成

説明

動的なコンテンツの作成

使い方

初期化

<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
  })">

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

説明

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

使い方

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

動的な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>

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

説明

ユーザーエクスペリエンスの実験(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>

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

入力マスキング機能

説明

入力マスキング機能

必要なスクリプト

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

説明

パターンに基づいて 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-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>

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

説明

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

使い方

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

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>

独自の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-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>

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