• Home
  • 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 を使ってロールごとに処理を分岐する方法は、他にも応用できますので、ぜひ活用ください。

以上です。

MTAppjQuery について

Movable Type の管理画面をフロントエンドの知識だけで簡単にカスタマイズすることができます。

クライアントの満足度を高めるためにぜひお使いください。

MTAppjQuery の詳細を見る

Iamge Description

Recent Entries

Pickup Categories

Movable Type

CMSとして国内5万サイト以上に導入されている Movable Type に関する記事です。

Craft CMS

CMS 業界で注目の Craft CMS に関する記事です。Craft CMS はチーム全体をハッピーにしてくれる素晴らしい CMS です。