Jamstack web creating

BLOG

手軽に名刺替わりのホームページ制作

Web制作でヘッドレスCMS[microCMS]を使ってみた~ブラウザで記事表示~

Webサイト制作

本記事の対象者

・ヘッドレスCMSってどんなことができるの?
・microCMSを使ってみようかな
・記事をブラウザに表示するまでの過程を見てみたい
こんな方向けです。


この記事を書いた私は、ヘッドレスCMSサービスの1つである、microCMSを用いこちらのサイトを作りました。

この記事を読まれている方は、プログラミングやWeb制作を学習中の方が多いかと思います。

Web制作の一般的な学習手順は通常、

  • HTML/CSS/jQueryを学ぶ
  • WordPressを学ぶ

ですよね。

Web制作で用いるCMSはWordPressが殆どだと思います。

一方で、私がこちらのサイトを作るときに、WordPressでは実現できないなとなってしまったことがあり、
今回ヘッドレスCMSの使用に至りました。

WordPressではAjaxを使った部分表示切り替えが難しい

Webサイトってその殆どが、全ページ共通のパーツを持ってますよね。ヘッダーなど。

ページを移動する度にそういった共通パーツも読み込み直すのって、結構無駄だなと思ったんです。

Twitter等のWebアプリケーションのように、ページ内の一部分だけを切り替えて表示するようなWebサイトを作りたいと思ったんです。

そこで必要な技術が、Ajaxです。
Ajaxについては別途記事にしたいですが、ざっくり、、

概略: ページ内の一部分だけ通信を行って、その部分だけ表示を切り替える技術
例: Google Maps (ユーザの操作によって地図の枠内のみ表示が切り替わる)
メリット①: 通信中でも、通信中の一部分意外の箇所は操作可能(=非同期通信)
メリット②: いちいち全体を読み込まないので表示切り替えが高速

WordPressはページごとにphpファイルを分けて管理するので、
ページ移動の度にページ全体を読み込む前提のCMSです。
この仕組みでこそ使いやすいCMSですが、
部分表示切り替えのみでサイトを作るとなった場合、WordPressのメリットは薄まってしまいます。

そこで私が行き着いたのが、ヘッドレスCMSというものでした。
(後々知りましたが、WordPressにもヘッドレス化機能はあります)

ヘッドレスCMSとは

結論、以下の記事を見ていただくのが分かりやすいです笑
https://microcms.io/blog/what-is-headlesscms/

ここでは、ホームページを作るという意味で具体度を上げますが、
ヘッドレスCMSを使うと、入稿するとそのデータのみが保存されます。
その後の、記事データを取得したり、Webサイト上に表示したりというフロントエンド操作は完全自由に行えることになります。

「ヘッド」とはフロントエンド部を指しており、
ヘッドレスCMSは入稿データの保存(バックエンド処理)のみを行い、
表示(フロントエンド処理)はCMSの利用者に一任されるわけです。

概念の説明では分かりにくいかもしれないので、
実際にヘッドレスCMSサービスを使って「こんなことが出来る」というのを紹介します。
※今回はAjaxは使わない基礎動作の確認です。

登録〜Webサイトにブログ記事表示の流れ

基本操作を紹介しながら、ブログを作ります。

具体的には、
HTMLファイルを作成し、
ヘッドレスCMSで入稿した記事を、JavaScript(jQuery)を使って取得し、HTML内に挿入します。

用いたヘッドレスCMSサービス:microCMS

ヘッドレスCMSにも多くのサービスがあるようですが、
今回、microCMSというヘッドレスCMSサービスを用いました。

microCMSの特徴としては

  • 日本製(日本語UIで分かりやすい)
  • 2019年に出来た新しいサービス
  • クラウド型で、開発者はAPIで記事データを取得
  • 使うのが自分一人なら無料


日本製で最近できたということで、個人的に応援したいなと思い使ってみることにしました。
(他のヘッドレスCMSサービスとしては、Contentfulなどが有名です。)

手順1 microCMSの登録と記事の入稿

microCMSからアクセスします。



無料で始めるでユーザの登録画面に進みます。
登録の手順は一般的なWebサービスと同じで非常に簡単なので割愛します。




登録が終わると、ユーザとしてログインした状態で、
サービスの登録画面に進みます。
ホームページ制作であれば、1つのホームページに対して1つ、サービスとして登録する形になります。




サービスの画像を登録します。
Webサイトであればog imageとかで良いかと思います。





サービスの登録が終わると、次が投稿タイプの作成です。
1つのサイトに複数の投稿タイプ(ブログ、ニュース、メンバー紹介等)がある場合、
1つの投稿タイプに対して1つ登録します。
エンドポイントは、APIで記事を取得する際にアクセスするURLです。




