AstroとNILTOを使用したブログサイトの作成

NILTOでブログコンテンツを作成する

まずはブログ記事をNILTOで作成します。

モデルとコンテンツの作成、NILTO APIキーの取得を行います。
詳しい手順は以下のドキュメントを参考にしてください。

ドキュメント > クイックスタート > コンテンツを作成する

モデル作成

LUIDを blog でモデルを作成します。

フィールドには以下を設定します。
- タイトル（1行テキストフィールド）
- 記事本文（フレキシブルテキストフィールド）

コンテンツ作成

ブログモデルで何件かコンテンツを作成します。
タイトル、記事本文にはお好きな値を入力してください。

APIキー取得

NILTOのAPIキーページから、トークンを取得しておきます。
後述のAstroプロジェクト構築時に .env ファイルに設定する値です。その作業時にあらためて取得しても大丈夫です。

Astroプロジェクトをセットアップする

Astroプロジェクトをローカル環境にセットアップする手順を説明します。

Astroに関してご存知の方は「Webサイトの実装」に進んでください。
すでにNode.jsがインストールされており、npmコマンドが利用できる環境であれば、「Astroプロジェクトの新規作成」から進めてください。

実行環境

本チュートリアル作成時の主要な環境は以下の通りです。バージョンが異なると、一部コマンドの挙動や表示が異なる場合があります。

OS: Windows 11
Node.js: v22.14.0 (LTS)
npm: v10.8.3 (Node.jsに同梱)
Astro: v5.8.0 (チュートリアル作成時点の最新版)

Node.js のインストール

Astroプロジェクトの作成と実行にはNode.jsが必要です。未インストールの場合、Node.js 公式サイトから、ご使用のOSに合ったインストーラーをダウンロードしてインストールしておいてください。LTS版のインストールを推奨します。

インストール後、ターミナル（Windowsの場合はPowerShellやコマンドプロンプト、macOSの場合はターミナル.app）で以下のコマンドを実行し、バージョンが表示されれば正常にインストールされています。

node -v
npm -v

Astroプロジェクトの新規作成

以下の手順でAstroプロジェクトを作成します。

1. プロジェクトを作成したいフォルダ（ディレクトリ）でターミナル（Windows PowerShellなど）を開き、以下のコマンドを入力・実行します。

npm create astro@latest

2. コマンドを実行すると、対話形式でプロジェクトの設定について質問されます。

1. Where should we create your new project?：

入力：nilto-astro-site
説明：プロジェクト名（フォルダ名）を入力します。カレントディレクトリに作成する場合は何も入力せずEnter。

2. How would you like to start your new project?：

選択： A basic, helpful starter project（矢印キーで選択しEnter）
説明：使用するテンプレートを選択します。今回は最小限の構成から始めるため、こちらを選択します。

3. Install dependencies?：

選択：Yes (Enter)
説明：プロジェクトに必要なライブラリ（依存関係）をインストールするかどうかを尋ねられます。

4. Initialize a new git repository?：

選択：Yes (Enter)
説明：Gitリポジトリを初期化するかどうかを尋ねられます。バージョン管理を行う場合はYesを選択します。

実行後のログ（例）

インストールが完了すると、nilto-astro-site という名前のフォルダ（ディレクトリ）が作成され、その中にAstroプロジェクトの初期ファイルが格納されます。

Astroのバージョンは、ターミナルで「astro --version」で確認。
または、package.json ファイル内の dependencies または devDependencies に記載されている astro のバージョンでも確認できます。

動作確認

プロジェクトが正しく作成されたか確認しましょう。

1. 作成されたプロジェクトディレクトリに移動します。

cd nilto-astro-site

2. 開発サーバーを起動します。

npm run dev

3. ブラウザで http://localhost:4321 にアクセスします。

Astroのデフォルトのウェルカムページが表示されれば、プロジェクトのセットアップは完了です。
ターミナルで Ctrl + C を押すと開発サーバーを停止できます。

期待するフォルダツリー（初期状態）

nilto-astro-site ディレクトリ直下は、おおよそ以下のようになっています。
※一部ファイルはバージョンや選択によって異なります。

nilto-astro-site/
├── public/
│ └── favicon.svg
├── src/
│ ├── assets/
│ │ └── astro.svg
│ │ └── background.svg
│ ├── components/
│ │ └── Welcome.astro
│ ├── layouts/
│ │ └── Layout.astro
│ └── pages/
│ └── index.astro
├── .gitignore
├── astro.config.mjs
├── package-lock.json
├── package.json
├── README.md
└── tsconfig.json

ブログサイトを実装する

ブログサイトをJavaScriptで実装していきます。

NILTO API 連携コードの実装

NILTO APIとAstroプロジェクトを連携させるためのコードを実装していきます。
以下のフォルダーツリーになるよう、各種ファイルを追加していきます。

手順実行後のフォルダーツリー（関連部分のみ抜粋）

