microCMS クローンを使ってみる

·
SE
Web

microCMS ブログシステムがオープンソースで公開されたそうなので移行先としてどうなのか触ってみる。

MicroCMS ブログアプリのオープンソース化

詳しくは下記を。


microCMSブログをオープンソース化しました
本日、microCMSブログのソースコードをオープンソース化いたしました！リポジトリはこちら。microCMSを利用したJamstack構成のWebサイトはここ1年でだいぶ広まりつつあります。
 

これは嬉しい。 記事内にもあるように、ヘッドレスCMSをちゃんとやろうとするとCMSの管理機能、UI、等ガッツリした構築が必要になって、
あれ？結局 WordPress の前にキャッシュ置いたたり、SSG したほうが楽だなってなってハードルが高い印象だったので、機能があり、使えるものが有るのはカスタマイズや学習目的としても嬉しい。

インストール

構成要素

  • Nuxt（SSG）
  • microCMS（コンテンツ）
  • Netlify（Hosting, Functions）
  • ESLint
  • Prettier
  • PostCSS
  • PWA

Netlify は Vercel でもいけるんかな？ Netlify はすでにこのブログで使ってるのでOK、microCMSのアカウント作成は必要かな。
結構リッチな機能になっていて個人利用だとオーバースペック感はある。あと Next だと嬉しかったな。

microCMS の準備

詳細は はじめに より。

アカウント作成

料金プラン
まず料金体系と各プランによる違い、出来ないことを確認しておく。
今回は検証なので個人利用で無料の Hobby プランで行うが、個人利用でも本利用、更新頻度が高い場合は注意が必要そう。
※途中から有料プランへの変更は出来ないので注意

アカウント登録
上記からアカウント作成。
メールアドレス、パスワードを入力するとメールアドレス宛に認証メールが届くので、メールの認証コードを入力すれば完了。

サービス情報を入力

  • サービス名
    サービスとは microCMS 上で最上位の概念でプロダクト名や組織名などで登録すると良いとのこと。
  • サービスID
    管理画面のURLやAPIエンドポイントのサブドメインに設定される値。変更は出来ないためよく考えて設定すること。
  • サービス画像
    アイコン。
  • プランの選択 Hobby を選択。

以上で完了し、専用管理画面のURLが払い出され、クリックすると管理画面に遷移する。

APIの作成

microCMSのチュートリアルに戻り、microCMSブログ用のAPIを作成していきます。

API名エンドポイント型フィールドID表示名種類
カテゴリーcategoriesリスト形式name名前テキストフィールド
著者authorsリスト形式name
text
image		名前
自己紹介
画像		テキストフィールド
テキストエリア
画像
パートナーpartnersリスト形式company
url
description
logo		会社名
会社URL
説明文
ロゴ		テキストフィールド
テキストフィールド
テキストエリア
画像
ブログblogリスト形式title
category
toc_visible
body
description
ogimage
writer
partner
related_blogs		タイトル
カテゴリー
目次
本文
概要
OGP画像
著者
パートナー
関連記事		テキストフィールド
コンテンツ参照（カテゴリー）
真偽値
リッチエディタ
テキストフィールド
画像
コンテンツ参照（著者）
コンテンツ参照（パートナー）
複数コンテンツ参照（ブログ）
人気の記事※articlesオブジェクト形式articles人気の記事複数のコンテンツ参照（ブログ）
バナー※bannerオブジェクト形式image
url
alt		画像
リンク先 URL
代替テキスト		画像
テキストフィールド
テキストフィールド

※人気の記事は手動でのデータ入力になります。検証時は空欄のまま「公開」で作業をすすめる。
※バナーの記事はデータはデータ入力になります。検証時は空欄のまま「公開」で作業をすすめる。

各定義は API から 右上の「API設定」より各種変更できるため、最後に間違いがないか確認しておく。

コンテンツの追加

API を作成しただけでコンテンツは何もない状態なので各 API にそれぞれ適当にコンテンツを追加、作成して公開しておく。

microCMS ブログの用意

ソースをクローン

GitHub - wantainc/microcms-blog
上記よりクローンし、インストール

> npm install

環境変数の設定

microCMS との連携 API キー情報を設定

> .env
API_KEY=    # microCMS API Key
SERVICE_ID= # microCMS service ID
GA_ID=      # GA tag

検証なので GA は空欄のまま、microCMS の API キーは管理画面、左上の歯車アイコンのところから確認できる

ローカル起動

ココまでで上手く出来ていればアプリを起動すると表示できるとのこと。

> npm run dev

渡しの場合下記モジュールが足らないメッセージが出て上手く出来なかったので追加インストール。

> npm i chokidar

また起動時に、起動するが下記のようなメッセージが大量に出力される。

  1:23  error  Delete `␍`  prettier/prettier
  2:40  error  Delete `␍`  prettier/prettier
  3:1   error  Delete `␍`  prettier/prettier
  4:22  error  Delete `␍`  prettier/prettier
  5:1   error  Delete `␍`  prettier/prettier
  6:55  error  Delete `␍`  prettier/prettier
  7:44  error  Delete `␍`  prettier/prettier
  8:2   error  Delete `␍`  prettier/prettier

✖ 545 problems (545 errors, 0 warnings)
  545 errors and 0 warnings potentially fixable with the `--fix` option.

なにやらインデントや改行系？のエラーらしく、メッセージにある通り --fix オプションで修正できるらしいので実行。

>  yarn run lint --fix

もう一度起動させると

出来た！。

その他

ココまでであれば Netlify の用意はなくとも確認できる。
検索機能もあるが、こちらは Netlify-lambda で実現とのことなので確認したい場合はマニュアル参照。
実際に Web 上で公開していく場合にはマニュアルをみつつ、 Netlify を準備して進めればいい。

とりあえず使い勝手やイメージが出来たので今回はココまでで良しとする。
実際に利用したいのであればあとはソースを編集してヘッダーやフッター、デザインを変えたりが必要でしょう。

今の所記事を書こうと思ったら microCMS 管理画面上で各パーツ等から作成するしか無いので、
プレビューと加筆のこの辺を手間と感じるのであれば規制品の CMS 使えばいいんじゃないって感じなのかな。

使い勝手自体は普通の CMS となんら変わりなく使える。
ちょっとローカル環境の準備に知識がいるくらい。

ブログの移行先にどうかなと思っているので、もうちょっと触って見るかも。

Share Comments
comments powered by Disqus