今回の案件の概要

ページ構成

基本的に、HTML、CSSコーディングでデザインを再現して、WordPress化までを担当。プラグインを使用しての会員システム構築は先輩フリーランスが担当してくれました。そして、コーディング、構築ともに、先輩フリーランスが間でチェックをしてくれる感じです。

• TOPページ
• カスタム投稿３種類、それぞれにアーカイブ、詳細テンプレート
• お問い合わせページ
• アバウトページ
• 利用規約ページ

機能

２つのカスタム投稿では、カスタムフィールド使用。１つはブログ風の投稿でオリジナルデザイン＋カスタムブロックでめあてのデザインを再現できるようにしました。CSS部分は基本的に私が担当したので、会員システムによって付随する会員ページと非会員ページの出し分けなどもありました。会員用コンテンツの上にオーバーレイ＋誘導のナビゲーションつけるという感じです。

「やるぞ」と決断するまで

コミュニティ内でにゆさんから提案があって、ちょうど案件をやってみたいと思っていた私は手を上げました。それまで、WordPressはテーマでの構築しかやっていなかったので、本を見たり、ネットの記事を調べたりして、「できそう」と確認をしました。
これまで、GatsbyJSにHTMLのテンプレートを入れて、構築するというのをやっていたので、基本的にはこれと同じ感じだったのが、決断の決め手でした。JavaScriptとPHP（WPテンプレートタグ）のちがいだったので、ググりつつ、そして何より先輩フリーランスのサポートを受けながらできるので、踏み出すことができました。

やってみると、いろいろなところで、先輩フリーランスにご迷惑をおかけいたしました。自分で「迷惑をかけるだろうな」と思っていた以上にです。しかし、踏み出した以上は、自分の恥がどうとかではなく、やりきるしかないと思い定めて突き進んでなんとか今があるという感じです。

仕事の基本的な流れ

プロダクトを誰かに提供するという仕事をしたことがない？と思っています。最初の方の仕事の仕上がりはかなりずさんだったと思います。（今もぜんぜんかも😅）

コーディング → デベロッパーツールでの各デバイス幅での表示確認 → 間の幅での表示確認 → 実機での表示確認 → 本番（今回はにゆさんに見てもらう）サーバーへのアップロードして表示確認。

最低限のフローとしてこんな感じでやっているということを知りました。

何をするにも、いろいろとっちらかってしまう私にとっては、段取りを組んで、それを忠実に守りつつ（もちろん臨機応変も必要）、やっていくのはかなり骨が折れました。今でも、そんなにきちんとできていませんし、「明日までに」ってなったりすると、雑に、いつの間にか工程飛ばしていたりもします。

そもそも、コーディング自体の進め方も、結構ぐちゃぐちゃなので、ここも意識したいです。Gitは使っていたものの、コミットの粒度とか、ブランチ切るルールとかとてもぐちゃぐちゃです。個人で練習したり、趣味でやる分にはいいのだろうけど、このあたりもいい感じでできるようになりたいな。

案件やるごとに、少しずつ積み上げて、自分にしみこませないといけないなと思います。次の案件では、もう少しいい感じで、１人だけど、チームでやっているようなつもりでやろうと思います。

オリジナルデザインでのWordPress

それまで、テーマを使ってこのブログを書いたりはしていたものの、フルスクラッチで構築するのは初めてでした。

「やります」と決めてからデザインの到着まで時間があったので、その間に、クライアントさんの別サイトを参考に、ローカルにサンプルサイトを作って、使いそうな機能をいろいろ実装して見ました。ネットの情報だけでは、やはり不安だったので、書籍を購入しました。

これはあとからかなり役に立ちました。ここで組んだコードをそのまま使うことも多かったです。その際には、先輩フリーランスが「次はこれやってみて」など、必要な機能をいろいろ教えてくれたことも大きかったです。

今は、あるところで教えてもらったプラグイン「Paste」にWordPress関連のフォルダを作成し、ループのコードやヘッダー・フッターの呼び出しのコードを保存しています。WordPressやっていくなら、こういうパターンを理解して、どれだけサクッと呼び出せる環境をつくっておくかで、仕事の質とスピードが変わってきそうです。

