MTAppjQuery

公開された記事は編集出来ないようにする簡易ロック機能を Movable Type の記事投稿画面に導入してみる

2014-09-30
5分で読了
更新: 2025-12-14

目次

今日の記事は、一般的な Web サイトの CMS として MT を使っている場合にはあまり需要はないかもしれませんが、もしも「一度公開したら編集されたら困るんです！」という要望があったときには役立つかも知れません。例えば MT で何かの経費を管理していて集計された後に修正されては困るとか。

できあがりは下図のようになります。

簡易ロックスクリーン

ロックスクリーンに使用している鍵アイコンは、「Movable Type の管理画面で Font Awesome を使おう」で取り入れた Font Awesome を使って表示させます。

user.js

まず、user.js に下記のコードを書きます。今回は、超簡易パスワード機能を付けてみました。
コードの解説はコメントとして挿入してあります。

(function($){

/* ==================================================
 Lock Screen
================================================== */
// 記事編集画面でステータスが公開のものに限定
if (mtappVars.screen_id == 'edit-entry' && mtappVars.status == 2) {

 // ロックスクリーンのHTMLをbodyに追加
 var lockHTML = [
 ''
 ].join("");
 $('body').append(lockHTML);

 $('#mtapp-lock-icon').on({

 // 鍵アイコンにマウスを乗せると開いた鍵アイコンになる
 mouseenter: function(){
 $(this).toggleClass('fa-lock').toggleClass('fa-unlock');
 },

 // 鍵アイコンからマウスを離すと元の閉じた鍵アイコンになる
 mouseleave: function(){
 $(this).toggleClass('fa-lock').toggleClass('fa-unlock');
 },

 // 鍵アイコンをクリックしたときの動作
 click: function(){

 // 超簡易パスワードは admin
 var password = 'admin';

 // プロンプトで入力された値を変数にセット
 var input = prompt('Type the password.');

 // 入力された値によって動作を変える
 switch (input) {
 // パスワードと一致するとき
 case password:
 this.parentNode.style.display = 'none';
 break;
 // キャンセルがクリックされたとき
 case null:
 break;
 // 間違った値が入力されたとき
 default:
 this.parentNode.style.backgroundColor = '#F6BFBC';
 alert('Invalid password.');
 this.parentNode.removeAttribute('style');
 }
 }
 });
}
/* Lock Screen */

})(jQuery);

これで下記のような超簡易パスワード付きのロックスクリーンになります。

超簡易パスワード機能

user.css

/* ==================================================
 Lock Screen
================================================== */
#mtapp-lock-screen {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 99999;
 opacity: 0.8;
 background-color: #A8ACB0;
}
#mtapp-lock-icon,
#mtapp-lock-list-link {
 position: fixed;
 top: 50%;
 left: 50%;
 z-index: 99999;
 cursor: pointer;
}
#mtapp-lock-icon {
 width: 5em;
 margin-top: -0.5em;
 margin-left: -0.5em;
}
#mtapp-lock-list-link {
 width: 7em;
 margin-top: 3em;
 margin-left: -4.5em;
}
/* Lock Screen */

CSS の説明は割愛します。

応用してみる？

今回の例では、ステータスを見て条件分岐していますが、最初の if 文のところを応用すれば、ロール（mtappVars.authorroles）やユーザー（mtappVars.authorid）ごとに分岐したりブログ（mtappVars.blog_id）ごとに分岐したりすることも可能です。

以上です。

この記事をシェア

関連記事