MicroCMSと11tyで作るかんたん静的サイト

MicroCMSと静的サイトジェネレーターである11ty（Eleventy）を使ってAPIの取得とHTMLの生成をします。

#microCMS

#jamstack

#SSG

知恵蔵

2023.09.19

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

この記事では、ヘッドレスCMSを使ってHTMLコンテンツを作成する手順を紹介します。よく使われているフレームワークにGatsbyやNext.js、Nuxt.js等がありますが、HTMLコーダーである自分にとっては難易度が高く、また、作りたいサイトが小規模であるため、HTMLテンプレートを使用しての作成を検証してみました。

今回は個人的に興味のあったMicroCMSと静的サイトジェネレーターである11ty（Eleventy）を使ってAPIの取得とHTMLの生成をします。

対象ユーザーのスキル

HTML
CSS
JS
GulpやWebpack等のビルドツール利用経験

11tyとは

11tyは複数のテンプレート形式に対応している静的サイトジェネレーターで、HTMLを出力することができます。Markdown（.md）やEJS（.ejs）、Nunjucks（.njk）といった複数のテンプレート形式に対応しているほか、APIからのデータ取得、JSONデータの読み込み等も行えます。今回は11tyのなかでもドキュメントが充実しているNunjucksを使用します。

環境の準備

検証時の環境

macOS Ventura バージョン: 13.5.1
node: v18.16.0
Google Chrome バージョン: 117.0.5938.88

ホームディレクトリに検証用ディレクトリを作成します。

cd ~
mkdir 11ty_minimum

検証用ディレクトリに移動します。

cd 11ty_minimum

package.jsonを生成し、ローカルに11tyをインストールします。

npm init -y
npm install --save-dev @11ty/eleventy

package.jsonの"scripts"に"build": "eleventy"を追記します。

{
  "name": "11ty_minimum",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "eleventy"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@11ty/eleventy": "^2.0.1"
  }
}

テンプレート作成

HTMLテンプレートを用意します。今回はお気に入りコーヒーのリストを作成してみます。テンプレートファイルと同じ名前のデータファイルを用意すると、そのテンプレートファイル内でのみ使用できるようになります。
データファイルの適用範囲参考サイト：https://www.11ty.dev/docs/data-template-dir/

touch coffee.njk

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>11tyのテストだよ</title>
</head>

<body>
  <h1>お気に入りコーヒー</h1>
  <ul>
  {%- for content in contents %}
    <li>
      {{ content.name }} | {{ content.shop }}
    </li>
  {%- endfor %}
  </ul>
</body>
</html>

touch coffee.json

{
  "contents": [
    {
      "name": "スターバックスラテ",
      "shop": "スターバックス"
    },
    {
      "name": "マウンテンブレンド",
      "shop": "自家焙煎coffeeオトメザ"
    }
  ]
}

npm run build

index.htmlファイルが生成されました。　ビルドの出力先はデフォルトだと_siteディレクトリになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>11tyのテストだよ</title>
</head>

<body>
  <h1>お気に入りコーヒー</h1>
  <ul>
    <li>
      スターバックスラテ | スターバックス
    </li>
    <li>
      マウンテンブレンド | 自家焙煎coffeeオトメザ
    </li>
  </ul>
</body>
</html>

APIからデータを取得する

ローカルに作成したJSONデータと同じ内容のものを、今度はMicroCMSからAPIで取得できるようにします。

MicroCMSにデータを登録 / API-KEYを発行

MicroCMSでアカウントを作成します。
公式サイト：https://microcms.io/
サービス（プロジェクトみたいなもの）を作成します「一から作成する」をクリック

サービス名、サービスIDを入力してサービスを作成します。

APIを作成します今回は「自分で決める」を選択します。

API名とエンドポイントを入力して、画面下部の「次へ」をクリックします。

APIの型を選択します。ここでは「リスト形式」を選択して「次へ」をクリック。

APIスキーマを定義します。

お気に入りコーヒーの銘柄とお店の名前のフィールドを定義します。

作成したAPIスキーマに対してコンテンツを入力していきます。

「追加」ボタンをクリック。

銘柄とお店を入力していきます。

2件入力しました。

API取得のテストをしてみます。「APIプレビュー」をクリック、続いて「取得」をクリックします。

レスポンスが返ってきてJSON形式でデータが取得できることが確認できました。

これでMicroCMS側の準備は整いました。

API-KEYの設定 / データの取得

MicroCMSにアクセスしてデータをとってくるためにHTTPリクエストのライブラリが必要なのでnode-fetchを使います。またAPIキーのベタ書きを避けたいので、環境変数ファイルを利用します。

プロジェクトのルートディレクトリに.envファイルを作成して、MicroCMSから発行されるAPIキーとエンドポイントを設定します。

touch .env

//APIキー
API_KEY = ********************************JNTG

//エンドポイント
ENDPOINT_URL_COFFEE = https://chiezo-test.microcms.io/api/v1/coffee

APIキー管理画面

エンドポイント管理画面

_dataディレクトリの中にjsファイルを入れるとグローバルデータファイルとして（プロジェクト全体で）使用できるようになります。
参考サイト：https://www.11ty.dev/docs/data-js/

mkdir _data
touch ./_data/api_coffee.js

const fetch = require('node-fetch');
require('dotenv').config();

module.exports = async function() {
  const coffeeDataResponse = await fetch(process.env.ENDPOINT_URL_COFFEE, {
    headers: { "X-MICROCMS-API-KEY": process.env.API_KEY },
  });
  const coffeeData = await coffeeDataResponse.json();
  return coffeeData.contents;
};

dotenvとnode-fetchをインストールして上記の2ファイルを使えるようにします。

npm install --save-dev dotenv
npm install --save-dev node-fetch@2

package.jsonに追記されました。

{
  "scripts": {
    "build":  "eleventy"
  },
  "devDependencies": {
    "@11ty/eleventy": "^2.0.1",
    "dotenv": "^16.3.1",
    "node-fetch": "^2.7.0"
  }
}

このままビルドしてしまうとローカルのJSONデータを読みにいってしまうので、HTMLテンプレート側も書き換えます。　for content in contentsをfor content in api_coffeeにします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>11tyのテストだよ</title>
</head>

<body>
  <h1>お気に入りコーヒー</h1>
  <ul>
  {%- for content in api_coffee %}
    <li>
      {{ content.name }} | {{ content.shop }}
    </li>
  {%- endfor %}
  </ul>
</body>
</html>

npm run build

HTMLファイルが生成されました。ローカルのJSONファイルで作成したものと同じ内容になっています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>11tyのテストだよ</title>
</head>

<body>
  <h1>お気に入りコーヒー</h1>
  <ul>
    <li>
      スターバックスラテ | スターバックス
    </li>
    <li>
      マウンテンブレンド | 自家焙煎coffeeオトメザ
    </li>
  </ul>
</body>
</html>

これでMicroCMSからAPIを取得できるようになりました。APIスキーマを追加で設定すれば画像登録なんかもできます。お気に入りコーヒーをどんどん追加していくことが出来るのでカフェ開拓が捗りますね！おわり。