![](https://mik2062.jp/wp-content/uploads/2022/08/fbb78db025839258a0abd0d6100df36a-150x150.png)
ヘッドレスCMSをWEBサイトに利用できますか?
![](https://mik2062.jp/wp-content/uploads/2022/08/1341584-150x150.jpg)
![](https://mik2062.jp/wp-content/uploads/2022/08/1341584-150x150.jpg)
![](https://mik2062.jp/wp-content/uploads/2022/08/1341584-150x150.jpg)
microCMSでWEBサイトのお知らせデータを作る方法を説明します
microCMSについて
microCMSはAPIベースの日本製ヘッドレスCMSで、多くの大企業や大規模サービスでも使われています。
個人でも自作のアプリやサービス、STUDIOなど他のサービスと組み合わせることで効率よくコンテンツ作成を行うことができます。
microCMSの構成
microCMSの構成は以下のようになっています。
![](https://mik2062.jp/wp-content/uploads/2023/08/image-158-1024x996.png)
![](https://mik2062.jp/wp-content/uploads/2023/08/image-158-1024x996.png)
サービスを作成する
サービスが1つもない状態だと以下の画面が表示されますので はじめるをクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/07/image-341-1024x616.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-341-1024x616.png)
サービスを作成
画面が開くので、サービス名を入力して サービスを作成するをクリックする。
![](https://mik2062.jp/wp-content/uploads/2023/09/image-25.png)
![](https://mik2062.jp/wp-content/uploads/2023/09/image-25.png)
次の画面で、サービス名を入力して サービスを作成するをクリックする。
![](https://mik2062.jp/wp-content/uploads/2023/08/image-117-1024x711.png)
![](https://mik2062.jp/wp-content/uploads/2023/08/image-117-1024x711.png)
サービスが作成されるので サービスにアクセスするをクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/09/image-26.png)
![](https://mik2062.jp/wp-content/uploads/2023/09/image-26.png)
「お知らせ」APIを作成する
サービスにAPIを作成します。
サービスのAPIを作成画面で、一番左側の自分で決める
をクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/08/image-126-1024x635.png)
![](https://mik2062.jp/wp-content/uploads/2023/08/image-126-1024x635.png)
API名とエンドポイント名を入力して、 次へをクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/08/image-127-1024x628.png)
![](https://mik2062.jp/wp-content/uploads/2023/08/image-127-1024x628.png)
APIの型を選択ではリスト形式
を選択します。
![](https://mik2062.jp/wp-content/uploads/2023/08/image-128-1024x628.png)
![](https://mik2062.jp/wp-content/uploads/2023/08/image-128-1024x628.png)
リスト形式はブログ記事のように複数の件数のデータを取得できる形式で、オブジェクト形式は1件のデータを取得するのに適した形式です。
APIスキーマを定義
APIのスキーマを定義して、APIが扱うデータの形式を設定していきます。
![](https://mik2062.jp/wp-content/uploads/2023/08/image-129-1024x628.png)
![](https://mik2062.jp/wp-content/uploads/2023/08/image-129-1024x628.png)
最初のフィールドは以下の内容で設定します。
項目 | 値 |
---|---|
フィールドID | title |
表示名 | 題名 |
種類は未選択
をクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/08/image-130-1024x582.png)
![](https://mik2062.jp/wp-content/uploads/2023/08/image-130-1024x582.png)
リストの中からテキストフィールド
を選択します。
![](https://mik2062.jp/wp-content/uploads/2023/08/image-131-1024x586.png)
![](https://mik2062.jp/wp-content/uploads/2023/08/image-131-1024x586.png)
テキストフィールドとして作成されます。
右上にあるをクリックします。 詳細設定
![](https://mik2062.jp/wp-content/uploads/2023/08/image-214.png)
![](https://mik2062.jp/wp-content/uploads/2023/08/image-214.png)
設定画面が開くので、以下の項目を設定します。
項目 | 設定内容 |
---|---|
必須項目 | チェックをONにする |
文字数を制限する | チェックをONにして、最小2 最大30 を入力する |
![](https://mik2062.jp/wp-content/uploads/2023/08/image-153-1024x698.png)
![](https://mik2062.jp/wp-content/uploads/2023/08/image-153-1024x698.png)
下にある + フィールドを追加をクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/08/image-383.png)
![](https://mik2062.jp/wp-content/uploads/2023/08/image-383.png)
下に2個目のフィールドの入力欄が表示されます。
![](https://mik2062.jp/wp-content/uploads/2023/09/image-134.png)
![](https://mik2062.jp/wp-content/uploads/2023/09/image-134.png)
2個目のフィールドに以下の内容を入力して、種類をクリックします。
項目 | 値 |
---|---|
フィールドID | contents |
表示名 | 内容 |
![](https://mik2062.jp/wp-content/uploads/2023/08/image-142.png)
![](https://mik2062.jp/wp-content/uploads/2023/08/image-142.png)
表示されるリストからテキストエリアを選択します。
![](https://mik2062.jp/wp-content/uploads/2023/08/image-137-1024x617.png)
![](https://mik2062.jp/wp-content/uploads/2023/08/image-137-1024x617.png)
2個目のフィールドのをクリックします。 詳細設定
![](https://mik2062.jp/wp-content/uploads/2023/08/image-154-1024x704.png)
![](https://mik2062.jp/wp-content/uploads/2023/08/image-154-1024x704.png)
設定画面が開くので以下の項目を設定します。
項目 | 設定内容 |
---|---|
必須項目 | チェックをONにする |
文字数を制限する | チェックをONにして、最小2 最大2000 を入力する |
![](https://mik2062.jp/wp-content/uploads/2023/08/image-156-1024x693.png)
![](https://mik2062.jp/wp-content/uploads/2023/08/image-156-1024x693.png)
下にある + フィールドを追加をクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/08/image-380.png)
![](https://mik2062.jp/wp-content/uploads/2023/08/image-380.png)
3個目のフィールドの入力欄が表示されるので以下の内容を入力して、種類をクリックします。
項目 | 値 |
---|---|
フィールドID | date |
表示名 | 配信日時 |
![](https://mik2062.jp/wp-content/uploads/2023/08/image-159-1024x750.png)
![](https://mik2062.jp/wp-content/uploads/2023/08/image-159-1024x750.png)
表示されるリストから日時
を選択します。
![](https://mik2062.jp/wp-content/uploads/2023/08/image-143-1024x674.png)
![](https://mik2062.jp/wp-content/uploads/2023/08/image-143-1024x674.png)
3個目のフィールドの必須項目をクリックしてONにします。
![](https://mik2062.jp/wp-content/uploads/2023/09/image-27-1024x802.png)
![](https://mik2062.jp/wp-content/uploads/2023/09/image-27-1024x802.png)
フィールドの設定がすべて終わったので、一番下の 作成をクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/08/image-145-1024x726.png)
![](https://mik2062.jp/wp-content/uploads/2023/08/image-145-1024x726.png)
お知らせのAPIが作成されます。
![](https://mik2062.jp/wp-content/uploads/2023/08/image-146-1024x720.png)
![](https://mik2062.jp/wp-content/uploads/2023/08/image-146-1024x720.png)
![](https://mik2062.jp/wp-content/uploads/2023/08/image-163-1024x695.png)
![](https://mik2062.jp/wp-content/uploads/2023/08/image-163-1024x695.png)
データを作成する
次に、作成したAPIで取得するデータを作成していきます。
「お知らせ」のデータを作成する
上で作成した「お知らせ」APIを選択して 追加ボタンをクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/09/image-29-1024x703.png)
![](https://mik2062.jp/wp-content/uploads/2023/09/image-29-1024x703.png)
APIの各項目の入力欄が表示されるので、それぞれ内容を入力します。
![](https://mik2062.jp/wp-content/uploads/2023/09/image-31.png)
![](https://mik2062.jp/wp-content/uploads/2023/09/image-31.png)
すべて入力して 公開をクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/09/image-73-1024x918.png)
![](https://mik2062.jp/wp-content/uploads/2023/09/image-73-1024x918.png)
確認メッセージが表示されるので OKをクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/09/image-74-1024x406.png)
![](https://mik2062.jp/wp-content/uploads/2023/09/image-74-1024x406.png)
初めてのコンテンツ作成の場合、以下のメッセージが表示されます。
![](https://mik2062.jp/wp-content/uploads/2023/09/image-75-1024x656.png)
![](https://mik2062.jp/wp-content/uploads/2023/09/image-75-1024x656.png)
公開後の上部にあるAPIプレビュー
のリンクからも、プレビューを表示できます。
![](https://mik2062.jp/wp-content/uploads/2023/09/image-137.png)
![](https://mik2062.jp/wp-content/uploads/2023/09/image-137.png)
APIの名称または
のリンクをクリックしてAPIの画面に戻ります。![](https://mik2062.jp/wp-content/uploads/2023/09/image-136.png)
![](https://mik2062.jp/wp-content/uploads/2023/09/image-136.png)
次のデータを追加するには、 作成ボタンをクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/09/image-128-1024x494.png)
![](https://mik2062.jp/wp-content/uploads/2023/09/image-128-1024x494.png)
1件目と同様に、データの内容を入力して公開を繰り返します。
![](https://mik2062.jp/wp-content/uploads/2023/09/image-149-1024x963.png)
![](https://mik2062.jp/wp-content/uploads/2023/09/image-149-1024x963.png)
何件かデータを登録しておきます。
![](https://mik2062.jp/wp-content/uploads/2023/09/image-135.png)
![](https://mik2062.jp/wp-content/uploads/2023/09/image-135.png)
JavaScriptでmicroCMSのデータを取得する
microCMSのデータをAPIを利用して取得します。
APIの利用方法は、APIプレビューで確認できます。
APIを選択して、APIプレビューのリンクをクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/09/image-130-1024x482.png)
![](https://mik2062.jp/wp-content/uploads/2023/09/image-130-1024x482.png)
APIプレビューの画面が開いて、各言語でのAPIの利用方法が表示されるのでJavaScriptを選択します。
![](https://mik2062.jp/wp-content/uploads/2023/09/image-146.png)
![](https://mik2062.jp/wp-content/uploads/2023/09/image-146.png)
APIを利用するには、maicroCMSが提供しているライブラリのプログラムを利用します。
一番下のmicrocms-js-sdkのリンクをクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/09/image-148.png)
![](https://mik2062.jp/wp-content/uploads/2023/09/image-148.png)
microCMSのJavaScriptライブラリのサイトが開くので、下にスクロールします。
![](https://mik2062.jp/wp-content/uploads/2023/09/image-141-1024x462.png)
![](https://mik2062.jp/wp-content/uploads/2023/09/image-141-1024x462.png)
プログラムの利用方法はいくつかありますので、自分に合う方法を選びます。
この記事ではCDNを使用しますので、Getting StartedにあるCDN Supporのコピーボタンをクリックして、URLをクリップボードに取得します。
![](https://mik2062.jp/wp-content/uploads/2023/09/image-140-1024x521.png)
![](https://mik2062.jp/wp-content/uploads/2023/09/image-140-1024x521.png)
APIプレビューに表示される以下の値も使用します。
![](https://mik2062.jp/wp-content/uploads/2023/09/image-145-1024x520.png)
![](https://mik2062.jp/wp-content/uploads/2023/09/image-145-1024x520.png)
以下の内容のHTMLファイルを作成します。
![](https://mik2062.jp/wp-content/uploads/2023/09/image-144.png)
![](https://mik2062.jp/wp-content/uploads/2023/09/image-144.png)
実際のコードは以下のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Static Template</title>
<!-- microCMSのCDNのリンクを貼り付ける -->
<script src="https://unpkg.com/microcms-js-sdk@latest/dist/umd/microcms-js-sdk.js"></script>
</head>
<body>
<!-- 取得したデータの表示場所 -->
<h3 id="title1"></h3>
<h4 id="contents1"></h4>
<!-- microCMSのAPI呼び出し -->
<script>
const { createClient } = microcms;
const client = createClient({
serviceDomain: "サービスのID",
apiKey: "APIキー"
});
client
.get({
endpoint: "news"
})
.then((res) => {
document.querySelector("#title1").textContent = res.contents[0].title;
document.querySelector("#contents1").textContent = res.contents[0].contents;
});
</script>
</body>
</html>
microCMSからAPIで取得したデータをHTMLに表示できます。
See the Pen microCMS-Example by mik20621 (@mik20621) on CodePen.