---
title: 管理画面プラグインで利用可能なスロット一覧
description: 「管理画面プラグイン」機能で利用可能なスロットの一覧です。
---

[管理画面プラグイン](/ja/docs/management/management-plugin/)で利用可能なスロットについて説明します。

## スロットについて

管理画面プラグインの設定時には以下の項目を設定し、プラグインの配置箇所や表示条件を明示する必要があります。それぞれの設定項目の役割について説明します。

- スロット
- スロットパラメータ

### スロット
スロットとは、管理画面上で挿入または差し替え可能なプラグインの位置を示す識別子です。適用対象ページのURLとスロットを共に設定することで、指定した箇所にプラグインを配置します。

### スロットパラメータ

スロットパラメータとは、各スロットのプラグイン表示条件を指定するためのパラメータです。例えば、特定のIDに一致するページにのみプラグインを設定する場合などに利用します。利用可能なパラメータはスロット毎に異なります。

## Vue.jsプラグインで利用可能なスロット一覧

Vueプラグインで指定可能なスロットと、それぞれの設定項目について説明します。コンポーネントにpropsが渡される場合は、各propsの定義についても記載します。

:::info
Vue.jsプラグインの設定方法については、下記のチュートリアルドキュメントをご参照ください。  
[管理画面プラグインを利用して、Kuroco管理画面に任意のVueコンポーネントを適用する](/ja/docs/tutorials/apply-vue-to-a-kuroco-management-screen-with-the-plugin)
:::

### 管理画面プラグイン設定(共通)

以下項目の設定方法は、対象のスロットにかかわらず共通します。そのため、各スロットの項目説明時には記載を省略します。

#### ソース-URL

| 親項目 | 子項目 | 説明 | 設定例 |
| :--- | :--- | :--- | :--- |
| ソース |  URL | バンドルファイルの配置先URL | manifest.jsonの配置されるディレクトリのパスを指定します。任意のパスを設定可能ですが、`rcms-js.config.js`の`publicPath`に記述したパスと一致する必要があります。<br/><br/>相対URL形式(KurocoFilesへ配置した場合):<br/>`/files/user/mng_vue_components`<br/><br/>絶対URL形式(外部ホスティングに配置した場合)<br/> `https://.../files/user/mng_vue_components`<br/> |


#### プロップス
プロップスにはコンポーネント固有のpropsを指定することができます。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/cbcf2f737e475255dddd87a1ccb6f8f1.png)

| タイプ        | 例                           | 説明                                                                                                                                                                                       |
|:---------------------|:---------------------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| スタティック               | "test": "test_value"             | 任意のJSON形式の値値                                                                                                                                                                             |
| メンバー情報          | "member_id": "MEMBER::member_id" | ログインされているメンバー情報を`MEMBER::field_name`の形式で指定します。<br/>指定可能な項目: <ul><li>`member_id`</li><li>`email`</li><li>`name1`</li><li>`name2`</li></ul>                                          |
| 定数 | "url": "CONST::ROOT_URL"         | "環境設定" -> "定数" ページで設定されている定数を`CONST::constant_name`の形式で指定します。 |

### コンテンツ

[コンテンツ](/ja/docs/management/content-structure-topics/)画面で利用可能なスロットです。

#### 拡張項目入力フォーム

