Zenn
🤖

GatsbyとmicroCMSブログ、Imgixの画像処理をする。

2021/05/09に公開
Gatsby.js
microCMS
imgix
tech

こまったこと

microCMSでは、gatsby-plugin-imageに対応していないため
graphqlで画像データが渡ってこず、URLだけ渡ってくる仕様。
どうやって画像の最適化をしようかな

microCMS運営さんにチャットで問い合わせ

チャットで問い合わせをしました。

いつもお世話になります。 GatsbyとmicroCMSでブログを作ろうとしています。 gatsby-plugin-imageで>microCMSの画像を扱いたいのですが、graphqlのデータを見ると、urlとwidthとheightしかわたってきてい>ないので、扱うことができません。 なにかやり方があるかご教示お願いしたいです

ご丁寧に対応いただき、次のことがわかりました。
・ImgixというCDNを通して、APIを利用するとよい

あとから考えれば、ドキュメントなどをしっかり読めばわかりそうなことでした😅

Imgixを使って画像を最適化

Imgixとは

公式サイトより

Powerful image processing, simple API
imgix transforms, optimizes, and intelligently caches your entire image library for fast websites and apps using simple and robust URL parameters.

強力な画像処理、シンプルなAPI
imgixは、シンプルで堅牢なURLパラメーターを使用して、高速なWebサイトやアプリ用に画像ライブラリ全体を変換、最適化、およびインテリジェントにキャッシュします。

microCMSの画像タイプのコンテンツは基本的にこのCDNを通ってくるということなので
ここのAPIでできることが基本的にできるということです。

やりたいこと

  1. レンダリングのときに、画像のサイズ、容量を節約
  2. サイズの調整やトリミング

Imgixでは

Rendering APIを使うとできそう。

画像URLの最後に?をつけて、その後にいろいろなパラメータを付けることで、画像に対していろいろな処理ができます。
例えば

https://<graphqlで渡ってきた画像のurl>?w=200

とすると、画像の幅を２００（ｐｘ？）に設定できます。
その後ろに&でつなげれば、複数のパラメータを付けることができます。

いろいろオートの設定もありました。
例えば

  1. 画像の圧縮　auto=compress
    基本的には７５％。q=で圧縮率を指定することもできます。
  2. フォーマット選択　auto=format
    対応しているブラウザなら、自動でwebp形式に変換してくれる。
  3. 画像のトリミング　ar=2:1&fit=crop&fp-y=0.5"
    アスペクト比と中心を決めてトリミングできます。切り抜いた部分以外はデータとしても削除。（残す設定もできる）

とりあえず、今回のプロジェクトでは、
この３つを設定することにしました。

ブログの記事ごとのアイキャッチ画像に対して
これらの加工をして、
各記事ページタイトルのバックにおくことにしました。

実装したコード

  • 各記事のテンプレートファイル post-template.js
<MicroCmsImage									 
  url={data.microcmsPosts.eye_catch.url}									 
  compress="auto=compress"									 
  format="auto=format"									 
  ar="ar=2:1&fit=crop&fp-y=0.5"
/>								/>
  • 画像をレンダリングするコンポーネント　microcmsimage.js
import React from "react"
import styled from "styled-components"

export default function MicroCmsImg(props) {
  // imgタグを親要素に対して幅いっぱいに表示する
  const ImgWrapper = styled.img`
    width: 100%;
  `
  const { url } = props // 画像のURL
  // url以外のパラメータを１つの文字列型変数にセット
  let array = Object.values(props)
  let param = ""
  array.map(function (elem) {
  // propsの最初はurlなのでそれは入れない
    if (array.indexOf(elem) !== 0) {
      //最初の要素は?をつける
      if (array.indexOf(elem) == 1) {
        param = `?${elem}`
      } else {
        param = `${param}&${elem}`
      }
    }
  })

  return (
    <>
　　　// imgのsrcにurlとparamをつなげたものをセット
     <ImgWrapper src={url + param} alt="" />
    </>
  )
}

Imgixではもっといろいろできます。

例えば、画像にフィルターをかけることもできます。
モザイク加工したり、blur効果つけたり。
顔認識でそこにクローズアップとか。
文字入れたり、ノイズリダクションに回転。

gatsbyプロジェクトでは、
対応していればgatsby-plugin-imageが使えますが、
そうでないプロジェクトなら、
これを使うのもいいかもしれません。

Discussion