メインコンテンツまでスキップ

管理画面プラグインで利用可能なスロット一覧

管理画面プラグインで利用可能なスロットについて説明します。

スロットについて​

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

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

スロット​

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

スロットパラメータ​

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

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

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

備考

Vue.jsプラグインの設定方法については、下記のチュートリアルドキュメントをご参照ください。
管理画面プラグインを利用して、Kuroco管理画面に任意のVueコンポーネントを適用する

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

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

親項目子項目説明設定例
ソースURLバンドルファイルの配置先URLmanifest.jsonの配置されるディレクトリのパスを指定します。任意のパスを設定可能ですが、rcms-js.config.jsのpublicPathに記述したパスと一致する必要があります。

相対URL形式(KurocoFilesへ配置した場合):
/files/user/mng_vue_components

絶対URL形式(外部ホスティングに配置した場合)
https://.../files/user/mng_vue_components

コンテンツ​

コンテンツ画面で利用可能なスロットです。

拡張項目入力フォーム​

コンテンツ編集画面の拡張項目入力フォーム (input要素) を差し替えます。 Image from Gyazo

拡張項目に繰り返しを設定している場合、繰り返し回数分のinput要素を差し替えます。 Image from Gyazo

拡張項目をグループ化している場合、グループ単位でまとめて差し変えます。 Image from Gyazo

管理画面プラグイン設定

親項目子項目値説明例
ソースコンポーネント名コンポーネント名(任意の値)ContentTextInput
マニフェストキーvendors.*;{ComponentName}.*vendors.*;ContentTextInput.*
対象ページURI/topics/topics_edit/
スロット名ext_{N}
({N}: 項目番号)		差し替え対象の拡張項目名
グループ化された拡張項目の場合、最初に表示される項目名のみ指定		ext_1

スロットパラメータ

パラメータ値説明例
topics_group_idtopics_group_id={G}
({G}: コンテンツ定義ID)		差し替え対象のコンテンツ定義IDtopics_group_id=1

props

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

プロパティ名型説明
topics_group_idNumberコンテンツ定義ID
extConfigArrayObject形式の拡張項目設定を格納した配列 (繰り返しの回数分)

ext_col_nm: 拡張項目キー
ext_slug: 識別子
title: 項目名
value: 設定値
options: 選択形式項目の選択肢
limits: 入力制限

コンポーネント固有のpropsを指定することもできます。

Image from Gyazo

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

サンプルソース

入力フォーム​

コンテンツ編集画面の入力フォーム全体 (form要素) を差し替えます。 Image from Gyazo

管理画面プラグイン設定

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

スロットパラメータ

パラメータ値説明例
topics_group_idtopics_group_id=G
(G: コンテンツ定義ID)		差し替え対象のコンテンツ定義IDtopics_group_id=1

props

プロパティ名型説明
topics_idNumberコンテンツID
topics_group_idNumberコンテンツ定義ID
ext_itemsArray拡張項目の定義
formDataObject入力内容
DG_CODEStringCSRFトークン
categoryCountNumberカテゴリ数
categoryOptionsObjectコンテンツカテゴリの選択肢
topicsFlagOptionsObjectその他の設定「一覧に表示する」の選択肢
regularFlagOptionsObjectその他の設定「上位表示する」の選択肢
memberGroupOptionsObjectその他の設定「アクセス制限」の選択肢
relatedTagsObject関連するタグ
notifOptionsObject公開時連携の設定「連携配信」の選択肢
githubWorkflowOptionsObjectGitHub「ワークフロー」の選択肢

コンテンツ一覧 (テーブル)​

コンテンツ一覧画面の一覧テーブルを差し替えます。

Image from Gyazo

管理画面プラグイン設定

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

props

プロパティ名型説明
topics_group_idNumberコンテンツ定義ID

フォーム​

フォーム画面で利用可能なスロットです。

レポート​

レポート画面の上部にコンポーネントを挿入します。

Image from Gyazo

管理画面プラグイン設定

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

回答一覧 (上部)​

回答画面の上部にコンポーネントを挿入します。

Image from Gyazo

管理画面プラグイン設定

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

回答一覧 (テーブル)​

回答画面の一覧テーブルを差し替えます。

Image from Gyazo

管理画面プラグイン設定

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

メンバー​

メンバー画面で利用可能な管理画面プラグインです。

拡張項目入力フォーム​

メンバー編集画面の拡張項目入力フォーム (input要素) を差し替えます。 Image from Gyazo

管理画面プラグイン設定

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

props

プロパティ名型説明
valueany値
extConfigObject拡張項目定義
member_idNumberメンバーID
group_idsArrayグループID

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

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

備考

CSSプラグインの設定方法については、下記のチュートリアルドキュメントをご参照ください。
管理画面プラグインを使ってKuroco管理画面に任意のCSSを適用する

headタグ​

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

親項目子項目値説明例
ソースURL適用するCSSファイルのURL相対URL形式:
/files/user/css/plugin.css

絶対URL形式:
https://.../files/user/css/plugin.css
対象ページURI任意のURICSSを適用するページのパス/
全ページに適用

/topics/topics_edit/
コンテンツ編集画面にのみ適用
スロット名head

スロットパラメータ

パラメータ値説明例
group_idgroup_id=G
group_id[]=G
(N: グループID)		指定したグループに所属するユーザーにCSSを適用します。group_id=2
2に所属するユーザーに適用

group_id[]=2&group_id[]=3
2または3に所属するユーザーに適用
group_id[not]group_id[not]=N
group_id[not][]=N
(N: グループID)		指定したグループに所属しないユーザーにCSSを適用します。group_id[not]=2
2に所属しないユーザーに適用

group_id[not][]=2&group_id[not][]=3
2または3に所属しないユーザーに適用

サポート

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

フォームから問い合わせをする
Slackコミュニティに参加する