Over40WebClub　Connpass勉強会

４回目の勉強会を終えました。
今回のテーマは次です。

ヘッドレスCMSで爆速ブログ構築

今回は、microCMSというヘッドレスCMSをデータベースにして、Gatsbyでブログサイトを構築しました。勉強会では、あらかじめ、そんが作成したサイトをGatsbyのスターターにして、ブログサイトを構築する様子を見てもらいました。

スターターはこちら　＞＞＞

しかし、今回、最後GitHubへのプッシュのときにトラブルが発生し、結局、そこを解決できずデプロイまでのようすを見てもらうことができませんでした😣

振り返りも兼ねて、このブログで上記ブログサイトを作る過程を記事にしていこうと思います。

まずは、今回の勉強会でぼくが学んだことについてここに記しておこうと思います。

何かを世に出すということの大変さ

今回は作成したブログサイトをGatsyのスターターとしてお知らせするというつもりだったので、細かいところまでしっかり作り込まないといかん！と思っていました。
そう思うと、今まで自分がプログラミングしたり、サイト構築するときに、いかにアバウトな感じでやっていたのかを思い知らされました。

• 見やすいコードの書き方
• コメントをどう入れるか
• READMEファイルに各説明

サイトの機能面でも、作り込めば作り込むほど、もうちょっとこうしたほうがいいかも、とか思って、次々と改善点が見えてきました。どこかで、切らないとおわらない感じ。ちゃんとだれが使うのかをイメージして、取捨選択が必要になるのかなと思いました。
今後も少しずつ改善していきたいです。

Gatsbyのサイト構築について前よりも深く理解

GatsbyはReactベースのフレームワークですので、実は、個々でやっていることのウラで、React、JavaScriptがいろいろとよしなにやってくれているのですが、それでも、難しくて、なんでこうすればこうなるのかということが理解できないことも多かったです。
しかし、今回、一からブログサイトを調べながら作ってみて、いろいろなことを理解できました。

• Gatsbyが各記事ページを生成するCreatePageというAPIのこと
• GraphQLからデータをとるときに、Nullだといろいろ大変で、その対応の仕方

などなど。
このあたりはこれから、切り分けつつ記事にアウトプットしていこうと思います。と、同時に、ベースになってるReactやJavaScriptについてももっと勉強したいなあと思いました。

こまったこと

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}&${a}`
      }
    }
  })

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

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

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

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