AMPドキュメント

JavaScript

アクションとイベント

使い方

eventName:targetId[.methodName[(arg1=value, arg2=value)]]
名前 説明
eventName イベント名
targetId 要素のID
methodName アクション名
arg=value 引数

ルール

複数イベントを記述

イベントをセミコロンで区切る

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

複数アクションを記述

アクションをコンマで区切る

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

タグごとに使えるイベント

全て

イベント名 説明
tap 要素がクリック/タップされたときに実行

input

イベント名 説明
change 要素の値が変更されたとき実行
input-debounced 要素の値が変更され、変更が停止してから300msが経過したときに実行
input-throttled 要素の値が変更されている間、最大100msごとに実行

amp-carousel[type=”slides”]

イベント名 説明
slideChange カルーセルの現在のスライドが変更されたときに実行

amp-lightbox

イベント名 説明
lightboxOpen ライトボックスが完全に表示されたら実行
lightboxClose ライトボックスが完全に閉じられたら実行

amp-list

イベント名 説明
fetch-error データの取得に失敗したときに実行

amp-selector

イベント名 説明
select オプションが選択または選択解除されたときに実行

amp-sidebar

イベント名 説明
sidebarOpen 移行の終了後にサイドバーが完全に開いたときに実行
sidebarClose 移行の終了後にサイドバーが完全に閉じられたときに実行

amp-state

イベント名 説明
fetch-error データの取得に失敗したときに実行

amp-video

イベント名 説明
firstPlay ユーザーがビデオを初めて再生したときに実行
timeUpdate ビデオの再生位置が変更されたときに実行

amp-youtube

イベント名 説明
firstPlay ユーザーがビデオを初めて再生したときに実行
timeUpdate ビデオの再生位置が変更されたときに実行

form

イベント名 説明
submit フォームが送信されるときに実行
submit-success フォーム送信応答が成功したときに実行
submit-error フォーム送信応答がエラーの場合に実行
valid フォームが有効なときに実行
invalid フォームが無効なときに実行

タグごとに使えるアクション

全て

アクション名 説明
hide ターゲット要素を非表示
show ターゲット要素を表示
toggleVisibility ターゲット要素の可視性を切り替える
toggleClass ターゲット要素のクラスを切り替える
scrollTo 要素をスクロールして表示
focus ターゲット要素にフォーカス

amp-audio

アクション名 説明
play オーディオを再生
pause オーディオを一時停止

amp-bodymovin-animation

アクション名 説明
play アニメーションを再生
pause アニメーションを一時停止
stop アニメーションを停止
seekTo アニメーションの再生時間を指定された値に設定し、アニメーションを一時停止
seekTo 指定されたパーセント値を使用して、アニメーションの再生時間を指定された値に決定し、アニメーションを一時停止

amp-carousel[type=”slides”]

アクション名 説明
goToSlide カルーセルを指定されたスライドインデックスに進める
toggleAutoplay カルーセルの自動再生ステータスを切り替える

amp-image-lightbox

アクション名 説明
open 画像ライトボックスを開く

amp-lightbox

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

amp-list

アクション名 説明
refresh リストを再レンダリング

amp-live-list

アクション名 説明
update アイテムを更新して、更新されたコンテンツを表示

amp-selector

アクション名 説明
selectUp 選択範囲の値だけ上に移動
selectDown 選択範囲の値だけ下に移動
toggle 選択した要素の属性を設定し、そうでない場合は属性を削除

amp-sidebar

アクション名 説明
open サイドバーを開く
close サイドバーを閉じる
toggle サイドバーの状態を切り替える

amp-state

アクション名 説明
refresh ブラウザのキャッシュを無視して再取得

amp-user-notification

アクション名 説明
dismiss 通知要素を非表示

amp-video

アクション名 説明
play ビデオを再生
pause ビデオを一時停止
mute ビデオをミュート
unmute ビデオのミュートを解除
fullscreenenter ビデオをフルスクリーン

amp-youtube

アクション名 説明
play ビデオを再生
pause ビデオを一時停止
mute ビデオをミュート
unmute ビデオのミュートを解除
fullscreenenter ビデオをフルスクリーン

amp-3q-player

アクション名 説明
play ビデオを再生
pause ビデオを一時停止
mute ビデオをミュート
unmute ビデオのミュートを解除
fullscreenenter ビデオをフルスクリーン

amp-brid-player

アクション名 説明
play ビデオを再生
pause ビデオを一時停止
mute ビデオをミュート
unmute ビデオのミュートを解除
fullscreenenter ビデオをフルスクリーン

amp-dailymotion

アクション名 説明
play ビデオを再生
pause ビデオを一時停止
mute ビデオをミュート
unmute ビデオのミュートを解除
fullscreenenter ビデオをフルスクリーン

amp-delight-player

アクション名 説明
play ビデオを再生
pause ビデオを一時停止
mute ビデオをミュート
unmute ビデオのミュートを解除
fullscreenenter ビデオをフルスクリーン

amp-ima-video

アクション名 説明
play ビデオを再生
pause ビデオを一時停止
mute ビデオをミュート
unmute ビデオのミュートを解除
fullscreenenter ビデオをフルスクリーン

form

アクション名 説明
clear フォームの入力の値をクリア
submit フォームを送信

特殊なアクション

アクション名 説明
AMP.navigateTo(url=STRING, target=STRING, opener=BOOLEAN) 現在のウィンドウを指定されたURLにナビゲート
AMP.closeOrNavigateTo(url=STRING, target=STRING, opener=BOOLEAN) 許可されている場合はウィンドウを閉じる。それ以外の場合はナビゲート
AMP.goBack 履歴に戻る
AMP.print 印刷ダイアログを開いて、現在のページを印刷
AMP.scrollTo(id=STRING, duration=INTEGER, position=STRING) 指定された要素IDまでスクロール
AMP.optoutOfCid クライアントID生成をオプトアウト
AMP.setState({foo: ‘bar’}) オブジェクトリテラルをバインド可能な状態にマージ
AMP.pushState({foo: ‘bar’}) オブジェクトリテラルをバインド可能な状態にマージし、ブラウザヒストリスタックに新しいエントリをプッシュ

カスタムJavaScript

説明

AMP でオリジナルのJavaScriptを使う方法

使い方

<amp-script layout="レイアウト名" src="JavaScriptファイルへのURL">
  JavaScriptから変更できるコンテンツ
</amp-script>

ルール

  • サイズは最大150KB