microCMSのリッチテキスト内のimgタグをamp-imgに変換する

7/1に公開したシニアタイムズでは、NuxtJSとamp-moduleを使ってAMP対応を行いました。

でもmicroCMSのリッチテキストで保存している記事本文は自分で対応する必要があります。

基本的に生成されるHTMLはきれいなのでほとんど問題ないのですが、imgタグだけはamp-imgに変換する必要がありました。

ドキュメント：<amp-img> - amp.dev

タグ名だけでよければ簡単ですが、難しいのが画像の高さを指定する必要があること。表示速度のためには仕方ない。

サムネイルに使うような画像でよければ大体横長で比率も固定しやすいですが、記事内なのでどんな画像が使われるかはわかりません。

今回はいろいろ試行錯誤の結果、画像APIで固定のサイズに変換し、余白は背景色で埋めるという対応をしました。

画像APIとは

HTMLで返ってくるので正規表現で置換するのが良さそうです。まずはimgタグを抽出し、中でsrcにパラメータをつける処理をしました。

で下記のように書いてみました。

ampページのvueファイル抜粋

<script lang="ts">
// 省略
  async asyncData({ $axios, error, params }) {
    // 省略
    // 記事データ取得
    const currentPost = await $axios.$get(API_URL + `magazines/${id}`)
    // imgをamp-imagに変換する heightの指定が必須なので200で固定する
    const ampBody = currentPost.body.replace(
      /<img([^>]*)>/gi,
      (_match, sub) => {
        sub = sub.replace(
          /src="(.+)"/,
          'src="$1?width=300&height=225&fit=fill&fill-color=fafafa"'
        )
        return `<amp-img ${sub} layout="intrinsic" width="300" height="225"></amp-img>`
      }
    return {
      ampBody,
    }
  },
</script>

layout属性については下記。
amp.dev

比率が違う画像を使うと余計な余白ができてしまうという暫定対応感は否めません。

きっちりやりたいのであれば画像APIでサイズなどのメタ情報を取得できるので、これを使って横幅を計算して入れれば良さそうです。
複雑さとAPIリクエスト数が増えるのが懸念事項でしょうか。

フォーマット