今回の案件の概要

ページ構成

基本的に、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の公式からでているのだろうか？いずれにしても、ググればわかるという環境はほんとにありがたいです。

まとめ

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

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

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

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

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