AMPドキュメント

動的なインターフェイスのAMP専用タグ

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

説明

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

使い方

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

説明

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

使い方

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

説明

ユーザから同意を取るための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>

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

説明

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

使い方

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

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

説明

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

使い方

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

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

説明

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

使い方

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

レスポンシブレイアウト

説明

レスポンシブレイアウト

使い方

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

クリック時にコンテンツを開閉するメニューを表示

説明

クリック時にコンテンツを開閉するメニューを表示

使い方

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

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

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

説明

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

使い方

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

フォームの選択肢を表示

説明

フォームの選択肢を表示

使い方

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

ユーザーに通知を表示

説明

ユーザーに通知を表示

使い方

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