画像表示のAMP対応 - チラシのすきま

ページ内の画像表示とクリック時の拡大画像表示をAMP（Accelerated Mobile Pages）に対応したものに変更したので、ご紹介します。

本サイトは、hugoを利用して静的サイトを生成してます。以前書いた記事では、サイト表示を軽くするために元画像とは別にサムネイルを用意して、それらを簡単に記述するためのshortcodesを導入しました。これはこれで、ページ表示を軽くするのに貢献してるのですが、最近画像をたくさん貼るようになって、サムネイルを別に用意するのが面倒になってきました。そこで、amp-img と amp-image-lightbox を利用して、ページ内の画像の遅延表示と画像クリック時の拡大表示を実装してみました。

ただし、AMP自体まだ不確定な部分があり、今のところ、ページ全体をAMP対応にするつもりはなく、一部機能を利用して楽をしたいという不届き者の所業にございます。

参考：レイアウトとメディアクエリ – AMP

設定方法

amp-img や amp-image-lightbox やこちらを参考に、不足していた設定を<head>内に追加。jsファイルに関する記述は、</head>の直前に。

<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>

先ほどの参照ページとこちらを参考に以下のshortcodes（/layouts/shortcodes/amp-img-1600x900.html）を作成。将来的に、AMPの利用が困難になっても、shortcodesを変更することで全体の変更に対応できるのが、hugo（等のジェネレータ）の良いところですね。

<amp-img on="tap:lightbox1"
  role="button"
  tabindex="0"
  src="/img/post/{{ .Get "name" }}.jpg"
  alt="{{ .Get "name" }}"
  title="{{ .Get "name" }}, view in lightbox"
  layout="responsive"
  width="560" height="315">
  <noscript>
    <img src="/img/post/{{ .Get "name" }}.jpg" width="560" height="315" />
  </noscript>
</amp-img>
<amp-image-lightbox id="lightbox1" layout="nodisplay"></amp-image-lightbox>

そして、画像ファイル（/static/img/post/test1600900.jpg）を準備したら、実際の記事内に、下記のように記述（shortcodeとして機能しないよう＜と＞を全角にしてますが、実際の文字列はすべて半角です）すると、描画幅に合わせたイメージファイルが表示され、それをクリックすると画像が拡大表示されるようになります。

{{＜ amp-img-1600x900 name="test1600900" ＞}}

注意点とか個人的な割り切り

amp-imgでは、width または height が指定されていないと、デフォルトで幅と高さの両方が 0 に設定されてしまいます。仕方ないので、width と height を指定しているのですが、いつも同じ縦横比の画像を使っているわけではないので、CSSで対応とか、いろいろと回避策を試してみたのですが、思ったようにはできませんでした。

というわけで、ここは運用でカバー。よく使う縦横比ごとにshortcodesを用意して、今後は、この画像サイズのファイルを準備することにしました。

/layouts/shortcodes/amp-img-1600x900.html
/layouts/shortcodes/amp-img-1600x1200.html
/layouts/shortcodes/amp-img-1600x800.html
/layouts/shortcodes/amp-img-800x1600.html

とりあえず、これでサムネイルを用意することなく、AMP的な画像表示ができるようになりました。

おしまい。

Mono Works

チラシのすきま

設定方法

注意点とか個人的な割り切り

コメント

Mono Works

チラシのすきま

設定方法

注意点とか個人的な割り切り

関係（あるかもな）記事

コメント