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

Akira

Web デザイナー

はじめに

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

そう、素の JavaScript の classList.toggle() や jQuery の toggleClass() のようにね。

その方法のご紹介です。

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

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

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

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

<body id="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> の class が ios → android → ios → … と切り替わります。

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

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

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

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

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

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

で、こうなります。

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

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