管理画面プラグインを利用して、コンテンツ編集画面に任意のVueコンポーネントを適用する

概要

管理画面プラグインを利用すると、任意のVueコンポーネントをKurocoの管理画面に適用できます。本チュートリアルでは、その設定と開発の方法について説明します。

学べること

• 管理画面プラグインを設定する
  • サンプルリポジトリを利用して、管理画面プラグインを設定する方法を説明します。
• 管理画面プラグインを開発する
  • ローカル環境で管理画面プラグインのVueコンポーネントを開発する方法を説明します。

前提条件

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

• npmコマンドの基本的な操作方法がわかること
• Vue.js(v2.x)を利用してコンポーネントを開発できること

管理画面プラグインを設定する

次のサンプルリポジトリ上のVueコンポーネントを用いて、管理画面プラグインを設定する方法を説明します。 diverta/management-vue-plugin-sample

今回は、コンテンツ定義ID:1のコンテンツ定義にテキスト形式の拡張項目を設定し、入力フォームにContentsColorPickerInputプラグインを適用します。<input type="text" />の入力フォームを次のようなカラーピッカーに差し替え、選択した色のカラーコードを設定できるようにします。

コンテンツの拡張項目を設定する

まずはコンテンツ定義設定にて、「テキスト」型の拡張項目を次のように設定します。

設定項目	値
ID	01
項目名	カラーピッカー
項目設定	テキスト

コンテンツ設定

コンテンツ編集

サンプルコンポーネントをインストールする

サンプルリポジトリをクローンし、カラーピッカーのパッケージが配置されているディレクトリに移動します。

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

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

npm install

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

次のコマンドを実行し、コンポーネントをビルドします。

npm run lint:fix
npm run build

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

manifest.json
vendors.43ede78aa5d8feb80b64.js
ContentsColorPickerInput.b584f61c71a18c07edb8.js

コンポーネントをデプロイする

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

• /files/user/mng_vue_components

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

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

mng_vue_componentsディレクトリを選択した状態で[アップロード]をクリックし、先ほど生成したファイルをすべてアップロードします。

管理画面プラグインの設定を追加する

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

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

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

