コンテンツにスキップ
HiEmdash Docs

Block Kit

EmDashのBlock Kitにより、サンドボックス化されたプラグインは管理UIをJSONとして記述できます。ホストがブロックをレンダリングするため、プラグイン提供のJavaScriptがブラウザで実行されることはありません。

仕組み

Section titled “仕組み”
  1. ユーザーがプラグインの管理ページに移動します
  2. 管理パネルがプラグインの管理ルートにpage_loadインタラクションを送信します
  3. プラグインがブロックの配列を含むBlockResponseを返します
  4. 管理パネルがBlockRendererコンポーネントを使用してブロックをレンダリングします
  5. ユーザーがインタラクション（ボタンクリック、フォーム送信）を行うと、管理パネルはインタラクションをプラグインに送り返します
  6. プラグインが新しいブロックを返し、このサイクルが繰り返されます
// Plugin admin route handler
routes: {
  admin: {
    handler: async (ctx, { request }) => {
      const interaction = await request.json();


      if (interaction.type === "page_load") {
        return {
          blocks: [
            { type: "header", text: "My Plugin Settings" },
            {
              type: "form",
              block_id: "settings",
              fields: [
                { type: "text_input", action_id: "api_url", label: "API URL" },
                { type: "toggle", action_id: "enabled", label: "Enabled", initial_value: true },
              ],
              submit: { label: "Save", action_id: "save" },
            },
          ],
        };
      }


      if (interaction.type === "form_submit" && interaction.action_id === "save") {
        await ctx.kv.set("settings", interaction.values);
        return {
          blocks: [/* ... updated blocks ... */],
          toast: { message: "Settings saved", type: "success" },
        };
      }
    },
  },
}

ブロックタイプ

Section titled “ブロックタイプ”
タイプ説明
header大きな太字の見出し
sectionオプションのアクセサリー要素付きテキスト
divider水平線
fields2列のラベル/値グリッド
tableフォーマット、ソート、ページネーション付きデータテーブル
actionsボタンとコントロールの水平行
statsトレンドインジケーター付きダッシュボードメトリックカード
form条件付き表示と送信機能を持つ入力フィールド
imageキャプション付きブロックレベル画像
context小さな控えめなヘルプテキスト
columnsネストされたブロックを持つ2-3列レイアウト

要素タイプ

Section titled “要素タイプ”
タイプ説明
buttonオプションの確認ダイアログ付きアクションボタン
text_input単一行または複数行のテキスト入力
number_input最小値/最大値付き数値入力
selectドロップダウン選択
toggleオン/オフスイッチ
secret_inputAPIキーやトークン用のマスク入力

ビルダーヘルパー

Section titled “ビルダーヘルパー”

@emdash-cms/blocksパッケージは、よりクリーンなコードのためのビルダーヘルパーをエクスポートします：

import { blocks, elements } from "@emdash-cms/blocks";


const { header, form, section, stats } = blocks;
const { textInput, toggle, select, button } = elements;


return {
  blocks: [
      header("SEO設定"),
    form({
      blockId: "settings",
      fields: [
          textInput("site_title", "サイトタイトル", { initialValue: "私のサイト" }),
          toggle("generate_sitemap", "サイトマップを生成", { initialValue: true }),
          select("robots", "デフォルトのrobots設定", [
          { label: "Index, Follow", value: "index,follow" },
          { label: "No Index", value: "noindex,follow" },
        ]),
      ],
      submit: { label: "Save", actionId: "save" },
    }),
  ],
};

条件付きフィールド

Section titled “条件付きフィールド”

フォームフィールドは、他のフィールドの値に基づいて条件付きで表示できます：

{
  "type": "toggle",
  "action_id": "auth_enabled",
  "label": "Enable Authentication"
}
{
  "type": "secret_input",
  "action_id": "api_key",
  "label": "API Key",
  "condition": { "field": "auth_enabled", "eq": true }
}

api_keyフィールドは、auth_enabledがオンに切り替えられた場合にのみ表示されます。条件はクライアント側で評価され、ラウンドトリップは発生しません。

試してみる

Section titled “試してみる”

Block Playgroundを使用して、インタラクティブにブロックレイアウトを構築およびテストできます。