AMP
JA
English Deutsch Français العربية Español Italiano Indonesia 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

Important: this documentation is not applicable to your currently selected format stories!

amp-selector

 
You can now use this component outside valid AMP documents using the Bento version of this component. Learn more in the Bento guide.

Description

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

 

Required Scripts

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

Supported Layouts

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

必須のスクリプト <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-carousel、amp-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-selector が form タグ内にある場合、そのフォーム上で 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-mode keyboard-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 のアクションとイベントをご覧ください。

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

検証

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

さらに支援が必要ですか？

このドキュメントを何度読み返しても、ご質問のすべてを完全に解消することができませんか？他にも同じ事を感じた人がいるかもしれません。Stack Overflow で問い合わせてみましょう。

Stack Overflow にアクセスする
バグや不足している機能がありますか？

AMP プロジェクトでは皆さんの参加と貢献を強くお勧めしています！当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。

GitHub にアクセスする