microCMSを使ってみる

日本製のヘッドレスCMS「microCMS」を使ってみます。

アカウント登録

まずはアカウントを作成します。
公式サイトにアクセスして、新規登録をクリックします。

メールアドレスとパスワードを入力して、アカウント登録します。

登録したメールアドレスに認証コードが送信されるので、そのコードを入力して登録完了です。

サービス登録

次にサービス情報を登録します。
サービス名とサービスIDを入力後、次へをクリックします。

サービスを識別しやすいように画像を設定します。

これでサービス登録が完了しました。

API作成

次にAPIを作成してみます。
今回はお知らせというコンテンツを作る想定で試してみます。

API名を「お知らせ」、エンドポイントは「news」としました。

APIの型を「リスト形式」と「オブジェクト形式」から選択します。
「リスト形式」はコンテンツ内容が複数になる場合、「オブジェクト形式」はコンテンツが単一の場合に選択します。

今回はコンテンツが複数になるので、「リスト形式」を選択します。

次にAPIで使用するフィールドを設定します。
フィールドには「フィールドID」「表示名」「種類」の3つを設定する必要があります。

フィールドの種類は以下があります。

• テキストフィールド
• テキストエリア
• リッチエディタ
• 画像
• ファイル(Starterプラン以降で使用可能)
• 日時
• 真偽値
• セレクトフィールド
• コンテンツ参照
• 複数コンテンツ参照
• 数字
• インラインフレーム(Businessプラン以降で使用可能)
• カスタム
• 繰り返し

今回はお知らせなので、タイトル(テキストフィールド)と本文(リッチエディタ)を用意しました。

これでAPIの作成が完了しました。

APIの作成ができたので、実際にお知らせを登録してみます。
右上の追加ボタンを選択して投稿画面を開き、入力して右上の公開をクリックします。

これでコンテンツの登録が行えたので、APIが利用できる状態になりました。

APIの利用

実際にページ上で表示してみます。
上部の「API設定」から「API名」を選択して、先ほど設定したエンドポイントのURLを確認します。

次に上部の「APIリファレンス」をクリックして、左に表示される一覧から使用したい項目を選択します。
今回はお知らせ一覧を表示したいので、2番目の「GET /news」を選択します。
X-API-KEYの表示ボタンをクリックして、認証キーをコピーします。

これで表示に必要な情報が揃ったので、JavaScriptでの表示を試してみます。
まずHTMLに表示するエリアを用意します。

<div id="list"></div>

次にJavaScriptでAPIを叩いて、返ってきたjsonを表示します。

fetch("https://cly7796.microcms.io/api/v1/news", {
	headers: {
		"X-API-KEY": "認証キーをここに入れる"
	}
})
.then(function(res) {
	return res.json();
})
.then(function(json) {
	var fragment = document.createDocumentFragment();
	for (var i = 0; i < json.contents.length; i++) {
		// titleの取得
		var title = document.createElement('h2');
		title.textContent = json.contents[i].title;

		// bodyの取得
		var body = document.createElement('div');
		body.innerHTML = json.contents[i].body;

		var item = document.createElement('div');
		item.appendChild(title);
		item.appendChild(body);
		fragment.appendChild(item);
	}
	document.getElementById('list').appendChild(fragment);
})

これで入力した内容がページに表示できました。
JavaScriptで表示のデモページ(認証キーを入れていないので動作しません)

ただこの方法の場合、X-API-KEYがコード上で見える状態になってしまいます。
X-API-KEYとエンドポイントのURLが分かってしまうと誰でもAPIを利用できる状態になってしまうので、取り扱いに注意する必要があります。

対策として、PHPを使って取得する形にしてみます。

$curl = curl_init('https://cly7796.microcms.io/api/v1/news');
curl_setopt($curl, CURLOPT_HTTPHEADER, array("X-API-KEY: 認証キーをここに入れる"));
$response = curl_exec($curl);
curl_close($curl);
echo json_decode($response, true);

データを取得してそのまま出力しただけですが、動作を確認することができました。
PHPでの表示のデモページ
これでX-API-KEYはコード上で見えなくなりましたが、取り扱うコンテンツなどによってはこの対応だけでは不十分な場合もありますので、案件内容によって対応策を考える必要がありそうです。