ソネブロを改造する [技術系]
たまには(初めて？)システム屋らしいコトを書いてみるとしましょう
ソネブロ限定の話題で申し訳無いっス('`)
ソネブロにはいくつかのblogパーツ(ガジェット？)があるんですけれども
その中の一つに「タグクラウド」っちゅーものがあります。(他社blogにもあると思います)
ゴチャゴチャしていて見辛いし、美しくないので俺は好きではありません…
というコトで、ちょいと改造して「タグツリー」なるものを作ってみました。
この中の[+] をクリックすると、親タグに紐付く子タグが展開されます。
現在の実装では、親タグと子タグの紐付けは前方一致にて行っていますので(手抜き)
「バイエル」と「バイエルXXX～XXX」が親子関係となります。
ちょいと改造する事で、前方一致以外のグルーピングも可能となりますので
使い勝手はそれなりに良いかなぁと思いますだ。
「タグクラウド」としての機能は失われますが、ある種の決まったタグを多用する方で
整然と管理したい方にはオススメでございます('ー`)
実装はソース内のコメントを見てくださいまし！
ソースが見れないコトもあるので、載せておくっス
<div class="sidebar" id="side_tag">
<h3 class="sidebar-title"><% content.title | html %></h3>
<div class="sidebar-body">
<% content.header -%>
<div id="tag_cloud_<% content.id %>" style="word-break:break-all;">
<% loop:list_tags -%>
<a class="_tag" title="<% tag.word%>" href="<% blog.tag_url(tag) %>"><% tag.word | html %></a><br>
<% /loop -%>
</div>
<% content.footer -%>
</div>
<div class="sidebar-end"></div>
</div>
<script type="text/javascript">
<!--
var keyWords = new Array("バイエル");
var tagS = "<a class=\"_tag\" ";
var tagE = "</a>";
var tagBR = "<br>";
var strOpen = "[+]";
var strClose = "[-]";
sort();
group();
/*
funtion : タグのソートを行う
param : なし
*/
function sort()
{
var elmTagCloud = document.getElementById("tag_cloud_<% content.id %>");
var elmHref = elmTagCloud.getElementsByTagName("a");
var htmlStrArr = new Array();
var htmlStr = "";
// <a>タグの要素数回、処理を行う
for(var i = 0;i < elmHref.length; i++)
{
// タグの再構成
htmlStrArr[i] = tagS + "title=\"" + rename(elmHref[i].title) + "\" href=\"" +
elmHref[i].href + "\">" + rename(elmHref[i].innerHTML) + tagE;
}
// 再構成後のタグをソートする
htmlStrArr.sort();
// ソート後のタグを連結する
for(var i = 0;i < htmlStrArr.length; i++)
{
htmlStr += htmlStrArr[i] + tagBR;
}
// タグエレメントの内容を書き換える
elmTagCloud.innerHTML = htmlStr;
}
/*
funtion : 表示内容の変換を行う
param : 変換前表示内容
return : 変換後表示内容
*/
function rename(name)
{
// 変換を行う
if(name == "バイエル1～10"){ return "バイエル001～010";}
if(name == "バイエル01～10"){ return "バイエル001～010";}
if(name == "バイエル11～20"){ return "バイエル011～020";}
if(name == "バイエル21～30"){ return "バイエル021～030";}
return name;
}
/*
funtion : タグのグルーピングを行う
param : なし
*/
function group()
{
var groupNo = 0;
var elmTagCloud = document.getElementById("tag_cloud_<% content.id %>");
var elmHref = elmTagCloud.getElementsByTagName("a");
var htmlStr = "";
var reg;
// キーワード(親タグ)数回、処理を行う
for(var i = 0;i < keyWords.length; i++)
{
// 親タグ正規表現オブジェクトの作成
reg = new RegExp("^" + keyWords[i]);
// <a>タグ要素数回、処理を行う
for(var j = 0; j < elmHref.length; j++)
{
// 処理対象が親タグの場合
if(keyWords[i] == elmHref[j].title)
{
htmlStr += "<span id=\"grp" + groupNo + "\" onclick=\"showHide('grp" + groupNo + "')\">" + strOpen + "</span>" +
tagS + "title=\"" + elmHref[j].title + "\" href=\"" +
elmHref[j].href + "\">" + elmHref[j].innerHTML + tagE + tagBR;
}
// 処理対象が子タグの場合(前方一致)
else if(elmHref[j].title.match(reg))
{
htmlStr += "<span id=\"grp" + groupNo + "-" + j + "\" style=\"display:none\"> " + tagS + "title=\"" + elmHref[j].title + "\" href=\"" +
elmHref[j].href + "\">" + elmHref[j].innerHTML + tagE + tagBR + "</span>";
}
// 無関係タグの場合
// 複数の親タグが存在する場合、無関係タグが複数表示されるため
// その場合には、ここではタグの再構成を行わず最外ループ終了後に
// 無関係タグを追加するよう変更する必要がある。
// この時、既に追加された子タグを判別する処理が必要となるが
// 今回は未実装とする。(仮配列作って、そちらに突っ込んでおけば良い)
else
{
htmlStr += tagS + "title=\"" + elmHref[j].title + "\" href=\"" +
elmHref[j].href + "\">" + elmHref[j].innerHTML + tagE + tagBR;
}
}
}
// タグエレメントの内容を書き換える
elmTagCloud.innerHTML = htmlStr;
}
/*
funtion : タグの表示を制御する
param : グループID
*/
function showHide(grpId)
{
var spans = document.getElementsByTagName("span");
// 子タグ正規表現オブジェクトの作成
reg = new RegExp("^" + grpId + "-");
// <span>要素数回、処理を行う
for(var i = 0; i < spans.length; i++)
{
// 親タグの先頭記号の場合
if(spans[i].id == grpId)
{
// 開く場合、閉じる表示に変更
if(spans[i].innerHTML == strOpen)
{
spans[i].innerHTML = strClose;
}
// 閉じる場合、開く表示に変更
else
{
spans[i].innerHTML = strOpen;
}
}
// 子タグの場合
else if(spans[i].id.match(reg))
{
// 非表示の場合、表示に変更
if(spans[i].style.display == "none")
{
spans[i].style.display = "block";
}
// 表示の場合、非表示に変更
else
{
spans[i].style.display = "none";
}
}
}
}
// -->
</script>
ソネブロ限定の話題で申し訳無いっス('`)
ソネブロにはいくつかのblogパーツ(ガジェット？)があるんですけれども
その中の一つに「タグクラウド」っちゅーものがあります。(他社blogにもあると思います)
ゴチャゴチャしていて見辛いし、美しくないので俺は好きではありません…
というコトで、ちょいと改造して「タグツリー」なるものを作ってみました。
この中の[+] をクリックすると、親タグに紐付く子タグが展開されます。
現在の実装では、親タグと子タグの紐付けは前方一致にて行っていますので(手抜き)
「バイエル」と「バイエルXXX～XXX」が親子関係となります。
ちょいと改造する事で、前方一致以外のグルーピングも可能となりますので
使い勝手はそれなりに良いかなぁと思いますだ。
「タグクラウド」としての機能は失われますが、ある種の決まったタグを多用する方で
整然と管理したい方にはオススメでございます('ー`)
実装はソース内のコメントを見てくださいまし！
ソースが見れないコトもあるので、載せておくっス
<div class="sidebar" id="side_tag">
<h3 class="sidebar-title"><% content.title | html %></h3>
<div class="sidebar-body">
<% content.header -%>
<div id="tag_cloud_<% content.id %>" style="word-break:break-all;">
<% loop:list_tags -%>
<a class="_tag" title="<% tag.word%>" href="<% blog.tag_url(tag) %>"><% tag.word | html %></a><br>
<% /loop -%>
</div>
<% content.footer -%>
</div>
<div class="sidebar-end"></div>
</div>
<script type="text/javascript">
<!--
var keyWords = new Array("バイエル");
var tagS = "<a class=\"_tag\" ";
var tagE = "</a>";
var tagBR = "<br>";
var strOpen = "[+]";
var strClose = "[-]";
sort();
group();
/*
funtion : タグのソートを行う
param : なし
*/
function sort()
{
var elmTagCloud = document.getElementById("tag_cloud_<% content.id %>");
var elmHref = elmTagCloud.getElementsByTagName("a");
var htmlStrArr = new Array();
var htmlStr = "";
// <a>タグの要素数回、処理を行う
for(var i = 0;i < elmHref.length; i++)
{
// タグの再構成
htmlStrArr[i] = tagS + "title=\"" + rename(elmHref[i].title) + "\" href=\"" +
elmHref[i].href + "\">" + rename(elmHref[i].innerHTML) + tagE;
}
// 再構成後のタグをソートする
htmlStrArr.sort();
// ソート後のタグを連結する
for(var i = 0;i < htmlStrArr.length; i++)
{
htmlStr += htmlStrArr[i] + tagBR;
}
// タグエレメントの内容を書き換える
elmTagCloud.innerHTML = htmlStr;
}
/*
funtion : 表示内容の変換を行う
param : 変換前表示内容
return : 変換後表示内容
*/
function rename(name)
{
// 変換を行う
if(name == "バイエル1～10"){ return "バイエル001～010";}
if(name == "バイエル01～10"){ return "バイエル001～010";}
if(name == "バイエル11～20"){ return "バイエル011～020";}
if(name == "バイエル21～30"){ return "バイエル021～030";}
return name;
}
/*
funtion : タグのグルーピングを行う
param : なし
*/
function group()
{
var groupNo = 0;
var elmTagCloud = document.getElementById("tag_cloud_<% content.id %>");
var elmHref = elmTagCloud.getElementsByTagName("a");
var htmlStr = "";
var reg;
// キーワード(親タグ)数回、処理を行う
for(var i = 0;i < keyWords.length; i++)
{
// 親タグ正規表現オブジェクトの作成
reg = new RegExp("^" + keyWords[i]);
// <a>タグ要素数回、処理を行う
for(var j = 0; j < elmHref.length; j++)
{
// 処理対象が親タグの場合
if(keyWords[i] == elmHref[j].title)
{
htmlStr += "<span id=\"grp" + groupNo + "\" onclick=\"showHide('grp" + groupNo + "')\">" + strOpen + "</span>" +
tagS + "title=\"" + elmHref[j].title + "\" href=\"" +
elmHref[j].href + "\">" + elmHref[j].innerHTML + tagE + tagBR;
}
// 処理対象が子タグの場合(前方一致)
else if(elmHref[j].title.match(reg))
{
htmlStr += "<span id=\"grp" + groupNo + "-" + j + "\" style=\"display:none\"> " + tagS + "title=\"" + elmHref[j].title + "\" href=\"" +
elmHref[j].href + "\">" + elmHref[j].innerHTML + tagE + tagBR + "</span>";
}
// 無関係タグの場合
// 複数の親タグが存在する場合、無関係タグが複数表示されるため
// その場合には、ここではタグの再構成を行わず最外ループ終了後に
// 無関係タグを追加するよう変更する必要がある。
// この時、既に追加された子タグを判別する処理が必要となるが
// 今回は未実装とする。(仮配列作って、そちらに突っ込んでおけば良い)
else
{
htmlStr += tagS + "title=\"" + elmHref[j].title + "\" href=\"" +
elmHref[j].href + "\">" + elmHref[j].innerHTML + tagE + tagBR;
}
}
}
// タグエレメントの内容を書き換える
elmTagCloud.innerHTML = htmlStr;
}
/*
funtion : タグの表示を制御する
param : グループID
*/
function showHide(grpId)
{
var spans = document.getElementsByTagName("span");
// 子タグ正規表現オブジェクトの作成
reg = new RegExp("^" + grpId + "-");
// <span>要素数回、処理を行う
for(var i = 0; i < spans.length; i++)
{
// 親タグの先頭記号の場合
if(spans[i].id == grpId)
{
// 開く場合、閉じる表示に変更
if(spans[i].innerHTML == strOpen)
{
spans[i].innerHTML = strClose;
}
// 閉じる場合、開く表示に変更
else
{
spans[i].innerHTML = strOpen;
}
}
// 子タグの場合
else if(spans[i].id.match(reg))
{
// 非表示の場合、表示に変更
if(spans[i].style.display == "none")
{
spans[i].style.display = "block";
}
// 表示の場合、非表示に変更
else
{
spans[i].style.display = "none";
}
}
}
}
// -->
</script>
2010-03-21 00:40
nice!(59)
コメント(18)
トラックバック(0)
あれぇ～～～チンプンカンプンでわからないけど・・・・すごいことされたのですね～
by 鶴 (2010-03-21 01:26)
タグツリー凄い便利です！！バイエルの聴きたい所探しやすいです！！
でも、上の記事内はさっぱりわかりません；
お昼はこの作業をなさっていたのですね。
サイドバーがとても気になっていましたｗｗ
by 雨香 (2010-03-21 01:36)
あたしもこんな風にしたいなぁ・・・・
コピーして貼り付けてもだめでしょう？！
by tamanossimo (2010-03-21 01:40)
タグにこだわりが無いからなあ・・・オイラってば＾＾；
by ちょいのり (2010-03-21 02:32)
便利ですね～。
こういう便利な技を紹介頂けると嬉しいです。
by nyankome (2010-03-21 10:50)
なかなかいい感じですね。私は<script>タグを使ったことがありませんので尊敬です。Caelumさんのマイカテゴリーもとてもいいと思っていたのですが、今回のはかなりプログラミングと言う感じで複雑なのですが、マイカテゴリーも解説してくださると助かります。
by yablinsky (2010-03-21 11:52)
うちは仕事でＷｅｂを触っていて、ソースを見るのですが、
こんなんできません！！
勉強になります！！
by ぷち (2010-03-21 17:56)
すげぇ。
インチキSEの私とは全然違うｗ
そして勉強しようとさえしない自分が居る・・・（-_-
そういえば、カテゴリーも綺麗にツリー化してるなぁ、と
前から思っておりました。
凄いっす。
羨ましいっす。
by ぱえ (2010-03-21 23:21)
こんばんは、本職Caelumです！
>>鶴さん
なにやら小難しく見えますが、こけおどしであります('w`)
ブログパーツをカスタマイズすると、こんな事もできますよ～って感じの
ご紹介でございます('ー`)b
by Caelum (2010-03-22 04:52)
>>雨香さん
ソネブロは記事管理機能(カテゴリ、タグ)が弱っちいので
標準でこういう部品があってもいいなぁ…と思うんですよね('`)
>お昼の作業
正解！この作業をしておりました('ー`)b
サイドバーに怪しい文字が表示されたり、消えたりしてましたネ
そんなところまで気付いて頂けるとは、何だか嬉しいです(*´ー｀)
by Caelum (2010-03-22 05:10)
>>tamanossimoさん
このままコピーをすると、以下のようになりまする。
・文字の大きさが統一される
・タグが昇順ソートされる(A→Zの順で並び替えされる)
・1行につき1タグになるので、全体が縦長になる
「バイエル」と書いてある部分を変更すると、グルーピングもできますが
場合によっては他の部分も改造する必要があるので、触らない方が
良いかもしれませぬ。(正常に動作しなくなる可能性アリ)
マトモに動かなくなった場合は、HTML編集の中にある
「初期状態に戻す」というボタンで元に戻りますヨ。
by Caelum (2010-03-22 05:17)
>>ちょいのりさん
俺もバイエル以外はあんまりタグを付けないので、この機能を
フル活用する機会は無さそうです('w`)
ソネブロはカテゴリ管理機能がちょっと弱ような気がするので
タグを上手く使うと、結構管理しやすくなるかもしれませぬ。
その辺り、ちょいと模索してみようと思います('ー`)
by Caelum (2010-03-22 05:20)
>>nyankomeさん
こういうのがあると、タグもちょっと使いやすくなりますよね('ー`)
今後もチョロチョロと、こういった技術ネタを書いて行こうと思います！
今回は技術解説も何も無くてアレでしたが、次回からはもっと
ポイントを押さえた、ソネブロ以外の方にも役立つような技術記事を
書こうと思うっス('ー`)
by Caelum (2010-03-22 05:38)
>>yablinskyさん
ソネブロはスクリプトのプレビューが出来ないっぽいので
開発効率がめちゃくちゃ悪いっス('w`)
>マイカテゴリー
むっふっふ、実は割と自信作であります('ー`)b
これはあえてガッツリ作り込み系にはしなかったので、割と簡単な
構造となっておりまして、組み込みも割りと容易かと思います。
近いうちにご紹介致しますネ
by Caelum (2010-03-22 05:44)
>>ぷちさん
おお、Web系のお仕事だったのですね('ー`)
というコトは、職業的には親戚みたいな感じですナ！
今回のソースはかなり思い付きで作られておりますゆえ
あまり洗練されておらず、読み辛いですよね('`)
…と思って改めて見直したら、マズい所を発見してしまった！
現状の動作には全く関係無いので、問題は無いんですけれど('A`)
→groupNoをインクリメントし忘れているため、複数のグループがあると
グループ0が上書きされてしまい、最初のグループが消滅する！
どちらにしても、複数グループには未対応なので問題無しですが('`)
by Caelum (2010-03-22 05:55)
>>ぱえさん
いやー、でも結構ボロボロっスよ、コレ('w`)
もっと洗練されたものを公開しないとアカンですね…
複数グループ対応版を作ったら、改めて公開しようと思います！
>カテゴリー
雑多なblogなので、このように分けてみました('ー`)b
コレについては、近日中に公開致しますネ
by Caelum (2010-03-22 05:58)
ソネブロ他社にたよりっきりですよね＾。＾
言語は幅広くOKですか?
by にごろ (2010-03-22 14:19)
>>にごろさん
ソネブロのエンジンはSeesaaからの提供物ですからねぇ
自社開発よりもコスト面で有利だったんでしょうね、きっと。
技術が統一されるコトにより、更なる改良も期待できますから
それはそれでアリかなぁ…どうでしょうね('w`)
>言語
得意順に並べると、こんなトコロですかねぇ
1.Java 2.HTML(JS、CSS含) 3.SQL(PL*SQL含) 4.VB(VBA含)
5.C 6.C++ 7.perl 8.Pascal
※SQLはOracle限定です、DB2もちょっとは触れますがアレです('A`)
1～4まではほぼ差が無いですが、5以降はかなり差があります
アセンブラ、COBOL、C#、.net等は全く出来ません(触った事がありません)
by Caelum (2010-03-22 22:23)