[コンテンツ編集](/ja/docs/management/content-structure-topics/#コンテンツの編集)画面の拡張項目入力フォーム (input要素) を差し替えます。
![Image from Gyazo](https://t.gyazo.com/teams/diverta/731082fdab8b5c7e4fb5be1913b11fc8.png)

拡張項目に繰り返しを設定している場合、繰り返し回数分のinput要素を差し替えます。
![Image from Gyazo](https://t.gyazo.com/teams/diverta/09f725f3a9327695c58b0cc357d646b5.png)

拡張項目をグループ化している場合、グループ単位でまとめて差し変えるか、子項目を指定して差し替えます。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/ff1a99d5fa5a50dfc60f3470ffd3c8f8.png)

##### 管理画面プラグイン設定

| 親項目 | 子項目 | 値 | 説明 | 例 |
| :--- | :--- | :--- | :--- | :--- |
| ソース | コンポーネント名 |  | コンポーネント名(任意の値) | ContentTextInput |
|  | マニフェストキー | vendors.\*;{ComponentName}.\* |  | vendors.\*;ContentTextInput.\* |
| 対象 | ページURI | /topics/topics_edit/ |  |  |
|  | スロット名 | `ext_{N}.ext_{M}`<br/> (`{N}`: 項目番号、`{M}`:子項目番号) | 差し替え対象の拡張項目名<br/>グループ化された項目全体を差し替える場合は、`ext_{N}` を指定してください。 | `ext_1` <br/> `ext_1.ext_1` <br/> `ext_1.ext_2`|

##### スロットパラメータ

| パラメータ | 値 | 説明 | 例 |
| :--- | :--- | :--- | :--- |
| topics_group_id | topics_group_id={G}<br/>(`{G}`: コンテンツ定義ID) |  差し替え対象のコンテンツ定義ID |  `topics_group_id=1` |

##### props

Vueコンポーネントには2種類のpropsがあります。 次のpropsはデフォルトでコンポーネントに渡されます。

| プロパティ名 | 型 | 説明 |
| :--- | :--- | :--- |
| topics_group_id |  Number | コンテンツ定義ID |
| extConfig | Array | Object形式の拡張項目設定を格納した配列 (繰り返しの回数分)<br/><br/>ext_col_nm: 拡張項目キー<br/>ext_slug: 識別子<br/>title: 項目名<br/>value: 設定値<br/>options: 単一選択などの選択形式項目の選択肢<br/>limits: 入力制限 |

##### サンプルソース  
- [ContentsColorPickerInput](https://github.com/diverta/management-vue-plugin-sample/tree/master/packages/ContentsColorPickerInput)
- [ContentsGroupingExtensions](https://github.com/diverta/management-vue-plugin-sample/tree/master/packages/ContentsGroupingExtensions)

#### コンテンツ編集画面

[コンテンツ編集](/ja/docs/management/content-structure-topics/#コンテンツの編集)画面の入力フォーム全体 (form要素) を差し替えます。
![Image from Gyazo](https://t.gyazo.com/teams/diverta/daf8833781da12cf638b286693898b2c.png)

##### 管理画面プラグイン設定

| 親項目 | 子項目 | 値 | 説明 | 例 |
| :--- | :--- | :--- | :--- | :--- |
| ソース | コンポーネント名 |  | コンポーネント名(任意の値) | ContentEditForm |
|  | マニフェストキー | vendors.\*;{ComponentName}.\* |  | vendors.\*;ContentEditForm.\* |
| 対象 | ページURI | /topics/topics_edit/ | コンテンツ編集画面URL |  |
|  | スロット名 | edit_form |  |  |

##### スロットパラメータ

| パラメータ | 値 | 説明 | 例 |
| :--- | :--- | :--- | :--- |
| topics_group_id | topics_group_id=G<br/>(`G`: コンテンツ定義ID) |  差し替え対象のコンテンツ定義ID |  `topics_group_id=1` |

##### props

| プロパティ名 | 型 | 説明 |
| :--- | :--- | :--- |
| topics_id | Number | コンテンツID |
| topics_group_id | Number | コンテンツ定義ID |
| ext_items | Array | 拡張項目の定義 |
| formData | Object | 入力内容 |
| DG_CODE | String | CSRFトークン |
| categoryCount | Number | カテゴリ数 |
| categoryOptions | Object | コンテンツカテゴリの選択肢 |
| topicsFlagOptions | Object | その他の設定「一覧に表示する」の選択肢 |
| regularFlagOptions | Object | その他の設定「上位表示する」の選択肢 |
| memberGroupOptions | Object | その他の設定「アクセス制限」の選択肢 |
| relatedTags | Object | 関連するタグ |
| notifOptions | Object | 公開時連携の設定「連携配信」の選択肢 |
| githubWorkflowOptions | Object | GitHub「ワークフロー」の選択肢 |


#### コンテンツ一覧 (テーブル)
[コンテンツ一覧](/ja/docs/management/content-structure-topics/#コンテンツ一覧)画面の一覧テーブルを差し替えます。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/a0781f7b8ce0f2a735ae01970ae17a53.png)

:::info
topics_listをスロット名に指定したプラグインが存在する場合、`<div class=header>`を読み込まなくなります。
:::

##### 管理画面プラグイン設定

| 親項目 | 小項目 | 値 | 説明 | 例 |
| :--- | :--- | :--- | :--- | :--- |
| ソース | コンポーネント名 | TopicsList | コンポーネント名(固定値) |  |
|  | マニフェストキー | vendors.\*;TopicsList.\* |  |  |
| 対象 | ページURI | /topics/topics_list/ | コンテンツ一覧画面URL |  |
|  | スロット名  | topics_list |  |  |

##### スロットパラメータ

| パラメータ | 値 | 説明 | 例 |
| :-- | :-- | :-- | :-- |
| topics_group_id | `topics_group_id={G}`、`{G}`はコンテンツ定義IDを指定します | プラグインによって置き換えられるコンテンツ定義ID | `topics_group_id=1`|
| group_id | `group_id={G1,G2,...}`、`{G1}`と`{G2}`はメンバーグループのIDを指定します | プラグインが適用されるメンバーグループ | `group_id=1,2`     |


##### props

| プロパティ名 | 型 | 説明 |
| :--- | :--- | :--- |
| topics_group_id | Number | コンテンツ定義ID |

### フォーム

[フォーム](/ja/docs/management/inquiry-forms/)画面で利用可能なスロットです。

#### レポート

[レポート](/ja/docs/management/inquiry-report/)画面の上部にコンポーネントを挿入します。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/0e996152dcd58daae5838884e5afc301.png)

##### 管理画面プラグイン設定

| 親項目 | 子項目 | 値 | 説明 | 例 |
| :--- | :--- | :--- | :--- | :--- |
| ソース | コンポーネント名 |  | コンポーネント名(任意の値) | InquiryListTop |
| ソース | マニフェストキー | vendors.\*;{ComponentName}.\* |  | vendors.\*;InquiryListTop.\* |
| 対象 | ページURI | /inquiry/inquiry_report/ |  |  |
|  | スロット名 | list_main_top |  |  |

##### スロットパラメータ

| パラメータ | 値 | 説明 | 例 |
| :--- | :--- | :--- | :--- |
| group_id | `group_id={G1,G2,...}`、`{G1}`と`{G2}`はメンバーグループのIDを指します | プラグインが適用されるメンバーグループ | `group_id=1,2` |


#### 回答一覧 (上部)

[回答](/ja/docs/management/inquiry-answer/)画面の上部にコンポーネントを挿入します。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/ac6c8c8759134863772d693df38fa5d0.png)

##### 管理画面プラグイン設定

| 親項目 | 子項目 | 値 | 説明 | 例 |
| :--- | :--- | :--- | :--- | :--- |
| ソース | コンポーネント名 |  | コンポーネント名(任意の値) | InquiryListTop |
| ソース | マニフェストキー | vendors.\*;{ComponentName}.\* |  | vendors.\*;InquiryListTop.\* |
| 対象 | ページURI | /inquiry/inquiry_bn_list/ |  |  |
|  | スロット名 | list_main_top |  |  |

##### スロットパラメータ

| パラメータ | 値 | 説明 | 例 |
| :--- | :--- | :--- | :--- |
| group_id | `group_id={G1,G2,...}`、`{G1}`と`{G2}`はメンバーグループのIDを指します | プラグインが適用されるメンバーグループ | `group_id=1,2` |

#### 回答一覧 (テーブル)
[回答](/ja/docs/management/inquiry-answer/)画面の一覧テーブルを差し替えます。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/56362f747fb0b30854da0a19a65cd245.png)

##### 管理画面プラグイン設定

| 親項目 | 子項目 | 値 | 説明 | 例 |
| :--- | :--- | :--- | :--- | :--- |
| ソース | コンポーネント名 | InquiryBnList | Vueコンポーネント名(固定値) |
|  | マニフェストキー | vendors.\*;InquiryBnList.\* |  |  |
| 対象 | ページURI | /inquiry/inquiry_bn_list/ | 回答一覧画面URL |  |
|  | スロット名 | modules/inquiry/InquiryBnList |  |
|  | スロットパラメータ | - |  |

### メンバー

[メンバー](/ja/docs/management/member/)画面で利用可能な管理画面プラグインです。

#### 拡張項目入力フォーム

[メンバー編集](/ja/docs/management/member/#メンバーの編集)画面の拡張項目入力フォーム (input要素) を差し替えます。
![Image from Gyazo](https://t.gyazo.com/teams/diverta/84d3454a40169ba4f3f0008b3c91226a.png)

##### 管理画面プラグイン設定

| 親項目 | 子項目 | 値 | 説明 | 例 |
| :--- | :--- | :--- | :--- | :--- |
| ソース | コンポーネント名 |  | コンポーネント名(任意の値) | MemberTextInput |
|  | マニフェストキー | vendors.\*;{ComponentName}.\* |  | vendors.\*;MemberTextInput.\* |
| 対象 | ページURI | /member/member_edit/ | メンバー編集画面URL |  |
|  | スロット名 | 拡張項目の識別子 | [拡張項目設定](/ja/docs/management/extra-information/)画面で設定したデータ名 | ext_text |

##### スロットパラメータ

| パラメータ | 値 | 説明 | 例 |
| :--- | :--- | :--- | :--- |
| group_id | `group_id={G1,G2,...}`、`{G1}`と`{G2}`はメンバーグループのIDを指します | プラグインが適用されるメンバーグループ | `group_id=1,2` |

##### props

| プロパティ名 | 型 | 説明 |
| :--- | :--- | :--- |
| value | any | 値 |
| extConfig | Object | 拡張項目定義 |
| member_id | Number | メンバーID |
| group_ids | Array | グループID |



## CSSプラグインで利用可能なスロット一覧

CSSプラグインで指定可能なスロットと、それぞれの設定項目について説明します。

:::info
CSSプラグインの設定方法については、下記のチュートリアルドキュメントをご参照ください。  
[管理画面プラグインを使ってKuroco管理画面に任意のCSSを適用する](/ja/docs/tutorials/apply-css-to-a-kuroco-management-screen-with-the-plugin/)
:::

### headタグ

headタグにCSSを挿入します。

| 親項目 | 子項目 | 値 | 説明 | 例 |
| :--- | :--- | :--- | :--- | :--- |
| ソース | URL |  | 適用するCSSファイルのURL | 相対URL形式:<br/>`/files/user/css/plugin.css`<br/><br/>絶対URL形式:<br/>`https://.../files/user/css/plugin.css` |
| 対象 | ページURI | 任意のURI | CSSを適用するページのパス | `/`<br/>全ページに適用<br/><br/>`/topics/topics_edit/`<br/>コンテンツ編集画面にのみ適用 |
|  | スロット名 | head |  |  |

**スロットパラメータ**

| パラメータ | 値 | 説明 | 例 |
| :--- | :--- | :--- | :--- |
| group_id | group_id=G<br/>group_id[]=G<br/>(`N`: グループID) | 指定したグループに所属するユーザーにCSSを適用します。 | `group_id=2` <br/>2に所属するユーザーに適用<br/><br/>`group_id[]=2&group_id[]=3`<br/>2または3に所属するユーザーに適用 |
| group_id[not] | group_id[not]=N<br/>group_id[not][]=N<br/>(`N`: グループID) | 指定したグループに所属しないユーザーにCSSを適用します。 | `group_id[not]=2`<br/>2に所属しないユーザーに適用<br/><br/>`group_id[not][]=2&group_id[not][]=3`<br/>2または3に所属しないユーザーに適用 |
