Google Developers Japan

　
この例では、商品説明のページでよく見られる数多くの機能が組み込まれていますが、一部の機能のみを必要とする場合は、分割して個々に使用することもできます。ここでは amp-bind を使って、amp-form、amp-selector、amp-carousel と基本的な CSS との間で、イベントやアクションを連携させています。　

1. ユーザーが amp-form を選択（カスタマイズしやすく、意味がわかりやすい amp-selector を使った入力） 
2. それぞれを選択した際にイベントが発生 
3. amp-bind はイベントと連携して以下を実行 
1. 3 つの amp-carousel のいずれかを表示する CSS を設定（リンゴのそれぞれの色に対応） 
2. 特定の色でサイズを選択できない場合、フォーム入力に「disabled」属性を設定（スタイルも適用） 
3. リンゴの色に応じて価格を更新

このページでは amp-bind が使われているため、ユーザーは選択した内容を視覚的に確認できます。そのため、フォームを送信する前に何を購入するのかを確実に理解できるようになります。 　

サーバーサイドでのフィルタリングと並べ替え 　

　
amp-list[src] バインディングによって、サーバーサイドでのデータの並べ替えとフィルタリングができるようになります。ここでは、amp-bind を使って「select」入力と amp-list の間のイベントやアクションを連携させています。細かく見てみましょう。 　
　

1. ユーザーが並べ替えとフィルタリングのルールを選択（「昇順」を選んだとします） 
2. 「select」の入力状態の変化に伴うイベントが発生 
3. amp-bind はイベントと連携して amp-list の src 属性を更新し、並べ替えルールに対応するクエリ パラメータ（?sort=price-ascending）が追加され、サーバーに送られる 
4. サーバーは並べ替えルールに応じた結果リストを返し、定義されているテンプレートに従って amp-list が表示される 

bind イベントは入力の配列から呼び出すこともできるため、追加で結果を表示する「さらに表示」ボタンや結果リストのページングなどの機能にもこの基本パターンを使うことができます。その場合、ユーザーは現在のページを再読み込みせずに、リストの追加アイテムを参照できるようになります。ユーザーにパーソナライズされたおすすめのリストを表示するような実装も可能です。 　
　
ベスト プラクティス: ページを最初に読み込んだ際に、div[placeholder] を使って静的に結果を表示します。そうすると、遅延することなく結果をユーザーに表示できます。そして、ユーザーが並べ替えやフィルタリングの仕組みを使用した際に、amp-bind を使って amp-list の「src」属性を更新してその URL を呼び出し、結果を表示します。 　
　
ページを再読み込みせずに検索結果を表示 　
　

　
ページ全体を再読み込みすることなく検索結果をインラインで取得して表示することにより、ユーザーは帯域幅を節約でき、現在のページの枠組みを維持したままシームレスな操作を行えるようになります。この実装方法は、amp-list のバインディングのもう 1 つの応用例で、今回は amp-form も使用しています。 　
　

1. ユーザーが amp-form で「pear」を検索 
2. この検索でイベントが発生し、amp-bind との連携によって amp-list の src 属性が更新され、検索クエリに対応したクエリ パラメータ（?searchProduct=pear）が追加され、サーバーに送信される 
3. サーバーは検索クエリに応じた結果リストを返し、定義されているテンプレートに従って amp-list が表示される 

検索時の自動候補表示 　
　

　
これは、amp-list[src] バインディングのもう少し複雑な例です（コードはこちら）。ここでは、amp-bind を使って amp-form と amp-list の間のイベントやアクションを連携させています。 　
　

1. ユーザーが検索ボックスに入力を開始 
2. フォーム フィールドへのテキスト入力に関連付けられたイベントが発生（ボタンを押すたびにこれらのイベントが発生しないように、デバウンスを行う） 
3. amp-bind はイベントと連携して以下の 2 つを実行 
1. amp-list を含む非表示 div を表示 
2. amp-list の src 属性を更新し、ユーザーがフォームに入力した部分を含むクエリをサーバーに送信 
4. amp-list によってサーバーがクエリに応じて返す候補リストがテンプレートに表示され、ユーザーに候補として提示される 
5. いずれかの候補がタップされると、amp-list のテンプレートとの連携によってフォーム フィールドが更新され、インタラクションが完了する 

注: 同時に 2 つの異なる機能の UI が重なって表示されるのを避けるため、独自の自動候補表示を行う場合は、ブラウザの自動候補表示をオフにしてください。

詳しい仕組みについては、GitHub にある例をご覧ください。この例は、別のページにコピーして貼り付けたり、テンプレートやバックエンドをカスタマイズして任意の候補を表示することができます。ユーザーが検索する可能性がある単語を細かく提示することもできれば、価格や写真、評価などが詳しく掲載された商品のカードを表示することもできます。 　
　
カルーセルのスライド インジケーター 　

　
ここでは、amp-carousel のインデックス番号と単純なページ インジケーター（カルーセルの左下の 4 つの点）の CSS スタイルを連携させるために amp-bind を利用しています。 　
　

1. ユーザーがカルーセルのスライドをスワイプ 
2. 表示されるスライドの変更に伴うイベントが発生 
3. amp-bind はイベントと連携して CSS スタイルを変更し、ページ位置を示す点を表示 

この機能によって、デベロッパーはさまざまな目印を使ってカルーセルがスワイプ可能であることを示せるようになるので、amp-carousel のデフォルトの矢印を使う必要はなくなります。 　
　
次のステップ 　
amp-bind は安定版となりましたが、現在も多くの機能が積極的に追加されています。コミュニティからのフィードバックに基づき、AMP に欠かせないパフォーマンスと安定した UX を損なわずにこのコンポーネントをさらに強化する機能追加が進められています。 　
　
主なロードマップには、以下のような機能が含まれています。まず、並べ替えやフィルタリングのユースケースを完成させるため、バインディングからの URL のクエリ パラメータと対応する履歴状態を更新できるようにする予定です。また、インライン コンテンツと埋め込みコンテンツとの間の境界をまたぐ高度なインタラクションを AMP で実現するために、iframes と親ドキュメントと間のメッセージングを可能にする予定です。さらに、サーバーの呼び出しによって検証されるフォームとページ状態を連携させるために、バインディングの強化も行われる予定です。 　
　
ぜひ実際に利用して試してみてください（そして発見したことを共有してください） 　
最終的に、デベロッパーの皆さんはここで AMP チームが紹介したものよりもたくさんの新機能を見つけてくれることでしょう。ぜひ実際に利用して試してみてください。amp-bind を試してみて、発見したことをお知らせください。皆さんが構築し、幅広い AMP コミュニティに共有してくれるアプリを楽しみにしています。 　
　
いつものように、amp-bind や AMP でサポートが必要な他の機能について、フィードバックをお寄せください。皆さんからのご連絡をお待ちしています。 　
　
　
Reviewed by Yoshifumi Yamaguchi - Developer Relations Team