前回「フィールドやメニューの表示・非表示だけの制御だったら user.css がおすすめ」という記事を書きましたが、今回は、それをブログごと、ユーザーごと、ロールごとといった条件で表示・非表示を変える方法を紹介します。もちろん、MTAppjQuery がインストールされていることが前提です。

ブログごと

ブログごとについては、MTAppjQuery でインストールできるインデックステンプレートの user.js や user.css に書けば、それだけでブログごとになります。したがって、ここでは共通の user.css を読み込んでいたりする場合のお話になります。

MTAppjQuery をインストールしていると body に「 blog-id-* 」（ * はブログID）という class が付与されます。これを利用すれば簡単です。

例えば、ブログIDが 2 のブログは記事しか使わないのでメニューを記事だけにしたいという場合は以下のようなコードを user.css に書きます。

.blog-id-2 #menu .menu-nav > li {
 display: none;
}
.blog-id-2 #menu .menu-nav #menu-entry {
 display: block;
}

ユーザーごと

ユーザーごとについても、body に「 author-id-* 」（ * はログイン中のユーザーID）という class が付与されます。これを利用すれば簡単です。

例えば、ユーザーIDが 1 のシステム管理者以外のユーザーは、記事のキーワードとタグは使わないという場合は、以下のようなコードを user.css に書きます。 ただし、:not() セレクタは IE9 からのサポートなのでご注意を。

/* Hide the display options */
body:not(.author-id-1)#edit-entry #display-options {
 display: none;
}

/* Show the every fields */
body:not(.author-id-1)#edit-entry #sortable .field {
 display: block !important;
}
/*　Hide the keywords and the tags */
body:not(.author-id-1)#edit-entry #sortable #keywords-field,
body:not(.author-id-1)#edit-entry #sortable #tags-field {
 display: none !important;
}

もし単純にユーザーを特定する場合は、body.author-id-2 などを頭に付ければ良いでしょう。

ロールごと

ロールごとは少し JavaScript を噛ませる必要があります。

ログイン中のユーザーが属しているロールの情報は、mtappVars.author_roles というプロパティに配列の形で入っています。したがって、この配列の中に、限定したいロールが存在するかを調べて分岐することになります。

例えば、ログイン中のユーザーが「編集者」というロールに属しているときは body に「 editor 」というクラスを付ける、というコードは下記のようになります。これは user.js に書きます。

if ($.inArray('編集者', mtappVars.author_roles) != -1) {
 $('body').addClass('editor');
}

後は、CSS 側で body.editor のようにして表示・非表示を調整すればOKです。

ここでは、「編集者」に属するユーザーのときは画面に「編集者モード」という文言を CSS で出してみるとします。

body.editor #content-header:before {
 content: "編集者モード";
 padding: 0 0.5em;
 font-size: 2em;
 font-weight: bold;
 background-color: #FFD4D1;
}

このコードを user.css に書けば、ユーザーが編集者に属するときだけ下図のようになります。

まあ、このコード自体に実用性があるかは分かりませんが、１アイデアとして。

以上です。