AMP で toggle のように class を切り替える 2 つの方法

はじめに

AMP では、JavaScript を使わずとも動的な class の変更が可能です。

そう、JavaScript の classList.toggle() のようにね。

その方法の紹介です。

AMP には、特有の on 属性があります。また、特有のイベントやアクションがあります。

イベントの tap は、要素がクリック・タップされた時に発生します。また、アクションの toggleClass は、ターゲット要素の class を切り替えます。

この on 属性とイベントの tap 、アクションの toggleClass を組み合わせれば、class の追加・削除の切り替えが可能です。

例えば、ボタンをクリックして、<body> の class を切り替えるとします。

まず、<body> に id を付けます。

<body id="body"></body>

次に、ボタンをこのように作ります。toggleClass の前に <body> の id を指定します。

<button on="tap:body.toggleClass('class' = 'click')">クリック</button>

これで、ボタンをクリックすると、<body> の class に click が追加されます。もう 1 度ボタンをクリックすると、class から click が削除されます。

force も指定すれば、class を追加するのか、削除するのかを明確に指示できます。

<button on="tap:body.toggleClass('class' = 'click', 'force' = true)">
  クリック
</button>

true だと追加、false だと削除。これは JavaScript と同じです。

toggleClass を含む AMP 特有のアクションとイベントは、AMP 公式サイト Actions and events で紹介されています。

尚、<button> や <a> 以外（<span> や <div> など）で on 属性を使う場合は、role 属性と tabindex 属性が必須です。なければ AMP エラーが出ます。

<span on="tap:body.toggleClass('class' = 'click')" role="button" tabindex="0">
  クリック
</span>

もっと柔軟に class を変更したい時は、amp-bind を使います。

amp-bind は、JavaScript のような式で、JavaScript のような動的な表現ができるコンポーネントです。例えば、下記のような class の変更が可能です。

amp-bind を使うには、まず <head></head> 内でライブラリを読み込みます。

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

次に、on 属性を使いボタンを作ります。

<button on="tap:AMP.setState({smartphone: !smartphone})">
  タップで機種変更
</button>

そして、<body> に対して [class] 属性を指定します。

<body [class]="smartphone ? 'android' : 'ios'" class="ios"></body>

これでボタンをクリックする度に、<body> の class が ios → android → ios → … と切り替わります。

ios → class 削除 → ios → … という class の切り替えも可能です。

<body [class]="smartphone ? '' : 'ios'" class="ios"></body>

toggleClass のように、class の追加 → 削除 → 追加 → … の切り替えもできます。

<body [class]="smartphone ? 'android' : ''"></body>

[text] 属性を使えば、ボタンをクリックする度にボタンのテキストの変更が可能です。

<button
  [text]="smartphone ? 'Android サイコー' : 'iOS だよー'"
  on="tap:AMP.setState({smartphone: !smartphone})">
  iOS だよー
</button>

で、こうなります。

AMP でも JavaScript が使えるようになりました。

ただ、class の切り替えは、わざわざ JavaScript を書く必要はありません。AMP 特有のイベントとアクションを使えば、HTML のみで動的な表現が可能です。