Help us understand the problem. What is going on with this article?

国産Headless CMS 「Micro CMS」を試してみた

More than 1 year has passed since last update.

:computer: Headless CMSとは

Headless CMSは、Wordpressなどとは違って本体のウェブサイトと管理画面が完全に分離されているのが特徴の CMS(コンテンツマネジメントシステム) です。

これを使うと、フロントエンドとCMS側が分かれるのでそれぞれを別の場所に配置することが可能です。

動的なコンテンツを表示することをサーバーを持たずに行うことが可能になるのが魅力です。

:open_mouth: Micro CMSとは

microCMS   APIベースの日本製ヘッドレスCMS1.png

Micro CMSは国産のHeadless CMSです。

これまでのHeadless CMSというと「Contentful」が主流な気がします。

Contentfulは日本のサービスではないので英語が基本になりますが、Micro CMSはデフォルトで日本語に対応していたり、日本語でのチャットサポートがあるのが良いと思いました。

:closed_book: 使い方

登録

上記画面の「無料ではじめる」または「新規登録」から始めます。
特に難しいところはないと思うので割愛します。

サービスの新規作成

管理画面 - microCMS.png

自分の画面では既にサービスを作ってしまってますが、新規登録すると、概ね上の画像と同じようなサービスを立ち上げる準備画面に行くと思います。

「好きなサービス名」「ドメイン名」を決定します。
ドメイン名は一意なので他の人と被っていない必要があります。

画面右下の「次へ」へ進むと、画像の設定に進み完了です。
ちなみに画像の登録は任意なのでスキップ出来ます。

サービスの作成はこれで終わり。

APIの新規作成

管理画面 - microCMS (2).png

次は作ったコンテンツを外部から取得するためのAPIを作成します。
上の画像い近い画面が出てくると思うのでサイドバーの「+」ボタンをクリックすると、API作成のための画面が出てくるはずです。

サービスの新規作成に似ていますがこっちはAPIなので別物です。

新着情報の記事を題材としてコンテンツを作ってみる

管理画面 - microCMS (3).png
今回は「お知らせ」のコンテンツを作ることにしたいので、API名を「お知らせ」エンドポイントは「news」にします。

管理画面 - microCMS (4).png
APIの型を用途や好みに応じて選択します、今回はリスト形式で。

フィールドを作る

管理画面 - microCMS (5).png

DBのテーブルを作成するような感じで、フィールドを作ります。
お知らせには「タイトル」「本文」「投稿日時」が欲しいです。

なのでタイトルフィールドと本文フィールドを作ります、投稿日時はデフォルトのcreatedAtがあるのでそれを使います。

コンテンツ投稿画面のプレビューが出る

管理画面 - microCMS (6).png

Wordpressとかにありそうなエディタの画面が出てきます。
特に問題なさそうなら完了です。

コンテンツを投稿してみる

管理画面 - microCMS (7).png

「追加」ボタンを押して、タイトルと本文を適当に追加して投稿してみます。管理画面 - microCMS (8).png

「公開」を押して完了。

APIを叩いてみる

さて、いよいよコンテンツを取得してみます。
管理画面 - microCMS (9).png

・タブ部分の「API」をクリック
・X-API-KEYの「表示」ボタンを押して、API-KEYを確認する

あとは、「自分のドメイン.microcms.io/api/v1/エンドポイント」に対して、カスタムヘッダ「X-API-Key」のValueに上で表示したAPI-KEYを付与してGETリクエスト

することで取得出来ます。

「試してみる」というボタンを押すと、どんな形式でレスポンスが返ってくるかと、リクエスト先が確認出来ます。

サービスのトップページ中ほどにもJavaScriptでの取得例が載っています。
https://microcms.io/

試してみた

お手軽なのと慣れている方法でやりたいので、CodesandBox 上の Vue.js プロジェクトでAxiosを使い取得してみます。

httpリクエストが出来ればfetchでも別の言語でも何でも良いです。

https://codesandbox.io/s/vuy9x

レスポンスが無事返ってくる

codesandbox-nuxt - CodeSandbox.png

投稿した内容がちゃんと取得できていますね。

:file_folder: まとめ

かなりお手軽にCMSの構築と、APIとして公開をすることが出来ました。
制限はありますが無料枠があります。(2019年9月現在)

ちょっとした動的機能のあるウェブサイト(コーポレートサイト、イベント告知サイト)などにはピッタリだと思います。

エンジニア側としても、VueやReactなどとのフレームワークとの相性も良いです。

とりあえず以上!

oimo23
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away