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が使えますが、
そうでないプロジェクトなら、
これを使うのもいいかもしれません。

２回めを終えたときの感想もまとめました。

勉強会ドリブン学習法

今回の勉強会では

わたしがずっと学習しているGatsbyでヘッドレスCMSを使ったブログを作ります。
ヘッドレスCMSの中でも、唯一（なのかな？）の日本製、microCMSを使うことにしました。

ヘッドレスCMSサービスはいろいろあるんですが、英語が多くて・・・という人もいるのではないでしょうか。
もちろん、勉強会でやった「ヘッドレスWordPress」も１つの選択肢なのですが、せっかくなら、勉強がてらつくってみようと思いたちました。

勉強会では私がつくったブログをスターターにして、サクッとブログを構築します。
その後、Gatsbyでブログ記事が自動的にできていく仕組みやちょっとカスタマイズする方法などを
解説していこうと思っています。

今回の勉強会はこちら

なぜ、StartBootstrap?

使うテンプレートはStartbootstrapで配布されているClean Blogというテンプレートです。

これでピンと来た人がいるかも知れませんが、UdemyのWordPress開発講座（たにぐちまことさん）で使用されているテンプレートなのです。

私自身が、その講座をやっていて、そのときに、
なるほど、こうやってHTMLサイトをWordPressに変身させられるのか・・・！！
と気づいて、これをGatsbyでやってみたい！と思ったのです。

この講座で学んだことがとてもやくだっていますし、
でも、PHPとJavaScriptはちがうなあと思いながらコードを組んでいくのが
今、とても楽しいのです。

たくさんのご参加おねがいいたします

今、ウェブ制作学習中でも、ブログ構築まではサクッとできるようになると思います！

デプロイまで無料でできます！

まずは、練習で体験に来てみてください！

ヘッドレスCMSで爆速ブログ構築~Gatsby-StartBootstrap-microCMS

GatsbyCloudでのWebhook設定はとてもかんたんにできたのですが、他のホスティングサービスでもできるのか、やってみました。まだまだ初学者に毛が生えたくらいなので、本当はもっとちゃんとしたやり方があるかもしれませんが、その経過を残しておきたいと思います。

Webフックとは

Webhookとは？  @soarflatさんの記事より

• アプリケーションの更新情報を他のアプリケーションへリアルタイム提供する仕組みや概念のこと。
• イベント（リポジトリにプッシュなど）発生時、指定したURLにPOSTリクエストする仕組みのこと。

要するにここでは、WordPressの投稿が更新されたことをリアルタイムでホスティングサービスに伝えて、ビルド操作を自動で行うことを言っています。NetlifyではGithubリポジトリと連動してビルドが自動で走るようになっていますが、データベース（ここではWordPress）からの更新はGithubには直接反映されないので、自動で更新されません。

ヘッドレスWordPressブログにおいては、ブログ更新するだけでは、ブログが更新されません。次のいずれかの操作が必要です。

1. netlify deploy --prod
2. なにかファイル更新をして、Githubリポジトリを更新

この記事のウェブフックを設定することで、今まで通りのWordPressの更新作業だけで、本番サイトも更新されるようになるのは大きなメリットです。

前提

1. Gatsby-WordPressブログの公式スターターを使って、WordPressサイトと連携したブログサイトを構築
2. Netlifyにおいてデプロイしている

ウェブフック設定手順

Netlify公式の説明はこちら ー＞ Build hooks

1. ウェブフックURLを取得
   1. 対象サイトの設定画面において
      Site settings > Build & deploy > Continuous deployment > Build hooks.
   2. ビルドフック名設定
      なんでもOK。あとで見てなんのフックかわかる用意設定します。
   3. デフォルトでビルドするブランチを設定します
      基本的にはmainブランチがおおいのでしょうか。チーム開発していたりすると、確認のために、featureとかdevlopブランチとか。チーム開発経験浅くてわからない😅
   4. Saveボタンをクリック
2. 生成されたURLをWordPressブログのGatsbyJS設定のBuildHookに設定
   1. WordPressブログの管理画面から
      設定　ー＞　GatsbyJS
   2. BuildsWebhookのところに、取得したURLを貼り付ける

以上でおしまいです。
記事をなにか更新して、netlifyのdeploysタブを開いておくと、勝手にビルド処理が走るのを確認できます！