続いて、投稿タイプの中に入力項目を作っていきます。
ブログなので、「タイトル」と「本文」を登録しました。
(アイキャッチやカテゴリーも必要であればここに登録します。)
「フィールドID」が、後にJavaScriptで記事を取得する際に必要になる名前です。



「種類」ですが、選択式で、テキストやリッチエディタ、画像などから選べます。
今回詳細は割愛しますが、ブログの本文は、リッチエディタにしましょう。

ここまで入力したら入稿の準備OKです。

WordPressの場合、「タイトル」や「本文」といったフォーマットは初めから存在しますが、
microCMSの場合は0から自分で作る形になります。
WordPressのカスタム投稿タイプとカスタムフィールドを使ったことがある方ならわかると思いますが、microCMSはそれらがデフォルトになっているイメージです。




こちらが作成したブログの入稿画面です。(ユーザが使う画面ですね)

先ほど設定した、「タイトル」と「本文」の項目があり、入力出来るようになっています。
先ほど本文の「種類」に「リッチエディタ」を登録しましたが、
リッチエディタでは段落や文字サイズなど自由に変更できる入力フォーマットとなります。
WordPressのクラシックエディタに似ていて使いやすいです。

記事を入稿したら、あとは表示するだけです。

手順2 HTMLの記述

今回は動作確認なので、
適当にデスクトップなどにindex.htmlを作って、
body内に記述するのは、以下の2行でOKです。
入稿したブログのタイトルと本文を出力する用の2行です。
(JavaScriptで記事を呼び出すので、jsファイルの読み込みの記述をお忘れなく。)

<h1 class="title"></h1>
<div class="content"></div>

手順3 JavaScriptの記述

JavaScriptで、microCMSから記事を取得します。
(JavaScriptでなくとも取得できますが、Web制作であれば基本JavaScriptかと思います)

APIを取得するためのURLとAPIキーはmicroCMS管理画面で確認できます。
※URLだけでは記事にアクセスできず、APIキーがあって初めて取得できます。



JSファイルに、記事書取得してHTMLのタグに流し込むコードを記述します。

$(function(){
//fetch : API取得のためのメソッド関数
fetch('URLを入力', {
headers: {
'X-API-KEY': 'APIキーを入力'
},
})
//取得した内容をJSON形式に変換
.then(res => res.json())
//JSONの中から記事コンテンツを取り出し
.then(json => json.contents)
.then(articles =>
$(function(){
//記事をconsoleで表示
console.log(articles)
//タイトルをh1タグに挿入
$(".title").html(articles[0].title)
//本文をpタグに挿入
$(".content").html(articles[0].content)
})
)
})

fetch APIを用いて取得していますが、
こういう型なので今回はコピペでOKです。
タグへの挿入はjQueryで書くと超簡単です。

console.log(articles)の結果を見てましょう。


なんか、入稿した記事っぽい文字列見えますね。
オブジェクトの配列形式で入っており、
記事の数を増やしていくと、配列の中にオブジェクト要素が追加されます。

それでは、jQueryで記事データを挿入したHTMLをブラウザで表示します。



microCMSで入稿した記事が正しく表示されていますね。
h1 → 記事対等
p → 記事本文

あとは、CSSで装飾すればブログサイト完成です。

実はWordPressよりも簡単かも

WordPressの場合、まずはローカル環境にデータベース等も含めたWordPressのセットをインストールしなくてはなりませんが、microCMSはクラウド型なので、自分のサーバー上に管理画面やデータベースを置く必要がありません。

自分のサーバーでCMSを持たないメリットは他にもあり、

  • WordPressでよくあるバージョンアップデート等のメンテナンスが不要
  • 自分のサーバーに管理画面を置かないので乗っ取られない
  • NetlifyやGithub pagesといった静的サイト保管サービスにも公開できる(CMSで入稿できるのに静的サイト扱い、素敵ですね)


ただしデメリットとしては、

  • フロント側を全て作らないといけない
  • ぺージャーや検索機能といった、WordPressではプラグインで解決した機能も自作の必要あり
  • 開発で行き詰まった際、WordPressのように出回っている情報がまだ少ない


こういった側面もあります。

ただ開発者としては、これらのデメリットは技術を身につければ逆に武器になるかも、と思ったりもします。

特にWeb制作の学習をされている方であれば、この構成でWebサイトを作るとJavaScriptを大量に書く必要があったりするのでかなり勉強になりますw

まとめ

今回はmicroCMSを使って、入稿記事をブラウザで表示するまで行ってみました。

microCMSにはまだ多くの機能がありまが、
新しい機能というよりは、WordPressよりも機能を細分化してくれて、
制作の自由度を上げられるというイメージです。

今後は、ヘッドレスCMSの強みを生かしたWebサイト制作の方法も紹介していきます。


それでは、今回は以上です。


ご相談・お見積・お問い合せはお気軽にご連絡ください。

Bubekiti

お問い合わせ