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

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を紹介しています。AMP が大好き。

FacebookTwitter で記事の更新をお知らせしています。

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

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

その方法のご紹介です。

toggleClass で追加・削除の切り替え

AMP には、特有の on 属性があります。

また、特有のイベントやアクションがあります。

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

tap
要素がクリック・タップされた時に発生する AMP 特有のイベント
toggleClass
ターゲット要素の class を切り替える AMP 特有のアクション

例えば、ボタンをクリックして、<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>

amp-bind で値を切り替え

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

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

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

  1. <body> の class に ios が付いている
  2. ボタンをクリックすると、ios が android に変わる
  3. もう 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> に対して [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 のみで動的な表現が可能です。

送信に失敗しました

ボットと判定された可能性があります。

大変お手数をおかけしますが、以下の内容をご確認の上、再度のコメントの送信をお願い申し上げます。