amp-lightbox

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

Supported Layouts

nodisplay

実例

Product Browse Page Product Page amp-date-picker amp-lightbox

説明	フルビューポートの「ライトボックス」モーダル内に要素を表示します。
必須のスクリプト	`<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>`
サポートされるレイアウト	nodisplay
例	AMP By Example の amp-lightbox サンプルをご覧ください。

動作

amp-lightbox コンポーネントは、フルビューポートオーバーレイ / モーダル内に表示する子要素を定義します。ユーザーが要素（ボタンなど）に対してタップやクリックを行うと、クリックされた要素の on 属性内で参照されている amp-lightbox ID がライトボックスをトリガーしてフルビューポートを占有し、amp-lightbox の子要素を表示します。

キーボードの Esc キーを押すと、ライトボックスが閉じます。あるいは、ライトボックス内の 1 つまたは複数の要素に対して on 属性を設定し、そのメソッドを close に設定しておくと、その要素に対してタップやクリックが行われたときにライトボックスが閉じます。

<button on="tap:quote-lb">See Quote</button>
<amp-lightbox id="quote-lb" layout="nodisplay">
  <blockquote>"Don't talk to me about JavaScript fatigue" - Horse JS</blockquote>
  <button on="tap:quote-lb.close">Nice!</button>
</amp-lightbox>

ライトボックス内に画像を表示するための <amp-image-lightbox> コンポーネントもあります。

属性

animate-in（省略可）	ライトボックスを開くときのアニメーションのスタイルを定義します。デフォルトでは、`fade-in` に設定されています。有効な値は、`fade-in`、`fly-in-bottom`、`fly-in-top` です。注: `fly-in-*` アニメーションプリセットは、`amp-lightbox` 要素の `transform` プロパティを変更します。`amp-lightbox` 要素を直接変換する方法は使用しないでください。変換を適用する必要がある場合は、代わりに、ネスト要素に対して変換を設定してください。
close-button（AMPHTML 広告の場合は必須）	ライトボックスの上部に、閉じるボタンのヘッダーを表示します。この属性は、AMPHTML 広告で使用する場合に限り、必須かつ有効になります。
id（必須）	ライトボックスごとに一意の ID。
layout（必須）	`nodisplay` に設定する必要があります。
scrollable（省略可）	`scrollable` 属性が存在する場合、ライトボックスのコンテンツは、ライトボックスの高さをオーバーフローしてスクロールできます。注: AMPHTML 広告内で `<amp-lightbox>` を使用する場合、`scrollable` 属性は使用できません。詳細については、AMPHTML 広告内で amp-lightbox を使用するをご覧ください。
scrollable（省略可）

スタイル設定

標準の CSS を使用して amp-lightbox のスタイルを設定できます。

アクション

amp-lightbox は、AMP on 構文を使用してトリガーできる以下のアクションをエクスポーズします。

アクション	説明
`open`（デフォルト）	ライトボックスを開きます。
`close`	ライトボックスを閉じます。

AMPHTML 広告内で `amp-lightbox` を使用する

AMPHTML 広告内で使用する amp-lightbox コンポーネントは試験運用中であり、現時点でも開発が続けられています。AMPHTML 広告内で amp-lightbox を使用するには、amp-lightbox-a4a-proto テストを有効にします。

AMPHTML で記述された広告の場合、通常の AMP ドキュメントの場合と比べて、amp-lightbox の使用に関して以下のような相違点があります。

閉じるボタンが必要となる

AMPHTML 広告の場合、close-button 属性は必須になります。この属性により、ヘッダーがライトボックスの上部に表示されます。ヘッダーには、閉じるボタンと「Ad」と表示されるラベルがあります。このヘッダーが必要とされるのは、以下の目的のためです。

AMPHTML 広告に対して、予測可能で一貫したユーザーエクスペリエンスを設定します。
ライトボックスを終了させるポイントが常に存在するようにします。そうでないと、クリエイティブが、ライトボックスを通じて、ホストドキュメントのコンテンツを実質的にハイジャックする可能性があります。

close-button 属性は、AMPHTML 広告の場合に限り必須であり、使用することができます。通常の AMP ドキュメントの場合は、必要に応じて、<amp-lightbox> コンテンツの一部として、閉じるボタンを任意の場所に表示することができます。

スクロール可能なライトボックスは許可されていない

AMPHTML 広告の場合、スクロール可能なライトボックスは使用できません。

透明な背景

AMPHTML 広告内で <amp-lightbox> を使用する場合、ライトボックスが展開される前に AMP ランタイムがクリエイティブコンテンツのサイズを変更し、位置を再調整するため、<body> 要素の背景が透明になります。これは、ライトボックスが開く際にクリエイティブが視覚的に「ジャンプ」するのを防ぐための仕様です。クリエイティブに背景が必要な場合は、<body> ではなく、中間コンテナ（フルサイズの <div> など）を使用して設定してください。

AMPHTML 広告がサードパーティ環境（非 AMP ドキュメントなど）内で配信された場合、クリエイティブはビューポートを基準にして中央に配置されてから展開されます。これは、非同期フレームサイズ変更などの機能を有効にするために、サードパーティ iframe が postMessage API を使用する必要があるためです。そのため、最初にクリエイティブを中央に配置することで、視覚的なジャンプをせずにスムーズに移行できるようになります。

AMPHTML 広告のライトボックス内のトランジションの例

以下の例では、lightbox 要素に animate-in="fly-in-bottom" 属性が設定されている AMPHTML 広告の場合に、Friendly iframe 内とサードパーティ iframe 内で AMPHTML 広告のトランジションがどのように表示されるのかを示します。

Friendly iframe の場合（AMP キャッシュ内の iframe など）

サードパーティ iframe の場合（AMP キャッシュ外の iframe など）

検証

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

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

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

Stack Overflow にアクセスする

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

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

GitHub にアクセスする

amp-lightbox 1.0 0.1