AMP で toggle のように class を変更する 2 つの方法

AMPのtoggleClassとamp-bindでclassを切り替え

Akira

福岡在住ウェブデザイナー。 WordPress のカスタマイズを、「見やすさ」と「使いやすさ」にこだわり紹介しています。

執筆時点の AMP では、 JavaScript が使えません。

けれど、動的な class の変更が可能です。

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

その方法のご紹介です。

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 と同じです。

ちなみに、 <span> や <div> で on 属性を使う場合には、 role 属性と tabindex 属性が必須です。

ないと、 AMP エラーが出ます。

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

amp-bind で値を切り替え

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

amp-bind は、 JavaScript のような式で、 JavaScript のような動的な表現ができるコンポーネントです。

例えば、下記のような class の変更が可能です。

  • <body> の class に ios が付いている
  • ボタンをクリックすると、 ios が android に変わる
  • もう 1 度クリックすると、 ios に戻る

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> に対して指定します。

<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' : ''">

ボタンをクリックする度に、ボタンのテキストの変更も可能。

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

で、こうなります。


近い将来には、 AMP でも JavaScript が使えるようになります(執筆時点で仕様は不明)。

けれど、 JavaScript が使えない現在でも、かなり動的な表現ができます。

まだ制約はあるけれど、たいていのサイトは AMP でも十分な動きをつけられます。