マネックス証券に無料資料請求をして資産運用の第一歩を踏み出す
簡単なアンケートに答えるだけでおこづかい稼ぎができるYahoo!リサーチモニターライトに登録する
◆通信料金を払いすぎていませんか?価格.comブロードバンドでアクセスプロバイダ比較
世界標準のブログソフトウェア「Movable Type」発売中!!

2006年02月11日

Seesaa擬似サブカテゴリ化(1)

ひさしぶりにJavascriptイジってると驚くことばかりです。

WinXP上でなぜかローカルにあるスクリプトが実行されなくなってるし(汗

セキュリティ上しょうがないんでしょうけどねぇ・・・。

思い余ってVisual Web Developer2005(もちろん、EXPRESS EDITION)をインストールしちゃいました。

しかし、重い! けっこう便利だけど(笑

それはいいとして、Seesaaの擬似サブカテゴリ化をやってみました。

どちらかというと、中級者向けかもしれません。

長くなりますが、がんばってください(笑

それではまず、Seesaa独自タグからデータを受け取る下準備です。

「デザイン」→「HTML」で、<head>〜</head>内、あるいは<body>直下に以下のようなスクリプトを追加します。


<script type="text/javascript">
<!--
 //コンストラクタ
 function Tmp_Category(cat_name, cat_uri, cat_count) {
  this.cat_name = cat_name;
  this.cat_uri = cat_uri;
  this.cat_count = cat_count;
 }

 //カテゴリを受け取る配列を生成
 category1 = new Array();
 category2 = new Array();
 category3 = new Array();
-->
</script>


※表示されているコードをコピペして使わないでください。全角文字を使用している部分があります。

Tmp_Category()はカテゴリ名、カテゴリページのURL、それぞれのカテゴリの記事数を受け取って保持するオブジェクトで、category(数字)はこのオブジェクトを保存しておく配列です。

category(数字)はここでは3つ用意していますが、自分が分けたいと思っているサブカテゴリの数だけ準備してください。

次は「デザイン」→「コンテンツ」→「カテゴリ」→「コンテンツHTML編集」で、<%loop:list_category>〜<% /loop %>内をすべて書き換えます。


<script type="text/javascript">
<!--
 obj = new Tmp_Category(<% category.name %>, <% category.page_url %>, <% category.article_count | __or__ | echo("0") %>);

 str = obj.cat_name;
 switch(str) {
  case "ブログる?":
   category1.push(obj);
   break;
  case "アフィる?":
   category1.push(obj);
   break;
  case "株買う?":
   category1.push(obj);
   break;
  case "エンヂニヤリング":
   category3.pudh(obj);
   break;
  default:
   category2.push(obj);
 }
-->
</script>


ここまでできたらあとは表示だけです。

<% loop:list_category %>〜<% /loop %>の外側にJavascriptで配列の内容を表示するスクリプトを書きます。


<script type="text/javascrpt">
<!--
 document.write("<div>メイン?</div>");
 for(i = 0; i < category1.length; i++) {
  document.write("<div><a href='" + category1[i].cat_uri + "'>" + category1[i].cat_name + "</a>(" + category1[i].cat_count + ")</div>");
 }

 document.write("<div>雑記とか</div>");
 for(i = 0; i < category2.length; i++) {
  document.write("<div><a href='" + category2[i].cat_uri + "'>" + category2[i].cat_name + "</a>(" + category2[i].cat_count + ")</div>");
 }

 document.write("<div>Seesaaカスタマイズ</div>");
 for(i = 0; i < category3.length; i++) {
  document.write("<div><a href='" + category3[i].cat_uri + "'>" + category3[i].cat_name + "</a>(" + category3[i].cat_count + ")</div>");
 }

-->
</script>

などと書いておけばうまく表示されるはずです(上の例はどのスクリプトもこのブログ用です)。

初心者の方にはまったく不親切な設計のスクリプトです(汗

どこをどう変えればいいかすらわからないかもしれませんね。

プログラミングの知識のある方ならばある程度は把握していただけるかと思います。

このスクリプトのキモは、<% loop:list_category %>〜<% /loop %>内でのみアクセスできるSeesaa独自タグの変数をどうやってJavascriptのグローバル変数に取り込むか、にあります。

それさえできてしまえば、煮るなり焼くなり自由にできるわけです。

とはいえ、問題がないわけではありません。

一番の問題はカテゴリ欄が右サイドバーにある場合です。

左サイドバーにある場合にはメインや右サイドバーでもグローバル変数に取り込んだオブジェクトを利用して表示することはできますが、右サイドバーにある場合はそれができません。

<% loop:list_category %>〜<% /loop %>を早い段階で実行して取り込んでおけばどこでも使用できるのではないかと思いますが、まだ実験中です。

まだまだ改善の余地のあるスクリプトですのでver.0.1くらいに思っておいてください(笑

また、こんなのわからん!という方はDes notes de KOHtanさんのツリー化スクリプトをオススメします。

希望、感想、障害報告などもお待ちしております。

・・・というか、だれかもっときれいで使いやすいコードを書いてくれないかな。

うーん、他力本願(笑


posted by xiu at 01:19| Comment(0) | TrackBack(0) | Seesaaカスタマイズ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:


この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。