TypePad系ブログのカテゴリーリストを任意の並び順に並び替えるJavaScript

　カテゴリーネタついでに、カテゴリー一覧を並び替えるスクリプトを作ってみた。
　ココログやブログ人などTypePad系ブログではカテゴリーを自由に作れるんだけど、その並び方は強制的に文字コード順に並ぶ。
　これを回避して自分の好きなように並ばせるにはリンク集的に別のリンクリストを作ったり、カテゴリー名の前に数字や記号を付けたり、半角スペースの数で並び順を調整したりといろいろ方法はあるんだけど、すでにあるカテゴリーの名前を変えるのもなんなんで、JavaScriptにやらせてみました。

　で、できたのが下のスクリプト。
　TypePad系ブログサービスならブログ人、eoblog、JUST BLOG、DCN BLOGなど、たぶんどこでも使えるはず。（ただ、上級テンプレートでテンプレートをいじり倒していると動かない可能性が高いです）
　単純に指定したカテゴリーを並べ替えるのは比較的簡単にできたんだけど、せっかくJavaScriptにやらせるんだから、ちょっと便利な機能（後述）を盛り込んでみました。

　設置の仕方は、下のテキストエリアのスクリプトを全選択して、どの種類でもいいんで「メモをテキストとして表示」になっているサイドバーのタイプリスト（マイリスト）のメモ欄にコピー＆ペーストで放り込めばOK。
　このとき注意しなければいけないのは、サイドバーやアーカイブページのカテゴリー一覧より後に読み込まれる位置にくるように設置すること。要するに右サイドバーの一番下が理想。
　今あるサイドバーのその位置に都合のよいメモ欄が無いなら新規に種類がメモのタイプリストを作成して、右サイドバー下端に表示させてください。

<script type="text/javascript"> <!-- //カテゴリーリスト並び替え (function () { if (document.getElementById('pagebody-inner')) { //TypePad, ブログ人など var header = document.getElementById('pagebody-inner').getElementsByTagName('h2'); } else if (document.getElementById('main')) { //ココログ var header = document.getElementById('main').getElementsByTagName('h2'); } else { return; } var li = new Array(); for (var i = 0; i < header.length; i++) { if (/module-categories|archive-categories|archive-category/.test(header[i].parentNode.className)) { li[li.length] = header[i].parentNode.getElementsByTagName('li'); } } if (li.length == 0) return; var list = new Array(); list[list.length] = "おすすめサイト"; list[list.length] = "アニメ・コミック"; list[list.length] = "ウェブログ・ココログ関連"; list[list.length] = "ギャンブル"; list[list.length] = "グルメ・クッキング"; list[list.length] = "ゲーム"; list[list.length] = "スポーツ"; list[list.length] = "ニュース"; list[list.length] = "パソコン・インターネット"; list[list.length] = "ファッション・アクセサリ"; list[list.length] = "ペット"; list[list.length] = "住まい・インテリア"; list[list.length] = "学問・資格"; list[list.length] = "心と体"; list[list.length] = "恋愛"; list[list.length] = "携帯・デジカメ"; list[list.length] = "文化・芸術"; list[list.length] = "旅行・地域"; list[list.length] = "日記・コラム・つぶやき"; list[list.length] = "映画・テレビ"; list[list.length] = "書籍・雑誌"; list[list.length] = "経済・政治・国際"; list[list.length] = "美容・コスメ"; list[list.length] = "育児"; list[list.length] = "芸能・アイドル"; list[list.length] = "趣味"; list[list.length] = "音楽"; for (x = 0; x < li.length; x++) { var sortedLi = new Array(); var category = ''; var line = ''; var f = 0; var s = 0; var e = 0; var ex = ''; for (var i = 0; i < list.length ; i++) { if (list[i].substring(list[i].length - 1, list[i].length) == '<') { line = list[i].substring(0, list[i].length - 1); f = 1; s = 0; e = li[x].length; } else if (list[i].substring(list[i].length - 1, list[i].length) == '>') { line = list[i].substring(0, list[i].length - 1); f = 1; s = li[x].length - 1; e = -1; } else if (list[i].substring(0, 1) == '<') { line = list[i].substring(1, list[i].length); f = 2; s = 0; e = li[x].length; } else if (list[i].substring(0, 1) == '>') { line = list[i].substring(1, list[i].length); f = 2; s = li[x].length - 1; e = -1; } else { line = list[i]; f = 0; s = 0; e = li[x].length; } ex = ''; if (f > 0) { for (var j = i + 1; j < list.length ; j++) { if ((f == 1 && list[j].substring(0, line.length) == line) || (f == 2 && list[j].substring(list[j].length - line.length, list[j].length) == line)) { ex += '<' + list[j] + '>'; } } } do { if (li[x][s].innerHTML != '') { category = li[x][s].getElementsByTagName('a')[0].innerHTML; if ((f == 0 && category == line) || (f == 1 && ex.indexOf('<' + category + '>') < 0 && category.substring(0, line.length) == line) || (f == 2 && ex.indexOf('<' + category + '>') < 0 && category.substring(category.length - line.length, category.length) == line)) { sortedLi[sortedLi.length] = li[x][s].innerHTML; li[x][s].innerHTML = ''; } } s = s + ((s < e) ? 1 : -1); } while (s != e); } for (var i = 0; i < li[x].length; i++) { if (li[x][i].innerHTML != '') { sortedLi[sortedLi.length] = li[x][i].innerHTML; } li[x][i].innerHTML = sortedLi[i]; } } })(); //--> </script>

