AMP

amp-selector

オプションのメニューを提示し、ユーザーに選択を求めるコントロールを表示します。

必須のスクリプト<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
サポートされるレイアウトすべて
AMP By Example の amp-selector サンプルをご覧ください。

動作

AMP セレクタは、オプションのリストを提示し、その中から 1 つまたは複数のオプションを選択するようユーザーに求めるコントロールを表示します。オプションの内容はテキストに限定されません。

  • amp-selector は、任意の HTML 要素や AMP コンポーネントを含めることができます(たとえば、amp-carouselamp-img など)。
  • amp-selector の内部に、amp-selector コントロールをネストすることはできません。
  • 選択可能オプションは、対象の要素に option 属性を追加し、その属性に値を代入することで設定できます(例: <li option='value'></li>)。
  • 無効オプションは、対象の要素に disabled 属性を追加することで設定できます(例: <li option='d' disabled></li>)。
  • 事前選択オプションは、対象の要素に selected 属性を追加することで設定できます(例: <li option='b' selected></li>)。
  • 複数選択を許可するには、amp-selector 要素に multiple 属性を追加します。デフォルトでは、amp-selector で選択できるのは、一度に 1 つずつに限られます。
  • amp-selector 全体を無効にするには、amp-selector 要素に disabled 属性を追加します。
  • amp-selector 内に name 属性があり、amp-selectorform タグ内にある場合、そのフォーム上で submit イベントが発生すると、amp-selector は radio-button / checkbox グループのように動作し、amp-selector の名前に基づいて、選択されている値(オプションに割り当てられている値)を送信します。

例:

<form id="form1" action="/" method="get" target="_blank">
  <amp-selector name="single_image_select" layout="container">
    <ul>
      <li><amp-img src="/img1.png" width="50" height="50" option="1"></amp-img></li>
      <li><amp-img src="/img2.png" width="50" height="50" option="2"></amp-img></li>
      <li option="na" selected="">None of the Above</li>
    </ul>
  </amp-selector>
  <amp-selector name="multi_image_select" layout="container" multiple="">
    <amp-img src="/img1.png" width="50" height="50" option="1"></amp-img>
    <amp-img src="/img2.png" width="50" height="50" option="2"></amp-img>
    <amp-img src="/img3.png" width="50" height="50" option="3"></amp-img>
  </amp-selector>
  <amp-selector name="multi_image_select_1" layout="container" multiple="">
    <amp-carousel id="carousel-1" width="200" height="60" controls="">
      <amp-img src="/img1.png" width="80" height="60" option="a"></amp-img>
      <amp-img src="/img2.png" width="80" height="60" option="b" selected=""></amp-img>
      <amp-img src="/img3.png" width="80" height="60" option="c"></amp-img>
      <amp-img src="/img4.png" width="80" height="60" option="d" disabled=""></amp-img>
    </amp-carousel>
  </amp-selector>
</form>

<p><amp-selector name="multi_image_select_2" layout="container" multiple="" form="form1">
  <amp-carousel height="300" id="carousel-1" type="slides" width="400" controls="">
    <amp-img height="60" src="/img1.png" width="80" option="a"></amp-img>
    <amp-img height="60" src="/img2.png" width="80" option="b" selected=""></amp-img>
    <amp-img height="60" src="/img3.png" width="80" option="c"></amp-img>
    <amp-img height="60" src="/img4.png" width="80" option="d"></amp-img>
  </amp-carousel>
</amp-selector>

選択を解除する

要素に対してタップやクリックが行われたときにすべての選択を解除するには、要素内に on action 属性を設定し、clear action メソッドで AMP セレクタ id を指定します。

例:

<button on="tap:mySelector.clear">Clear Selection</button>
<amp-selector id="mySelector" layout="container" multiple>
  <div option>Option One</div>
  <div option>Option Two</div>
  <div option>Option Three</div>
</amp-selector>

AMP By Example のライブデモをご覧ください。

属性

<amp-selector> 内の属性

disabled、form、multiple、name上記の属性は、標準 HTML 要素の場合と同じように動作しますselect [](https://developer.mozilla.org/en/docs/Web/HTML/Element/select).
keyboard-select-modekeyboard-select-mode 属性は、amp-selector 内部のオプションのキーボード ナビゲーション動作を決定します。
  • none(デフォルト): Tab キーを押すと、amp-selector 内のアイテム間でフォーカスを変更します。選択内容を変更するには、Enter キーまたはスペースキーを押す必要があります。矢印キーは無効になっています。
  • focus: Tab キーを押すと amp-selector にフォーカスを移動します。矢印キーを使用して、アイテム間を移動します。選択内容を変更するには、スペースキーまたは Enter キーを押す必要があります。
  • select: Tab キーを押すと、amp-selector にフォーカスを移動します。ユーザーが矢印キーを使用してオプションを移動すると、選択内容も変更されます。

<amp-selector> オプション内の属性

option対象のオプションが選択可能であることを示します。値が指定されている場合、値の内容はフォームと一緒に送信されます。
disabled、selected上記の属性は、標準 HTML 要素の場合と同じように動作します。

イベント

on 属性を使用したイベントにより、他の AMP コンポーネントに対してアクションをトリガーできます。たとえば、on="select: my-tab.show" のように指定します。

詳細については、AMP のアクションとイベントをご覧ください。

selectamp-selector は、ユーザーがオプションを選択したときに select イベントをトリガーします。マルチセレクタやシングルセレクタの場合、オプションの選択や選択解除が行われたときに、このイベントがトリガーされます。無効オプション(disabled)をタップしても、select イベントはトリガーされません。
  • event.targetOption は、選択された要素の option 属性値を格納します。
  • event.selectedOptions には、選択されたすべての要素の option 属性値の配列が含まれます。

検証

AMP 検証ツール仕様の amp-selector ルールをご覧ください。

ご不明な点がある場合

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub