$.MTAppSlideMenuV2() を使って管理画面左上▼メニューを並び順を変えるには

Movable Type の管理画面左上▼メニューを $.MTAppSlideMenuV2() を使って並び順を変える方法を紹介します。

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

$.MTAppSlideMenuV2() は管理画面左上のスコープメニュー(▼メニュー)を、スライドメニューに変更するメソッドです。

このスライドメニューは mtappVars の中の can_access_blogs_json というプロパティにセットされている JSON を元に作られています。

したがって、このメニューの並び順は、 $.MTAppSlideMenuV2() を実行する前に mtappVars.can_access_blogs_json の並び順を変更することで調整出来ます。

手動で並び順を変更する

下記のようにして手動で並び順を変更します。このとき、元の JSON の形(プロパティ名や階層など)が変わらないように注意してください。

入れ子のブログの順序は、各ウェブサイトが持つ children プロパティの中身の順序を変更することで調整できます。

(function($){
mtappVars.can_access_blogs_json = {
 // 手動で並び順を変更したJSON
};
$.MTAppSlideMenuV2();
})(jQuery);

なお、管理画面のソースで確認できる mtappVars.can_access_blogs_json は1行で表示されているので、JSONLint などのツールで整形してから変更することをお勧めします。

何かのキーを元に自動で並び順をソートする

ウェブサイト/ブログの名前やIDで一気にソートしたい場合には、下記のようなコードで実現できます。

コードの解説はコメントをご確認ください。

(function($){
// 長いので一旦変数に入れる
var sortedWebsites = mtappVars.can_access_blogs_json.website;
// ウェブサイトのソート
// 名前順でソートするときは 'name'、IDでソートするときは 'id'
// 昇順は 'ascend'、降順は 'descend'
objectSort(sortedWebsites, 'name', 'ascend');
// 子ブログのソート
for (var i = 0, l = sortedWebsites.length; i < l; i++) {
 if (sortedWebsites[i].children.length > 0) {
 // 名前順でソートするときは 'name'、IDでソートするときは 'id'
 // 昇順は 'ascend'、降順は 'descend'
 objectSort(sortedWebsites[i].children, 'name', 'ascend');
 }
}
// 配列をオブジェクトの入れ子をソートする関数
function objectSort (array, key, order, type) {
 order = (order === 'ascend') ? -1 : 1;
 array.sort(function(obj1, obj2){
 var v1 = obj1[key];
 var v2 = obj2[key];
 if (type === 'numeric') {
 v1 = v1 - 0;
 v2 = v2 - 0;
 }
 else if (type === 'string') {
 v1 = '' + v1;
 v2 = '' + v2;
 }
 if (v1 < v2) {
 return 1 * order;
 }
 if (v1 > v2) {
 return -1 * order;
 }
 return 0;
 });
}
// MTAppSlideMenuV2を実行
$.MTAppSlideMenuV2();
})(jQuery);

以上です。

Published 2015-04-04
Updated 2019-06-25

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