管理画面プラグイン

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

  • Vue.js
  • CSS

プラグイン一覧

確認方法

[環境設定] -> [管理画面プラグイン]をクリックします。 Image (fetched from Gyazo)

項目説明

Image from Gyazo

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

一括処理ボタン

Image from Gyazo

一覧の左端のチェックボックスにチェックを入れて、[削除する]をクリックすると、選択したプラグインに対して一括で削除処理を行います。

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

追加方法

[追加する]をクリックすると、プラグインを追加できます。
Image from Gyazo

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

編集方法

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

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

項目説明

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

[更新]をクリックすることで管理画面プラグインの編集内容を反映します。

利用可能なスロットとスロットパラメータ

Vue.js プラグイン

Page UriAvailable slotsAvailable slot parameters
任意のUri空欄-
/topics/topics_edit/ext_col_NNtopics_group_id=G
/inquiry/inquiry_report/list_main_top-
/inquiry/inquiry_bn_list/list_main_top-
/member/member_edit/Item name-

CSS プラグイン

Page UriAvailable slotsAvailable slot parameters
任意のUriheadgroup_id=G
group_id[]=G
group_id[not]=G

例:
group_id=2
2に所属するユーザーにのみcssを適用
group_id[]=2&group_id[]=3
2または3に所属するユーザーにのみcssを適用
group_id[not]=2
2に所属しないユーザーにcssを適用
group_id[not][]=2&group_id[not][]=3
2または3に所属しないユーザーにcssを適用

お探しのページは見つかりましたか?解決しない場合は、問い合わせフォームからお問い合わせいただくか、Slackコミュニティにご参加ください。