親項目	子項目	値	説明
ステータス	-	有効	-
プラグイン名	-	Color Picker Input	任意のプラグイン名を指定します。
タイプ	-	Vue	-
ソース	コンポーネント名	ContentsColorPickerInput	サンプルリポジトリ上のコンポーネント名と合わせます。
	URL	/files/user/mng_vue_components	コンポーネントの配置先URLを入力します。パスを変更する場合は、rcms-js.config.jsのpublicPathを編集し、本項目と設定内容を合わせます。 Kurocoの外部にファイルを配置している場合は、絶対URL形式(https://**)で指定します。
	マニフェストキー	vendors.*;ContentsColorPickerInput.*	読み込み対象ファイルのmanifest.jsonキーを次の形式で指定します。 vendors.*;ComponentName.*
対象	ページURI	/topics/topics_edit/	コンテンツ編集画面のパスを指定します。/management/は省略する必要があります。
	スロット名	ext_1	プラグイン適用対象の拡張項目の名称を、次の形式で指定します。 ext_{拡張項目ID(数値形式)} ここでは、コンテンツの拡張項目を設定するで設定した拡張項目(01)の名称を入力します。
	スロットパラメータ	topics_group_id=1	プラグイン適用対象のコンテンツ定義IDを指定します。 ここでは、コンテンツの拡張項目を設定するで設定したコンテンツ定義のID(1)を入力します。
プロップス	-	{"defaultColor":"#000000"}	コンポーネントに渡すpropsを指定します。 指定の必要がない場合は、空欄とします。 ここでは、カラーピッカーのデフォルト値をdefaultColorとして設定します。

表示・動作を確認する

コンテンツ編集画面を表示し、設定したVueコンポーネントが正しく表示されていることを確認します。

続いて、任意の色を選択した状態でコンテンツを新規追加し、設定したカラーコードが保存されることを確認してください。

管理画面プラグインを開発する

次に、管理画面プラグインの開発方法について学びます。先ほど設定したContentsColorPickerInputのソースコードをローカル環境で編集し、動作確認する手順を説明します。

管理画面プラグインを開発するためには、開発者ツールを有効化する必要があります。これを利用すると、管理画面をローカル環境の開発サーバーと同期し、コンポーネントの編集と動作確認を行うことができます。

開発者ツールを有効化する

[環境設定] -> [管理画面プラグイン]をクリックして、設定画面を表示します。続いて[設定する]をクリックし、プラグインの設定モーダルを開きます。

各項目を次のように設定し、[更新する] をクリックして保存します。

項目	値	説明
開発者ツール	有効	開発者ツールを有効化します。
開発者グループ	未選択	開発者ツールを利用可能なグループを指定します。 管理者グループは常に利用可能となるため、その他のグループを許可する場合に設定します。今回は未選択とし、管理者のみを許可します。

保存が完了したら、画面を一度リロードします。開発者ツールが有効化されている場合、管理画面のヘッダーに開発者ツールの起動ボタンが表示されます。

開発者ツールを設定する

コンテンツの拡張項目を設定するで設定したコンテンツ定義の編集画面に移動します。

開発者ツールの起動ボタン[ <> ]をクリックし、設定モーダルを表示します。画面上に管理画面プラグインを設定している場合、検知されたコンポーネントの一覧が表示されます。

各項目を次のように設定し、[更新する]をクリックして保存します。

項目	値	説明
有効	チェック	選択したコンポーネントを開発対象として設定します。
ホスト	https://127.0.0.1:26787	開発サーバーのホスト名を設定します。
開発モードを有効にする	チェック	開発者モードを有効化します。

注意

次のように「プラグインが見つかりませんでした。」と表示される場合、プラグインの表示設定が誤っている可能性があります。管理画面プラグインの設定を追加するに戻り、設定が正しいかを確認してください。

開発サーバーを起動する

ContentsColorPickerInputのディレクトリに移動し、次のコマンドを実行して開発サーバーを起動します。

cd management-vue-plugin-sample/packages/ContentsColorPickerInput
npm run serve:https

次のように実行結果が出力され、ローカル環境のhttps://127.0.0.1:26787/にWebpackの開発サーバーが立ち上がります。

> contents-color-picker-input@1.0.0 serve:https .../management-vue-plugin-sample/packages/ContentsColorPickerInput
> cross-env WEBPACK_DEV_SERVER=true RCMS_JS_HTTPS=true webpack-dev-server

ℹ ｢wds｣: Project is running at https://127.0.0.1:26787/
ℹ ｢wds｣: webpack output is served from /files/user/mng_vue_components

...

ℹ ｢wdm｣: Compiled successfully.

開発サーバーの下記URLにアクセスし、manifest.jsonを表示します。
https://127.0.0.1:26787/files/user/mng_vue_components/manifest.json

SSL証明書が未設定のためエラーが発生しますが、無視できるエラーのため、このまま「127.0.0.1 にアクセスする」をクリックします。

以下のようにmanifest.jsonが表示されることを確認します。

ヒント

SSLエラーを無視した状態でも開発の継続は可能ですが、これを解消する場合は、ローカル環境に自己署名証明書を設定する必要があります。下記の「開発サーバーにSSL証明書を設定する」を参考に設定してください。

開発サーバーにSSL証明書を設定する

SSLエラーを解消した状態で開発を進める場合は、mkcertのようなツールを利用して自己署名証明書を設定します。

任意のディレクトリに移動し、127.0.0.1 に対する自己署名証明書を作成してください。

mkcert -key-file rcms_js_key.pem -cert-file rcms_js_cert.pem 127.0.0.1

生成した証明書のパスを環境変数に設定し、npm run serve:httpsを実行することで、証明書を開発サーバーに適用できます。

export RCMS_JS_HTTPS_KEY_FILE=path/to/rcms_js_key.pem
export RCMS_JS_HTTPS_CERT_FILE=path/to/rcms_js_cert.pem
export RCMS_JS_HTTPS_CA_FILE=path/to/rcms_js_cert.pem
npm run serve:https

ヒント

Windowsの場合は、exportの代わりにsetを使用して以下のようになります。

set RCMS_JS_HTTPS_KEY_FILE=(path)/rcms_js_key.pem
set RCMS_JS_HTTPS_CERT_FILE=(path)/rcms_js_cert.pem
set RCMS_JS_HTTPS_CA_FILE=(path)/rcms_js_cert.pem
npm run serve:https

または、以下のようにワンライナーでの変数指定も可能です。

RCMS_JS_HTTPS_KEY_FILE=path/to/rcms_js_key.pem RCMS_JS_HTTPS_CERT_FILE=path/to/rcms_js_cert.pem RCMS_JS_HTTPS_CA_FILE=path/to/rcms_js_cert.pem npm run serve:https

コンポーネントを開発する

コンテンツ編集画面に戻り、一度リロードしてから、Vue.jsのDevToolsを表示します。ローカル環境との同期が成功している場合、検知されたコンポーネントが以下のように表示されます。

ContentsColorPickerInput.vueのmounted()に次のコードを追加します。

console.log('Successfully connected to dev server!');

コンテンツ編集画面をリロードすると、追加したログがブラウザのコンソール上に出力されることを確認できます。

先ほど追加したconsole.log()を削除し、テンプレートのinput要素を次のように編集して保存します。

<!-- `:style="{ color: colorCode }"`を追加し、テキストのカラーを変更 -->
<input
    type="text"
    :name="extConfig[0].ext_col_nm"
    :value="colorCode"
    size="60"
    :style="{ color: colorCode }"
/>

コンポーネントのパッケージにはeslintとprettierによるコードの静的解析機能を導入しています。ファイルの保存後、ターミナル上に構文エラーが表示された場合は、次のコマンドを実行し修正してください。

npm run lint:fix

コンテンツ編集画面をリロードし、カラーピッカーで色を選択して、テキストフォームの色が変更されることを確認します。

コンポーネントの編集が完了したら、以下のステップを再度実行し、変更内容を管理画面に反映します。

• コンポーネントをビルドする
• コンポーネントをデプロイする

反映後、開発サーバーとの同期を解除します。開発者ツールを表示し、「開発者モードを有効にする」のチェックを外して[更新する]をクリックしてください。

画面をリロードし、編集した内容が反映されていることを確認します。

参考情報

本チュートリアルでは、コンテンツ編集画面の拡張項目に管理画面プラグインを適用しました。プラグインは他の画面に対しても適用できますが、その設定方法は適用対象の画面要素(スロット)によって異なります。

利用可能なスロットとその設定内容については、管理画面プラグインで利用可能なスロット一覧 を参照してください。