MTAppjQuery でユーザーが属するロールごとに表示を変える方法

MTAppjQuery で、ログインしているユーザーが属するロールごとにボタンの表示・非表示を切り替える方法をご紹介します。

この記事は弊社 bit part 合同会社が提供している Movable Type プラグイン「MTAppjQuery」の利用を前提としております。MTAppjQuery って何?という方は弊社の「MTAppjQuery」の製品ページをご覧ください。

MTAppjQuery を使って、ログインしているユーザーが属するロールごとにボタンの表示・非表示を切り替える方法をご紹介します。

MTAppjQuery をインストールすると、管理画面のカスタマイズに使える、色々な変数が詰まった mtappVars という JavaScript の変数(オブジェクト)が使えるようになります。

この mtappVars の中の author_rolesというプロパティには、ログイン中のユーザーが、現在表示しているウェブサイト/ブログに持っているロールが配列としてセットされています。

(例)"author_roles" : ["ブログ管理者","テストロール"],

今回のカスタマイズの分岐の方法は、この配列を利用して body に class を振り、その class によって user.css でスタイルを変えるという流れになります。

今回は、「ID が 2 のブログで、"テストロール"に属するユーザーは左サイドバーの記事以外のメニューは非表示にする」のを想定して説明します。

user.js で body にクラスを追加

ロールによって body にクラスを追加するには、user.js に下記のように記述します。

(function($){
 if ($.inArray('テストロール', mtappVars.author_roles) !== -1) {
 $('body').addClass('role-test');
 }
})(jQuery);

これで、「テストロール」に属するユーザーの場合は、body に「role-test」というクラスが追加されます。

$.inArray は配列の中に指定した値があるかどうかをチェックできる jQuery のメソッドです。指定した値が配列の中にないときは -1 が返されるので、あるかどうかは !== -1 のようにしてチェックできます。

jQuery.inArray() | jQuery API Documentation

user.css で表示を変更

続いて、user.css で下記のようにして表示を変更します。

body.blog-id-2.role-test #menu li:not(#menu-entry).top-menu {
 display: none;
}
body.blog-id-2.role-test #menu li#menu-entry .sub-menu {
 display: block !important;
 border-bottom: 1px solid #c0c6c9;
 border-radius: 0 0 3px 0;
}

セレクタの「.blog-id-2」でブログを特定し、先ほど追加した「.role-test」でロールを特定します。

:not(#menu-entry) は CSS3 で追加された属性セレクタで #menu-entry を除外しています。

その後のブロックで、サブメニューを強制的に表示させたり border 関連のスタイルを整えています。この辺りは要件に合わせて調整してください。

まとめ

今回は、スタイルの変更を例にしましたが、このように mtappVars.author_roles を使ってロールごとに処理を分岐する方法は、他にも応用できますので、ぜひ活用ください。

以上です。

Published 2016-08-30
Updated 2019-06-25

「MTAppjQuery」カテゴリの記事一覧