nilto-astro-site/
├── public/
├── src/
│   ├── lib/
│   │   └── getContents.js  <-- ★ 新規作成
│   ├── pages/
│   │   └── index.astro     <-- △ 更新
│   └── ... (その他のファイル・フォルダ)
├── .env                    <-- ★ 新規作成
├── astro.config.mjs
├── package.json
└── ... (その他のファイル)

環境変数の作成(.env)

作成したAstroプロジェクトのルートディレクトリ（package.jsonがある階層）に .env という名前のファイルを作成します。
.env ファイルを開き、以下のように記述して保存します。'参照したいAPIキー' の部分を、あらかじめコピーしておいたNILTO APIキー（「ドラフト権限付き」）に置き換えてください。

NILTO_API_KEY='ここにNILTO APIキーを貼り付け'

.env ファイルはGitの管理対象外にすることが一般的です (.gitignore に .env を追記します)。これにより、APIキーなどの機密情報がリポジトリにコミットされるのを防ぎます。Astroのスターターテンプレートには、デフォルトで .env が .gitignore に含まれていることが多いです。

API取得ファイルの作成(src > lib > getContents.js)

プロジェクト内の src ディレクトリの中に lib という名前の新しいディレクトリを作成します。
lib ディレクトリの中に getContents.js という名前のファイルを作成します。
getContents.ts に以下のコードを記述し、NILTO APIからコンテンツを取得する関数を定義します。

// .envファイルからAPIキーを取得する関数
function get_api_key() {
  // Astroでは import.meta.env を使用
  const apiKey = import.meta.env.NILTO_API_KEY;
  return apiKey;
}

// APIからデータを取得する非同期関数
export async function getContents() {
  const apiKey = get_api_key();

  const requestHeader = new Headers();
  requestHeader.set('Content-Type', 'application/json');
  requestHeader.set('X-Nilto-Api-Key', apiKey);

  // NILTO APIのエンドポイントURL
  const modelId = 'blog'; // NILTOで作成したモデルのID
  const apiUrl = `https://cms-api.nilto.com/v1/contents/?model=${modelId}&order=-_published_at`;

  try {
    const response = await fetch(apiUrl, {
      headers: requestHeader,
    });

    const data = await response.json(); // 型アサーションを削除
    return { contents: data.data }; // APIレスポンスの構造に合わせて 'data.data' を返す

  } catch (error) {
    console.error('Failed to fetch contents:', error);
    return { contents: [] }; // エラー時は空の配列を返す
  }
}

エンドポイントURLの &order は並べ替える基準とするフィールドのLUIDを指定します。
降順にするにはLUIDの先頭に-をつけます。
今回の場合、 _published_at(公開日時)の降順で取得します。

ブログサイトの実装（ブログ一覧ページ）

NILTO APIで取得したコンテンツを一覧ページで表示します。
src/pages/index.astro ファイルを編集します。

コードスニペット (src/pages/index.astro)

---
import Layout from '../layouts/Layout.astro';
import { getContents } from '../lib/getContents.js';

const { contents } = await getContents();
---

<Layout title='Astro x NILTO ブログ'>
  <main>
    <h1>NILTOブログ一覧</h1>
    {
      contents && contents.length > 0 ? (
        <ul>
          {contents.map((content: any) => (
            <li>
              <a href={`/blog/${content._id}/`}>{content.title}</a>
              <p>
                <small>
                  公開日:{' '}
                  {content._published_at
                    ? new Date(content._published_at).toLocaleDateString()
                    : '未公開'}
                </small>
              </p>
            </li>
          ))}
        </ul>
      ) : (
        <p>記事がありません。</p>
      )
    }
  </main>
</Layout>

<style>
  main {
    margin: auto;
    padding: 1.5rem;
    max-width: 80ch;
  }
  h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
  }
  ul {
    list-style: none;
    padding: 0;
  }
  li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #eee;
  }
  li a {
    font-size: 1.25rem;
    text-decoration: none;
    color: #333;
  }
  li a:hover {
    text-decoration: underline;
  }
  p small {
    color: #777;
  }
</style>

動作確認

1. 開発サーバーを起動します。

npm run dev

2. ブラウザで http://localhost:4321 を開きます。

NILTO で作成したコンテンツのタイトル一覧が表示されれば成功です。

ブログサイトの実装（ブログ記事詳細ページ）

一覧ページからリンクされる各コンテンツの詳細ページを作成します。ここではURLのパスにNILTOの _id を使用します。

識別子の決定

NILTOコンテンツの _id (例: 770139705) を、各詳細ページの一意な識別子として使用します。これはNILTOが自動で割り当てる数値IDです。

動的ルートファイルの作成

src/pages/blog/ というディレクトリを作成し、その中に [id].astro という名前のファイルを作成します。

src/pages/blog/[id].astro

この [id] というファイル名が、動的なURLパラメータ (Astro.params.id) として扱われます。

getStaticPaths の実装

