インテグレーションAPI を使って外部フォームの送信データで CMS のアイテムを更新する

更新日2026年8月19日

インテグレーションAPI を使うと、データの更新や削除など、パブリックAPI と比較して複雑な操作が可能です。登録情報の変更フォームなど、HTML フォームから送信されたデータで Re:Earth CMS の既存アイテムを更新する方法を説明します。

サンプルコード

以下は、更新フォームのサンプルコードです。アイテム ID、名前、コメントを送信して、指定したアイテムを更新します。WORKSPACE_ID などの値や、fields の key（フィールドキー）は、自分のモデルの設定に応じて変えてください。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Edit your info</title>
  </head>
  <body>
    <form id="contact-form">
      <label>ID<br /><input type="text" name="itemId" required /></label><br />
      <label>name<br /><input type="text" name="name" required /></label><br />
      <label
        >message<br /><textarea name="comment" required></textarea></label
      ><br />
      <button type="submit">Submit</button>
    </form>

    <script>
      const WORKSPACE_ID = "<workspace_id_or_alias>";
      const PROJECT_ID = "<project_id_or_alias>";
      const MODEL_ID = "<model_id_or_key>";
      const TOKEN = "<your_integration_token>";

      document
        .getElementById("contact-form")
        .addEventListener("submit", async (e) => {
          e.preventDefault();

          const formData = new FormData(e.target);
          const itemId = formData.get("itemId");

          const url = `https://api.cms.reearth.io/api/${WORKSPACE_ID}/projects/${PROJECT_ID}/models/${MODEL_ID}/items/${itemId}`;

          const body = {
            fields: [
              { key: "name", type: "text", value: formData.get("name") },
              {
                key: "comment",
                type: "textArea",
                value: formData.get("comment"),
              },
            ],
          };

          const resp = await fetch(url, {
            method: "PATCH",
            headers: {
              Authorization: `Bearer ${TOKEN}`,
              "Content-Type": "application/json",
              Accept: "application/json",
            },
            body: JSON.stringify(body),
          });

          if (!resp.ok) {
            const text = await resp.text();
            throw new Error(`HTTP ${resp.status}: ${text}`);
          }

          alert("Update complete.");
        });
    </script>
  </body>
</html>

実行結果

フォームに入力して送信すると、インテグレーションAPI 経由でアイテムが更新されます。

ID・name・message の入力欄と Submit ボタンを持つ更新フォーム

CMS の Content 画面を確認すると、更新した内容がアイテムに反映されています。

Re:Earth CMS の Content 画面。フォームから送信された内容がアイテムに反映されている

エンドポイントの詳細な仕様については、インテグレーションAPIリファレンスを参照してください。