---
title: 管理画面プラグインを利用して、Kuroco管理画面に任意のページを追加する
description: 管理画面プラグインを利用して、Kuroco管理画面に任意のページを追加します。用意されたKurocoの管理画面で対応できないような処理や表示を実装したい場合にご活用ください。
---

## 概要
管理画面プラグインを利用して、Kuroco管理画面に任意のページを追加します。
用意されたKurocoの管理画面で対応できないような処理や表示を実装したい場合にご活用ください。

本チュートリアルでは導入の例として、サンプルプロジェクトの使い方からKuroco管理画面での設定までを説明します。

### 学べること
以下の手順で、Kuroco管理画面に任意のページを追加します。

- [Vueプラグインの準備](#vueプラグインの準備)
  - [サンプルプロジェクトをクローンする](#サンプルプロジェクトをクローンする)
  - [プロジェクトのページを更新する](#プロジェクトのページを更新する)
  - [コンポーネントをビルドする](#コンポーネントをビルドする)
- [Kuroco管理画面の設定](#kuroco管理画面の設定)
  - [APIの準備](#apiの準備)
  - [ファイルの保存](#ファイルの保存)
  - [管理画面プラグインの設定](#管理画面プラグインの設定)
- [表示の確認](#表示の確認)

### 前提条件
管理画面プラグインのVueコンポーネントを設定・開発するためには、次の前提条件が必要となります。

- npmコマンドの基本的な操作方法がわかること
- [Vue.js(v2.x)](https://jp.vuejs.org/v2/guide/)を利用してコンポーネントを開発できること

## Vueプラグインの準備
### サンプルプロジェクトをクローンする
すぐに利用できるよう以下にサンプルプロジェクトの準備があります。

リポジトリ：https://github.com/diverta/management-vue-plugin-sample  
パッケージ：https://github.com/diverta/management-vue-plugin-sample/tree/master/packages/VueSample

まずはこちらをクローンし、管理画面に任意のページを追加するパッケージが配置されているディレクトリに移動します。

```
git clone git@github.com:diverta/management-vue-plugin-sample.git
cd management-vue-plugin-sample/packages/VueSample
```

次のコマンドを実行し、依存関係をインストールします。
```js
npm install
```

### プロジェクトのページを更新する
次にKurocoの管理画面に表示される内容を調整します。

パッケージの `/management-vue-plugin-sample/packages/VueSample/src/pages/VueSample.vue` を開いて以下のように更新します。

```markup title="/management-vue-plugin-sample/packages/VueSample/src/pages/VueSample.vue"
<template>
    <div class="vue-sample">
        <h1>Vue Sample</h1>
        <ul>
            <li v-for="item in items" :key="item.topics_id">
                <a :href="`/management/topics/topics_edit/?topics_id=${item.topics_id}`">{{ item.subject }}</a>
            </li>
        </ul>
    </div>
</template>

<script>
import Vue from 'vue';
window.rcmsJS.vue.registerVM(Vue, rcms_js_config.publicPath); // eslint-disable-line
const axios = require('axios').default;

export default {
    components: {},
    props: {
        root_api_url: {
            type: String,
            default: '',
        },
        endpoint: {
            type: String,
            default: '',
        },
    },
    created: function() {},
    mounted: async function() {
        const resp = await axios.get(this.root_api_url + this.endpoint);
        this.items = resp.data.list ? resp.data.list : [];
    },
    data() {
        return {
            items: [],
        };
    },

    computed: {},
};
</script>

<style scoped>
.vue-sample h1 {
    font-size: 24px;
    color: #007bff;
    margin-bottom: 10px;
}
</style>
```

### コンポーネントをビルドする

更新ができたら次のコマンドを実行し、コンポーネントをビルドします。
```
npm run lint:fix
npm run build
```

ビルド処理が完了すると、`/dist/`ディレクトリの配下にWebpackでバンドルされた次のようなファイルが出力されます。ファイル名のハッシュは、ビルドの度に異なる値が付与されます。

```
manifest.json
VueSample.e99068643c574d4f2040.css
vendors.43ede78aa5d8feb80b64.js
VueSample.a06fd9bd33de1d5ae13b.js
```

:::tip
ビルドは以下の方法で実行しても構いません。  
`npm run watch` を実行した状態で編集：ソースが変わると自動的にビルドされる。  
:::

以上でKurocoに読み込むVueプラグインの準備ができました。



## Kuroco管理画面の設定
### APIの準備

上記のVueプラグインはKurocoのTopics::listのエンドポイントにリクエストを送り、コンテンツの一覧を表示するように書かれています。
Vueプラグインで利用するエンドポイントの準備がない場合は以下のエンドポイントを作成します。

簡易化のためAPIリクエストに制限をかけないエンドポイントを想定しています。

|項目|設定内容|
|:--|:--|
|セキュリティ|Cookie|
|パス|topics|
|カテゴリー|コンテンツ|
|モデル|Topics|
|オペレーション|list|
|APIリクエスト制限|制限無し|
|topics_group_id|APIリクエスト制限をかけていない任意のコンテンツ定義|

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

### ファイルの保存

生成されたファイルを外部からアクセスできるようにします。ファイルの配置先には任意のホスティングサービスやストレージを利用できますが、今回はファイルマネージャーの下記ディレクトリにアップロードします。

- `/files/user/mng_vue_components/vue-sample/`

サイドメニューより[ファイルマネージャ]を開き、[KurocoFiles]を右クリックして「新しいフォルダを作成」を選択します。

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

フォルダ名に`mng_vue_components`を入力し、[OK]をクリックして保存します。

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

同様に`mng_vue_components`配下に`vue-sample`のフォルダを作成します。  

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

`vue-sample`ディレクトリに[Vueプラグインの準備](#vueプラグインの準備)で作成した4つのファイルを保存します。  

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

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

ファイルマネージャに配置したファイルを、管理画面上で読み込むように設定します。

[環境設定] -> [管理画面プラグイン]をクリックし、設定画面を表示します。  
[追加]をクリックし、プラグインの編集モーダルを表示します。

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

下記のように入力し、[追加する]をクリックします。

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

| 親項目 | 子項目 | 値 | 説明 |
| :--- | :--- | :--- | :--- |
| ステータス | - | 有効 | - |
| プラグイン名 | - | Color Picker Input | 任意のプラグイン名を指定します。 |
| タイプ | - | Vue | - |
| ソース | コンポーネント名 | VueSample | サンプルリポジトリ上のコンポーネント名と合わせます。 |
|| URL | `/files/user/mng_vue_components/vue-sample` | コンポーネントの配置先URLを入力します。パスを変更する場合は、[rcms-js.config.js](https://github.com/diverta/management-vue-plugin-sample/blob/master/packages/VueSample/rcms-js.config.js)の`publicPath`を編集し、本項目と設定内容を合わせます。<br/>Kurocoの外部にファイルを配置している場合は、絶対URL形式(`https://**`)で指定します。 |
|| マニフェストキー | `vendors.*;VueSample.*` | 読み込み対象ファイルのmanifest.jsonキーを次の形式で指定します。<br/>`vendors.*;ComponentName.*` |
|対象| ページURI | `/sample/topics_list/` | 2階層以上の任意パスを指定します。<br/>1階層のみの場合は/menu/menu/にリダイレクトされますのでご注意ください。 |
|プロップス| - | <code>&#123;<br/>"root_api_url":"CONST::ROOT_API_URL",<br/>"endpoint":"/rcms-api/1/topics"<br/>&#125;</code> | コンポーネントに渡すpropsを指定します。<br/>指定の必要がない場合は、空欄とします。<br/>ここでは、APIドメインと利用するエンドポイントのURLを設定します。<br/>管理画面プラグインに渡せるプロップスは[管理画面プラグインで利用可能なスロット一覧](/ja/docs/reference/management-plugin-slot/#プロップス)を参照してください。 |
|Add to menu|-|チェックを入れる|ページURIに任意のパスを指定してチェックを入れると、サイドメニューにリンクが追加されます。|

## 表示の確認

設定が完了すると、Kuroco管理画面のサイドメニューに追加したページURIへのリンクが表示されます。  
また、アクセスすると、`/rcms-api/1/topics`のエンドポイントで取得したコンテンツの一覧とその編集画面へのリンクが表示されます。

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

以上で、Kuroco管理画面に任意のページを作成できました。  
こちらのサンプルを元に任意の管理画面を実装してください。

## 関連ドキュメント
- [管理画面プラグインを利用して、コンテンツ編集画面に任意のVueコンポーネントを適用する](/ja/docs/tutorials/apply-vue-to-a-kuroco-management-screen-with-the-plugin/)
- [管理画面プラグインから認証が必要なエンドポイントにリクエストを送るにはどうしたらいいですか？](/ja/docs/faq/how-can-i-request-an-authenticated-endpoint-from-the-admin-plugin/)