Magic CMS
ドキュメントの目次
  1. はじめに
  2. コンテンツとコレクション
  3. 公開API
  4. CMS SDK
  5. 素材ライブラリ
  6. データの受け渡し（ZIP）
  7. 管理API

はじめに

Magic CMS Cloud は、静的サイトに「あとから編集できる文章や一覧」を届けるホスト型の CMS です。管理画面でコンテンツやコレクションを作って値を下書きし、明示的に「公開」した内容だけを、静的サイトが公開API または CMS SDK（@magichtml/cms）で読み込みます。サーバーやデータベースを自分で用意する必要はありません。

できること

機能 内容
コンテンツ 会社概要・ページ本文など、1件だけのデータを管理します。
コレクション お知らせ・実績など、並び順を持つ複数件のデータを管理します。検索とページ分けに対応します。
下書きと公開 保存は下書きにだけ反映されます。「公開」した時点の内容が公開版になり、過去の公開版へ戻すこともできます。
素材ライブラリ 画像・PDF・動画・音声などをサイトごとに保管し、公開URLで配信できます。
公開API／SDK 認証なしで公開版を読み取れます。読み込みを許可するサイトの接続元（Origin）を登録します。
データの受け渡し サイトのデータを .magichtml.zip で書き出し、別のサイトや対応アプリケーションに取り込めます。

フォームの受信は扱いません。お問い合わせフォームなどは、別製品の Magic Form Cloud をご利用ください。

利用の流れ

  1. 招待からログインする　Magic CMS Cloud は招待制です。一般公開の新規登録はありません。サービス管理者から届いた招待URLを開き、お名前・メールアドレス・パスワード（英字と数字を含む12文字以上）を設定します。招待URLは1回だけ使え、有効期限は24時間です。以降はメールアドレスとパスワードでログインします。パスワードの再設定はサービス管理者へご連絡ください。
  2. サイトを作成する　ログイン後のサイト一覧（https://cms.magichtml.dev/app）で「＋ サイトを作成」を押し、サイト名を入力します。サイトは、静的サイト1つ分のデータのまとまりです。
  3. コンテンツ／コレクションを作成する　サイト画面の「＋ 新規作成」で種類・名前・識別キー（例：news）を決めます。識別キーは公開APIのURLやSDKで使う名前です。詳しくは コンテンツとコレクション をご覧ください。
  4. 項目と値を下書き保存する　「項目・設定」タブで項目（タイトル・本文・日付など）を定義し、「データ」タブで値を入力して保存します。どちらも下書きとして保存され、公開中の内容は変わりません。
  5. 公開する　「保存済みの下書きを公開」を押すと、その時点の下書きが新しい公開版になり、公開APIから取得できるようになります。
  6. 接続元（Origin）を登録する　サイト画面の「サイト設定・接続元」に、静的サイトのURL（例：https://example.com）を1行に1件登録します。ブラウザから公開APIを読み込むには、この登録が必要です。
  7. サイトから読み込む　静的サイトに CMS SDK を読み込み、公開版のデータを表示します。

下書きと公開版

下書き 公開版
作られるとき 項目や値を保存したとき 「保存済みの下書きを公開」を押したとき
公開APIでの取得 できません できます（公開項目のみ）
変更 何度でも上書きできます 変更できません。公開のたびに新しい版が作られます
  • 公開後に下書きを編集しても、再度公開するまで静的サイトの表示は変わりません。
  • リソース画面の「接続・公開履歴」タブに公開履歴（新しい順に最大20件）が表示されます。過去の版の「この版を公開」を押すと、公開版をその版に切り替えられます（ロールバック）。下書きは変更されません。
  • 「公開停止」を押すと公開APIから取得できなくなります。下書きと公開履歴は残ります。

最小構成の例

次の HTML は、識別キー about のコンテンツを読み込み、title と body を表示します。SITE_ID はサイトのIDに置き換えてください。サイトIDは、サイト画面の「静的サイトとの接続」にある公開接続先URL（https://cms.magichtml.dev/api/public/v1/sites/<サイトID>）や、リソース画面の「接続・公開履歴」タブの接続サンプルで確認できます。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>会社概要</title>
</head>
<body>
  <h1 id="title">読み込み中…</h1>
  <p id="body"></p>

  <script src="https://cdn.jsdelivr.net/npm/@magichtml/cms@0.1.0/magic-cms.js" integrity="sha384-bako2vxKJyzsf7errApVfA4Lk2QkaKDmAvws2+gV4giOGqHNEeZBeet+qTlJD2qh" crossorigin="anonymous"></script>
  <script>
    const cms = new MagicCMS('https://cms.magichtml.dev', 'SITE_ID');
    cms.get('about').then(data => {
      const values = data.records[0].values;
      document.getElementById('title').textContent = values.title;
      document.getElementById('body').textContent = values.body ?? '';
    }).catch(error => {
      console.error(error.status, error.message);
    });
  </script>
</body>
</html>

動作させる前に、次の3点を確認してください。

  • about のコンテンツに値を保存し、公開していること（未公開の場合は 404 になります）。
  • 表示するページのオリジン（例：https://example.com）を接続元に登録していること。
  • title と body の項目が「公開」になっていること（非公開の項目はAPIに含まれません）。

各リソース画面の「接続・公開履歴」タブには、サイトIDと識別キーを埋め込んだ接続サンプルが表示されます。コピーして使うと確実です。

次に読むページ