　基本的な使い方は、スクリプトの最初の方にある、

list[list.length] = "おすすめサイト";
list[list.length] = "アニメ・コミック";
list[list.length] = "ウェブログ・ココログ関連";
list[list.length] = "ギャンブル";
list[list.length] = "グルメ・クッキング";
list[list.length] = "ゲーム";
list[list.length] = "スポーツ";
list[list.length] = "ニュース";
list[list.length] = "パソコン・インターネット";
list[list.length] = "ファッション・アクセサリ";
list[list.length] = "ペット";
list[list.length] = "住まい・インテリア";
list[list.length] = "学問・資格";
list[list.length] = "心と体";
list[list.length] = "恋愛";
list[list.length] = "携帯・デジカメ";
list[list.length] = "文化・芸術";
list[list.length] = "旅行・地域";
list[list.length] = "日記・コラム・つぶやき";
list[list.length] = "映画・テレビ";
list[list.length] = "書籍・雑誌";
list[list.length] = "経済・政治・国際";
list[list.length] = "美容・コスメ";
list[list.length] = "育児";
list[list.length] = "芸能・アイドル";
list[list.length] = "趣味";
list[list.length] = "音楽";

　のところを好きな順番に並べ替えるだけ。
　このサンプル・カテゴリーはココログのデフォルト・カテゴリーなんですが、違うブログサービスだとか独自カテゴリーを作ってるとかなら同じフォーマットでカテゴリー名を書き換えてください。
　その際、万が一カテゴリー名に半角の「<」「>」「&」「"」を含んでいるなら、これらはHTMLの特殊文字なので、それぞれ、
「<」→「&lt;」
「>」→「&gt;」
「&」→「&amp;」
「"」→「&quot;」
と、書き換える必要があります。
　ここで指定していないカテゴリーがある場合は、指定したもののあとに並びます。

　ここまでは通常の使い方ですが、このスクリプトでは便利機能として、前方一致や後方一致で一括指定＆任意に逆順並べ替えができます。

　例えば下のようなカテゴリーがあったとします。

2006年に観た映画
2007年に観た映画
2008年に観た映画
アメリカ旅行
ヨーロッパ旅行
国内旅行
書評・あ行
書評・お気に入り
書評・か行
書評・さ行
書評・その他
書評・た行
書評・な行
書評・は行
書評・ま行
書評・や行
書評・ら行
書評・わ行
東南アジア旅行
日記2006年
日記2007年
日記2008年

これらをひとつひとつ指定しなくても、

list[list.length] = "日記>";
list[list.length] = "国内旅行";
list[list.length] = "<旅行";
list[list.length] = "書評・お気に入り";
list[list.length] = "書評<";
list[list.length] = "書評・その他";
list[list.length] = ">映画";

と、指定すれば、

日記2008年
日記2007年
日記2006年
国内旅行
アメリカ旅行
ヨーロッパ旅行
東南アジア旅行
書評・お気に入り
書評・あ行
書評・か行
書評・さ行
書評・た行
書評・な行
書評・は行
書評・ま行
書評・や行
書評・ら行
書評・わ行
書評・その他
2008年に観た映画
2007年に観た映画
2006年に観た映画

に並べ替えられます。

　半角の「<」もしくは「>」をカテゴリー名の先頭に付ければ後方一致（「<旅行」「>映画」）、末尾に付ければ前方一致（「日記>」「書評<」）となり、部分一致に該当しても完全一致が別に指定してあればそちらを優先します（「国内旅行」「書評・お気に入り」「書評・その他」）。
　また、「<」を付けた場合は本来の並び順の昇順（「<旅行」「書評<」）ですが、「>」を付けた場合は逆の降順（「日記>」「>映画」）に並びます。年数は降順の方がいいでしょ？
　部分一致が利用できることで、今後同類のカテゴリーが増えたときも自動で並べ替えしてくれますよ。

　ところで、左側にしかサイドバーが無い場合、一番下に設置してもアーカイブページのカテゴリーリストが並べ替えられません。
　どうしてもこの条件でアーカイブページも並べ替えたい場合は、
3行目の「(function () {」→「window.onload = function () {」
下から3行目の「})();」→「}」
と書き換えればたぶん機能します。ただ、他のJavaScriptと干渉する場合があるのであまりお薦めはしませんが。

　あと当然ですが、携帯版での閲覧やJavaScriptがオフのブラウザだと本来の並び順になりますので、念のため。
　そんな制限付きですが、よかったら使ってくださいね。