MovableType

管理画面のカスタマイズが可能なプラグイン「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 を処理。指定のフィールドにチェックボックス を動的に生成し、値を登録。

インストール

  1. ファイルの[plugins/MyAdminStyle]を[/cms-path/plugins/]にアップロードします。
  2. ファイルの[mt-satic/plugins/MyAdminStyle]を[/cms-path/mt-static/plugins/]にアップロードします。
  3. CMSにログインしてインストールを実行します。

ドキュメント

まだない。

ダウンロード

GitHubに公開しています。ダウンロードはこちら。

あとがき

管理画面が素敵になるいろいろな提案が出てきて、発注者も受注者ももっと幸せになる方法を探したいですね。

混沌としたMTテンプレートのはなしはこちら。クラス構文型で管理できるMTテンプレートの書き方 良いお年を！