HP連携設定

接続情報

あなたのコンテンツAPI

読み込み中...

設定手順(3ステップ)

1. 環境変数を設定ホームページのホスティング先(Vercel / Amplify等)に以下を登録

# 必要な環境変数はこの2つだけです
BLOOM_API_URL=https://api.bloom-l.com
BLOOM_API_KEY=blm_xxxxxxxx...(上のキーをコピー)

2. 記事一覧を取得して表示一覧ページでAPIを呼び出します(microCMS互換形式)

// 公開記事の一覧を取得(最新10件)
// URL末尾の「news」がエンドポイントID。コンテンツの種類ごとにURLを書き分けます
const res = await fetch(
  "https://api.bloom-l.com/api/v1/news?limit=10",
  { headers: { "X-MICROCMS-API-KEY": process.env.BLOOM_API_KEY } },
);
const { contents, totalCount } = await res.json();

// contents[n] = { id, title, ...設定したフィールド, publishedAt, revisedAt }
// リッチエディタのフィールドはHTML文字列で返ります

3. 詳細ページを作成記事IDで1件取得し、本文HTMLをそのまま表示できます

// 記事を1件取得(詳細ページ用)
const res = await fetch(
  `https://api.bloom-l.com/api/v1/news/${id}`,
  { headers: { "X-MICROCMS-API-KEY": process.env.BLOOM_API_KEY } },
);
const article = await res.json();

実装の雛形(一覧・詳細・下書きプレビュー込みのNext.jsサイト)を用意しています。 制作のご依頼・ご相談は運営者(Bloom-l)までどうぞ。

下書きプレビューの仕組み

各記事の編集画面に表示される draftKey をURLに付けると、 公開前の記事を取得できます。ホームページ側にプレビュー用ページ (例: /preview/記事ID?draftKey=...)を用意してください。

GET https://api.bloom-l.com/api/v1/news/{記事ID}?draftKey={draftKey}

microCMSからの乗り換え

レスポンス形式・認証ヘッダー名はmicroCMS互換です。既存の表示コードはそのままで、 以下の2点を差し替えるだけで動作します。