UI の差し込み（Slot / Fill）

管理画面のあらかじめ決められた位置に、独自のボタンやパネルを追加できます。

差し込み位置（Slot）とは

管理画面の特定の場所に用意された、名前付きの差し込み口です。追加のみができます。 既存のボタンを消したり、置き換えたりはできません。

差し込みは ctx.ui.fill(差し込み位置の名前, 内容) で行います。

DOM で差し込む

React を使わない場合はこちらです。渡された要素に自由に DOM を追加できます。

ACMS.plugins.register('my-plugin', {
  setup(ctx) {
    ctx.ui.fill('media.edit-modal.footer', (el) => {
      const button = document.createElement('button');
      button.type = 'button';
      button.className = 'acms-admin-btn';
      button.textContent = '外部システムに送信';
      button.addEventListener('click', () => sendToExternal());
      el.append(button);

      // 画面が閉じられたときに呼ばれる（省略可）
      return () => button.remove();
    });
  },
});

• 引数 el は、差し込み位置に用意された空の要素です。
• この要素の中身は管理画面側から書き換えられません。 自分で追加した DOM がいつのまにか消えることはありません。
• 戻り値の関数は、その画面が閉じられたときに呼ばれます。イベントリスナーの解除などに使ってください。

差し込み位置が渡す値（下の一覧の「受け取れる値」）を DOM 版で使うことはできません。値が必要な場合は次の React 版を使ってください。

React で差し込む

管理画面と同じ React を使えます。値を受け取らない場合は、引数のないコンポーネントをそのまま渡します。

ACMS.plugins.register('my-plugin', {
  setup(ctx) {
    ctx.ui.fill('preview.actions', function MyButton() {
      return ACMS.Library.React.createElement('button', { type: 'button', className: 'acms-admin-btn' }, '送信');
    });
  },
});

差し込み位置の値を受け取る

編集中のメディアやエディターの情報を受け取りたい場合は、ACMS.plugins.withFillProps() でラップします。

ACMS.plugins.register('my-plugin', {
  setup(ctx) {
    const { withFillProps } = ACMS.plugins;

    ctx.ui.fill(
      'media.edit-modal.field.alt',
      withFillProps(({ item, previewSrc, setAlt }) =>
        ACMS.Library.React.createElement(
          'button',
          {
            type: 'button',
            className: 'acms-admin-btn',
            onClick: async () => {
              const alt = await generateAlt(previewSrc);
              setAlt(alt);
            },
          },
          'alt を自動入力'
        )
      )
    );
  },
});

JSX で書きたい場合は 開発環境と型定義 を参照してください。

差し込み位置の一覧

補足:

• media.edit-modal.field.alt は、管理画面の設定で alt 入力欄を非表示にしている場合、この差し込み位置も一緒に非表示になります。
• setAlt(値) を使うと、入力欄の表示・内部の値・高さの自動調整がまとめて更新されます。getAlt() は現在の値を返します。
• getFormData() は、その時点で保存されようとしている内容を FormData として返します。
• preview.actions は、プレビューのキャプチャまたは共有が有効なときだけ表示されます。

同じ位置に複数のプラグインが差し込んだとき

JS が読み込まれた順に並びます。 優先度の指定はありません。順序を制御したい場合は、アセット API の登録順で調整してください。

差し込む UI の見た目を合わせる

管理画面と同じ見た目にするには、管理画面の CSS クラスをそのまま使えます。

button.className = 'acms-admin-btn acms-admin-btn-primary';

• クラス名の一覧 → スタイルガイド
• 実際の表示とバリエーション → Storybook の Button
• React コンポーネントとして使う → npm パッケージ

変更履歴