<amp-lightbox> - ライトボックスを設置する
公開日:
AMPのamp-lightboxは、ライトボックスを設置するための要素です。コンテンツの内容は、テキスト、画像など自由です。画像の場合は、専用のamp-image-lightbox要素もあります。
概要
- 名前
- amp-lightbox
- 可用性
- Stable (安定)
- サポートするレイアウト
- nodisplay
- 必要なスクリプト
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
- 検証
- https://github.com/ampproject/amphtml/blob/master/extensions/amp-lightbox/0.1/validator-amp-lightbox.protoascii
- ドキュメント
- https://www.ampproject.org/docs/reference/extended/amp-lightbox.html
属性
id
指定例: syncer
ライトボックスのID。
layout
指定例: nodisplay
layout属性にnodisplay
を指定しなければいけない。
scrollable
この属性を付けると、ライトボックス内でスクロールが可能になる。通常はスクロールできない。論理属性。
共通属性
AMPの全てのタグで利用できる共通属性を指定できます。
説明
ライブラリの読み込み
amp-lightboxを利用するには、専用のライブラリを読み込む必要があります。
HTML
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
基本的な使い方
ライトボックスの用意
まずライトボックスを用意します。id属性に一意のid名、layout属性にnodisplay
を指定して下さい。子要素が、ライトボックスを開いた時に表示されるコンテンツとなります。テキストでも画像でも見せたいコンテンツを配置して下さい。layout属性にnodisplay
を指定しているため、通常は非表示となります。
HTML
<!-- ライトボックス -->
<amp-lightbox id="syncer" layout="nodisplay">
<!-- ライトボックスの内容 -->
<p>ライトボックスを表示中です。</p>
</amp-lightbox>
開くボタンの用意
amp-lightbox要素とは別に、ライトボックスを開くためのボタンを設置します。a要素でもbutton要素でもかまいません。on属性を付けた要素を用意して下さい。on属性の内容はtap:syncer
です。これは、「タップ(tap
)をしたらsyncer
というid名のライトボックスを開く」という内容です。id名は合わせて下さいね。
HTML
<!-- 開くボタン -->
<button on="tap:syncer">ライトボックスを開く</button>
閉じるボタン
ライトボックスを閉じるためのボタンは、ライトボックスで表示されるコンテンツの中に設置しないと開いた後にユーザーが操作できません。開くボタンと同じように、on属性を付けた要素を用意して下さい。内容はtap:syncer.close
です。.close
を追加すると閉じるボタンになります。
HTML
<!-- 閉じるボタン -->
<button on="tap:syncer.close">閉じる</button>
設置例
ライトボックスを設置した例です。
HTML
<!-- 開くボタン -->
<p><button on="tap:syncer">ライトボックスを開く</button></p>
<!-- ライトボックス -->
<amp-lightbox id="syncer" layout="nodisplay">
<!-- ライトボックスの内容 -->
<p>ライトボックスを表示中です。</p>
<!-- 閉じるボタン -->
<p><button on="tap:syncer.close">閉じる</button></p>
</amp-lightbox>
画像をクリックして閉じる
ライトボックスで画像を開く場合、その画像自体にon属性を付ければ、開いた画像をクリックすれば閉じる仕様にできます。amp-img要素にon属性を付ける場合、一緒にrole属性とtabindex属性も付けないと文法エラーになるのでご注意下さい。
HTML
<amp-lightbox id="syncer" layout="nodisplay">
<amp-img
src="/image/photo/5.jpg"
width="300"
height="200"
layout="fill"
on="tap:syncer.close"
role="button"
tabindex>
</amp-img>
</amp-lightbox>
スタイリング
ライトボックスに背景色を指定するには、amp-lightboxをセレクタにして下さい。背景色を指定しないと背景が透過されてしまいます。
CSS
amp-lightbox {
background-color: #000 ;
color: #fff ;
}
複数のライトボックス
1ページ内に複数のライトボックスを指定するには、idを分けて複数のamp-lightbox要素とボタンを用意しましょう。
HTML
<!-- ライトボックス1の内容 -->
<button on="tap:syncer-1">開く</button>
<amp-lightbox id="syncer-1">...</amp-lightbox>
<!-- ライトボックス2の内容 -->
<button on="tap:syncer-2">開く</button>
<amp-lightbox id="syncer-2">...</amp-lightbox>
<!-- ライトボックス3の内容 -->
<button on="tap:syncer-3">開く</button>
<amp-lightbox id="syncer-3">...</amp-lightbox>
サンプルコード
HTML
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<title>【デモ】<amp-lightbox> - ライトボックスを設置する</title>
<link rel="canonical" href="https://syncer.jp/Web/AMP/Component/amp-lightbox/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
body {
padding: 12px ;
background-color: #fff ;
}
amp-lightbox {
padding: 12px ;
color: #fff ;
background-color: #333 ;
}
</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-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-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>
<!-- ライトボックス1 -->
<p><button on="tap:syncer-1">ライトボックス1を開く</button></p>
<amp-lightbox id="syncer-1" layout="nodisplay">
<p>ライトボックスの内容です。ボタンをクリックすると閉じます。</p>
<p><button on="tap:syncer-1.close">ライトボックスを閉じる</button></p>
</amp-lightbox>
<!-- ライトボックス2 -->
<p><button on="tap:syncer-2">ライトボックス2を開く</button></p>
<amp-lightbox id="syncer-2" layout="nodisplay">
<amp-img
src="/image/photo/5.jpg"
width="300"
height="200"
layout="fill"
on="tap:syncer-2.close"
role="button"
tabindex>
</amp-img>
</amp-lightbox>
</body>
</html>