はじめに

今回から数回に分けて、microCMSを用いたwebサイトの作り方を解説します。

CMSを使ってのweb制作をしたことがない人は、CMSを用いたサイト制作の入門に、CMSを使っている人は、他のCMSと比較してみていただけるでしょう。

第1回目の今回はmicroCMSの概要とその特徴、利点を説明します。また、簡単にデータ入力を行い、microCMSの試運転もしてみます。

microCMSとは

まず、microCMSの概要です。

microCMSとはウォンタ株式会社*が提供するヘッドレスCMSサービスです。

CMS（Contents Management System）というのは、ご存じのようにコンテンツ管理システムのことであり、ウェブサイトに表示する情報の管理が非エンジニアでもわかりやすく行えるツールです。

ヘッドレスとは

それでは、CMSとヘッドレスCMSは何が異なるのでしょう。

ヘッドレス（headless）というのは表示部分を持たないことを指します。

ヘッドレスCMSは表示部分や表示部分を作成する仕組みなどを持たず、純粋にコンテンツのデータ管理のみに特化しています。そのため、HTMLやCSS、JavaScriptなどでページ自体を作成する機能はありません。これらはすべて、開発者が実装することになります。

開発者はヘッドレスCMSで、APIスキームを定義して、データの構造を決め、それらのデータをAPIを経由して取得します。そして、作成したHTML、CSS、JavaScriptとデータを使ってページを生成します。

これは言葉で説明されただけでは、おそらくわかりにくいので、後ほどデモで確かめてみます。今は大まかなイメージだけを捉えてもらえれば、大丈夫です。

ヘッドレスである利点

表示部分を持たないと、モノリシック*なアーキテクチャ、WordPressやMovableTypeなどのオールインワンパッケージを使わず、コンテンツ管理機能だけを導入できる利点があります。

オールインワンパッケージのシステムが提供する機能は、すべてが常にベストであるわけではありません。

たとえばオールインワンパッケージを使うと、コンテンツ管理だけをする場合でも、その他の部分も、すべてがそのシステムの管理下に置かれます。そのため、現実的にはプラグインなどを用いて、オールインワンパッケージのシステムが提供する機能の中で開発をすることになります。

要件とマッチしていて簡単に使えるとなると、工数を削減でき嬉しいですが、実際の案件ではそう上手くいくことは稀だと筆者は感じています。案件によってはプラグインを独自にカスタマイズする必要があったり、そのパッケージに特化した深い知識まで理解する必要が出てきたりなど、用意された以外の機能を追加しづらいというデメリットがあります。

また、そのようなシステムはそれに特化した知識やテンプレート言語などが必要であることがほとんどです。実装できる人が限られてしまう属人化の危険性や、開発コストの増加も考えられます。

一方、表示部分を持たず、データの管理のみに特化したヘッドレスCMSは、データ管理部分だけを切り分けて考えられ、その他の機能部分はそれぞれの機能ごとに用途にあった最適な実装をすることができるというわけです。

日本製、日本語のCMS

CMSには、WordPressや、microCMSと同じヘッドレスCMSであるContentful、Prismic、Strapiなどがあります。

その中で、microCMSの1番の利点として上げられるのは開発会社が日本企業であり、UIやドキュメント、サポートなどが完全に日本語であるという点です。

プログラミング言語が英語というのもあり、エンジニアは比較的、英語に触れる機会の多い職業です。したがって、英語のツールを使うことにもあまり抵抗がない場合も多いですが、CMSというツールはコンテンツを作る側の編集者なども関わる可能性があるシステムです。それらの非エンジニアである人々も同様に英語に抵抗がないとは限りません。

ですので、CMSというシステムの特性を考えると、すべてが日本語であり、サポートも日本語で受けられるというのは実務で使用する際の大きな利点になります。実際にピクセルグリッドでも実務に採用した実績があります。

見やすいUI

microCMSのUIはコンテンツの管理のみに特化しているということもあり、シンプルで見やすくまとまっています。

詳しい設定方法などは次回以降に説明しますが、左に表示されているサイドバー部分にお知らせなどのコンテンツカテゴリが並び、右の表示部分にそのカテゴリに属したコンテンツが表示されるという形になります。

入力画面のタイトルや、その下に表示されている説明文なども独自に設定することができ、それぞれの用途に最適化した入力画面を作成することができます。

新機能も順次追加されている

microCMSは順次開発されているため、できることも増えていきます。ロードマップは管理画面の下から常に確認できるようになっており、その点も使用者側からすると、安心感につながるのではないでしょうか？

microCMSを使ってみる

以上の話をイメージしやすいように、今回はmicroCMSでのデータ入稿 => コンテンツの取得のデモを用意しました。皆さんもよければ実際に手を動かしながらやってみてください。

セットアップ

まず初めに、microCMSアカウントがない場合はメールアドレス、パスワードを設定し、会員登録する必要があります。

• microCMS会員登録画面

ログインすると、次のようなサービス情報（サービス名とサービスID）を入力するページが表示されます。

microCMSではコンテンツを管理する単位がサービスとなっています。利用先はサービスごとなので1箇所である必要はなく、たとえば異なるドメインのウェブサイトやアプリなどデバイスを横断しての利用も可能です。

今回はデモ用にサービス名をcodegrid-microcms-demoとしました。

