Gatsby-microCMSブログをStartBootstrapのテンプレで作りました

2022/04/17 09:30更新

Gatsby microCMS React JavaScript

以前勉強会でとりくんだブログサイトをもう少しいい感じに仕上げて、自分のポートフォリオに載せたいと思いました。

完成したブログ GitHubリポジトリ

実際のブログサイトとしては、機能的にはまだまだなので運用は難しいですが、 Gatsbyのスターター的にも使えるように、READMEもそこそこちゃんと書きましたので、ちょっといろいろなところでリンクはろうと思って記事を書いています。

記事は１年前のものなので、microCMSの設定関連が少し古いかもしれません。

以下、そのときに、資料として作成したものを掲載しようと思います。

１．microCMS（ヘッドレスCMS）がいいよという話

1 ヘッドレスCMSとは？

- ブログサイトを例に考えてみましょう。
- 記事のページを１つずつHTMLとCSSで書くのは大変、記事を更新、追加するのにコードをいじるのが大変
- →　CMSコンテンツ・マネジメントシステム
    - 記事を書いて登録すれば、WEBで表示ができるいろいろなブログサービスもCMSの一つ
    - 見えている部分（フロントエンド・頭）と見えていないデータベース・管理部分（バックエンド・体）があります
    - 代表的なCMS　WordPress　表示部分をテーマ等を使ってカスタマイズできる。データベース部分もある程度カスタマイズ可能
- CMSのうち、データベース＋管理機能の部分をあつかうツール・サービスがヘッドレスCMSといいます。
    - →ヘッドレスだから相棒（レンダリング（表示）を担うツール）が必要
    - 今回は静的サイトジェネレータGatsbyを使用します。

2 ヘッドレスだと何がいい？

- 好きなようにデータベースの構成を作れる
    1. ヘッドレスCMSではGUIでデータベースからテーブルを作成することができるので、バックエンドでプログラミングするのに近い自由度でデータベースを作れます。リレーショナルデータベースとして使うことができます。
- 開発者とコンテンツ管理者の分業ができる
    - 例えば新規立ち上げのときでも、ヘッドレスCMSでコンテンツを作りつつ、フロントエンドの構築作業ができて、効率的な開発が可能
- フロントで好きな技術を扱える
    - エンジニアの得意な技術、コンテンツや状況に応じた技術を選択できる
    - 学習したい技術を使って練習するなどもOK
- 引っ越しが簡単・フロントの技術変更が容易
    - 今回、そんの構築したものに変更を加えてあらたな機能追加した場合
    - アップデートしたら、新たにプロジェクトを起こして、連携の設定をすればOK
- １つのデータソースから複数のところ（ウェブアプリ、ネイティブアプリ・・・）への展開が可能
    - 技術さえあれば、1つのデータをWEBアプリで、ネイティブアプリで使うことができる。
- 非エンジニアの人でコンテンツ更新が簡単に
    1. コードをさわらなくてもいい
- 一部分だけをヘッドレスCMSで管理できる
    1. 例えば、LPで３つくらい並列で「ベネフィット」とか表示するときも、その部分をヘッドレスCMSで管理できたりもします。
    2. 自分のポートフォリオ部分
    3. microCMSだとくりかえしフィールドなどを使うとかなり便利そう
- SSGで展開することで早くて、安全で、強力なサイトに

3 ヘッドレスCMSいろいろ

- Contentful
- Strapi
- DatoCMS

4 microCMSとは

- 日本製（ヘッドレスCMS日本製少ない）     
    英語のヘッドレスCMSばかりの中でUIが日本語
- 日本語のサポート、手厚い。
    - 画像の扱いで困ったとき、日本語のチャットで問い合わせできるというのはありがたかった。→　すぐ返答いただけました。
- どんどん開発が進んでいます。
    
    
- UI/UXがわかりやすい
- カスタムフィールド、繰り返しフィールド→いろいろなサイト構築に
    - そんのポートフォリオサイトのポートフォリオの部分
    - サイトのキャンペーン表示部分またはLPのコンテンツ部分に導入することで、ノーコードでお店の人が更新
