AMP

AMP メールのアクションとイベント

Important: this documentation is not applicable to your currently selected format stories!

このドキュメントでは、AMP メール形式のアクションとイベントについて説明します。AMP ウェブサイト、ストーリー、および広告については、こちらのアクションとイベントを参照してください。

on 属性は、要素にイベントハンドラをインストールするために使用されます。サポートされているイベントは、要素によって異なります。

構文の値は、フォームの単純なドメイン固有の言語です。

eventName:targetId[.methodName[(arg1=value, arg2=value)]]

構文の各部分の説明については、以下のテーブルを参照してください。

構文 必須? 説明
eventName はい これは、要素が公開するイベントの名前です。
targetId はい これは要素の DOM id またはイベントのレスポンスとしてアクションを実行する事前定義済みの特殊ターゲットです。次の例では、targetIdamp-lightbox ターゲットの DOM id である photo-slides です。
<amp-lightbox id="photo-slides"></amp-lightbox>
<button on="tap:photo-slides">Show Images</button>
methodName いいえ これは、デフォルトアクションを伴う要素に使用します。

ターゲット要素(targetId で参照)が公開しており、イベントがトリガされたときに実行するメソッドです。

AMP には、要素が実装できるデフォルトアクションの概念があるため、methodName を省略すると、AMP はそのメソッドを実行します。

arg=value いいえ 一部のアクションは引数を受け取ることができ、その場合はドキュメントに記されています。引数は、key=value 表記で括弧に囲んで定義されます。受け入れられる値は次のとおりです。
  • 引用符で囲まれていない単純な文字列: simple-value
  • 引用符で囲まれた文字列: "string value" または

複数のイベントの処理

1 つの要素で複数のイベントをリスンすることができます。イベントの指定にはセミコロン ; 区切りを使用します。

例: on="submit-success:lightbox1;submit-error:lightbox2"

1 つのイベントに対する複数のアクション

同一のイベントに対し、複数のアクションを順に実行できます。アクションの指定にはカンマ ',' 区切りを使用します。

例: on="tap:target1.actionA,target2.actionB"

グローバル定義のイベントとアクション

AMP は、HTML 要素(AMP 要素を含む)でリスンできる tap イベントをグローバルに定義します。

また、AMP は HTML 要素でトリガできる hideshow、および toggleVisibility アクションもグローバルに定義します。

要素を表示できるのは、その要素が以前に hide または toggleVisibility アクションで、またはhidden 属性を使って非表示にされていた場合のみです。show アクションは、CSS display:none または AMP の layout=nodisplay で非表示にされた要素には使用できません。

たとえば、AMP では以下を行うことができます。

<div id="warning-message">Warning...</div>

<button on="tap:warning-message.hide">Cool, thanks!</button>

要素固有のイベント

* - すべての要素

イベント 説明
tap 要素がクリックまたはタップされたときに発行されます。

入力要素

イベント 説明 要素 データ
change 要素の値が変更されたりコミットされたりした場合に発行されます。

データプロパティは HTMLInputElementHTMLSelectElement にミラーされます。

input
event.min
event.max
event.value
event.valueAsNumber
input[type="radio"],
input[type="checkbox"]
event.checked
select
event.min
event.max
event.value
input-debounced 要素の値が変更されると発行されます。これは、標準的な change イベントに似ていますが、入力の値が変化しなくなってから 300 ミリ秒後にのみ発行されます。 input イベントを発行する要素。 change イベントデータと同じ。
input-throttled 要素の値が変更されると発行されます。これは、標準的な change イベントに似ていますが、入力の値が変化する間に、最大 100 ミリ秒ごとに発行されます。 input イベントを発行する要素。 change イベントデータと同じ。

amp-accordion > セクション

イベント 説明 データ
expand アコーディオンセクションが展開されると発行されます。 なし。
collapse アコーディオンセクションが折り畳まれると発行されます。 なし。

amp-carousel[type="slides"]

イベント 説明 データ
slideChange カルーセルの現在のスライドが変化すると発行されます。
// Slide number.
event.index

amp-lightbox

イベント 説明 データ
lightboxOpen ライトボックスが完全に可視化されると発行されます。 なし
lightboxClose ライトボックスが完全に閉じられると発行されます。 なし

amp-list

イベント 説明 データ
fetch-error(低信頼) データのフェッチに失敗したときに発行されます。 なし

amp-selector

イベント 説明 データ
select オプションが選択または選択解除されると発行されます。
// Target element's "option" attribute value.
event.targetOption
// Array of "option" attribute values of all selected elements.
event.selectedOptions

amp-sidebar

イベント 説明 データ
sidebarOpen トランジションが終了した後にサイドバーが完全に開くと発行されます。 なし
sidebarClose トランジションが終了した後にサイドバーが完全に閉じると発行されます。 なし

