<amp-sidebar> - サイドバーを設置する
公開日:
AMPのamp-sidebarは、サイドバーを設置するための要素です。ボタンをクリックするとサイドからメニューが表示されます。
概要
- 名前
- amp-sidebar
- 可用性
- Stable (安定)
- サポートするレイアウト
- nodisplay
- 必要なスクリプト
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
- 検証
- https://github.com/ampproject/amphtml/blob/master/extensions/amp-sidebar/0.1/validator-amp-sidebar.protoascii
- ドキュメント
- https://www.ampproject.org/docs/reference/extended/amp-sidebar.html
属性
layout
指定例: nodisplay
layout属性にnodisplay
を指定しなければいけない。
side
共通属性
AMPの全てのタグで利用できる共通属性を指定できます。
説明
ライブラリの読み込み
amp-sidebarを利用するには、専用のライブラリを読み込む必要があります。
HTML
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
ルール
amp-sidebar要素には下記のルールがあります。これらを違反しないようにしましょう。
- amp-sidebar要素の1つのページにつき1つしか設置できない。
- AMP専用タグは下記の要素のみ利用できる。
- amp-accordion
- amp-img
- amp-fit-text
- amp-list
- amp-live-list
- amp-social-share
- サイドバーの幅はスタイルシートで
45px
〜80vw
の間で設定できる。
基本的な使い方
サイドバー
まずはサイドバーを用意します。id属性に一意のid名、layout属性にnodisplay
を指定して下さい。子要素がサイドバーのコンテンツとなります。layout属性にnodisplay
を指定しているため、通常は非表示となります。
HTML
<!-- サイドバー -->
<amp-sidebar id="syncer" layout="nodisplay">
<h2>目次</h2>
<ul>
<li>1章</li>
<li>2章</li>
<li>3章</li>
<li>4章</li>
<li>5章</li>
</ul>
</amp-sidebar>
開くボタン
amp-sidebar要素とは別に、サイドバーを開くためのボタンを設置します。a要素でもbutton要素でもかまいません。on属性を付けた要素を用意して下さい。on属性の内容はtap:syncer.open
です。これは、「タップ(tap
)をしたらsyncerというid名のサイドバーを開く(open
)」という内容です。id名は合わせて下さいね。.open
の部分は省略してもかまいません。
HTML
<!-- 開くボタン -->
<button on="tap:syncer.open">サイドバーを開く</button>
閉じるボタン
サイドバーはコンテンツの外をクリックすると閉じる仕様ですが、閉じるためのボタンも設置できます。開くボタンと同じように、on属性を付けた要素を用意して下さい。内容はtap:syncer.closeです。.close
を追加すると閉じるボタンになります。このボタンは当然、サイドバーの中に設置しないと意味がありません。
HTML
<!-- 閉じるボタン -->
<button on="tap:syncer.close">閉じる</button>
開閉ボタン
.open
でも.close
でもなく.toggle
を指定すれば、閉じている時は開く、開いている時は閉じる万能な仕様になります。
HTML
<!-- 開くボタン -->
<button on="tap:syncer.toggle">開く</button>
<!-- 閉じるボタン -->
<button on="tap:syncer.toggle">閉じる</button>
設置例
サイドバーを設置した例です。
HTML
<!-- 開くボタン -->
<p><button on="tap:syncer">サイドバーを開く</button></p>
<!-- サイドバー -->
<amp-sidebar id="syncer" layout="nodisplay">
<h2>目次</h2>
<ul>
<li>1章</li>
<li>2章</li>
<li>3章</li>
<li>4章</li>
<li>5章</li>
</ul>
<!-- 閉じるボタン -->
<p><button on="tap:syncer.close">閉じる</button></p>
</amp-sidebar>
サイドバーの幅
サイドバーの幅は45px
〜80vw
の間で指定できます。
CSS
amp-sidebar {
width: 60vw ;
}
サンプルコード
HTML
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<title>【デモ】<amp-sidebar> - サイドバーを設置する</title>
<link rel="canonical" href="https://syncer.jp/Web/AMP/Component/amp-sidebar/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
body {
padding: 12px ;
background-color: #fff ;
}
amp-sidebar {
width: 240px ;
padding: 12px ;
}
</style>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "記事のタイトル",
"image": [
"eyecatch.jpg"
],
"datePublished": "2017-08-23T00:00:00+0900"
}
</script>
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<p><button on="tap:syncer">サイドバーを開く</button></p>
<amp-sidebar id="syncer" layout="nodisplay">
<h2>目次</h2>
<ul>
<li>1章</li>
<li>2章</li>
<li>3章</li>
<li>4章</li>
<li>5章</li>
</ul>
<p><button on="tap:syncer.close">閉じる</button></p>
</amp-sidebar>
</body>
</html>