デザインを忠実に再現することとよしなにすること

「よしなに」ってこんなに難しいんだ！というのが、実感です。デザインには１２８０px幅と３７５px幅のがあって、間のデザインはよしなにってしようとするのですが、ここにも本当にいろいろな知見がつまっていると感じました。

こういうことって、学習段階ではややこしいので省かれているのだろうか。学習できるようなリソースもあるんだろうなとおもいますが、やはり、案件＝プレッシャーの中でやることで大きく成長できる感じがしました。

あとはデザインで余白の規則性がないところや並びがちょっとずれているところなどもあったりします。これは意図的なのか、それとも、作業の過程でちょっとずれてしまったのか、判断がつかないことがあります。こういうときは、きちんとデザイナーさんとコミュニケーションをとることが大事なのだということを学びました。今回は、間に先輩フリーランスが入ってくれていたので、「それはミスでしょう」とか「それは意図的」など先輩の経験でわかること＝業界では当たり前なことはそこでストップしてくれたのもありがたいことでした。

WordPress案件ではマニュアル作成も

私自身、初めてWordPressに触れたときは、けっこう複雑だなあと思っていました。それまでもライブドアとかFC2とかブログサービスは使ったことがあったのですが、それに比べるとできることが格段に多くて、操作も複雑でした。特にカスタムフィールドを実装すると、実装者にしかわかりにくいところがでてきます。

管理画面での編集と出来上がりのイメージを対比して、作業しやすいよう、また、全体的の中でのどういう作業かを確認できるように、意識して作成しました。

とても丁寧につくっているとほめていただきました！自己評価としては雑なところもあったのですが、素直に喜ぼうと思います。２０年くらい前、子ども用にパワーポイントで社会のスライドを作るマニュアルを作ったことがあったので、そういうことが活きているのかなと思いました。

IE対応

すでに多くのところで必要はないし、これからどんどん必要なくなるかもしれませんが、今回の案件では対応することになったそうです。ここでも、ネットの知見がとても役立ちました。例えば、

height:autolにはみmin-width:1px;をセットにしないと、autoが発動しない。

とか。はじめに、発見した人は、IEがCSSをどう解析しているのかを調べて、その上で、この対応を見つけているのだろうなと想像しました。それとも、IEの公式からでているのだろうか？いずれにしても、ググればわかるという環境はほんとにありがたいです。

まとめ

表示については、先輩フリーランスの指摘、ディレクターさんの指摘のおかげで、なんとかできているという感じです。自分ひとりで品質を保つというところまでは正直まだまだです。また、ぼくの提供できる品質ももっともっとレベルを上げていかないといかんなと思っています。

今はまだ副業ですが、いずれ本業にします。それまでにしっかりとレベルを上げていきます。とても楽しみです。

とっちらかっていろいろ学習していて、 現在は、WordPressのオリジナルテーマ開発をしているので そのあたりで連絡頂いたということでした。

正直なところ、解決できる自信はありませんでしたが、 エラー解決は嫌いではないのでzoomでコードを見せてもらいつつ対応。

コメントの日付表示の後ろに、このエラーメッセージが出てきていました。 nullの変数に配列型でアクセスしているよ！ということはわかりました。 ぐぐると、すぐにいろいろ記事が出てきました。 このエラーメッセージがレンダリングされているってのも気になったのですが、 とりあえず、この変数にアクセスする前に、 それがnullでなくて、値がセットされているかどうかを判定する isset()で解決できそうでした。

市販の有料テーマのコードだったので、 とても複雑だったのですが、エラー時の表示や吐き出されたHTMLを見たりして、 「ここか！」というところを発見したので、 そこに isset()をかませるととりあえずエラー表示が消えました！

エラーが解決できるとやはり嬉しいです。

参考： PHPドキュメント OFFICE OBATA様

その１回目のデザイン案をいただきました。そのときに、トップページにアニメーション指定があったので、あらかじめ、実装してみたので、CSSアニメーションについてまとめます。

基本：@keyframesでアニメーションの流れを、animationプロパティで動き方を指定する方法

