フロントエンド うえむーのブログサイト | NU-Blog(エヌ・ユーブログ)

こんにちは、うえむーです。
今回はmicrocmsについてお話したいと思います。

microCMSとは?

microCMSとは2019年8月にローンチした、API型のヘッドレスCMS。
コンテンツ管理のためのサーバ管理は一切不要で、サインアップするだけですぐにサービスを利用開始できます。



そもそもヘッドレスCMSって何なの?

ヘッドレスの「ヘッド」は、ビュー(表示する画面)のことです。
ヘッドレスなので、ビューの無いCMSということになります。

CMSというのは具体的にどういうことなのか・・・?

CMSとは?

CMSとはContent Management Systemの略で、つまりはコンテンツ管理システムを指します。管理画面に記事を書いて更新するだけでコンテンツが表示されるようになります。

一番有名なのはwordpressですね。テンプレート・色・ヘッダー・フッターなどを自分の好みで選択するだけで自分だけのサイトが作れるようになり、あとは記事を投稿するだけなので初心者でも簡単に制作ができるのです。
ただし、デフォルトの外観が嫌で凝ったサイトを作りたいとなるとhtml / css / php / javascriptなどのスキルも必要になり、フレームワーク自体を編集する必要があるのでかなりリスクが高まりますし、最悪の場合使えなくなる可能性もあります。。。

これらの問題を解決するのはmicro cmsなのです。

それでは、micro cmsのメリデメについてお話したいと思います。

micro cmsのメリデメ

micro cmsのメリデメについてまとめると下記になります。

メリット

1.マルチデバイスに対応できる (コンテンツをWeb、iOSアプリ、Androidアプリetc..)

アプリケーション実装していないのでそこまで体感していないのですが、アプリケーションを実装する場合は専用のwebviewを作り、アプリ内に表示しているケースが多いそうです。webviewはパフォーマンスがよくないと聞いてるので、レンタリングする時間がかかり、ユーザーからしたら不信感を与えるそうです。
ヘッドレスCMSはAPI経由でコンテンツを出力するので上記の問題を解決できるみたいです。

2.サイトを部分的にCMS化できる

例えば、クライアントサイトでヘッダーにインフォーメーションを加えて弊社側で自由に更新したいという依頼はあるのではないのでしょうか。その場合、wordpressで作り直したり、独自開発する必要があり、そのためコストがかかったりします。しかし、ヘッドレスCMSの場合はサイト部分的にCMS化できるのでコストが大幅に下げられるかと思います。

3.フロントエンドの自由度が高まる

wordpressの場合は管理画面側でヘッダーのレイアウト変更するにも限界があるので、ヘッドレスCMSはクライアントの望み通りに実装できます。また、色々なプログラミング言語(javascript・php・swift・go)で実装でき、自由度が高いと実感できます。

デメリット

1. プレビューがしづらい

wordpressやmovable typeのようなビューCMSの場合はプレビュー機能がありますが、ヘッドレスCMSはビューがないCMSなので、改修してフロントが正常に反映しているかわかりづらいのです。
もし、ヘッドレスCMSで運用する場合は、開発者に商用環境・検証環境用を用意してもらう必要があります。

2.技術的難易度が高い

wordpressでphpのフレームワークをレイアウトを大幅に変更すると比較すると、少し容易的なことでありますが、micro cmsでcms化したいとなるとhtml/css/javascriptのナレッジも蓄積する必要があります。

実際に導入してみる。

microCMSの管理画面でコンテンツを追加して、APIの型を選択してAPIスキーマーを定義して、入力フォームを作成していきます。



入力フォームに入力したデータは、APIから取得でき、jsonから吐き出されます。
APIを基にjavascript・phpなどでコンテンツを出力させるようにコーディングすると。。。

fetch("https://xxxxxxxxxxx.microcms.io/api/v1/blog", {
 headers: { "X-API-KEY": "xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx" }
})
.then(res => res.json())
.then(json => {
        var dates = json.date,
          year  = dates.substr( 0, 4 ), month = dates.substr( 5, 2 ), day   = dates.substr( 8, 2 ),
          dateday = year + '年' + month + '月' + day + '日';
            
          document.getElementById("title").innerHTML = "<h1>" + json.title + "</h1>";
          document.getElementById("date").innerHTML = "<span>" + dateday + "</span>";
          document.getElementById("img").innerHTML = "<img src='" + json.image.url + "' alt=" + json.title + ">";
          document.getElementById("description").innerHTML = json.description
})



以下のようにNuxt.jsのフレームワークやcodepen等いろんなところで反映されるようになりました。



いかがでしたでしょうか?
ヘッドレスCMS はビューが無いCMSと説明しましたが、API生成ツールと言った方が良いかもしれませんね!ぜひ、試してみてください!

https://microcms.io/