2 枚の画像をスライドで比較できる amp-image-slider の使い方
amp-image-slider とは？
amp-image-slider は、スライド操作で 2 枚の画像を比較できる AMP コンポーネントです。
詳細な使い方は、公式ドキュメントに書かれています。また、Example: <amp-image-slider> - amp.dev では、使い方とともに実際の動作を確認できます。
この記事では、実際に使ってみて「どういうこと？」「これはできる？」と、私が疑問に感じたことを含めて使い方を説明いたします。
基本的な使い方
amp-image-slider を使うには、まず <head></head> 内でライブラリを読み込みます。
<script
async
custom-element="amp-image-slider"
src="https://cdn.ampproject.org/v0/amp-image-slider-0.1.js"></script>
次に、表示したい部分に、<amp-image-slider> を設置します。
<amp-image-slider width="800" height="450" layout="responsive">
<amp-img src="画像のパス" alt="画像の alt" layout="fill"></amp-img>
<amp-img src="画像のパス" alt="画像の alt" layout="fill"></amp-img>
</amp-image-slider>
基本的な使い方は、<amp-image-slider> で 2 つの <amp-img> を囲むだけです。
1 つ目の <amp-img> が左の画像。2 つ目の <amp-img> が右の画像です。
<amp-image-slider> と <amp-img> の width や height・layout 属性は、サイトに合わせて指定します。<amp-image-slider> に指定できる layout 属性は、fixed・responsive・intrinsic です。
使い方は簡単ですが、1 つ注意点があります。amp-image-slider の <script> は、<amp-image-slider> を使っていないページで読み込んではいけません。AMP エラーが出ます。<amp-image-slider> を使うページでのみ、<script> を追加する必要があります。
ラベル
2 枚の画像には、それぞれラベルを表示できます。
例えば、左の画像には「ビフォー」、右の画像には「アフター」とラベルの表示が可能です。
2 つの <amp-img> のあとに、2 つの <div> などを使い指定します。
<amp-image-slider width="800" height="450" layout="responsive">
<amp-img src="画像のパス" alt="画像の alt" layout="fill"></amp-img>
<amp-img src="画像のパス" alt="画像の alt" layout="fill"></amp-img>
<div first>ビフォー</div>
<div second>アフター</div>
</amp-image-slider>
1 つ目の <div> などの要素は、左の画像のラベル。first 属性を指定します。2 つ目の要素は、右の画像のラベル。second 属性を指定します。
<div> などの中に <amp-img> を設置すれば、画像もラベルに使えます。
この first 属性と second 属性を指定した要素には、自動的に下記の CSS が指定されます。
.i-amphtml-image-slider-label-wrapper > [first],
.i-amphtml-image-slider-label-wrapper > [second] {
position: absolute !important;
}
position: absolute が指定されるため、top や bottom、left、right、transform: translate() を使い、CSS で位置を調整できます。デフォルトでは位置の指定はされておらず、左右それぞれの画像の左上に表示されます。
また、見た目は、どのようにでも変更できます。要素に class をつけて、class での指定も可能です。
試しに、下記の CSS を指定してみました。
amp-image-slider [first],
amp-image-slider [second] {
background: rgba(0, 0, 0, 0.6);
border-radius: 2px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
color: #fff;
line-height: 1;
padding: 16px;
top: 16px;
}
amp-image-slider [first] {
left: 16px;
}
amp-image-slider [second] {
right: 16px;
}
ラベルが左上と右上に表示されます。
ヒントアイコンの変更
amp-image-slider は、スライドバーを操作し、左右の画像をスライドで比較します。
デフォルトでは、スライドが可能なことを示す矢印アイコンが表示されます。
AMP では、この矢印アイコンをヒント（Hint）と呼んでいます。
このヒントの矢印アイコンは、下記の CSS で表示されています。
.amp-image-slider-hint-left {
background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' …0 0 28 8'%3E%3Cpath d='M4 5h12V3H4V0L0 4l4 4z' fill='%23fff'/%3E%3C/svg%3E);
}
.amp-image-slider-hint-right {
background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' …0 28 8'%3E%3Cpath d='M24 5H12V3h12V0l4 4-4 4z' fill='%23fff'/%3E%3C/svg%3E);
}
background-image に、Base64 に変換した SVG が指定されています。
この指定は CSS で上書きが可能なため、アイコンを変更できます。変更方法は、Customize hints をご参考ください。
尚、Base64 が使われているのは、画像の HTTP リクエストが発生せずサイトを高速化できるためです。AMP の各コンポーネントは、CSS の background-image で画像を呼び出す際に、必ず Base64 を使っています。
アイコンフォントに変更
ヒントは、FontAwesome などのアイコンフォントにも変更できます。
AMP で FontAwesome を使う方法はたくさん紹介されているため、今回は Material icons で試してみます。
まず、<head></head> 内で、Material icons のスタイルシートを読み込みます。
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet" />
そして、CSS を指定します。
.amp-image-slider-hint-left,
.amp-image-slider-hint-right {
background: none;
height: 56px;
}
.amp-image-slider-hint-left::before,
.amp-image-slider-hint-right::before {
color: #fff;
font: 56px / 1 'Material Icons';
}
.amp-image-slider-hint-left::before {
content: '\e5e0';
}
.amp-image-slider-hint-right::before {
content: '\e5e1';
margin-left: 12px;
}
これで Material icons に変更できます。
FontAwesome でも、やり方は同じです。
ヒントの非表示
ヒントが不要な場合は、CSS で非表示にできます。
.amp-image-slider-hint-left,
.amp-image-slider-hint-right {
display: none;
}
再表示を停止：disable-hint-reappear
ヒントは、スライドバーを動かすと消えます。
しかし、amp-image-slider 部分が画面の外に出た後に、再び画面内に入るとヒントは再表示されます。
この再表示を停止できるように、disable-hint-reappear 属性が用意されています。何度もヒントが表示されるのは邪魔だと感じる場合に使用します。
使い方は、<amp-image-slider> に disable-hint-reappear 属性を付けるだけです。
<amp-image-slider
disable-hint-reappear
width="800"
height="450"
layout="responsive">
<amp-img src="画像のパス" alt="画像の alt" layout="fill"></amp-img>
<amp-img src="画像のパス" alt="画像の alt" layout="fill"></amp-img>
</amp-image-slider>
これだけで、ヒントの再表示を停止できます。
アクション：seekTo
amp-image-slider には、特有のアクション seekTo が用意されています。
イベントの tap と組み合わせて on 属性に指定すれば、ボタンのクリックでスライドバーの操作が可能です。また、percent の値（0 から 1 で指定）で、どれだけスライドバーを動かすかを指定できます。
指定方法や実際の動作は、Actions でご確認いただけます。
ボタンのクリック 1 発で、素早く画像を比較したい時に便利です。
スライドバーの初期位置の変更：initial-slider-position
デフォルトでは、スライドバーの初期位置は左右の中央にあります。
このスライドバーの初期位置を変更できるのが、initial-slider-position 属性です。
デフォルトの値は、0.5 。0 から 1 の間で変更できます。
<amp-image-slider
initial-slider-position="0.8"
width="800"
height="450"
layout="responsive">
<amp-img src="画像のパス" alt="画像の alt" layout="fill"></amp-img>
<amp-img src="画像のパス" alt="画像の alt" layout="fill"></amp-img>
</amp-image-slider>
0.5 より小さい値を指定すると、スライドバーは左に寄ります。その分、右の画像が大きく表示されます。
0.5 より大きな値を指定すると、スライドバーは右に寄ります。その分、左の画像が大きく表示されます。
実際の動作は、Different initial position でご確認いただけます。
キーボードでの操作：tabindex と step-size
<amp-image-slider> に tabindex 属性を付けると、フォーカスを持つ時にキーボードでスライドバーの操作が可能です。
この時に役に立つのが、step-size 属性。デフォルトでは、← や → のキーを打つと 10% ずつスライドバーが左右に動きます。この 10% を変更できるのが、step-size 属性です。0 から 1 の間の値で指定します。
<amp-image-slider
tabindex="0"
step-size="0.2"
width="800"
height="450"
layout="responsive">
<amp-img src="画像のパス" alt="画像の alt" layout="fill"></amp-img>
<amp-img src="画像のパス" alt="画像の alt" layout="fill"></amp-img>
</amp-image-slider>
実際の動作は、Different step size でご確認いただけます（1度 tab キーを打ち、← や → のキーを打つと動きます）。
画像の選択：amp-bind との組み合わせ
amp-bind と組み合わせれば、比較する画像をユーザーが選択できる amp-image-slider を作れます。
amp-bind は、データバインディングと JavaScript のような式で動的な表現が可能になる AMP コンポーネントです。
例えば、AMP Playground で作った デモ は、右側の画像を選択できます。左側の赤色のバラと右側の「黄色」「紫色」「青色」のバラとの比較が可能です。
amp-bind を使うには、<head></head> 内でライブラリの読み込みが必要です。
<script
async
custom-element="amp-bind"
src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
そして、amp-bind を使いながら <amp-image-slider> を書きます。
<div>
<p>右の画像を選択</p>
<button
on="tap:AMP.setState({srcRight: '黄色のバラの画像のパス', altRight: '黄色のバラ', labelRight: '黄'})"
type="button"
aria-label="黄色のバラを選択"></button>
<button
on="tap:AMP.setState({srcRight: '紫色のバラの画像のパス', altRight: '紫色のバラ', labelRight: '紫'})"
type="button"
aria-label="紫色のバラを選択"></button>
<button
on="tap:AMP.setState({srcRight: '青色のバラの画像のパス', altRight: '青色のバラ', labelRight: '青'})"
type="button"
aria-label="青色のバラを選択"></button>
</div>
<amp-image-slider width="800" height="450" layout="responsive">
<amp-img
src="赤色のバラの画像のパス"
alt="赤色のバラ"
layout="fill"></amp-img>
<amp-img
src="黄色のバラの画像のパス"
[src]="srcRight"
alt="黄色のバラ"
[alt]="altRight"
layout="fill"></amp-img>
<div first>赤</div>
<div second [text]="labelRight">黄</div>
</amp-image-slider>
<button> の on 属性で、ボタンをタップした後の状態を指定します。上記の例では、画像の src 属性用の srcRight、画像の alt 属性用の altRight、ラベルのテキスト用の labelRight を指定しています。
そして、右側の画像に [src]="srcRight" を指定します。これでボタンのタップ後に、src 属性の値が <button> で指定した srcRight の値に変わります。また、[alt]="altRight" も指定し、alt 属性の値も変えます。
さらに、右側の画像のラベルに [text]="labelRight" を指定し、ボタンのタップ後にラベルのテキストも変えています。
服や口紅など色違いの商品をユーザーに比較してもらいたい時に使えそうです。尚、<button> には、<amp-img> を使い画像を表示できます。