src/pages/blog/[id].astro ファイル内で getStaticPaths 関数をエクスポートします。この関数はビルド時に実行され、Astroにどの詳細ページを生成すべきかを伝えます。

コードスニペット (src/pages/blog/[id].astro)

---
import Layout from '../../layouts/Layout.astro';
import { getContents } from '../../lib/getContents.js';

export async function getStaticPaths() {
  const { contents } = await getContents(); // 全記事データを取得

  // 各記事に対してページを生成するための情報を返す
  // params のキー (ここでは 'id') はファイル名 `[id].astro` と一致させる
  // params の値は文字列である必要があるため、数値の _id を toString() で変換
  return contents.map((content: any) => {
    return {
      params: { id: content._id.toString() }, // URLのパスパラメータとして使用
      props: { content }, // ページコンポーネントに記事データ全体を渡す
    };
  });
}

// getStaticPaths の props で渡された content を取得
const { content } = Astro.props;
---

<Layout title={content.title}>
  <article>
    <h1>{content.title}</h1>
    <p>
      <small
        >公開日: {
          content._published_at
            ? new Date(content._published_at).toLocaleDateString()
            : '未公開'
        }</small
      >
    </p>
    <div class='content-body'>
      {
        (
          <div set:html={content.article} /> // set:html にフレキシブルテキストの内容をセット
        )
      }
    </div>
    <a href='/'>← NILTOブログ一覧へ戻る</a>
  </article>
</Layout>

<style>
  article {
    padding: 20px;
    max-width: 720px;
    margin: 0 auto;
  }
  h1 {
    margin-bottom: 0.5em;
    font-size: 2.2em;
  }
  .content-body {
    margin-top: 2em;
    margin-bottom: 2em;
    line-height: 1.7;
  }
  .content-body p,
  .content-body ul,
  .content-body ol {
    margin-bottom: 1em;
  }
  .content-body h2 {
    font-size: 1.8em;
    margin-top: 1.5em;
    margin-bottom: 0.7em;
  }
  .content-body h3 {
    font-size: 1.5em;
    margin-top: 1.2em;
    margin-bottom: 0.6em;
  }
</style>

動作確認

一覧ページ (http://localhost:4321/) にアクセスし、コンテンツのリンクをクリックします。

URLが http://localhost:4321/blog/コンテンツのID/ (例: http://localhost:4321/blog/770139705/) となり、そのコンテンツの詳細情報（タイトル、記事本文）が表示されれば成功です。

さいごに

これで、NILTOのAPIを利用して、Astroサイトにコンテンツの一覧表示と詳細表示を実装できました。

ナレッジ

記事のURLをコピーしました

記事検索

まずは無料でお試しください

NILTOは無料でお試しいただけます。
製品の使い方や、手続きなど、ご不明な点は
お気軽にお問い合わせください。

無料ではじめるお問い合わせ

目次

NILTOでブログコンテンツを作成する

モデル作成

コンテンツ作成

APIキー取得

Astroプロジェクトをセットアップする

実行環境

Node.js のインストール

Astroプロジェクトの新規作成

実行後のログ（例）

動作確認

期待するフォルダツリー（初期状態）

ブログサイトを実装する

NILTO API 連携コードの実装

手順実行後のフォルダーツリー（関連部分のみ抜粋）

環境変数の作成(.env)

API取得ファイルの作成(src > lib > getContents.js)

ブログサイトの実装（ブログ一覧ページ）

コードスニペット (src/pages/index.astro)

動作確認

ブログサイトの実装（ブログ記事詳細ページ）

識別子の決定

動的ルートファイルの作成

getStaticPaths の実装

コードスニペット (src/pages/blog/[id].astro)

動作確認

さいごに

記事検索

カテゴリ

まずは無料でお試しください

目次

NILTOでブログコンテンツを作成する

モデル作成

コンテンツ作成

APIキー取得

Astroプロジェクトをセットアップする

実行環境

Node.js のインストール

Astroプロジェクトの新規作成

実行後のログ（例）

動作確認

期待するフォルダツリー（初期状態）

ブログサイトを実装する

NILTO API 連携コードの実装

手順実行後のフォルダーツリー（関連部分のみ抜粋）

環境変数の作成(.env)

API取得ファイルの作成(src > lib > getContents.js)

ブログサイトの実装（ブログ一覧ページ）

コード スニペット (src/pages/index.astro)

動作確認

ブログサイトの実装（ブログ記事詳細ページ）

識別子の決定

動的ルートファイルの作成

getStaticPaths の実装

コード スニペット (src/pages/blog/[id].astro)

動作確認

さいごに

関連記事

リクエスト数とデータ転送量を考慮したヘッドレスCMSの選び方

カップルドCMSとヘッドレスCMSの違いと選び方

こんな時にはヘッドレスCMSへ - 新規導入や乗り換え時のポイント

記事検索

カテゴリ

まずは無料でお試しください

コードスニペット (src/pages/index.astro)

コードスニペット (src/pages/blog/[id].astro)