amp-state

イベント 説明 データ
fetch-error(低信頼) データのフェッチに失敗したときに発行されます。 なし

form

イベント 説明 データ
submit フォームが送信されると発行されます。
submit-success フォーム送信のレスポンスが成功である場合に発行されます。
// Response JSON.
event.response
submit-error フォーム送信のレスポンスがエラーである場合に発行されます。
// Response JSON.
event.response
valid フォームが有効である場合に発行されます。
invalid フォームが無効である場合に発行されます。

要素固有のアクション

* (すべての要素)

アクション 説明
hide ターゲット要素を非表示にします。
show ターゲット要素を表示します。autofocus 要素が可視状態になると、フォーカスが設定されます。
toggleVisibility ターゲット要素の可視性を切り替えます。autofocus 要素が可視状態になると、フォーカスが設定されます。
toggleClass(class=STRING, force=BOOLEAN) ターゲット要素のクラスを切り替えます。force はオプションです。true に設定すると、クラスは追加されるだけで削除されません。false に設定すると、削除されるだけで追加されません。
focus ターゲット要素にフォーカスを設定します。フォーカスを解除するには、別の要素に focus します(通常、親要素)。アクセシビリティを考慮し、body/documentElement にフォーカスを設定することで解除することは強くお勧めしません。

amp-accordion

アクション 説明
toggle(section=STRING) amp-accordionexpandedcollapsed 状態を切り替えます。引数なしで呼び出されると、アコーディオンのすべてのセクションを切り替えます。次のようにセクション ID を指定すると、特定のセクションでトリガされます。on="tap:myAccordion.toggle(section=
expand(section=STRING) アコーディオンのセクションを展開します。セクションがすでに展開済みである場合は、そのままになります。引数なしで呼び出されると、アコーディオンのすべてのセクションを展開します。次のようにセクション ID を指定すると、特定のセクションでトリガされます。on="tap:myAccordion.expand(section='section-id')"
collapse(section=STRING) アコーディオンのセクションを折り畳みます。すでに折り畳まれている場合は、そのままになります。引数なしで呼び出されると、アコーディオンのすべてのセクションを折り畳みます。次のようにセクション ID を指定すると、特定のセクションでトリガされます。on="tap:myAccordion.collapse(section='section-id')"

amp-carousel[type="slides"]

アクション 説明
goToSlide(index=INTEGER) 特定のスライドインデックスまでカルーセルを進めます。

amp-image-lightbox

アクション 説明
open (default) アクションをトリガしたソース画像で、画像のライトボックスを開きます。

amp-lightbox

アクション 説明
open (default) ライトボックスを開きます。
close ライトボックスを閉じます。

amp-list

イベント 説明 データ
changeToLayoutContainer amp-list のレイアウトを layout="CONTAINTER" に更新し、動的なサイズ変更を行えるようにします。
fetch-error(低信頼) データのフェッチに失敗したときに発行されます。 なし

amp-selector

アクション 説明
clear 定義された amp-selector からすべての選択をクリアします。
selectUp(delta=INTEGER) `delta` の値ずつ選択を上に移動します。デフォルトの `delta` は -1 に設定されています。オプションが選択されない場合、選択状態は最後のオプションの値になります。
selectDown(delta=INTEGER) `delta` の値ずつ選択を下に移動します。デフォルトの `delta` は 1 に設定されています。オプションが選択されない場合、選択状態は最初のオプションの値になります。
toggle(index=INTEGER, value=BOOLEAN) `selected` のアプリケーションを切り替えます。select 属性がない場合、このアクションによって追加されます。select 属性が存在する場合、このアクションによって削除されます。`value` 引数にブール値を指定すると、追加または削除を強制・維持することができます。`true` の場合は `selected` 属性を強制的に追加し、すでに存在する場合は削除しません。`false` の場合は属性を削除し、すでに存在しない場合は追加しません。

amp-sidebar

アクション 説明
open (default) サイドバーを開きます。
close サイドバーを閉じます。
toggle サイドバーの状態を切り替えます。

form

アクション 説明
clear フォームの入力の値をすべてクリアします。
submit フォームを送信します。

特殊ターゲット

以下は、AMP システムが提供する、特殊な要件を持つターゲットです。

Target: AMP

AMP ターゲットは、AMP ランタイムによって提供され、ドキュメント全体に適用されるトップレベルのアクションを実装します。

アクション 説明
setState({foo: 'bar'})1

amp-bind が必要です。

オブジェクトリテラルをバインド可能な状態にマージします。

1複数のアクションとともに使用した場合、後続のアクションは、setState() が完了するのを待ってから呼び出されます。1 つのイベント当たり、1 つの setState() が許可されます。