- 個人ブログや個人開発レベルなら無料で公開まで
- microCMSのユースケースから
企業のDX推進にもよく用いられるようになっている
    - [https://blog.microcms.io/usecase-acall](https://blog.microcms.io/usecase-acall)
        1. アップデートのメンテナンスをしなくていい
    - [https://blog.microcms.io/usecase-interspace](https://blog.microcms.io/usecase-interspace)
        1. 記事修正しやすい
    - [https://blog.microcms.io/usecase-beatfit](https://blog.microcms.io/usecase-beatfit)
        1. 本来ならバックエンドでデータベースや管理画面を構築するところをmicroCMSで実現　→　工数減

２．Gatsby（静的サイトジェネレータ）がいいよという話

1 Gatsbyとは？

2 SSG（静的サイトジェネレータ）

- 早い・安全・強い

3 豊富なプラグイン

- プラグインでいろいろな機能を追加できる
    - 画像処理
    - SEO設定
- いろいろスターターがあります
- テーマを使うと、アップデートにも対応！
    - WordPressのテーマアップデートみたいな感じ

4 Reactベース

- jsxファイル→htmlに似ている
- コンバーターもあるので、テンプレート、自分で書いたhtmlを変換できる
    - [https://transform.tools/html-to-jsx](https://transform.tools/html-to-jsx)
- cssの当て方もいろいろいい感じのものがある
    - scss,sassでもOK
    - CSSinJS
    - 今回採用
        - ノーマルCSS→global.css bootostrap
        - styled-components

5 graphQL

- いろいろなデータソースを１つのインターフェースで管理できる！
- ミックスもOK

３．Gatsby-microCMSブログ構築デモと解説

１．Gatsbyプロジェクトの生成

プロジェクト生成

gatsby new myblog https://github.com/sonho463/starter-microcms.git

コードエディタでプロジェクトを開く

// プロジェクトのフォルダへ移動
cd myblog

// コードエディタでプロジェクトを開く
code .

２．microCMSの設定

ユーザー登録〜コンテンツ（API）設定
1. サービス名を設定します。後でGatsbyで接続するときに使用します。
2. CMSにおいては、データベースに当たる部分
3. APIの設定：APIは「テーブル」に当たる部分
  - 記事API、カテゴリAPI、設定APIの３つのAPIを作成
    - 記事API、カテゴリAPI：リスト形式
    - 設定API：オブジェクト形式
  1. 記事(posts)とカテゴリ(category)のAPIを作成（リスト形式）
    1. コンテンツ（API)の横の＋
    2. API名・エンドポイントを設定
      - API名はわかりやすい名前、エンドポイントは以下
        
        ブログ記事のAPI：posts
        
        カテゴリのAPI：category
    3. APIの型を選択　→リスト形式
    4. schemaをインポート
      1. microcmsSampleFiles/microcmsSchemaフォルダ内にあります
postsAPIの設定（categoryAPIはそのままでOK） - categoryフィールドの形式を「コンテンツ参照」にしているので、インポートしたあとに設定をしなおします。 1. postsAPIを選択、画面右上のAPI設定 2. APIスキーマを選択 3. カテゴリフィールドの種類を「コンテンツ参照」にして、参照先をcategoryに設定 4. 変更をクリックして設定反映 5. 記事を追加
1. csvでサンプルファイルをインポート
  - ルートの microcmssampleFiles/csvフォルダにあります
2. 自分で記事を追加してもOK
3. 記事データがないとビルドエラーが出ます。
  1. ブログ記事は2件
  2. カテゴリは1件データがあればOK
  3. ブログ記事のうち１つは、すべてのフィールドにデータを設定する
設定APIを追加
1. 上記と同じ流れでオブジェクト形式で追加
2. オブジェクト形式のAPIは、コンテンツのインポート機能はないので、直接、タイトルとサブタイトルを追加

３．GatsbyとmicroCMSの接続設定

環境変数設定ファイル作成
1. ルートフォルダに以下のファイルを作成
  
  .env.development
  
  .env.production
microCMS管理画面からapikeyを確認してコピー・ペースト

環境変数設定ファイル

MICROCMS_API_KEY = "YOUR_API_KEY"
MICROCMS_SERVICE_ID = "YOUR_SERVICE_ID"

４．Git〜確認〜デプロイ

Gitに登録

GitHub

git remote add origin https://github.com/sonho463/myblog0529.git
git branch -M main
git push -u origin main

gatsby develop
1. microCMS側にデータがないとビルドエラー
2. ブログ記事は2件、カテゴリは1件、configも入力しておく
gatsby build → gatsby serve → localhost:9000
GitHubへ
1. Githubにリポジトリ作成
2. git push
git push
デプロイ
1. 環境変数の設定デプロイ先の選択はいくつかありますが、それぞれで環境変数を設定しておく必要があります。
2. Netlifyへデプロイ

５．コードや表示ページを見ながら解説します。（時間的に触れないかもしれません）

GraphQL の記述について
CreatePageでページが生成される仕組み
1. post-template.jsx
index-templateのページネーション機能（GraphQLのフィルター機能で実装）
1. カテゴリページには未実装?
previous,nextのリンクについて（かなりハマったのでその話）
1. GraphQLでデータを読み込んだときにnullだとエラーでストップ
2. 入れ子のオブジェクトで読み込むことで、null判定する
画像の扱い
1. gatsby-source-microcmsプラグインがgatsby-pluguin-imageに未対応
2. gatsby-plugin-imageとは
3. 画像最適化にはImgixを利用
設定いろいろかえてみる
1. 記事一覧ページの表示数
  1. GraphQLの引数　limit,skip　を利用
2. トップページの背景画像
  1. ファイルの入れ替えで対応
  2. 記事一覧ページとカテゴリ別ページ
  3. アバウト
  4. コンタクト
3. どうしても、コードを触らないといけないところ
  1. コンタクトフォーム→GoogleFormをiframeタグで埋め込んでいます
microCMSの無料プランの制限について
- https://microcms.io/pricing
- サービス数１個
- コンテンツ（API）数　１０個
- リクエスト数
  - Read　無制限
  - Write　１００回

４．まとめ

gatsbyとヘッドレスCMSの組み合わせにいろいろな使い所
- 企業のDX推進
- お店サイトで、お店の人で更新できる
- テンプレート（＋ちょっとカスタマイズ）でOKなら短時間で構築
学習のために構築して、少しググりつつカスタマイズしてみる
まずはこのスターターで試してみてください。

そんほんす

ウェブ制作開発WEBSON代表／ぼちぼちいきます。でも確実に／小学校教員経験20年以上／over40webclub 主催Compass勉強会で講師（GatsbyJS/デプロイ方法・Git基礎）／現在先輩フリーランスのコーディング〜WordPress化案件お手伝い中。

ひがしに返信

そんほんす

2022/04/17

コメントありがとうございます。遅い返信で申し訳ないです? Reactベースなので、ひがしさんならすぐだと思います！

返信

ひがし

2022/03/21

ヘッドレスCMSいいですよね！　去年microCMSの事を知ってから活用方法について関心を抱いていたところです。まだGatsbyでの構築はした事がないのですが、ReactとNext.jsを触った事があればいけそうですかね……？

返信