2 枚の画像をスライドで比較できる amp-image-slider の使い方

2020年2月23日
2018年9月18日

Web 制作

Akira

Web デザイナー

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 ライブラリは、<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, .6);
  border-radius: 2px;
  box-shadow: 0 2px 3px rgba(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 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.2 を指定した例

0.5 より大きな値を指定すると、スライドバーは右に寄ります。その分、左の画像が大きく表示されます。

0.8 を指定した例

実際の動作は、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-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> を使い画像を表示できます。