amp-sidebar

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-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>

Supported Layouts

nodisplay

実例

Product Browse Page Product Page amp-sidebar

説明	サイドバーを使用すると、一時的なアクセスを目的としたメタコンテンツ（ナビゲーション、リンク、ボタン、メニューなど）を表示できます。サイドバーは、ボタンのタップによって表示されます。サイドバーを表示しても、メインコンテンツはその下層で表示状態を維持します。
必須のスクリプト	`<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>`
サポートされるレイアウト	nodisplay
例	AMP By Example の amp-sidebar サンプルをご覧ください。

概要

<amp-sidebar> は、一時的なアクセスを目的としたメタコンテンツ（ナビゲーションリンク、ボタン、メニューなど）を非表示にします。<amp-sidebar> の開閉は、ボタンのタップで切り替えることができます。また、amp-sidebar の外部をタップして閉じることもできます。メディアクエリを受け入れるオプション属性を使用すると、サイト内の他の部分にメタコンテンツを表示することができます。子要素として <nav toolbar="(media query)" toolbar-target="elementID"> 要素を使用すると、サイドバー内のコンテンツをメインコンテンツの他の部分に表示できます。

動作

<amp-sidebar> は、<body> の直接の子である必要があります。
サイドバーを表示できるのは、ページの左側または右側に限られます。
<amp-sidebar> は、AMP がサポートしている有効な HTML 要素をすべて格納することができます。
- <amp-sidebar> は、以下の AMP 要素を格納することができます。
- <amp-accordion>
- <amp-img>
- <amp-fit-text>
- <amp-list>
- <amp-live-list>
- <amp-social-share>
サイドバーの最大高さは 100 vh です。高さが 100 vh を超えた場合は、垂直スクロールバーが表示されます。デフォルトの高さは CSS 内で 100 vh に設定されていますが、CSS 内でオーバーライドすることができます。
サイドバーの幅は、CSS を使用して設定、調整することができます（最小幅は 45 px です）。
サイドバーが開いている場合、amp-sidebar やそのマスクに対するタップズームは無効化されます。

例:

以下の例では、amp-sidebar を使用して、ナビゲーションアイテムを格納しています。ただし、2 番目のアイテム（Nav Item 2）と 4 番目のアイテム（Nav Item 4）は、ページ上の要素 ID に割り当てられています。on 属性を使用することで、要素 ID と scrollTo を使用して、要素をスムーズにスクロールすることができます。

<amp-sidebar id="sidebar1" layout="nodisplay" side="right">
  <ul>
    <li>Nav item 1</li>
    <li><a href="#idTwo" on="tap:idTwo.scrollTo">Nav item 2</a></li>
    <li>Nav item 3</li>
    <li><a href="#idFour" on="tap:idFour.scrollTo">Nav item 4</a></li>
    <li>Nav item 5</li>
    <li>Nav item 6</li>
  </ul>
</amp-sidebar>

サイドバーを開閉する

要素に対してタップやクリックが行われたときにサイドバーを切り替えたり、開いたり、閉じたりするには、要素内に on action 属性を設定して、次のいずれかの action メソッドを指定します。

アクション	説明
open（デフォルト）	サイドバーを開きます。
close	サイドバーを閉じます。
toggle	サイドバーの状態を切り替えます。

部分的に表示されているメインコンテンツ領域をタップすると、サイドバーが閉じます。

また、キーボードの Esc キーを押した場合も、サイドバーが閉じます。

例:

<button class="hamburger" on='tap:sidebar1.toggle'></button>
<button on='tap:sidebar1'>Open</button>
<button on='tap:sidebar1.open'>Open</button>
<button on='tap:sidebar1.close'>x</button>

ツールバー

<amp-sidebar> の子である <nav> 要素内に、メディアクエリを持つ toolbar 属性と、要素 ID を持つ toolbar-target 属性を指定することで、<body> 内に表示される toolbar 要素を作成することができます。toolbar は、<nav> 要素とその子要素を複製して、toolbar-target 要素に追加します。

動作

