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

2枚の画像をスライダーで比較するamp-image-slider

Akira

福岡在住ウェブデザイナー。 WordPress のカスタマイズを、「見やすさ」と「使いやすさ」にこだわり紹介しています。

AMP に、新たなコンポーネント amp-image-slider が追加されました。

スライド操作で、2 枚の画像を比較できるコンポーネントです。

こんなビフォーアフターの表現に最適。

また、商品の比較にも適しています。

インフォグラフィックを使った、データの比較時にも便利そう。

使い方は、AMP 公式サイトの amp-image-slider で詳細に説明されています。

また、AMP by Example では、使い方とともに実際の動作を確認できます。

実際に使ってみて「どういうこと?」「これはできる?」「え?」と、私が疑問に感じたことを含めて、使い方を説明いたします。

基本的な使い方

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> の widthheightlayout 属性は、サイトに合わせて指定します。

<amp-image-slider> に指定できる layout 属性は、fixedresponsiveintrinsic です。

とても簡単。

ただ、1 つ注意点があります。

amp-image-slider スクリプトは、<amp-image-slider> タグを使っていないページで読み込んではいけません。

AMP エラーが出ます。

<amp-image-slider> タグを使うページでのみ、スクリプトを読み込ませる必要があります。

ラベル

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 つ目の <div> は、右の画像のラベル。second 属性を指定します。

<div> の中に <amp-img> を設置すれば、画像もラベルに使えます。

この <div> には、自動的に下記の CSS が指定されます。

.i-amphtml-image-slider-label-wrapper > [first],
.i-amphtml-image-slider-label-wrapper > [second] {
  position: absolute!important;
}

position: absolute が指定されるため、topbottomleftrighttransform: translate() を使い、CSS で位置を調整できます。

デフォルトでは位置の指定はされておらず、左右それぞれの画像の左上に表示されます。

また、見た目は、どのようにでも変更できます。

<div> に 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のラベルの使用例

このラベルを WordPress で使用する際には、1 つ注意点があります。

「投稿の編集」より記事本文の中に設置した場合には、<amp-image-slider> タグ内に勝手に <p> や </p> が挿入されて、 AMP エラーが出ます。

どうやっても挿入されます。WordPress 面倒くさい。

PHP での置換、<p> タグの自動挿入の停止など、対策が必要です。

ヒントアイコンの変更

amp-image-slider は、スライドバーを操作し、左右の画像をスライドで比較します。

デフォルトでは、スライドが可能なことを示す、矢印アイコンが表示されます。

amp-image-sliderのヒントアイコン

AMP では、この矢印アイコンをヒント( Hints )と呼んでいます。

このヒントの矢印アイコンは、下記の 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 で上書きが可能なため、アイコンを変更できます。

変更方法は、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 に変更できます。

Material iconsへの変更例

FontAwesome でも、やり方は同じです。

ヒントの非表示

ヒントが不要な場合には、CSS で非表示にできます。

.amp-image-slider-hint-left,
.amp-image-slider-hint-right {
  display: none;
}

再表示を停止

ヒントは、スライドバーを動かすと消えます。

しかし、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 より小さい値を指定すると、スライドバーは左に寄ります。その分、右の画像が大きく表示されます。

initial-slider-positionに0.2を指定した例0.2 を指定した例

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

initial-slider-positionに0.8を指定した例0.8 を指定した例

実際の動作は、Other Customization でご確認いただけます。

ビフォーアフターの比較に使えそう。

アフター画像のチラ見せで、ユーザーの興味をかきたてられる!

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>

いろんなサイトで活躍しそうな amp-image-slider 。

リフォーム会社のサイトでは、大活躍でしょう。

EC サイトでも、商品の比較に使えます。

Photoshop で画像加工をされている方は、ポートフォリオにお使いになってはどうでしょう。

しかも、amp-bind で amp-img の src を変更させれば、2 枚の画像をユーザーが選ぶことも可能。

通常ページで同様のことをする場合には、JavaScript ライブラリを使うか、自分で JavaScript をゴリゴリ書かないといけません。

それを HTML だけで簡単に実装できるなんて、AMP って本当に便利です。