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

Akira

福岡在住の Web デザイナー。Web サイト制作に役立つ情報を紹介しています。AMP が大好き。

FacebookTwitter で記事の更新をお知らせしています。

AMP コンポーネント amp-image-slider の使い方の紹介です。

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

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

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

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

動作

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

ビフォーアフターや商品などの画像の比較に最適です。

基本的な使い方

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> タグを使うページでのみ、<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 つ目の <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 は、スライドバーを操作し、左右の画像をスライドで比較します。

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

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

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> を使い画像を表示できます。

おわりに

様々なサイトで活躍しそうな amp-image-slider 。

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

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

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

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

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

コメント

  1. Whoa that’s fast! Thanks for the article! I created this component with these extended functionalities as part of my intern project at Google this summer. Really hope that it could be proved useful in real scenarios. Feel free to voice any suggestions on improvement in the project’s issue thread!
    (Only knows very basic Japanese, but the tutorial looks just so cool and detailed! (Yeah I should have created more helpful document lol))

送信に失敗しました

ボットと判定された可能性があります。

大変お手数をおかけしますが、以下の内容をご確認の上、再度のコメントの送信をお願い申し上げます。