クイックスタート

APIキーの取得から、最初の投稿一覧の取得、本文のHTML化まで。4ステップ・約5分で完了します。

APIキーとサイトコードを取得する

管理画面の「サイト設定」に、サイトコード（X-SITE-CODE）と、テナントのAPIキー（X-API-KEY）が表示されています。すべての公開APIリクエストに、この2つのヘッダーが必要です。

APIキーはサーバー側で保持してください。ブラウザに配布するコードには埋め込まず、Astro/Next.js のサーバー側（ビルド時・SSR）でリクエストするのが基本です。

SDKを導入する

公式TypeScript SDK @sharedan/cms-sdk は依存ゼロ・型付きで、ブラウザ／Node.js の両方で動作します。cURL や fetch で直接呼ぶ場合はこのステップは不要です。

terminal

npm install @sharedan/cms-sdk

最初のリクエスト — 投稿一覧を取得する

種別 news の公開済み投稿を、公開日時の新しい順に取得します。

curl "https://api.cms.sharedan.co.jp/api/v1/posts/news?per_page=6" \
  -H "X-API-KEY: $CMS_API_KEY" \
  -H "X-SITE-CODE: demo-code"

import { ShareDanCmsClient } from '@sharedan/cms-sdk';

const cms = new ShareDanCmsClient({
  baseUrl: 'https://api.cms.sharedan.co.jp',
  apiKey: process.env.CMS_API_KEY!,
  siteCode: 'demo-code',
});

const { items, meta } = await cms.posts.list('news', {
  perPage: 6,
  category: 'event',   // 任意
});

const res = await fetch(
  'https://api.cms.sharedan.co.jp/api/v1/posts/news?per_page=6',
  { headers: {
      'X-API-KEY': process.env.CMS_API_KEY!,
      'X-SITE-CODE': 'demo-code',
  } },
);
const { items, meta } = await res.json();

200 OKレスポンス例を表示

{
  "items": [
    {
      "slug": "mp-850-release",
      "title": "新型精密プレス機「MP-850」を発売しました",
      "published_at": "2026-07-15T01:00:00Z",
      "pinned": false,
      "category": { "name": "製品情報", "slug": "product" },
      "tags": ["新製品"],
      "eyecatch_image": {
        "url": "https://…/mp850.webp",
        "thumbnail_url": "https://…/mp850_thumb.webp",
        "width": 1200, "height": 630
      }
    }
  ],
  "meta": { "current_page": 1, "last_page": 3, "per_page": 6, "total": 17 }
}

本文をHTMLにする

本文 body は ProseMirror（Tiptap）JSON で返ります。SDK の renderProseMirror() でサニタイズ済みのHTML文字列に変換できます。

TypeScript

import { renderProseMirror } from '@sharedan/cms-sdk';

const post = await cms.posts.get('news', 'mp-850-release');
const html = renderProseMirror(post.body, { linkTarget: '_blank' });

ヒント：ブロックエディタで作成した固定コンテンツも同じJSON形式です。renderProseMirror() は決まったノード・マーク集合をHTMLに変換します。カスタムブロックなど集合外のものは、返却されたHTMLを後処理するか、SDK の prosemirror モジュールを参考に独自のレンダラーを実装して対応します。

次に読む

API リファレンス

投稿・FAQ・固定コンテンツの全エンドポイント →

ガイド

Astroで作る — 投稿一覧と詳細ページ →

ガイド

問い合わせフォーム連携とスパム対策 →

FEEDBACK

このページはお役に立ちましたか？

改善要望・不具合・ドキュメントの分かりにくい点など、お気軽にお寄せください。いただいた内容は今後の改善に役立てます。