こまったこと
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でできることが基本的にできるということです。
やりたいこと
- レンダリングのときに、画像のサイズ、容量を節約
- サイズの調整やトリミング
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}&${a}`
}
}
})
return (
<>
// imgのsrcにurlとparamをつなげたものをセット
<ImgWrapper src={url + param} alt="" />
</>
)
}
Imgixではもっといろいろできます。
例えば、画像にフィルターをかけることもできます。
モザイク加工したり、blur効果つけたり。
顔認識でそこにクローズアップとか。
文字入れたり、ノイズリダクションに回転。
gatsbyプロジェクトでは、
対応していればgatsby-plugin-imageが使えますが、
そうでないプロジェクトなら、
これを使うのもいいかもしれません。
コメント