microCMSと@imgix/gatsbyで使うGatsbyImage

2021年09月23日

Gatsby v4に合わせて『Webサイト高速化のための静的サイトジェネレーター活用入門』の副読本、「microCMS対応ガイド」の更新を始めたところ、紹介していた gatsby-plugin-imgix の開発が非推奨になっていたことに気が付きました。

GatsbyImage のための画像生成に gatsby-transform-sharp の代わりに imgix を利用しようというものでしたが、より高機能になった @imgix/gatsby が imgix の公式プラグインとしてリリースされています。こちらではプラグインとして利用するばかりでなく、コンポーネントとしても利用可能なうえ、新しい GatsbyImage（gatsby-plugin-image）にも対応しています。
そこで、このプラグインの使い方を紹介します。

※「microCMS対応ガイド」の更新はGatsby v4のリリース後に予定しています。

GraphQL transform API

https://github.com/imgix/gatsby#graphql-transform-api

gatsby-plugin-imgixと同じように、プラグインとして利用する方法です。

テストしたバージョン（v1.6.11）では、microCMS の imgix のドメインを設定しただけでは、うまくいきません。"https://images.microcms-assets.io/" の部分が二重になってしまいます。そこで、取得したURLからその部分を削除する形で設定します。

アイキャッチ画像に設定する場合には、gatsby-config.js に以下のように設定します。

module.exports = {
  //...
  plugins: [
    {
      resolve: `@imgix/gatsby`,
      options: {
        domain: 'images.microcms-assets.io',
        defaultImgixParams: { auto: 'format,compress' },
        fields: [
          {
            nodeType: "MicrocmsBlogEyecatch",
            fieldName: "imgixImage",
            getURL: node => node.url.replace("https://images.microcms-assets.io/", "")
          },
        ],
      },
    },
  ],
};

これで、GraphQL から gatsbyImageData を取得できますので、GatsbyImage で利用可能になります。

GraphQL imgixImage API

https://github.com/imgix/gatsby#graphql-imgiximage-api

こちらもプラグインとして利用する方法です。gatsby-config.js に以下のように設定します。

module.exports = {
  //...
  plugins: [
    {
      resolve: `@imgix/gatsby`,
      options: {
        domain: 'images.microcms-assets.io',
        defaultImgixParams: { auto: ['format', 'compress'] },
      },
    },
  ],
};

imgixImage というフィールドが追加されますので、URLを指定してクエリを作成します。ただし、GraphQL transform API の場合と同じように、URLから "https://images.microcms-assets.io/" の部分を削除する必要があります。

query MyQuery {
  imgixImage(
    url: "protected/xxxxxxx/media/season.jpg"
  ) {
    gatsbyImageData
  }
}

これで、gatsbyImageData互換のデータが取得できます。

URL Transform Function

https://github.com/imgix/gatsby#url-transform-function

imgixのURLをもとに、gatsby-plugin-image互換のフォーマットで出力し、表示してくれるコンポーネントです（プラグインの設定は必要ありません）。
ただし、GraphQLを通していないため、ぼかしたプレースホルダーをサポートしていません。

使い方は、非常にシンプルで

import { ImgixGatsbyImage } from '@imgix/gatsby'

<ImgixGatsbyImage
    src={node.eyecatch.url}
    imgixParams={{ auto: ['format', 'compress'] }}
    layout="fullWidth"
    style={{ height: "100%" }}
    sourceWidth={node.eyecatch.width}
    sourceHeight={node.eyecatch.height}
    />

といった感じで利用できます。
microCMSではリッチテキスト内の画像にも width & height を付与できますので、このコンポーネントに置き換えて表示させることもできます。

リッチエディタ内の画像で出力されるimgタグにwidthとheightが付与できるようになりました | microCMSブログ
https://blog.microcms.io/width-and-height-in-richeditor-image/

また、Hook関数として用意されている "getGatsbyImageData" を利用することで、 GatsbyImageの設定をそのまま活かすこともできます。

import { getGatsbyImageData } from '@imgix/gatsby';
import { GatsbyImage } from 'gatsby-plugin-image';

<GatsbyImage
    image={getGatsbyImageData({
        src: `${node.eyecatch.url}`,
        imgixParams: { auto: ['format', 'compress'] },
        layout: "fullWidth",
        sourceWidth: `${node.eyecatch.width}`,
        sourceHeight: `${node.eyecatch.height}`,
    })}
    style={{ height: "100%" }}></GatsbyImage>