microCMS

microCMSのはじめ方

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

microCMSにお越しいただき誠にありがとうございます。
この記事ではmicroCMSの使い方をご説明いたします。

* サービス概要
* アカウントの登録
* サービスの作成
* APIの作成
* コンテンツの作成
* API経由でデータを取得
* ブラウザでデータを表示

サービス概要

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

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


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

アカウントの登録

まずはアカウントの登録が必要です。
アカウントをお持ちでない場合はアカウント登録画面からアカウント作成を行いましょう。
アカウント登録画面トップページ 、もしくは弊社の営業担当から入手してください)

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

サービスの作成

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


サービスは https://XXXXXX.microcms.io/ の XXXXXX にあたる部分で、好きな英数字を組み合わせて作成できます。
ここでは架空のFizzBuzzコーポレーションが使うと想定して fizzbuzz というサービスを作ってみましょう。
同じサービス名は登録できないためみなさんそれぞれのサービス名を入力してください。


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


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

APIの作成

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

まずは基本情報です。


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

リスト

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

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

オブジェクト

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

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


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

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

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


最後に入稿画面とAPIのサンプルが表示されます。
確認して問題なければ作成を完了しましょう。

コンテンツの作成

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

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

API経由でデータを取得

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

まずはコンテンツ画面の右上にある「APIリクエスト」をクリックします。


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


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

{
    "id": "X4ittauRH",
    "createdAt": "2019-08-27T06:02:42.597Z",
    "updatedAt": "2019-08-27T06:02:42.597Z",
    "title": "最初のニュースです",
    "body": "<h1>Hello, microCMS!</h1><p>microCMSヘようこそ!</p>"
}


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

$ curl https://fizzbuzz.microcms.io/api/v1/news/X4ittauRH -H "X-API-KEY: YOUR_API_KEY"


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

ブラウザでデータを表示

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

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

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

<!DOCTYPE html>
<html lang="ja">
  <body>
    <main>
      <div id="title"></div>
      <hr></hr>
      <div id="content"></div>
    </main>
    <script>
      fetch("https://YOUR_SERVICE.microcms.io/api/v1/news/VpMiRKFUF", {
        headers: {
          "X-API-KEY": "YOUR_API_KEY"
        }
      })
        .then(res => res.json())
        .then(json => {
          document.getElementById("title").innerHTML = "<h1>" + json.title + "</h1>";
          document.getElementById("content").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というサービス作ってます。