サイドバーは、toolbar 属性と toolbar-target 属性を持つ nav 要素を追加することで、ツールバーを実装することができます。
nav 要素は、<amp-sidebar> の子にする必要があります。また、<nav toolbar="(media-query)" toolbar-target="elementID"> という形式にする必要があります。
- たとえば、<nav toolbar="(max-width: 1024px)" toolbar-target="target-element"> と指定すると、有効なツールバーになります。
toolbar 属性を格納している nav は、<li> 要素を格納する単一の <ul> 要素だけを格納している必要があります。
- <li> 要素は、AMP がサポートしている有効な HTML 要素と、<amp-sidebar> がサポートしているすべての AMP 要素をすべて格納することができます。
ツールバー動作は、toolbar 属性のメディアクエリが有効な場合に限り適用されます。また、ツールバーを適用するには、toolbar-target 属性 ID を持つ要素が、ページ上に存在している必要があります。

例: 基本ツールバー

以下の例では、ウィンドウ幅が 767 px 以下の場合に toolbar を表示します。toolbar 内に、検索入力要素が含まれています。toolbar 要素は、<div id="target-element"> 要素に追加されます。

<amp-sidebar id="sidebar1" layout="nodisplay" side="right">
  <ul>
    <li>Nav item 1</li>
    <li><a href="#idTwo" on="tap:idTwo.scrollTo">Nav item 2</a></li>
    <li>Nav item 3</li>
    <li><a href="#idFour" on="tap:idFour.scrollTo">Nav item 4</a></li>
    <li>Nav item 5</li>
    <li>Nav item 6</li>
  </ul>

  <nav toolbar="(max-width: 767px)" toolbar-target="target-element">
    <ul>
      <li>
        <input placeholder="Search..."/>
      </li>
    </ul>
  </nav>
</amp-sidebar>

<div id="target-element">
</div>

ツールバーのスタイルを設定する

<amp-sidebar> 要素内の toolbar 要素は、toolbar-target 要素の表示 / 非表示に応じて適用されるクラスを持っています。これは、toolbar 要素と toolbar-target 要素にそれぞれ異なるスタイルを適用する場合に便利です。対象となるクラスは、amp-sidebar-toolbar-target-shown と amp-sidebar-toolbar-target-hidden です。クラス amp-sidebar-toolbar-target-shown は、toolbar-target 要素が表示されているときに toolbar 要素に適用されます。クラス amp-sidebar-toolbar-target-hidden は、toolbar-target 要素が非表示のときに toolbar 要素に適用されます。

例: ツールバー状態クラス

以下の例では、ウィンドウ幅が 767 px 以下の場合に toolbar を表示します。toolbar 内に、検索入力要素が含まれています。toolbar 要素は、<div id="target-element"> 要素に追加されます。ただし、<div id="toolbar-target"> 要素が表示されているときに toolbar 要素を非表示にするカスタムスタイルを追加しています。

<style amp-custom="">

  .amp-sidebar-toolbar-target-shown {
      display: none;
  }

</style>

<amp-sidebar id="sidebar1" layout="nodisplay" side="right">
  <ul>
    <li>Nav item 1</li>
    <li><a href="#idTwo" on="tap:idTwo.scrollTo">Nav item 2</a></li>
    <li>Nav item 3</li>
    <li><a href="#idFour" on="tap:idFour.scrollTo">Nav item 4</a></li>
    <li>Nav item 5</li>
    <li>Nav item 6</li>
  </ul>

  <nav toolbar="(max-width: 767px)" toolbar-target="target-element">
    <ul>
      <li>
        <input placeholder="Search..."/>
      </li>
    </ul>
  </nav>
</amp-sidebar>

<div id="target-element">
</div>

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

ストーリー向けサイドバー

amp-sidebar は、amp-story コンポーネント内でも使用できます。

動作

<amp-sidebar> は、<amp-story> の直接の子である必要があります。
デフォルトでは、サイドバーは、通常の AMP ドキュメントの「開始」側に設定されます。つまり、左から右に向かう言語の場合は右側に、右から左に向かう言語の場合は左側に設定されます。
<amp-sidebar> のデフォルト背景色は白色に設定されており、CSS 内でオーバーライドすることができます。
<amp-sidebar> の最大幅は、通常は 280px に設定されており、パソコン向けの場合は 320px になります。
サイドバーを開閉する「ハンバーガー」スタイルのボタンが、ストーリー UI 上に表示されます。

ストーリープラットフォームを横断して一貫した UI エクスペリエンスを提供するため、許可される属性と機能に関して一定の制限があります。amp-story 内で amp-sidebar を使用する場合に許可される属性と機能は以下のとおりです。

例: ストーリー内の基本サイドバー

amp-story 内でシンプルな amp-sidebar を使用する例を以下に示します。

