microCMSテンプレートという新しいサービスがリリースされたので使ってみました。

microCMSテンプレートとは

そもそもmicroCMSとは何かについては、公式ホームページか私の別の記事を参照してください。
簡単にいうと、Webサイトで必要なコンテンツ(ブログで言うとタイトルや本文など)を作成・編集し、APIで取得できるサービスです。
microCMSを使うと、コンテンツはそのままに自分で選んだフレームワークでブログの構築ができます。
それゆえに初学者にとっては学習コストがかかりますし、機能追加や環境移行にも多大な時間がかかることが問題です。
microCMSテンプレートは、Github上に上がっている、テンプレートを利用して特定のフレームワークで書かれテンプレートとmicroCMSのフィールドを高速に構築することができます。
つい最近(6月上旬くらい)にリリースされたため使ってみることにしました。

microCMSの公式サイト : https://templates.microcms.io/
また、詳しい解説はこちらの公式資料を見てもらえば大丈夫かと思います。
https://speakerdeck.com/microcms/xin-ririsu-microcmstenpureto

実際に使ってみた

今回はこちらのブログのテンプレートを使ってみることにしました。
https://templates.microcms.io/templates/detail/a530e59f-d66d-4b85-9ef5-4cf4288adb09

Next.jsでブログサイトを公開するためにテンプレートが用意されています。

今回作成したものでは以下のサービスへのアカウント登録が必要です。

• Githubアカウント
• microCMSアカウント
• Vercelアカウント

使用する前にテンプレートと、動作環境を確認しておきましょう。これは同ページに記載されています。
MITライセンスであり、私の環境にはすでにNode.jsのv18系が入っているので問題ないと判断しました。

早速テンプレートを構築します。
基本的には画面の指示に従っていけば良いです。

Githubと連携し、テンプレートを作成します。
プライベートリポジトリで作成するオプションもありますが、せっかくなのでパブリックで作成することにしました。

上記の「セットアップを開始する」ボタンを押すとセットアップが開始します。私の場合は3秒程度で完了しました。
完了すると以下の情報が表示されます。

• サービスID,
• APIキー
• Githubリポジトリ
• 環境構築の方法

また、この時点で自身のmicroCMSアカウントにコンテンツが作成されているため確認しておきましょう。

その後は、Githubのリポジトリ内のREADME.mdに環境構築方法が記載されているのでそれに従って構築するだけです。
具体的には以下の手順を実施します。

1. 環境変数を自分のものに設定する。
2. 必要なパッケージをインストールし、ローカルサーバーでチェック
3. Vercelで環境変数を設定し、デプロイ

これにより、ブログの構築が完了しました。
あとは、ソースコードを修正し自分好みのレイアウトにしたり、microCMSのコンテンツを自分のものに変更したりしてオリジナルのブログを完成させましょう!!

今回作成した私の最終成果物が以下にあがっています。(Vercel、microCMSともに無料プランを使用しているため、他のWebアプリを作ったら削除する可能性があります)
Githubリポジトリ : https://github.com/matsunagadaiki151/first-microcms-templete
Webサイト : https://first-microcms-templete.vercel.app/
[2023/7/22追記]
該当Webサイトは削除しました。

使ってみた感想

1時間でブログができた

特段難しいことはなく、テンプレートのデプロイまでで30分、改造含めて1時間程度で構築できました。
このため、ブログを作るハンズオン演習の題材にも向いていると感じました。
また、プロダクト開発の初期段階で、MVP(minimum viable product)として開発する目的でも使えるのではないでしょうか。

学習目的でも使える

他人のソースコードを眺められるのは非常に勉強になります。
私の場合、Next.jsのApp Directory構成で開発したことがなく、それを軽く見ることができたので非常に参考になりました。
また、タグ検索や、キーワード検索等の機能を実装していないのでそこも参考にしたいと思います。

今回は以上になります。microCMSテンプレートでは自分のサイトをテンプレート化し、公開することもできるのですがちょうど自分のブログをリプレイス中だったのでまたの機会に実施しようと思います。