@keyframes

まずは、アニメーションの動きの設定。要素の状態を記述していきます。たとえば、文字サイズをだんだん大きくするものであれば、font-sizeプロパティの値を変化させます。

下の例では、h1要素に対してアニメーションを指定しています。

See the Pen by Son Hiroki Hong-su (@sonho463) on CodePen.

@keyframesでは
・アニメーションの名前を設定
・0%から１００％の間でプロパティの値変化を記述
フォントサイズ36px　→　最後に64pxを指定しました。
0%のときの値は省略できます。

ここにいろいろまとめて記述もできます。
例えば、ここで、opacityなども合わせて記述すると、文字が大きくなりながら、透明度も変化させるといったことがかんたんにできます。

animationプロパティ

次に、アニメーションを付与する要素に、animationプロパティを追加していきます。

h1{
animation-name: bigger;
animetion-duration: 3s;
animation-fill-mode: forwards
}

animation関連のプロパティは全部で８個ありました。

animation-name / animation-duration / animation-timing-function / animation-delay / animation-iteration-count / animation-direction / animation-fill-mode / animation-play-state

今回はそのうち３つを指定しています。

animation-name

@keyframesで設定した名前。どのアニメーションを付与するか。これだけでは、まだ動きません。

animation-duration

アニメーションの経過時間を設定。sまたはmsで指定します。

animation-fill-mode

アニメーションが終わったときの挙動を設定します。
none（デフォルト） アニメーションが終わったら最初の状態　
forwards アニメーションの最後の状態を保持
backwards　アニメーションの最初の状態にもどる
both　両方・やってみるとforwardsと同じ挙動でした。

アニメーションが終わって最初の状態か、最後の状態かというところしか必要ないようにしか思えていません。だけど、これからいろいろ複雑なアニメーションになってくると、４つの値を使い分けないと行けないときがくるのだろうと思っています。

やってみて

１．対応していないプロパティ

例えば今回はbackground-clip:text;が当てられた要素にアニメーションを付与して、アニメーションが終わったら、background-clip: unset;にしようとしたかったので、１００％のところにunsetを設定しました。すると、unsetが先に実行されてしまいました。

いろいろ考えて、最終的には、animationではなく、JavaScriptとtransitionを組み合わせて、そこに、さらに、setTimeoutを使ってゴリゴリに思い通りの挙動に持っていきました。

なにかもっとスマートな方法がありそうな気がしています。ご指摘ください。

２．複数のアニメーションのタイミング

複数のアニメーションを同時に付与できるのですが、このタイミングの制御がとてもむずかしいです。animation-delayプロパティを使って、タイミング制御しようとしたのですが、あまりうまく行きませんでした。今後の研究課題です。

まとめ

もっともっと、animationをたくさん使っていきたいなと思います。

アニメーションのもりすぎは良くないですが、自分の事業用サイトなど作るときには、１つのアピールになると思うので、いろいろかっこいいアニメーションを眺めて、自分で再現するなど、今後は練習を重ねていきたいと思います。

参考URL

MDN – animation
【CSS3】@keyframes と animation 関連のまとめ

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

Gitを使おうとした時にxcrun:error

おそらく正確にはXcodeのコマンドラインツールを使用する時ということと思っています（まちがいならご指摘お願いします）

そして、これが起きるのはMacOSをアップデートしxた後です。エラーメッセージをみると、「パスが見つからない」ということのようです。

以下の対応で解決します。

起きる現象

% git --version

->
xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun

対応

% xcode-select --install

ダイアログにしたがってインストールします。

疑問

MacでGitをインストールするのにいくつか方法があります。

1. Xcodeコマンドライツールを使う
2. 公式からダウンロードしてインストール
3. Homebrewでインストール

Homebrew使うパターンやインストーラーでのインストールだとアップデートのときに、いちいちこの減少は起きないのだろうか？

参考にした記事

バージョン管理システム入門　Git のインストール 〜Git をMacにインストールしよう〜

macOSアップデート後の『xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools)…』の対処法

