microCMS

microCMSのはじめ方

チュートリアル
2019/08/26 松田 承一

この記事ではmicroCMSの使い方をご説明いたします。

サービス概要

microCMSはクラウド型のヘッドレスCMSです。
コンテンツ管理のためのサーバ管理は一切不要で、サインアップするだけですぐにサービスを利用開始できます。

APIを作成するとデータ入稿用の管理画面が自動生成され、誰でも簡単にコンテンツを作成・管理できます。
コンテンツはAPI経由で取得可能なためエンジニアやデザイナーは様々なプラットフォームでコンテンツを利用できます。


概要はこのくらいにしてさっそく使い方に移りましょう!

アカウントの登録

まずはアカウントの登録が必要です。
アカウントをお持ちでない場合はアカウント登録画面からアカウント作成を行いましょう。

メールアドレスとパスワードを入力し、利用規約・プライバシーポリシーにも同意できればアカウント作成まではあと一歩。
メールアドレスに記載された確認コードを入力できればアカウント作成は完了です。

サービスの作成

無事にアカウント登録が済めば次へ進みましょう!サービス→API→コンテンツと順に作成していきます。


サービスは https://XXXXXX.microcms.io/ の XXXXXX にあたる部分で、好きな英数字を組み合わせて作成できます。
ここでは架空の株式会社マイクロが使うと想定して micro というサービスを作ってみましょう。
同じサービス名は登録できないためみなさんそれぞれのサービス名を入力してください。

このとき、サービスを識別するための画像も設定することができます。
そのサービスだとすぐにわかるような画像を設定しておきましょう。

たったこれだけでサービスの作成は完了です!
表示されたURLをクリックして次に進みましょう!

APIの作成

次にAPIを作成しましょう。
ここでは簡単な「ニュース」というコンテンツを管理してみます。

まずは基本情報です。

次にリスト形式もしくはオブジェクト形式を選択します。
ここでどちらを選択したかによって入稿画面やAPIで取得できるデータ形式が変わります。

リスト形式

複数のコンテンツを取り扱います。
管理画面ではコンテンツを「追加」していく表示となります。
APIでは下記のようにリストデータを取得できます。

[ { message: 'おはよう' }, { message: 'こんにちは' }, { message: 'こんばんは' } ]

オブジェクト形式

単一のコンテンツを取り扱います。
管理画面ではコンテンツを「編集」していく表示となります。
APIでは下記のようにオブジェクトデータを取得できます。

{ title: '私のブログ', description: '日々のいろんなことを書きます', greeting: 'よろしくね!' }


今回取り扱うニュースはコンテンツを複数追加していくのでリスト形式を選択します。

次にAPIで管理する各フィールドを決めていきます。
今回はニュースですのでタイトルと本文を含む以下のような設定とします。

種類にはテキストフィールドとリッチエディタを選びましたが、日時や画像など様々なフィールド種類を選択することができます。
コンテンツに合わせて適切に選択をしましょう。

以上でAPIの作成は完了です。

コンテンツの作成

APIが作成できるとコンテンツ入稿のための画面が表示されます。
今回のニュースではリスト形式を選択したため、複数のニュースコンテンツを追加できるようなテーブルが表示されているはずです。

それではコンテンツを作成してみましょう。
画面右上の「追加」ボタンを押し、自由に最初のニュースを入力してください。
その後「公開」ボタンを押します。
これで最初のコンテンツの作成と公開ができました!

API経由でデータを取得

いよいよAPIを利用してみましょう。
microCMSは管理画面上で簡単にAPIを試すことができる「APIプレビュー」機能が標準で搭載されています。
まずはそちらを利用してみましょう。

まずはコンテンツ画面の右上にある「APIプレビュー」をクリックします。

既にデータ取得リクエストの準備は整っています。
画面内の「取得」ボタンを押してみましょう。


すると以下のようなJSONレスポンスが表示されます。

{
    "id": "FwVfA_Gel",
    "createdAt": "2020-03-21T06:00:36.195Z",
    "updatedAt": "2020-03-21T06:00:36.195Z",
    "title": "最初のニュースです",
    "body": "<h1 id=\"hNowN06vQ4z\">Hello, microCMS!</h1><p>microCMSヘようこそ!</p>"
}

また、画面内にはAPIを叩くためのcurlコマンドも表示されています。
こちらで直接データを取得することも可能です。

$ curl "https://micro.microcms.io/api/v1/news/FwVfA_GeL" -H "X-API-KEY: 1598164e-2d58-488c-a4af-c51bd7d131a5"

そのほかAPI仕様の詳細についてはAPIリファレンスタブでご確認ください。

ブラウザでデータを表示

API経由でデータを取得することができました。
それでは最後にAPIで取得したデータをブラウザで表示してみましょう。
※microCMSで取得できるのはJSONデータのみのため、ユーザーに内容を見せるためには何らかの表示ロジックが必要です。

ここではサンプルとして HTML/JavaScript を使って表示してみます。
実際にはAPIさえ呼び出せればデータ表示をするプラットフォームは何でも構いません。

こちらが今回作成した index.html です。

<!DOCTYPE html>
<html lang="ja">
  <body>
    <main>
      <h1 id="title"></h1>
      <hr>
      <div id="body"></div>
    </main>
    <script>
      fetch("https://micro.microcms.io/api/v1/news/0ik_dv015", {
        headers: {
          "X-API-KEY": "1598164e-2d58-488c-a4af-c51bd7d131a5"
        }
      })
        .then(res => res.json())
        .then(json => {
          document.getElementById("title").innerHTML = json.title;
          document.getElementById("body").innerHTML = json.body;
        })
   </script>
  </body>
</html>


このindex.htmlを開くとブラウザで以下のように表示されるでしょう。


やっていることは非常に単純です。
Fetch APIを使ってmicroCMSからデータを取得し、そのデータを基にDOMを書き換えています。
(今回は簡単のために原始的なinnerHTMLを使ってしまいましたが実際には何らかのテンプレートエンジンを使うことをおすすめします!)

以上がシンプルなmicroCMSの簡単な使い方です。
次の記事では下書きやプレビューについてご説明いたします。
https://microcms.io/blog/draftkey_and_preview/

おわりに

microCMSは日々改善を進めています。
ご意見・ご要望は管理画面右下のチャット、公式Twitterメールからお気軽にご連絡ください!

引き続きmicroCMSをよろしくお願いいたします!

ABOUT ME

松田 承一
ウォンタ株式会社の代表 / 家族=👨‍👩‍👧 / ヤフー→大学教員など→現職 / 管理画面付きAPIがすぐに作れるmicroCMSというサービス作ってます。

microCMSとは

  1. 開発者、編集者どちらも分かりやすい管理画面

  2. 細かな権限管理や豊富な外部サービス・データ連携

  3. 安心の日本製・日本語でのチャットサポート