Zenn
✅

ヘッドレスCMSの理解とNILTO×Reactで動かすところまで

2024/07/19に公開
React
HeadlessCMS
ヘッドレスcms
nilto
tech

※ 一度アカウント作り直した関係で削除したので、再投稿になります。

こんな人にみてほしい 👀

  • ヘッドレス CMS ってなんか聞いたことあるけどよくわからない、触ったことない
  • NILTO って聞いたことあるけど触ったことない
  • ヘッドレス CMS(今回は NILTO)と React で実際に手を動かして学んでみたい

はじめに

今回の記事は、NILTO 公式サイトの内容が 8 割くらい入っています。
最初は丁寧にまとめられている公式サイトの内容を存分に使い、最後だけ軽く React 実装をします。
そのため、ある程度ドキュメントを読んだ経験がある人は最初から公式サイトを見るほうが理解が早いかもしれませんということを事前に伝えさせていただきます。

NILTO 公式サイト: https://www.nilto.com/ja

ヘッドレス CMS とは

ヘッドレス CMS は、コンテンツ管理システム（CMS）の一種で、フロントエンドのプレゼンテーション層（「ヘッド」）とバックエンドのコンテンツ管理層を分離したものです。

公式サイトの解説はNILTO 公式サイト: ヘッドレス CMS とはで確認できます。

以下に、簡単な説明を記載します。
通常の CMS（例：WordPress、Drupal）はフロントエンドとバックエンドが統合されていますが、ヘッドレス CMS ではコンテンツは API を通じて提供され、フロントエンドは自由に選択・構築できます。主な特徴は以下の通りです。

  • 柔軟性：バックエンドはコンテンツ管理に集中し、フロントエンドは React、Vue.js、Angular など好きなフレームワークやライブラリを使って構築できます。
  • スケーラビリティ：異なるプラットフォーム（ウェブ、モバイル、IoT など）に同じコンテンツを配信できます。
  • セキュリティ：フロントエンドとバックエンドが分離されているため、セキュリティリスクが低減します。

NILTO をとりあえず触って記事公開までやってみる

基本的には公式サイトを使って、少し補足しつつで進めます。

step1: アカウント作成

まずアカウントを作成しましょう。
この時、組織、スペース、メイン言語を選択して開始するためのダイアログがでるかと思います。
今回は個人開発なので適当に入力しておきましょう。
(例えば、組織: Example、スペース: Example_space、言語: 日本語)

step2: 管理画面へ遷移 → チュートリアルへ

アカウント作成後、以下のような管理画面に遷移します。
「チュートリアルに沿って NILTO の使い方を覚えましょう」をクリックしてチュートリアルへ進みましょう。
管理画面
管理画面

step3: チュートリアル開始

NILTO の基本概念

NILTO の基本概念やよく使う言葉の定義がまとめられています。
一度見ておくと今後進めていくうえで頭にイメージが湧きやすくなると思います。

NILTO クイックスタート

クイックスタートを始めていきましょう。
組織の作成とスペースへ移動は完了しているので、モデルの作成から実施します。

モデルの作成

記事のようにすすめます。
実際に作成したモデル
実際に作成したモデル

コンテンツの作成

記事のように進めます。
実際に作成したコンテンツ-1
実際に作成したコンテンツ-2
実際に作成したコンテンツ

API キーの確認

記事のように進めます。

API アクセス

記事のように進めます。

ここまで進めた結果、各々が作成したコンテンツの内容が取得できているかと思います。
Postman画像
実際に問題なく取得できるかPostmanで確認

NILTO のコンテンツを React 環境で使って UI 実装する

ここから NILTO で作成したコンテンツを React で表示します。
まず、React のプロジェクトを作成するために PC のターミナルで以下を入力します。

npx create-react-app my-nilto-app

作成したプロジェクトを VSCode で開き、ターミナルも開いておきます。
必要なライブラリのインストールのために、VSCode のターミナルに以下を入力します。

npm install

src/App.js を App.jsx へファイル名を変換し、以下のコードに書き換えます。

import React, { useEffect, useState } from "react";
import "./App.css"; // スタイルシートをインポート

const App = () => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  const envValue = process.env.REACT_APP_API_KEY;

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch("https://cms-api.nilto.com/v1/contents/", {
          headers: {
            "X-NILTO-API-KEY": envValue,
          },
        });

        if (!response.ok) {
          throw new Error("Network response was not ok " + response.statusText);
        }

        const result = await response.json();
        setData(result);
      } catch (error) {
        setError(error);
      }
    };

    fetchData();
  }, [envValue]);

  if (error) {
    return <div className="error">Error: {error.message}</div>;
  }

  if (!data) {
    return <div className="loading">Loading...</div>;
  }

  return (
    <div className="container">
      <h1>API Data</h1>
      {data.data.map((item) => (
        <div key={item._id} className="card">
          <h2>{item.title}</h2>
          <div
            className="content"
            dangerouslySetInnerHTML={{ __html: item.flexible_text_1 }}
          ></div>
          <img
            src={item.media_1.url}
            alt={item.media_1.alt}
            className="image"
          />
          <p className="meta">
            <span>
              Created at: {new Date(item._created_at).toLocaleString()}
            </span>
            <span>
              Updated at: {new Date(item._updated_at).toLocaleString()}
            </span>
            <span>Status: {item._status}</span>
          </p>
        </div>
      ))}
    </div>
  );
};

export default App;

デザイン調整のため App.css も以下のように書き換えます。

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  padding: 20px;
  max-width: 800px;
  margin: auto;
}

h1 {
  text-align: center;
  color: #333;
}

.card {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card h2 {
  margin-top: 0;
}

.content {
  margin: 20px 0;
}

/* 内部の画像に対するスタイル */
.content img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.image {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.9em;
  color: #555;
}

.meta span {
  margin-right: 10px;
}

.error,
.loading {
  text-align: center;
  color: #f00;
}

MY-NILTO-APP（一番上のフォルダ）配下に.env.local ファイルを作成し、API キーを保存しておきます。
※ API キーは、NILTO API キーで確認した API キー

REACT_APP_API_KEY=APIキーをここに記載する(〇〇〇〇〇〇〇〇〇〇〇〇)

VSCode で以下のコードを実行し、http://localhost:3000/ へアクセスします。

npm run start

localhost が立ち上がり、コンテンツが表示されれば完成です✌️
実際の表示
実際の表示

まとめ

今回は以下のことについて学習しました。

  • ヘッドレス CMS とはなにか理解する
  • NILTO をとりあえず触ってみる
  • NILTO のコンテンツを React 環境で使って UI 実装する

基本的には非常に分かりやすくまとめられている公式サイトを参考にして進めていけるかと思います。(今回は記載していないですが、React以外にもNext.jsなどでも同じように動作できました)
その他詳しいことは以下も参考にしてください。

最後までご覧いただきありがとうございました✨

Discussion