LoginSignup
8

More than 3 years have passed since last update.

【AMP】amp-listで取得したデータをamp-bindを使ってリアルタイムにフィルタリングする

Last updated at Posted at 2017-09-24

最終の目的は表題の通りですが、まずはamp-bindから説明します。

amp-bindを使えば、従来のAMPの仕様でできなかったダイナミックな機能を可能にします。
具体的に何ができるのかと言うとデータバインディングやJS式のようなユーザーの操作に応じて要素を変更できます。

amp-bindのセットアップ

amp-bindコンポーネントをインポートします。

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

簡単なテキストのバインド例

<p [text]="'Hello ' + foo">Hello World</p>
<button on="tap:AMP.setState({foo: 'amp-bind'})">TAP</button>

ampbind2.gif

buttonをタップするとHello WorldWorldの部分のテキストがamp-bindに置き換わるというサンプルです。

どのように機能するのか

amp-bindは3つの主なコンポーネントでできています。

  1. State:ドキュメントスコープで、変更可能なJSONの状態です。上の例では、Stateを定義していないので、ボタンをタップする前の状態は空です。ボタンをタップした後の状態は{foo: 'amp-bind'}となります。
  2. Expressions:これはStateを参照できるJavaScriptです。上記の例は'Hello' + foo、文字列'Hello 'と変数のfooを連結する単一の式を持っています。
  3. Bindings:上記の例は、式の値が変更されるたびに<p>要素のテキストを更新する属性[text]を持っています。

本題:amp-listとamp-bindを組み合わせを試してみる

従来のWebアプリだと、例えばECサイトとかであれば、Ajaxを使い非同期に商品のソートやフィルタリングを行っている訳ですが、AMPであればamp-listとamp-bindを組み合わせることで、JavaScriptを記述することなく、それが実現できます。

amp-listでWP REST APIを使って記事リストを取得する

で、amp-bindと同じくAMPの拡張コンポーネントの1つである「amp-list」で、WP REST APIを使いWordpressに投稿されている記事の一覧を取得して、AMP化されたサイトに表示する方法を紹介しましたが、
さらにこれを発展させて、amp-listにamp-bindを組み合わせて、取得した記事一覧をカテゴリーでのフィルタリングを試してみました。

そのコードが以下になります。

<amp-list width="auto"
      height="400"
      layout="fixed-height"
      src="https://demo.wp-api.org/wp-json/wp/v2/posts"
      [src]="'https://demo.wp-api.org/wp-json/wp/v2/posts' + foo"
      class="m1"
      items=".">
      <template type="amp-mustache">
        <div>
          <a href="{{link}}">{{title.rendered}}</a>
        </div>
      </template>
</amp-list>
<button on="tap:AMP.setState({foo: ''})">全て</button>
<button on="tap:AMP.setState({foo: '?categories=1'})">カテゴリー1</button>
<button on="tap:AMP.setState({foo: '?categories=2'})">カテゴリー2</button>

これでカテゴリーのフィルタリングができます。
buttonをタップすると<amp-list>[src]属性の変数fooにカテゴリー絞り込みのクエリパラメータが挿入され、リアルタイムに新たな記事リストが取得されることになります。

ampbind.gif

http://demo.wp-api.org/ 
というWPのデモサイトから記事リストを取得しています。

まとめ

サイトのAMP化にあたって、amp-listとamp-bindの組み合わせはよく使われるパターンだと思うので、ぜひこの記事をご参考にください。

参考

amp-list 公式リファレンス(英語) by Google
https://www.ampproject.org/docs/reference/components/amp-list

amp-bind 公式リファレンス(英語) by Google
https://www.ampproject.org/docs/reference/components/amp-bind

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8