サービスIDはmicroCMSにデータを取得する際のURLの一部になるので、サービス名と関連したわかりやすいものが良いでしょう。

プランの選択

サービス登録を完了すると、画像の登録、そしてプランを選択する画面に遷移します。

2021年4月1日現在、microCMSのプランは次のようになっています。

最新の情報は常に公式サイトを参照してください。

• 参考：公式サイト

データ転送量は各プランともに有料で増やすことができます。StandardやBusinessブランは、メンバー数、API数も追加料金で増やせます。そのほか、見積もりベースのEnterpriseプランもあります。

プランごとに使用できる機能の回数などに違いがありますが、一番考慮すべきなのはメンバー数だと個人的には思います。

実務で使用することを想定すると開発者、コンテンツ入稿者というメンバーが最低でも2人いることがほとんどだと思います。業務として使用する場合は、Standardプランからが選択肢となりそうです。

今回は基本的にHobbyプランでできる機能を使って解説していきますので、この記事のデモを試すには、Hobbyプランで構いません。

API基本情報の入力

プランを選択するとAPIの基本情報を入力を求められます。microCMSにおけるAPIの単位は、そのサイトで使われるある1まとまりの情報となっています。

これは複数作成することができます。今回は例として簡単な「お知らせ」に使われるデータを作成してみましょう。コーポレートサイトのトップページにあるような、最近のニュースを並べただけの「お知らせ」部分です。

API名はお知らせ、エンドポイントの最後はnewsとしておきます。

次にAPIの形式を、リスト形式／オブジェクト形式から選択できます。リスト形式がオブジェクトの配列を作成できるのに対して、オブジェクト形式はオブジェクトを作成できます。

今回作成するお知らせは、複数のお知らせを配列として受け取りたいので「リスト形式」を選択します。

APIスキーマの作成

次にAPIスキーマを作成します。APIスキーマを定義することで、管理しているデータとAPI、データを入力するためのUIを紐づける操作を行っています。

ここではそれぞれのお知らせで必要な各情報について定義します。

簡単なお知らせ記事を想定して、お知らせの「日付」、そしてお知らせの「本文」の2つを定義します。

これをスキーマとして、日付、本文についてそれぞれ、フィールドID、表示名、フィールドの種類を入力します。

[＋追加]ボタンをクリックすると、2列目のデータ定義ができます。

これでお知らせ、というAPIが作成できました。「完了」をクリックします。

コンテンツデータの入力

次に、コンテンツデータを入力しましょう。左のナビゲーションからお知らせが選択されている状態で右上の「＋追加」ボタンを押すと、コンテンツ作成画面になります。

先ほど作成した2つのフィールドが表示されているのがわかると思います。どうでしょうか、CMSの使い方がわかってきたのではないでしょうか。では2つほどデータを入力してみてください。

コンテンツデータの取得

お知らせの例として2つのコンテンツデータを入力しました。

コンテンツの取得はAPIにアクセスして行います。今回はターミナルからcurlコマンドでデータを取得してみます。右上の「API設定」から「APIリファレンス」、「試してみる」と進むと、次のような画面になります。

ターミナルを開いて、ここに表示されているcurl "https://cgmcms.microcms.io/api/v1/XXXX" -H "X-API-KEY: XXXXXXXXXXXXXXXXXX"というコマンドを入力してみてください。

これが今作成したコンテンツの情報を取得するためのエンドポイント、APIキーの情報を含んだcurlコマンドです。

次のような先ほど入力したコンテンツが取得できるはずです。次のデータは取得したデータを見やすいように整形したものです。ターミナルには改行がない形で出力されます。

{
  "contents":[
    {
      "id":"8hl9z9r4x",
      "createdAt":"2021-03-18T12:44:47.424Z",
      "updatedAt":"2021-03-18T12:46:00.744Z",
      "publishedAt":"2021-03-18T12:44:47.424Z",
      "revisedAt":"2021-03-18T12:46:00.744Z",
      "date":"2021-03-31T15:00:00.000Z",
      "paragraph":"ホームページをリニューアルしました。"
    },
    {
      "id":"yt7tiojyw3y9",
      "createdAt":"2021-03-18T12:44:20.887Z",
      "updatedAt":"2021-03-18T12:44:20.887Z",
      "publishedAt":"2021-03-18T12:44:20.887Z",
      "revisedAt":"2021-03-18T12:44:20.887Z",
      "date":"2021-03-17T15:00:00.000Z",
      "paragraph":"Jamstackを解説する「Jamstackとは？」のコンテンツを公開しました。"
    }
  ],
  "totalCount":2,
  "offset":0,
  "limit":10
}

もちろん、これだけではHTMLページにはなりません。この後、これらのコンテンツデータを使ってHTMLを生成する必要があります。ヘッドレスCMSは、このようにAPI経由で取得したデータを表示する部分は、自分で実装することになります。

まとめ

今回はcurlコマンドを用いて取得しましたが、mircoCMSでは、API経由で取得したデータを元に、表示部分を作成するという一連の流れのイメージをつかんでいただけたのではないでしょうか。

次回からは、静的サイトジェネレーター11tyを用い、コーポレートサイトを想定して、簡単なページを作成するデモを通して、さまざまな機能について解説していきます。