こんにちは、楽して働きたい人です。
Web担当、してますか？ EC担当、してますか？ 筆者は（当然のように）両方やっています。
さて、そんなときに困るのがコーポレートサイトの「更新履歴」だとか、「休日のお知らせ」だとか、ECサイトの「新製品のお知らせ」だとか、細々～っとした更新作業。
筆者が管理している大体のサイトはCMSを入れてしまっているので問題ないのですが、どうしても外注先の法外な見積もりだとか、CMSを入れられないサーバーだとか、そもそも規約でblogにすらリンクを張りづらいとか、文明の利器を利用しているのに文明の利器を利用できない制限が出てくる場合があります。
そんな中、広告に目が留まったのが、microCMSというサービスでした。
microCMSってどんなサービス？
Webブラウザ上のJavaScriptからもアプリからも、何も考えずにお気軽にデータを取得できるサービスです。余りにもお気軽すぎてセキュリティが心配になります。実際、機密情報とかは格納しない方が無難です。当たり前ですが。
取得するデータは、データの構造の定義からデータの追加、更新まで全てmicroCMSのWeb管理画面上で行います。触った感じは、CMSというよりは簡易データベース提供サービスといった感じでしょうか。
しかも、月間転送量100GBまでは無料。画像データをガンガンぶち込むならともかく、テキストベースで配信するコンテンツがメインなら余程のことがなければ上回ることはないと思います（普通のサイトなら全体の転送量も100GB行かないのではないでしょうか）。
そんな訳で触って見たよ。
とりあえずアカウントの登録
microCMS公式サイトからアカウントを登録します。必要なのはメールアドレスとパスワード。登録を行うと、認証コードが登録したメールアドレスに届くので、それを入力すれば登録完了です。かんたん、すぐ開発に取りかかれる！
登録が完了すると上記のような画面が表示されるので、指示通りに進めるとデータを取得するためのAPIとデータが完成します。
念のために概念を説明しておくと、
- アカウント
- サービス
- コンテンツ
の3種類がmicroCMSにはあり、アカウントについては登録に使用したメールアドレス、パスワードの組み合わせで、これを用いて複数のサービスと、コンテンツを管理します。また、無料版までは2つまでのアカウントでサービスやコンテンツを共有して管理できます。
つづいてサービスは、アクセスするURLのサブドメインにあたり、サービス内に複数のコンテンツ（例えば、newsやblog, campaignなど）をURL上ではフォルダとして管理できます。
とはいえ、ざっくりと言えば、「サービス」がコンテンツを整理するためのフォルダのようなものだと考えると分かりやすいと思います（入れ子はできませんが）。
最初のサービスを作って見るよ
ウェルカム画面から先に進むと、最初のサービスを作成する画面に遷移します。サービス名には分かりやすい名前（例えば、「ECサイト用CMS」など）、サービスIDにはそれと関連したサブドメインの要件を満たす半角の文字列（ict-ecなど）を入力するといいでしょう。
問題がなければ右下のボタンから次の画面に遷移します。
サービス画像の選択（スキップ可能）
続いて、サービスの画像をアップロードすることができます。ぱっと見て分かりやすい画像にするといいですが、最初から画像を用意するのは大変（面倒）なので、右下のボタンからスキップしてしまいます。
サービス登録の完了
内容が問題なければ、以上の画像のような画面に遷移するので、表示されているURLをクリックしましょう。
コンテンツ(API）のひな形の作成
続いて、コンテンツの作成に進みます。
最初はそのまま上図のようなコンテンツ作成画面に遷移します。遷移しなかった場合や、2つめのコンテンツを作りたい場合は、上図矢印の先にある「＋」アイコンをクリックします。
そして、分かりやすいAPI名と、URLの末尾に当たる文字列（エンドポイント）を決定します。ここではシンプルに、それぞれ「ニュース」と「news」でいいでしょう。なお、エンドポイントは他のユーザーと重複しても大丈夫ですが、4文字以上である必要があるようです。
APIの種類の決定
続いて、APIの型、種類を選択します。
説明で若干迷いますが、リスト形式は「無数に増える形式」、オブジェクト形式は「常に1つ（特定の数）」だと考えればいいと思います。
説明文ではリスト形式に「ブログやお知らせの一覧」となっていますが、本文を含む内容でも大丈夫です（一覧をリスト形式で作って、そこからオブジェクト形式にひとつひとつリンクする……という訳ではないです）。
今回はお知らせ、ニュースを作って見たいのでリスト形式にします。
APIスキーマを定義（データの種類や数の設定）
新規コンテンツを作成すると、上図の様な「APIスキーマ（インターフェース）を定義」する画面に遷移します。
- フィールドID：プログラムからAPIを呼び出すときに、データを特定するIDです。JSON形式で使用出来る半角英数字が使えます。
- 表示名：管理画面で人間が見て分かりやすい名前を付けます。
- 種類：データの型を決定します。
- 追加ボタン：コンテンツに含めるデータを増やします（タイトルと本文、更新日時など）
フィールドID, 表示名については通常通り、キーボードで入力します。種類については、クリックすると
上記のような選択画面が現れます。基本的に説明されている通りです。日時型は選択しやすく、画像データなどもアップロードできるのが嬉しいですね。
お知らせのAPIスキーマを定義すると上記のような形になります。アイコンを設定したい、などの場合は「種類：画像」などを使い、画像縮小コマンドなどを使うといいでしょう。
スキーマの定義が終わったら、右下の「次へ」ボタンで進みます。
プレビューの確認
APIスキーマの定義が終わると、実際のデータを入力するプレビュー画面になります。特に確認することもないので、そのまま右下の「完了」ボタンで次に進めます。
ここまでで、実際にコンテンツをAPI経由で配信する準備ができました。
コンテンツ（実データ）の作成
コンテンツの定義が終わると、上記のようなコンテンツの管理画面に遷移します（または、左メニューから「API名」を選択して開くこともできます）。
定義は終わっていますが、このままでは配信すべきコンテンツがないので、右上の「＋追加」ボタンからコンテンツの編集（作成）画面に遷移します。
コンテンツの追加、編集
コンテンツの追加/編集画面ではスキーマの定義で設定した通りのデータ編集が出来ます。
「テキストエリア」タイプでは、さすがに大手CMSほどではないですがGUIタイプのリッチテキストエディタが使用できるので、APIスキーマの定義だけをシステム担当者、Web担当者が行って、実運用は営業や広報の担当者が行う……と言ったことが可能になります。らくできますね。
コンテンツの公開設定
右上の公開ボタンから、コンテンツを公開状態にしてAPIから取得できるようになります。
また、公開ボタン右側の「＞」アイコンから、「下書き保存」や「予約公開」など、CMSらしい機能が利用可能です。これで朝9時丁度の更新作業や年初の更新作業から解放されます。やったね（ファイルを準備しておいてcronやタスクからFTPを蹴ればいいだけですが）。
コンテンツの複数登録
リストタイプの場合は、1種類のコンテンツに複数のコンテンツを登録出来ます。
ただし、編集画面では「公開」ボタンしかなく、「新規追加」ボタンがないため、左メニューの「コンテンツ名」を1度クリックして一覧画面に戻ってから「＋追加」ボタンをクリックする必要があります。
普段の運用ではそれほど問題ないと思いますが、最初に大量のデータを登録したい場合などは少しわずらしいかもしれません。
コンテンツを登録した状態
コンテンツを複数登録すると、上図の様に一覧として表示されます。
なお、標準でも「作成日時」、「更新日時」は自動的に付与されますが、ニュース記事などの場合、過去や未来の日付を入力したいことがおおくありますので個別に「日時」型のフィールドを用意しておいた方が後々楽になると思います。
また、先に記述した通り、この状態から「＋追加」ボタンで更にコンテンツに内容を追加していくことが出来ます。
APIプレビューの活用
コンテンツ一覧画面では「＋追加」ボタンの下、コンテンツ編集画面では「公開」ボタンの下にある「APIプレビュー」リンクより、実際にAPIにアクセスした場合にどのようなレスポンスが帰るか、実験することができます。
標準で、GETメソッドでアクセスすべきURLが入力されていますが、ここのURLパラメーターの形でコマンドを追加入力することが出来ます。ここでは、fieldsパラメーターにAPIスキーマの定義で入力したフィールドIDのbody, dateと、標準で付与されるidを与えています。
fieldsパラメーター
カンマ（,）区切りでAPIから取得したいフィールドを指定することで、余計なフィールドのデータを受信しないようにできます。転送量の削減や、単純に通信量を減らして応答速度を上げたりすることができると期待されます。
更に、APIのテストやCUIからのダウンロードでよく使われるcurlコマンド（若干の違いはあるようですが、現在ではWindows10上でも使用できるコマンドです）のサンプルも表示されているので、コピー&ペーストで手元のPCからも実験することができます。また、API-KEYもここに表示されているので、実装に必要な情報は全てこの部分に含めることが出来ます（fields以外のAPIで使用出来るコマンドについては、APIリファレンスを参照します）。
（必要があれば）コマンドをURLパラメーターとして入力し、「取得」ボタンをクリックすることで、APIにアクセスした結果が表示されます。
この結果が問題なければ、実際に、静的なWebページでは主にJavaScriptなどでアクセスすることでJSON型のデータとして活用することが出来ます。
かんたんに実装してみた
$(document).ready(function(){
fetch('https://YOUR-SERVICE.microcms.io/api/v1/YOUR-CONTENTS?fields=date,body', {
headers: {
"X-API-KEY": "YOUR-API-KEY"
}})
.then(response =>{
if(response.ok){
return response.json();
}else{
return Promise.reject(new Error('something wrong'));
}
})
.then(json =>{
var content = json.contents;
for(var i = 0; i < content.length; i++){
//console.log(json.contents[i].title);
var d = new Date(content[i].date);
var ds = "<dt>" + d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate() + "</dt>";
var ts = '<dd>' + content[i].body + "</dd>";
$("#CONTAINER-ID").append("<dl>" + ds + ts + "</dl");
}
})
.catch(e => {
console.log(e.message);
});
});
イマドキ的にはvue.jsやreact.jsを使うのが正しいのでしょうが、もともとjQueryを利用したサイトがあったのでそこに投げ込んでみました。
fetchメソッドを使うと、responseから簡単にjsonを取得可能なので、DOMの操作自体もJavaScriptの標準だけで行ってしまっていいと思います（ニュース記事を表示するだけであれば、ロード時に読み込んでDOMに格納するだけなので、特に動的なバインドなども必要ありません）。
jsonの構造自体も複雑なものではないので、JavaScriptになれていない方でも簡単に実装することができるのではないでしょうか？
終わりに
サービスの登録から実装まで、既に稼動しているサイト上で実際に行ってみましたが、2サイトを行うのに2時間かかりませんでした（データの入力時間を含む）。
このblog用にスクリーンショットを撮りながらだったので、今回のように非常にシンプルなCMSとしての利用であれば、JavaScriptに慣れた方であれば30分もあれば実装を終え、残りはデータ入力に使うことができるでしょう。
ただし、APIキーが分かれば本当にどこからでもデータを引き出すことができるので格納するデータには気をつけるように、実際に運用するのであれば運用担当者に啓蒙する必要はあると思います（UPDATEやDELTEには対応していないようなのでほぼ問題はないでしょうが……）。
また、JSでの動的なDOMの操作の場合にはSEOを意識したサイト作りには向かないということはあります。PHPやrubyなどのサーバーサイドスクリプトでAPIを叩くのも手段ですが、その場合は通常のCMSの導入となると思うので……。
とはいえ、使いどころ間違えなければ非常に強力なツールとなるのは間違いないので、これからの動きやアップデートに期待したいと思います。
