管理画面のカスタマイズが可能なプラグイン「MyAdminStyle」のご紹介
この記事は「MovableType Advent Calendar 2022」の記事です。
混沌とした開発現場
開発者は Movable Type 以外のプログラミング言語の知識がある人が多いので、開発要件をお聞きしているときに「それできますよ!」と考えていることが多いかと思います。たとえば...
- Javascript で 文字を差し替え、イベントの追加で判定も実装できる!
- Javascript で PHP や Python にリクエストを送れば実装できる!
ただ、現実は厳しいです。
- 機能を提供するプラグインがないので導入できない...。
- 管理画面を拡張する有償プラグインを購入するほどでもない...。
- プラグインで実現するには大げさすぎる工数が...。
おおおお、提案できない... と発注者も受注者も悲しい思いをしています。
ご紹介するのはこれを解決するプラグインです。
紹介文
管理画面に独自の JavaScript や CSS を追加して、簡単にカスタマイズすることができるプラグインです。
- 管理画面に[独自ファイル]へのパスが登録できる。
- 管理画面に[カスタマイズに必要なパラメータ]を追加する。
1. 管理画面に[独自ファイル]へのパスが登録できる
管理画面の[システム][ウェブサイト][ブログ]のプラグイン設定画面に、head の閉じタグ直前、 body の閉じタグ直前へ、入力内容を挿入するフィールドが追加されます。
[システム]に登録したものは、CMS全体に反映され、[ウェブサイト]と[ブログ]に登録したものは登録した固有の箇所にのみ反映されます。
2. 管理画面に[カスタマイズに必要なパラメータ]を追加する
管理画面を JavaScript でカスタマイズするためのパラメータがJSON形式で登録されています。
例えば、ログイン中ユーザーのメールアドレスや、ユーザーがアクセスできる[ブログ]のID、管理画面の特定ページを判定する値などです。
このパラメータを取得することで、特定の画面や、ユーザーに対してカスタマイズが可能です。
利用例
CMS管理画面
管理画面からシステムのプラグイン設定を開き[body の閉じタグ直前へ] フィールドへ下記を登録する。フィールド内ならMTタグが利用できます。
<script type="module" src="/cms-path/mt-static/plugins/MyAdminStyle/src/index.js"></script>
スクリプト内容
import {myVars} from '../modules/MyAdminStyle/index.js'; // カスタマイズに必要なパラメータの宣言モジュール
import {myHelloWorld} from '../modules/HelloWorld/index.js'; // モジュール読み込み
if (myVars.screen_id === 'edit-entry') { // 自分の処理
myHelloWorld(); // 実行
}
拡張事例
CMSに登録したページごとにパスワード設置し、顧客に案内したい。
Javascript で PHP に値を送り、PHPでパスワード生成後、指定のフィールドに登録。テンプレートから、htpasswd ファイルを出力し実現。
管理業務で使用している Excel ファイルから、要素を選択し表を作りたい。
CSVで出力したファイルを、Javascript で変換し、指定のフィールドに登録。テンプレートで出力し実現。
管理画面のチェックボックス 選択の項目を管理したい。
項目を管理するコンテンツタイプから、管理画面に JSON を出力し、Javascript でJSON を処理。指定のフィールドにチェックボックス を動的に生成し、値を登録。
インストール
- ファイルの[plugins/MyAdminStyle]を[/cms-path/plugins/]にアップロードします。
- ファイルの[mt-satic/plugins/MyAdminStyle]を[/cms-path/mt-static/plugins/]にアップロードします。
- CMSにログインしてインストールを実行します。
ドキュメント
まだない。
ダウンロード
GitHubに公開しています。ダウンロードはこちら。
あとがき
管理画面が素敵になるいろいろな提案が出てきて、発注者も受注者ももっと幸せになる方法を探したいですね。
混沌としたMTテンプレートのはなしはこちら。クラス構文型で管理できるMTテンプレートの書き方 良いお年を!