メインコンテンツまで移動する

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

  • 公開日
  • 更新日

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>widthheightlayout 属性は、サイトに合わせて指定します。<amp-image-slider> に指定できる layout 属性は、fixedresponsiveintrinsic です。

使い方は簡単ですが、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 が指定されるため、topbottomleftrighttransform: 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.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 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> を使い画像を表示できます。

フォローする