Gatsby v3 Incremental Builds in OSS, new Gatsby Image, and more | Gatsby

We are excited to announce Gatsby v3.0! This new version of Gatsby’s core framework introduces massive improvement to the developer and user experience.

www.gatsbyjs.com

意外とサクッとできました。この機会に、gatsbyブログをもう少しいい感じにカスタマイズしていきたいと思います。どんなふうにしたかをメモにして残します。

何はともあれ新しいgatsbyにアップデート

% npm install gatsby@latest

@latest 最新バージョンを指定しているのです。

依存関係の更新が必要なものをチェック

% npm outdated

~/environment/bochibochi-blog npm outdated +[main]
Package Current Wanted Latest Location
@wordpress/block-library 2.28.2 2.29.1 2.29.1 gatsby-starter-wordpress-blog
gatsby-image 2.11.0 2.11.0 3.2.0 gatsby-starter-wordpress-blog
gatsby-plugin-manifest 2.12.0 2.12.1 3.2.0 gatsby-starter-wordpress-blog
gatsby-plugin-offline 3.10.0 3.10.2 4.2.0 gatsby-starter-wordpress-blog
gatsby-plugin-react-helmet 3.10.0 3.10.0 4.2.0 gatsby-starter-wordpress-blog
gatsby-plugin-sharp 2.14.1 2.14.3 3.2.1 gatsby-starter-wordpress-blog
gatsby-source-filesystem 2.11.0 2.11.1 3.2.0 gatsby-starter-wordpress-blog
gatsby-source-wordpress 4.0.0 4.0.6 5.2.3 gatsby-starter-wordpress-blog
gatsby-transformer-sharp 2.12.0 2.12.1 3.2.0 gatsby-starter-wordpress-blog
lodash 4.17.20 4.17.21 4.17.21 gatsby-starter-wordpress-blog
react 17.0.1 17.0.2 17.0.2 gatsby-starter-wordpress-blog
react-dom 17.0.1 17.0.2 17.0.2 gatsby-starter-wordpress-blog
react-helmet 5.2.1 5.2.1 6.1.0 gatsby-starter-wordpress-blog

まとめて更新

updateをチェックしてまとめてアップデートしてくれる’npm-check-updates’というツールを使います。そのツールをインストールします。

% npm install -g npm-check-updates

これで、ncuコマンドを使えるようになりました。

% ncu -u

ちょっと乱暴ですが、まとめてアップデートのコマンド。これで、package.jsonの中身が最新版になります。

% npm install

で、パッケージを最新版にインストールしなおします。

% npm outdated

で確認すると、何も出てこなかったので、続けて

% gatsby develop

すると無事サーバーが起動して、ブログが表示できました。

管理者のピータンさんの提案で講師をさせていただいたので、その過程を残そうと思います。その時にできたブログがこれー＞ぼちぼちブログ＠Gatsby。

ここに至るまでにはpitangさんにメンターのごとく伴奏していただきました。ありがとうございました！今後、勉強会で作ったブログをカスタマイズして、いずれ、このWordPressをヘッドレスにして、GatsbyJSのブログをメインにしていきたいと思います。

なぜ、今、WordPress　×　Gatsbyか

新しいプラグインの発表。

ヘッドレスWordPressとは？

WordPressは「このページ表示して」という要求に応じて、サーバー側でデータベースから必要なデータをとってきます。これが首から下の部分です。

それを表示できるデータにしてブラウザに渡して表示します。これ頭（ヘッド）

今回は、WordPressから事前にデータだけをもらって（ヘッドレスWordPress）、ヘッドの部分を別の技術を用いて（今回は静的サイトジェネレーターGatsby）つくるということです。

今回はこの「ヘッドレスWordPress」に対して、WordPressだけで運用しているサイトのことを「バニラWordPress」と呼ぶことにします。

WordPressとGatsbyをつなぐのが、REST API　や　GraphQLでデータを取得することができます。

今回は最近注目されているクエリ言語であるGraphQLを使います。

クエリ言語：問い合わせ言語。データに対して問い合わせて必要なデータを抽出したり、並べ替えたりするための言語。SQLとか。

