{"componentChunkName":"component---src-templates-post-template-jsx","path":"/blog/posts/gatsby-microcms-imgix","result":{"data":{"microcmsPosts":{"title":"GatsbyとmicroCMSブログ、Imgixの画像処理をする。","updatedAtJP":"2021/05/22","updatedAt":"2021-05-22T09:45:43.196Z","link":"gatsby-microcms-imgix","article":"

こまったこと


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

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


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

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

\"\"
ご丁寧に対応いただき、次のことがわかりました。


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

[Imgix](https://www.imgix.com/)を使って画像を最適化


[Imgix](https://www.imgix.com/)とは


公式サイトより

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でできることが基本的にできるということです。

や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\t\t\t\t\t\t\t\t\t \n url={data.microcmsPosts.eye_catch.url}\t\t\t\t\t\t\t\t\t \n compress=\"auto=compress\"\t\t\t\t\t\t\t\t\t \n format=\"auto=format\"\t\t\t\t\t\t\t\t\t \n ar=\"ar=2:1&fit=crop&fp-y=0.5\"\n/>


画像をレンダリングするコンポーネント　microcmsimage.js


import React from \"react\"\nimport styled from \"styled-components\"\nexport default function MicroCmsImg(props) {\n\n // imgタグを親要素に対して幅いっぱいに表示する\n const ImgWrapper = styled.img`\n  width: 100%;\n `\n\n const { url } = props // 画像のURL\n // url以外のパラメータを１つの文字列型変数にセット\n let array = Object.values(props)\n let param = \"\"\n array.map(function (elem) {\n\n // propsの最初はurlなのでそれは入れない\n  if (array.indexOf(elem) !== 0) {\n   //最初の要素は?をつける\n   if (array.indexOf(elem) == 1) {\n    param = `?${elem}`\n   } else {\n    param = `${param}&${a}`\n   }\n  }\n })\n\n return (\n  <>\n// imgのsrcにurlとparamをつなげたものをセット\n   <ImgWrapper src={url + param} alt=\"\" />\n  </>\n )}


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

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

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




","author":"そんほんす","eye_catch":null,"category":{"category":"技術","categorySlug":"tech"}}},"pageContext":{"id":"6d703df2-29d0-5319-b8a7-122dfde3f486","previous":{"title":"まずは１つ目の記事","link":"first-article"},"next":{"title":"２つ目の記事です","link":"second"}}},"staticQueryHashes":["1550610083","2560007497","3020873570"]}