---
title: 管理画面プラグイン
category: アカウント設定
weight: 
---

このページでは、Kuroco管理ページにカスタムプラグインを挿入できます。 現在、Kurocoは2種類のプラグインをサポートしています。
- Vue.js
- CSS
## プラグイン一覧

### 確認方法
[環境設定] -> [管理画面プラグイン]をクリックします。
![Image from Gyazo](https://t.gyazo.com/teams/diverta/258fda59cf4af0604dafc08fc0c05262.png)

### 項目説明
![Image from Gyazo](https://t.gyazo.com/teams/diverta/b1215da64a32079df9941311f8045d67.png)

|項目   |説明  |
| :--- | :--- |
|ステータス|ステータスを確認できます。<br/>![Image from Gyazo](https://t.gyazo.com/teams/diverta/f6ba28f304045d08a896b276917750d1.jpg)：有効<br/>![Image from Gyazo](https://t.gyazo.com/teams/diverta/ded341265dda92d33617efd4d4857cb2.png)：無効|
|プラグイン ID|プラグインのIDです。プラグインを追加すると自動で採番されます。|
|名前|プラグインの名前を表示します。|
|タイプ|プラグインのタイプを表示します。(css もしくは Vue.js)|
|ソース|プラグインの保存場所を表示します。|
|対象|プラグインを読み込む管理画面のページとスロットを表示します。|
|プロップス|プロップスに入力した内容を表示します。<br/>Vue.jsプラグインの場合は、Initial propsでJSONオブジェクトを挿入することができます。一部の特定のページやスロットは追加のpropsを利用します。|
|更新日時|プラグインが最後に更新された日時を表示します。|
|編集|[設定]をクリックするとプラグインの設定画面が開きます。|


### 一括処理ボタン
![Image from Gyazo](https://t.gyazo.com/teams/diverta/9545b83c16b93a4f7565ee2b56f2845c.png)
一覧の左端のチェックボックスにチェックを入れて、[削除する]をクリックすると、選択したプラグインに対して一括で削除処理を行います。

## プラグインの追加・編集方法

### 追加方法

[追加する]をクリックすると、プラグインを追加できます。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/a4601234a2806e007d113ba0e3eb8b12.png)

内容を入力後[追加する]をクリックすることで入力内容が反映します。

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

### 編集方法

[設定]をクリックすると、管理画面プラグインの設定画面が開きます。

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

内容を更新後[更新する]をクリックすることで入力内容が反映します。

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

### 項目説明

|項目   |説明  |
| :--- | :--- |
|ステータス|ステータスを選択できます。|
|プラグイン名|プラグインの名前を入力します。|
|タイプ|プラグインのタイプを設定します。|
|ソース<br/>コンポーネント名:|Vue.jsタイプの場合、MPAのエントリーポイントのコンポーネント名を入力してください。<br/>※KurocoはMPA形式のアプリケーションをサポートしています。<br/>例: `MyEntryPoint`|
|ソース URL：|プラグインをアップロードした場所を入力します。<br/>外部サイトに配置したものを指定することも可能です。|
|マニフェストキー：|Vue.jsタイプの場合、読み込まれるコンポーネントのWebpackマニフェストキーのリストをセミコロン区切りで入力してください。 値は、Webpackのコード分割とチャンク構成によって異なります。<br/>例: `MyEntryPoint.js;vendors.*`|
|対象<br/>ページURI:|プラグインを読み込むKuroco管理画面のURIを指定します。<br/>`/management` は省略し、相対URIで指定してください。<br/>また、任意のカスタムページを指定することも可能です。 この場合、ページはプラグインの専用コンテンツとしてアクセス可能になります。|
|スロット名:|プラグインを読み込むスロットを指定します。<br/>プラグインは値に応じて様々な場所に読み込むことがで、ページによって特定のスロットに対応しています。詳細は[管理画面プラグインで利用可能なスロット一覧](/ja/docs/reference/management-plugin-slot/)を参考にしてください。|
|スロットパラメータ: |スロットのパラメータを設定します。<br/>いくつかのページでは、スロットパラメータを設定して、プラグインを読み込む条件を設定できます。<br/>例えば、コンテンツ編集ページでは、特定のグループに対してのみプラグインを読み込む設定が可能です。|
|プロップス|propsをプラグインに渡したい場合は、ここにJSONオブジェクトとして入力します。<br/>例: `{"my_prop": "my_prop_value"}`|
|更新|管理画面プラグインの編集内容を反映します。|
|コピー|常時している管理画面プラグインをコピーして新規の管理画面プラグインを作成します。|

### 更新履歴の確認
編集画面の[更新履歴]をクリックすると、編集履歴が一覧で確認できます。

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

#### 更新履歴
![Image from Gyazo](https://t.gyazo.com/teams/diverta/d3fe493e6ed9fd37dc5201aaca24e6a7.png)

|項目 |説明 |
| :--- | :--- |
|版|版を表示します。<br/>クリックすると対象の版の状態を確認できます。|
|更新日時|コンテンツが更新された日時を表示します。|
|更新者|コンテンツを更新したメンバー名を表示します。|
|アクション|実行した処理の種類を表示します。<br/>アクションは以下の6種類です。<br/><ul><li>新規追加</li><li>更新</li><li>削除</li><li>申請</li><li>承認</li><li>承認差し戻し</li></ul>|
|コメント|更新時に残したコメントを表示します。|
|内容|更新した内容を表示します。|

## 関連ドキュメント
- [管理画面プラグインを使ってKuroco管理画面に任意のCSSを適用する](/ja/docs/tutorials/apply-css-to-a-kuroco-management-screen-with-the-plugin/)
- [管理画面プラグインを利用して、Kuroco管理画面に任意のVueコンポーネントを適用する](/ja/docs/tutorials/apply-vue-to-a-kuroco-management-screen-with-the-plugin/)
- [管理画面プラグインで利用可能なスロット一覧](/ja/docs/reference/management-plugin-slot/)