Gatsby+WPによるヘッドレスWPサイト構築の概要

1. WPプラグインのインストール
2. 公式スターターを使用してGatsbyサイトの生成・設定
3. WPサイトへの接続
4. Netlify にデプロイする
5. GraphQLを使ってコンポーネントを構築する

１　WPプラグインのインストール

検索してインストールします。

WPGraphQL

WordPressサイトにGraphQLのスキーマ及びAPIを提供す

WPGatsby

• WordPressサイトをGatsbyへのデータ源として最適化する。

２　公式スターターを使用してGatsbyサイトの生成・設定

1. gatsby-starter-wordpress-blog を使って、新規gatsbyプロジェクトを生成 → gatsby-source-wordpress v4 チュートリアルより

   $ gatsby new bochibochi-blog <https://github.com/gatsbyjs/gatsby-starter-wordpress-blog>
   

2. プロジェクトフォルダへ移動　→ VScodeでプロジェクトを開く

   cd bochibochi
   code .  
   

   • code .コマンドはMacの場合、事前の設定が必要な場合があります。
     1. command + Shift + P でコマンドパレットを開く
     2. shell で検索
     3. シェルコマンド:PATH内に’code’コマンドをインストールします。 Shell command : Install ‘code’ commnad in PATH
   • VSCode内でターミナルを開いておきましょう。
     ターミナル → 新しいターミナル　または　control + Shift + ^
3. 環境変数WPGRAPHQL＿URLの設定
   1. gatsby-config.jsを開きます。
   2. 環境変数 WPGRAPHQL_URLの初期値を設定する。

      resolve: `gatsby-source-wordpress`,
            options: {
           // the only required plugin option for WordPress is the GraphQL url.
              url:
                process.env.WPGRAPHQL_URL ||
                `https://wpgatsbydemo.wpengine.com/graphql`,
            },
      

      以下のように変更

      resolve: `gatsby-source-wordpress`,
            options: {
           // the only required plugin option for WordPress is the GraphQL url.
              url:
      	　　　process.env.WPGRAPHQL_URL ||
                `https://horumont.info/graphql`
            },
      

4. 開発環境で表示してみましょう

   gatsby develop
   

5. Git操作
   1. git add .
   2. git commit -m "first initial"
6. GitHubにリポジトリ作成してPush　ー＞　GitHubCLIを使ってみます。
   1. gh repo create bochibochi
   2. git branch -M main
   3. git push -u origin main

Netlifyへデプロイ

1. Netlifyへログイン
2. New site from Git → サービス選択（ぼくはGitHub）
3. リポジトリ選択
4. 各種設定
   Gatbyサイトならビルドするブランチやディレクトの設定はおおむね自動でやってくれます。
5. Deploy Site→Site settings→Change site name
6. なんやかやとしているうちにデプロイ終了します。アドレスをクリックして確認してみましょう！

ビルドウェブフックの設定

1. Site overviewからSite settingsへ
2. Build & Deploy → Build hooks
   1. Add build hooksをクリック
   2. Build hook name　はどのサイトのフックか分かる名前を設定します。
   3. Branch to build は基本的にmainでOK
   4. Saveをクリック
3. WordPress管理画面での設定
   1. 設定→GatsbyJS
   2. Build Webhookのところに、Netlifyで生成されたURLを貼り付けます
   3. 更新
4. 設定終了。WordPressでかんたんな記事を投稿するか、更新すれば、ウェブフックがきいて自動でデプロイされます。NetlifyのDeployタブを開いておくと、その様子が見て取れます！

まとめ

先日参加した勉強会

【静的サイトジェネレーター】Gatsby.js に一緒に入門しよう vol.2

では、アメリカではGatsby人気で、これから日本でも徐々に浸透し始めてる、いや、すでに火が付き始めているといました。

ぼくもそう思います。WordPress一択の今の日本のウェブ業界の課題にこたえるGatsbyJSは、今まさに勉強する価値のあるテーマです。一度、自分のWordPressからGatsbyサイトをつくってみてはいかがでしょうか！

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タブを開いておくと、勝手にビルド処理が走るのを確認できます！