...
<body>
  <amp-story standalone>
  <amp-sidebar id="sidebar1" layout="nodisplay">
    <ul>
      <li><a href="https://amp.dev"> External Link </a></li>
      <li>Nav item 2</li>
      <li>Nav item 3</li>
    </ul>
  </amp-sidebar>
  <amp-story-page id="cover">
    <amp-story-grid-layer template="fill">
      <h1>Hello World</h1>
      <p>This is the cover page of this story.</p>
    </amp-story-grid-layer>
  </amp-story-page>
  ...
</body>

属性

side

ページのどちら側からサイドバーを開くのかを指定します。指定できる値は left または right です。side が指定されていない場合、side 値は body タグの dir 属性から継承されます（ltr => left、rtl => right）。dir が存在しなかった場合、side はデフォルトで left に設定されます。

layout

サイドバーの表示レイアウトを指定します。nodisplay にする必要があります。

open

この属性は、サイドバーが開いているときに存在します。

data-close-button-aria-label

ユーザー補助機能用に追加されたオプション属性で、閉じるボタンの ARIA ラベルを設定する際に使用します。

この属性は、子要素の <nav toolbar="(media-query)" toolbar-target="elementID"> 要素内に存在し、ツールバーを表示するタイミングを示すメディアクエリを受け入れます。ツールバーの使い方については、ツールバーをご覧ください。

この属性は、子要素の <nav toolbar="(media-query)" toolbar-target="elementID"> 要素内に存在し、ページ上の要素の ID を受け入れます。toolbar-target 属性を使用すると、デフォルトのツールバースタイル設定を使用せずに、ページ上の要素の指定 ID にツールバーを配置できます。ツールバーの使い方については、ツールバーをご覧ください。

共通の属性

この要素には、AMP コンポーネントに拡張された共通の属性が含まれます。

スタイル設定

amp-sidebar コンポーネントは、標準 CSS でスタイルを設定できます。

amp-sidebar の width を設定すると、プリセットの最小値（45 px）と最大値（80 vw）の間で幅を調整できます。
必要に応じて、amp-sidebar の高さを設定すると、サイドバーの高さを調整できます。高さが 100 vw を超えると、サイドバーに垂直スクロールバーが表示されます。サイドバーの高さのプリセットは 100 vw です。短くしたい場合は、CSS 内でオーバーライドすることができます。
サイドバーの現在の状態は、サイドバーがページ上で開いているときに amp-sidebar タグ内に設定された open 属性を通じてエクスポーズされます。

AMP ページ内で使用できるスタイル設定済みのレスポンシブナビゲーションメニューについては、AMP Start をご覧ください。

オーバーフロー領域内の自動スクロール

amp-sidebar は、サイドバーの場合でもツールバーの場合でも、属性として autoscroll で装飾されている最初の要素に向けて、オーバーフローコンテナを自動的にスクロールできます。

この機能は、ナビゲーションリストが長いときに、ページの読み込み時にサイドバーを現在のナビゲーションアイテムまでスクロールする場合に便利です。

toolbar 機能を使用する際、autoscroll が機能するのは、<nav toolbar> 要素を overflow: auto または overflow: scroll に設定している場合に限られます。

<style amp-custom="">

  nav [toolbar] {
    overflow: auto;
  }

</style>

<amp-sidebar id="sidebar1" layout="nodisplay" side="right">
  <nav toolbar="(max-width: 767px)" toolbar-target="target-element">
    <ul>
      <li>Nav item 1</li>
      <li>Nav item 2</li>
      <li>Nav item 3</li>
      <li autoscroll class="currentPage">Nav item 4</li>
      <li>Nav item 5</li>
      <li>Nav item 6</li>
    </ul>
  </nav>
</amp-sidebar>

<div id="target-element">
</div>

機能するサンプルコードについては、こちらのサンプルファイルをご覧ください。

UX に関する注意事項

<amp-sidebar> を使用する際、留意すべき点があります。多くのユーザーは、モバイル上で AMP ビューアを使用してページを表示します。この場合、固定位置のヘッダーが表示されることがあります。また、ページの上部にブラウザ自身の固定ヘッダーが表示されることもあります。画面の上部に別の固定位置要素を追加すると、それだけでモバイル画面領域の大部分が埋まってしまうことになり、ユーザーに新しい情報を伝えられなくなります。

そのため、フル幅の固定ヘッダー内には、サイドバーを開く機能を配置しないことをおすすめします。

検証

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

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

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

Stack Overflow にアクセスする

バグや不足している機能がありますか？

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

GitHub にアクセスする

amp-sidebar 1.0 0.2 0.1