リストをURLポップアップに。

もしかしたら需要があるかもしれないのでとりあえず公開。
このBlogはSerene Bachで運用しています。これは数あるBlogシステムの中でもたいへん扱いやすく優れたシステムですが、いくつか気になるところもあり、そのひとつとして、独自タグを置換する形でシステム側が吐き出すhtmlコードが変更できない点が挙げられます。
例えばアーカイブやカテゴリのリスト。{archives_list}や{category_list}という独自タグを記述するだけで<ul><li>...という形式のリストを自動的に出力してくれるのですが、長く書きためていたりカテゴリが乱立してたりするとこのリストがどんどん長くなっていって大変なことに。
それならリストの代わりにselect要素を応用したいわゆるURLポップアップを使おう、というのは誰もが思いつく解決策ですが、さて困ったことにこれが一筋縄ではいかないのです。理由は前述のとおり、この部分はシステムが出力するコードに依存するため、単にテンプレートをいじっただけでは変更できないのです。
プラグイン等で吐き出されるコード自体を変えてしまうのがスマートな手段ではありますが、そういうプラグインを探しても見つからなかった(探し方が悪い？)ので、だったら出力されたものを後から書き替えてしまえ！という方向で考えてみました。

既に出力されたhtmlコードを後から書き替える手段としてjavascript-DOMを用いています。つまりjavascriptが無効な環境では通常通りリストで表示されます。そもそもURLポップアップもjavascriptを用いていますので、無効な環境でのアクセシビリティも確保できます。

主となるスクリプトは以下のとおり。ヘッダー内の<script>要素に貼り付けてもいいし、別ファイルで保存してそこから読み込んでもOK(こっち推奨)。要は「ListToPopUp」という関数にアクセスできるようになってればいいです。

function ListToPopUp () {
var all_div = document.getElementsByTagName('div');

for (var i = 0; i < all_div.length; i++) {

if (all_div[i].className == 'list-to-popup') {

var form = document.createElement('form');
var select = document.createElement('select');

if(navigator.userAgent.indexOf("MSIE")!=-1) {
select.setAttribute('onchange',new Function("window.location.href = this.value"));
} else {
select.setAttribute('onchange',"window.location.href = this.value");
}
form.appendChild(select);
all_div[i].appendChild(form);

var option = document.createElement('option');
option.setAttribute('value',"");
var selectName = document.createTextNode('Select...');
option.appendChild(selectName);
select.appendChild(option);

var all_li = all_div[i].getElementsByTagName('li');

for (var n = 0; n < all_li.length; n++) {
var srcName = all_li[n].firstChild.getAttribute('href');
var a = all_li[n].firstChild;

if (a.firstChild.nodeValue) {
var selectNameText = a.firstChild.nodeValue;
var countText = all_li[n].lastChild.nodeValue;
selectNameText = selectNameText+countText;

option = document.createElement('option');
option.setAttribute('value',srcName);
selectName = document.createTextNode(selectNameText);
option.appendChild(selectName);
select.appendChild(option);
}
}
all_div[i].removeChild(all_div[i].getElementsByTagName('ul')[0]);
}
}
}

めちゃくちゃ荒削りですみません。
やってることはすごく単純で、"list-to-popup"というclassが設定されたdivを探し出して、その中にあるliのテキストとURLを逐次抜き出し、option要素として整形したうえで新しく作ったformのselect要素に放り込み、最後は乱暴にもulごと削除しちゃってるだけです。
全部のdivを評価しているのでかなり非効率ですが汎用性は高い…ハズ。idで指定したものを検索したほうがスマートではありますが、複数のリストを変更する場合に不都合なのであえてこういう形に。

実装の方法はカンタン。たとえばアーカイブのリストをURLポップアップ化したいなら、まずテンプレートの{archives_list}を"list-to-popup"というclassが設定されたdivで囲む。あとはListToPopUp関数をonloadで実行させるだけ。

〜(略)〜
<body onload="ListToPopUp();">
〜(略)〜
<div class="list-to-popup">{archives_list}</div>
〜(略)〜

注意点として、<div class="list-to-popup">と{archives_list}の間に改行等は一切入れないでください。
どんなテンプレートでも動作しそうですし、ちょっと応用すればSerene Bach以外でも使えると思いますが、もちろん全てチェックしたわけではないのであしからず。また、突貫工事もいいとこなのでSafariとFireFoxではチェックしてますがWindows系ブラウザでは全くチェックしてません(だってVirtualPC立ち上げるのめんどくさいんだもん)。DOM非対応の古いブラウザではそもそも動作しません。

ちなみにウチはあんまり書いてないからアーカイブの項目も少ないし、内容も偏りまくっててカテゴリもそんな大した数じゃないのでこれの恩恵はあまり享受してません(笑)。

(※追記) スクリプト一部修正。個別記事で正常に反映されない問題を解決しました。

(※追記) MSIEで動作しなかったので(原因はIEのsetAttribute実装バグ)、ブラウザ分岐処理を追加しました。

2007/01/17 Wed. 06:40
by Shin_Jin_Kun
カテゴリ:Web | comments (7) | trackbacks (0)
<< iPhone。 | 明日。 >>

Trackbacks

Trackback URL : http://www.from-the-new-world.com/sb/sb.cgi/31

Comments

アクセスカウンターをお探しの方は是非ご利用ください。 by アクセスカウンター | 2010/04/28 16:52

cool site
http://needman.ru знакомства с иностранцами бесплатно
<a href=http://needman.ru>мировой сайт где можно найти инностранца</a> by ownsahi | 2010/06/02 09:44

Без салонов красоты и студий загара сложно представить нашу жизнь. Мы уже сами, не осознавая происходящего, регулярно посещаем студии загара, пользуемся услугами салонов красоты. Если нам предложить отказаться от данных услуг, мы испытаем как минимум шок...
А что бы его не испытывать есть<a href=http://baseall.ru>Рейтинг салонов красоты </a> by ImmillSoalo | 2010/07/28 06:32

Проект <a href="http://moskow-sun.ru">Студия света </a> является эксклюзивным порталом в отрасли загара. Портал является структурированной системой объединяющей студии загара, и предоставляющей объективную оценку работы салонов. Объективность оценок в первую очередь достигается с помощью ваших отзывов и оценок студий загара. by Nurhoorge | 2010/07/29 01:17

othegocor
Интересные новости и не только в <a href=http://livjurnal.ru>журнал</a>
Grouccugs by PemoSmown | 2010/07/29 22:36

LiaindyFrilla
Портал о том о сём...
<a href=http://xyek.ru>тут</a> by SolaAmbulub | 2010/07/31 09:15

FIEPEADAY
Сайт с каталогом автомобилей растусованый по регионам.
<a href=http://tradeautoland.ru>Каталог авто</a> by Acannongonilk | 2010/08/01 18:23