メニュー

ｍicroCMSでお知らせ情報を作成してWEBサイトに表示する

CMS
当ページのリンクには広告が含まれています。
  • URLをコピーしました！
生徒

ヘッドレスCMSをWEBサイトに利用できますか？

先生

microCMSでWEBサイトのお知らせデータを作る方法を説明します

目次

microCMSについて

microCMSはAPIベースの日本製ヘッドレスCMSで、多くの大企業や大規模サービスでも使われています。

個人でも自作のアプリやサービス、STUDIOなど他のサービスと組み合わせることで効率よくコンテンツ作成を行うことができます。

microCMSの構成

microCMSの構成は以下のようになっています。

サービスを作成する

サービスが1つもない状態だと以下の画面が表示されますので はじめるをクリックします。

サービスを作成画面が開くので、サービス名を入力して サービスを作成するをクリックする。

次の画面で、サービス名を入力して サービスを作成するをクリックする。

サービスが作成されるので サービスにアクセスするをクリックします。

「お知らせ」APIを作成する

サービスにAPIを作成します。

サービスのAPIを作成画面で、一番左側の自分で決めるをクリックします。

API名とエンドポイント名を入力して、 次へをクリックします。

API名は単なる名前で、エンドポイントはAPIにアクセスする時のURLになります。

APIの型を選択ではリスト形式を選択します。

リスト形式とオブジェクト形式の違いについて

リスト形式はブログ記事のように複数の件数のデータを取得できる形式で、オブジェクト形式は1件のデータを取得するのに適した形式です。

APIスキーマを定義

APIのスキーマを定義して、APIが扱うデータの形式を設定していきます。

最初のフィールドは以下の内容で設定します。

項目値
フィールドIDtitle
表示名題名

種類は未選択をクリックします。

リストの中からテキストフィールドを選択します。

テキストフィールドは、1行のテキストを持つ項目です。

テキストフィールドとして作成されます。

右上にある詳細設定をクリックします。

設定画面が開くので、以下の項目を設定します。

項目設定内容
必須項目チェックをONにする
文字数を制限するチェックをONにして、最小2最大30を入力する

下にある ＋ フィールドを追加をクリックします。

下に2個目のフィールドの入力欄が表示されます。

2個目のフィールドに以下の内容を入力して、種類をクリックします。

項目値
フィールドIDcontents
表示名内容

表示されるリストからテキストエリアを選択します。

2個目のフィールドの詳細設定をクリックします。

設定画面が開くので以下の項目を設定します。

項目設定内容
必須項目チェックをONにする
文字数を制限するチェックをONにして、最小2最大2000を入力する

下にある ＋ フィールドを追加をクリックします。

3個目のフィールドの入力欄が表示されるので以下の内容を入力して、種類をクリックします。

項目値
フィールドIDdate
表示名配信日時

表示されるリストから日時を選択します。

3個目のフィールドの必須項目をクリックしてONにします。

フィールドの設定がすべて終わったので、一番下の 作成をクリックします。

お知らせのAPIが作成されます。

API作成後にフィールドの内容を変更する時は、API設定のAPIスキーマを開きます。

データを作成する

次に、作成したAPIで取得するデータを作成していきます。

「お知らせ」のデータを作成する

上で作成した「お知らせ」APIを選択して 追加ボタンをクリックします。

APIの各項目の入力欄が表示されるので、それぞれ内容を入力します。

すべて入力して 公開をクリックします。

作成途中でまだ公開したくない場合は 下書き保存をクリックすると、APIで取得されない状態でデータが保存されます。

確認メッセージが表示されるので OKをクリックします。

初めてのコンテンツ作成の場合、以下のメッセージが表示されます。

公開後の上部にあるAPIプレビューのリンクからも、プレビューを表示できます。

APIの名称またはのリンクをクリックしてAPIの画面に戻ります。

次のデータを追加するには、 作成ボタンをクリックします。

1件目と同様に、データの内容を入力して公開を繰り返します。

最低限のことを試すだけならデータは1件でも構わないです。

何件かデータを登録しておきます。

JavaScriptでmicroCMSのデータを取得する

microCMSのデータをAPIを利用して取得します。

この記事では、JavaScriptでの取得方法を説明します。

APIの利用方法は、APIプレビューで確認できます。

APIを選択して、APIプレビューのリンクをクリックします。

APIプレビューの画面が開いて、各言語でのAPIの利用方法が表示されるのでJavaScriptを選択します。

APIを利用するには、maicroCMSが提供しているライブラリのプログラムを利用します。

一番下のmicrocms-js-sdkのリンクをクリックします。

microCMSのJavaScriptライブラリのサイトが開くので、下にスクロールします。

プログラムの利用方法はいくつかありますので、自分に合う方法を選びます。

この記事ではCDNを使用しますので、Getting StartedにあるCDN Supporのコピーボタンをクリックして、URLをクリップボードに取得します。

APIプレビューに表示される以下の値も使用します。

以下の内容のHTMLファイルを作成します。

実際のコードは以下のようになります。

<!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.

CMS
よかったらシェアしてね！
  • URLをコピーしました！
目次