日常的戯言也。

08.6より地元食い物屋情報に特化します(^^;

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  1. --/--/--(--) --:--:--|
  2. スポンサー広告

ストック



ヘンテコカスタマイズネタだの、いい加減な放浪記だの書いてますが、ダーツネタが終わってないんだよな....ってなワケで続きを(^^;

普段持ち歩くことがなくても家にはパーツのストックがあるワケです。や、ストックしておこうと思って買ったモノは予備のチップくらいのモンで、あとは「あー、このフライトいいねぇ」とか「このシャフトいいと思ったんだけどイマイチだから使わなーい」なんてモノばっか。
こうして見るとどんな変遷を経て最終形に至ったかよく判りますな(^^;
スポンサーサイト

テーマ:ダーツ - ジャンル:スポーツ

  1. 2006/04/30(日) 18:31:55|
  2. 堕落的投矢
  3. | トラックバック:0
  4. | コメント:0

お気楽野営



暖かくなったので久し振りにバックパック、と思いきや水虫君も活動開始。なんだよ、去年治ったんじゃなかったのかよ~。
折角の雨なので自力系も捨て難いし、無理すれば歩けないコトもなさそうなのだが、悪化したら面倒なので車で安易な野営君。金曜晩は多少肌寒かったが、土曜は暑い位。移動中に買出しも済ませ、目的地に設営した途端に雨降ってきて大変シアワセ君。テントを叩く雨音に包まれて、堕落的な1日を送りましたとさ(^^;

テーマ:アウトドア - ジャンル:趣味・実用

  1. 2006/04/29(土) 00:00:00|
  2. 外道伝
  3. | トラックバック:0
  4. | コメント:0

ついでだぁ(^^;

コメントをツリー化したのなら当然トラバもいじりたくなるワケ。で、ちゃちゃっとツリー化してみた。トラバは見やすいとか判りやすいとかそーゆーモンダイではなく、コメントのツリー化ロジックがほぼそのまま使えるからってのもあるんだけど(^^;
それだけじゃあまりにツマランので、過去のアーカイブもツリー化君。プラグインを折り畳むのもアリなのだろうが、アレもコレも折り畳むと寂しくなりそうなので現段階ではやめておくコトにする。なーんて、技術的には難しくなさそうなのでそのうちやりそうな予感はしますが(^^;
過去のアーカイブツリー化は、指定した月数だけ表示させ、それ以前の月を閉じたツリーの中に押し込めるというカタチ。過去ログ見る機会なんてそう多くないし、見たとしても参照頻度が高いのはせいぜい3か月分位ではないかと思うワケ。

あ、新スクリプトもマックでうまく動かないとご指摘を頂いていたが、窓版IEとfirefoxでは問題ナシ。マックがおかしいんじゃないの....とも言えないので窓版のNNとOperaも入れて確認してみた。やや、NNでは動くが、Operaでは動かぬ。指摘されたのと同じ症状、しかも表示が意図通りになっていない。調べてみると引数を""でくくるところで引っ掛かっている様子。''でくくったら....あらら、動きました(^^;
マックでどうかは不明だけど。あとは行間がミョーに開いているのが気にいらないトコロ。ま、これはボチボチね。

ちなみに
カテゴリーツリー化プラグイン ⇒ココ
コメントツリー化プラグイン ⇒ココ
トラックバックツリー化プラグイン ⇒ココ
過去のアーカイブツリー化プラグイン ⇒ココ
こんなバカなコトやってるヤツもいるって参考まで。

しかし、コッチでは動くのにアッチでは動かん、というのも厄介な話。どんな環境でも動作確認してるプログラマってエライですなぁ(^^;

テーマ:ブログのカスタマイズbyド素人 - ジャンル:コンピュータ

  1. 2006/04/28(金) 20:52:38|
  2. 電脳日記改造
  3. | トラックバック:0
  4. | コメント:0

コメントツリー化

昨日書いたようにスクリプトをいじっていたが、対処完了。や、対処終了ってか、「書き直した」と言う方が正しいくらいの修正君。配列の構造等は当初のものを使おうかと思っていたのだが、どうも気にいらなくなって渡す配列の構造も変更。更に外部スクリプトでやらせることもだいぶ縮小し、渡す側での処理を増やしている。その分、使い勝手は悪くなるのだが自由度が上がったハズ。何しろ、以前のスクリプトだとツリーは上位のアイテムを<li>~</li>で、下位のアイテムを<dl>~</dl>で囲っていたので、時と場合によっては表現力に制限があった。これをベタのhtmlで渡すようにしたので、渡す側の処理は増えるものの好きなように処理出来るワケ。ま、ここまでやるんなら外部スクリプト化する必要無いんじゃないかというハナシもありますな。なお、バグが治ってるかどうかは....??

追いかけててもしょうがないので、使いながら対処する事として
新しいツリー化スクリプトは⇒ココ
や、サーバー上のファイルは上書きしているだけなんですが(^^;

で、コメントのツリー化プラグインもテキトーに作ってみた。ま、このあたりはカテゴリーのツリー化が出来ちゃえば配列にどのように値をセットするかだけの問題なのでそれ程の手間はナシ。最近頂いたコメントだけツリーを開いて表示し、古いコメントツリーは閉じるように出来るよう、ちょいといじってみた。ってなワケで、
コメントツリー化のプラグイン本体は⇒ココ

ふむふむ、窓版IE6とFireFox1.5では一応動いてます。見てくれはおいおい直していくことするつもりだが、多少は統一されてきたかな?(^^;
  1. 2006/04/27(木) 23:56:08|
  2. 電脳日記改造
  3. | トラックバック:0
  4. | コメント:0

性懲りも無く....

カテゴリーのツリー化について長々と書いてきたのだが、ツリー化スクリプトを分割させたコトによって応用範囲は多少広がってるハズ。や、ツリー化スクリプトがアレで完成したとは思ってないですよ、バグだってあるだろうし、更に多くの機能を盛り込んだ方が良さそうなコトも承知の助。
鉄は熱いうちに、ってなワケで、外部スクリプト化した一つの理由であるコメントのツリー化について考えてみましょう。今回はそんなに時間がかからないハズ....

まずは公式のコメント表示プラグインを見てみましょう。
<ul>
<!--rcomment-->
<li &align>
<a href="<%rcomment_link>#comment<%rcomment_no>"
title="<%rcomment_title>"><%rcomment_name>:<%rcomment_etitle> (<%rcomment_month>/<%rcomment_day>)</a>
</li>
<!--/rcomment-->
</ul>


ふむ、コメントは<!--rcomment-->~<!--/rcomment-->エリアで最近投稿されたコメント情報を得られるわけですな。公式の解説によると使える環境変数は次の通りらしい。

<%rcomment_link> - URLを表示
<%rcomment_body> - 本文の要約を表示
<%rcomment_name> - 投稿者の名前を表示
<%rcomment_title> - タイトルを表示
<%rcomment_etitle> - 親エントリーのタイトルを表示
<%rcomment_year> - 年を表示
<%rcomment_month> - 月を表示
<%rcomment_day> - 日を表示
<%rcomment_hour> - 時を表示
<%rcomment_minute> - 分を表示
<%rcomment_second> - 秒を表示
<%rcomment_youbi> - 曜日(洋風)を表示
<%rcomment_wayoubi> - 曜日(和風)を表示


公式プラグインで使われている<%rcomment_no>が抜けているのはご愛嬌?(^^;
ま、それはいいとして標準プラグインの表示を見ると、コメント受付順(rcomment_no)に表示されているコトが判る。ってコトは配列に放り込むと新しい順に並ぶわけですな。ふむ、親エントリー情報でまとめてやればうまいコトツリー化が出来るはず。
[親エントリー]
├コメント
└コメント
ってな具合ですな。ツリー情報用配列もカテゴリーでは

btm_item 下位カテゴリー名として使用
top_item 上位カテゴリー名として使用
int_disp 初期表示状態;上位カテゴリの最初のものだけ有効 S:表示、H:非表示
tip_text 説明
sort_method ソート方法(省略時はN)
num_show 表示エントリ数 省略時は10
num_sum カテゴリーの中のエントリー数~()内に表示
url カテゴリー一覧へのリンク

だったのだが、最新コメント一覧では

btm_item コメントタイトル(コメントタイトル+書き込み者名)
top_item 親エントリータイトル
int_disp 初期表示状態;コメントの最初のものだけ有効 S:表示、H:非表示
tip_text コメント内容
sort_method (未使用)
num_show (未使用?)
num_sum コメント日付~コメントタイトル横に()で表示
url コメントurl

とすればよろしい。よっしゃ、いくか....と思いきや、早速ツリー化スクリプトの機能不足が発覚した。
カテゴリーの場合、上位カテゴリーはurlを持たないのでリンクを張る必要が無かったのだが、コメントのツリー化の場合は上位カテゴリーの位置に親エントリーが来る。コメントを見れば親エントリーも表示されるんだからリンク張らないでもいい気もするのだが、html版HPで上位メニューにリンクを張りたいケースも出てくるやもしれん。上位アイテムurlも取得・設定出来るようにスクリプトを改造しておくのが吉だろう。ついでに下位アイテムにurlを指定しない場合にリンクを張らないようにしておいた方が良さそう。

ってなワケで、早くもスクリプトをいじってマス(^^;

テーマ:ブログのカスタマイズbyド素人 - ジャンル:コンピュータ

  1. 2006/04/26(水) 19:03:08|
  2. 電脳日記改造
  3. | トラックバック:0
  4. | コメント:0

プラグインエリア表示への道 おさらい

1ヶ月近く下らんネタをよう引っ張りましたなぁ。や、まだ半分までしか終わってないんだけど、ひとまずここで休憩にします。長々と書いてきたのでワタシのカテゴリーツリー化開閉付き@プラグインエリアについてまとめておきます。

1)ツリー化外部スクリプトを適当なトコにコピーする。
ツリー化スクリプトは⇒コレ

2)プラグインを一旦ローカルにコピーする。
先日のソース⇒コレ

※その後、修正しました。

3)必要な設定値を変更する。
カテゴリー名、上位カテゴリー名、チップテキスト等、お好きに。画像、ツリーテキストもお好きにドーゾ。ツリーテキストはimgタグ使う事も出来ると思うけど、表示がずれるかも知れませぬ。

4)管理画面左メニュー「環境設定」の中の「プラグインの設定」を選択。


5)「プラグインの追加」(公式)をクリックし、「フリーエリア」を追加する。

6)追加した「フリーエリア」の「設定の変更」をクリックする。

7)「htmlを編集する」をクリックする。タイトルを変えておきたいのならクリックする前にこの画面でタイトルを変えておくのが吉。


8)「[フリーエリア]のHTMLの編集」内のhtmlを消去し、3)で設定値をプラグインをコピペする。

これで現在表示されているようなツリー表示が可能となるハズ。fc2内ならカテゴリー情報の設定を変更すればドコでも使えるのではないかと思うので、使いたいなんていう奇特なヒトがいたらドウゾ。あ、画像・スクリプトは基本的にご自分のエリアに保管して下さいませ。ウチのを使う場合はご一報下さい。
それからワタシ、あくまで素人ですのでサポートの類はあまり期待されませぬよう。って、誰も期待してないか(^^;

いやいや、結構長持ちさせましたな、このネタ。一覧性向上のために始めたツリー化はとりあえず完成。結構書くの疲れるんだよな(^^;

[プラグインエリア表示への道 おさらい]の続きを読む

テーマ:ブログのカスタマイズbyド素人 - ジャンル:コンピュータ

  1. 2006/04/25(火) 20:59:08|
  2. 一覧性創生時
  3. | トラックバック:0
  4. | コメント:0

プラグインエリア表示への道 ひとまず一段落

長いタイトルだなぁ(^^;
修正も何とか終わりました。簡単に出来るかと思ってたけど、変数名の変更がややこしかったり、開閉画像変更ロジックでコケたりしながらも何とか動くようになった。

手間がかかった開閉画像変更ロジックだけど、画像名(or開閉テキスト)を渡そうと思ったわけ。や、渡せるんですよ、ちゃんと。ところが中で画像名をreplaceしているんですな。そうするとJavaScriptでテキストベタ渡ししているんで、このテキストまで変わっちゃう。

<a href=javascript:m_Click_change("bz_category","3","plus.gif","minus.gif")><img src="http://blog-imgs-27.fc2.com/b/o/s/boseskinhead/minus.gif" border="0"></a> 鐵道愛好</div></li>

なんてJavaScriptを設定しておいたら、クリックされると"minus.gif"を"plus.gif"に変えるワケで、

<a href=javascript:m_Click_change("bz_category","3","plus.gif","plus.gif")><img src="http://blog-imgs-27.fc2.com/b/o/s/boseskinhead/plus.gif" border="0"></a> 鐵道愛好</div></li>

となり、以後二度と画像が変わらなくなるワケ。悩みましたが面倒なので広域変数化して誤魔化してしまいました(^^;
そんなこんなで

外部スクリプト⇒ココ
プラグイン部分のhtml⇒ココ

に置いてあります。現在の右側メニューのカテゴリーはコレを使ってツリー化してます。あ、前にも書いたけどJavaScript無効にしてたら通常表示です。それからWindoes版IE6とFireFox1.5では動作確認済み。マックな方、表示が変ならご指摘頂ければ有り難いです。って、ナニ出来るワケでもないんだけどサ(^^;

ちと長々書きすぎたんで、次回おさらいします。

[プラグインエリア表示への道 ひとまず一段落]の続きを読む

  1. 2006/04/24(月) 18:50:12|
  2. 一覧性創生時
  3. | トラックバック:0
  4. | コメント:0

プラグインエリア表示への道 寄り道(ツリー化考察)

一覧性を上げるための一つの方策としてツリー化に取り組んできたのだが、ハタと気が付いた。これを書いている06年4月現在、コメント表示にツリー化して表示させる共有プラグインを使っているワケです。コッチはコッチで独自のツリー化ロジックを持っている....1つのブログに2つのツリー化ロジックがあるというのは無駄ですな。更に、元々の発想である全エントリー取得してメニューっぽく表示させる部分でもツリー化ロジックは必要となるワケ。そうなると3つ、ヘタすると4つ5つと更に増える可能性だってあるワケ。
そもそもツリー化をしようと思ったのは「ツリー化スクリプト」なるものの存在を知ったからであって、コレは汎用性を持たせてlivedoorだろうが他のブログだろうが使われているワケです。ワタシの場合、素人のマスターベーションであるからしてそんなに汎用性を持たせる必要は無いとしても、自分のブログの中で使いまわせる位にはすべきですな。単独のhtmlで試してるんだから、更にhtml版HPのメニューにだって使えるように出来るハズ。

そんな想いで先日のソースを見直して見ると、多少の変更で汎用性を持たせられそうなコトが判ってきた。
先日のソースは大まかに言うと以下の5つのブロックがある。

1.設定情報を配列にセットする。
2.ブログ情報を配列にセットする。
3.上記2つの配列を1つにまとめる。
4.まとめた配列をツリー化表示する。
5.ツリー化された表示を開閉するサブルーチン。

1~3は実現したいコトによって別の動きとなるが、4と5は基本的に同じコトをやってるワケです。ならばこの部分を汎用ロジックとし、フロントエンド部分で配列を作ってやればいいコトになるかと。
カテゴリーツリー化で使った配列を今一度見直して見ると、その要素は

・name カテゴリー名
・top_category 上位カテゴリー名
・init_disp 初期表示状態(折りたたむか否か)
・text ツールチップテキスト
・sort_method ソート方法(時間順/エントリタイトルのコード順)
・number 一覧表示するエントリー数
・enumber カテゴリーが持っている全エントリー数
・url カテゴリーのurl

こんな感じ。で、ツリー化ロジックはこの配列を受け取って

(-)top_category
├name
└name
(*)name
(-)top_category
├name
├name
└name

こんな感じにツリー化しているワケ。nameの代わりに投稿者、top_categoryの代わりに対象エントリーを入れればコメントリストに、nameの代わりにTB元、top_categoryの代わりに対象エントリーを入れればTBリストになるのは明白ですな。勿論、nameの代わりに下位メニュー、top_categoryの代わりに上位メニューを入れればhtml版HPのメニューにも使える。現在は(-)や(*)、├や└は広域変数化しているので、これを個々に渡すようにするとモノによって見た目を変えるコトも出来る、ってかhtmlでも使う気なら値渡しにした方がいいコトは明白ですな。どうせなら配列の要素名も変え、外部スクリプト化するのがフツーのやり方だと思う。って、フツーそうするから「ツリー化スクリプト」があるんでしょうけど。

ってなワケで現在ゴリゴリ修正中。さて、明日ネタに出来るかな?(^^;
  1. 2006/04/23(日) 13:27:00|
  2. 一覧性創生時
  3. | トラックバック:0
  4. | コメント:0

リベンジ



念願叶って満開の桜の下であります。いやもうタマラン。幕営ポイントには人出も全くといっていい程無く、リトルヌーキー使いの友人と2人で桜を満喫してまいりました。
そろそろ虫さんも活動を開始したようで煩い。しゃーないんですけどね。早く冬にならないものか....(^^;
  1. 2006/04/22(土) 00:00:00|
  2. 外道伝
  3. | トラックバック:0
  4. | コメント:0

プラグインエリア表示への道 その3

昨日までで1つのhtmlファイル内でのJavaScript動作とプラグインの動作の確認が出来た。というワケで、この2つを合体させて完成させられるワケ。早速足してプラグインのhtmlに挿入してみると....IEでは思った通りの動きになっているがFirefoxでは下位のカテゴリーが改行されずに表示されている。</br>入れてるんだけどなぁ....1つのhtmlファイルとしてはちゃんと動いたはずなのだが、cssの何かとぶつかってるんでしょうなぁ。css側をいじくるのも一つのやり方なのだが、どこかに不具合が出てくる可能性もあるし、今後ブログデザインを変えないとも限らない。ここはプラグイン側で対処するのが正解でしょう。
というわけで、下位のカテゴリーは<dd>タグで囲い、左にインデントさせるクラスを作って指定するというテキトーな対処をしてみた。ま、<dl>使ってるんだから<dd>使うのがアタリマエなのかも知れないし、もっと上手いやり方があるのかも知れないがソレはソレ(^^;
あと、JavaScriptを有効にしていないと表示されないのは問題、というワケで一応<noscript>で標準のカテゴリ表示も加えておきますか。うむ、JavaScript無効の方にとってはクダらん能書きが半月以上続いたワケだ(^^;

まいっか、最終的なソースはこんなカンジになります。

<style>
ul.tree_cate{
    list-style-type : none;
    list-style-position : outside;
}
dd.tree_cate{
    text-indent :-3em;
}
ul.tree_cate a{
    text-decoration : none;
}
</style>

<script language="JavaScript" type="text/javascript">
<!--
    var o = new Array(); //オリジナルのカテゴリー情報
    var p = new Array(); //設定したカテゴリー情報
    //=================================================================
    //カテゴリーの動作設定
    //第一引数:name カテゴリー名
    //第二引数:t_category 上位カテゴリー名
    //第三引数:int_disp 初期表示状態;上位カテゴリの最初のものだけ有効 S:表示、H:非表示
    //第四引数:text 説明
    //第五引数:s_m ソート方法(省略時はN)
    // O:古い順、N:新しい順、C:エントリタイトルのコード順昇順、D:降順
    //第六引数:number 表示エントリ数 省略時は10
    //=================================================================
    p.push( new Category("正統派天幕生活" ,"活動記","S","正しいキャンプネタ","O",20));
    p.push( new Category("自力系顛末記" ,"活動記","S","くだらん自力系" ,"O",20));
    p.push( new Category("外道伝" ,"活動記","S","何かやりました(^^;","O",20));
    p.push( new Category("野外系品評会" ,"道具箱","S","無駄遣い?"));
    p.push( new Category("贋自転車愛好者" ,"道具箱","S","自転車系"));
    p.push( new Category("興味本位珍評" ,"道具箱","S","いろいろ"));
    p.push( new Category("JR通勤型" ,"鐵道愛好","H","","C",20));
    p.push( new Category("JR近郊型" ,"鐵道愛好","H","","C",20));
    p.push( new Category("JR特急型" ,"鐵道愛好","H","含急行型","C",20));
    p.push( new Category("私鉄等車輌" ,"鐵道愛好","H","","C"));
    p.push( new Category("鐵道" ,"寫眞展","H","ヘタクソ",""));
    p.push( new Category("日常" ,"寫眞展","H","ナニ撮ってるの?"));
    p.push( new Category("道具愛好癖" ,"戯言","H","隣に物欲大魔王(^^;","",5));
    p.push( new Category("鐵道趣味独白" ,"戯言","H","乗り鉄撮り鉄","",5));
    p.push( new Category("電脳日記改造" ,"戯言","H","カスタマイズ?","",5));
    p.push( new Category("一覧性創生時" ,"戯言","H","カテゴリー階層化など....","",5));
    p.push( new Category("日常的出来事" ,"戯言","H","雑言ですよ(^^;","",5));

    //=================================================================
    //開閉ボタン関係の指定
    // open_char 開状態の文字
    // close_char 閉状態の文字
    // hold_char 動作不能(サブカテゴリが無い場合)の文字
    //=================================================================
//簡易テキスト表示の場合
//    var open_char = "(-)";
//    var close_char = "(+)";
//    var hold_char = "(*)";
//画像表示の場合、<img>タグを指定
    var open_char = '<img src="http://blog-imgs-27.fc2.com/b/o/s/boseskinhead/minus.gif" border="0">';
    var close_char = '<img src="http://blog-imgs-27.fc2.com/b/o/s/boseskinhead/plus.gif" border="0">';
    var hold_char = '<img src="http://blog-imgs-27.fc2.com/b/o/s/boseskinhead/hold.gif" border="0">';

    //=================================================================
    //ツリーに使うテキスト
    //tree_cnt ツリーが続く場合のテキスト"├ "など
    //tree_end ツリーが終わる場合のテキスト"└ "など
    //=================================================================
    var tree_cnt = "├ ";
    var tree_end = "└ ";

//以上が設定可能定数部分
//以下いじらなくていいはず
    var _open , _close , i , j;
    if(open_char.match( /<img/ ) != null){
        //開いている時の画像以下の文字取得
        for(i=0 ; i < open_char.length-1 ; i++){
            j=open_char.indexOf("/",i);
            //iが最後の"/"を指している
            if(j == -1){
                break;
            }else{
                i=j;
            }
        }
        if(i == 0) i = open_char.indexOf("¥"",i) + 1;
        _open = open_char.substring( i, open_char.length - 1);
        j = _open.indexOf("¥"",0);
        _open = _open.substring( 0, j);

        //閉じている時の画像以下の文字取得
        for(i=0 ; i < close_char.length-1 ; i++){
            j=close_char.indexOf("/",i);
            //iが最後の"/"を指している
            if(j == -1){
                break;
            }else{
                i=j;
            }
        }
        if(i == 0) i = close_char.indexOf("¥"",i) + 1;
        _close = close_char.substring( i, close_char.length - 1);
        j = _close.indexOf("¥"",0);
        _close = _close.substring( 0, j);
    }else{
        _open = open_char;
        _close = close_char;
    }

//カテゴリー設定の配列化
function Category(name, t_category, disp_flag , txt, sort_method, number) {
    this.name = name;
    this.top_category = t_category;
    this.text = txt;
    if(disp_flag == "s" || disp_flag == "S"){
        this.init_disp = "S";
    }else{
        this.init_disp = "H";
    }
    if(sort_method == "" || sort_method == null){
        this.s_m = "N";
    }else{
        this.s_m = sort_method.toUpperCase();
    }
    //初期値=10
    if(number == null){
        this.number = 10;
    }else{
        this.number = number;
    }
}

//オリジナルのカテゴリー情報を配列化
function get_o_cate( url, name, number ) {
    this.url = url;
    this.name = name;
    this.number = number;
}

//カテゴリー情報の追加
function add_cate() {
    for(var i=0;i < p.length;i++){
        for(var j=0;j < o.length;j++){
            if(p[i].name == o[j].name){
                p[i].enumber = o[j].number;
                p[i].url=o[i].url;
                break;
            }
        }
    }
}

//ツリー風表示 開閉付き
function S_top_category(l1,l2) {
    var top_c_num = 0; //上位カテゴリ数/番号

    document.write("<ul class=¥"tree_cate¥" >");
    for(var i = 0; i < p.length ; i++) {

        //上位カテゴリーが存在しない場合~上位カテゴリーの位置に下位カテゴリーを表示
        if(p[i].top_category == ""){
                document.write("<li> ",hold_char," <a href=¥"",p[i].url,"¥" title=¥""
                    ,p[i].text,"¥">",p[i].name,"</a></li>");

        //上位カテゴリーが存在するカテゴリーの場合
        }else{
            //上位カテゴリーの表示//////////////////////////////////
            //一番最初か、前のカテゴリーとは異なる上位カテゴリーの場合
            if(i==0 || p[i].top_category != p[i-1].top_category){
                //上位カテゴリー表示本体
                document.write("<li><div id=¥"top_cat_menu" , top_c_num ,"¥">" ,
                    "<a href=javascript:cat_menuClick(", top_c_num,")>", open_char,
                    "</a> ",p[i].top_category,"</div></li>");

                //ここから上位カテゴリーが変わるので、下位カテゴリーのidを変える
                document.write("<dl><div id=¥"cat_menu",top_c_num,"¥">");

                //下位カテゴリは表示されている状態、初期表示状態にする
                if(p[i].init_disp == "H") cat_menuClick(top_c_num);
                ++top_c_num;
            }
            //以上、上位カテゴリーの表示////////////////////////////

            //下位カテゴリーの表示//////////////////////////////////
            //最後のカテゴリーでなく、次も同じ上位カテゴリーの場合~続く
            if(i+1 != p.length && p[i].top_category == p[i+1].top_category){
                document.write("<dd class=¥"tree_cate¥">",l1,"<a href=¥"",p[i].url,
                    "¥" title=¥"",p[i].text,"¥">",p[i].name,"</a></dd>");
            //最後のカテゴリーの場合~終わり
            }else{
                document.write("<dd class=¥"tree_cate¥">",l2,"<a href=¥"",p[i].url,
                    "¥" title=¥"",p[i].text,"¥">",p[i].name,"</a></dd>");
                document.write("</div></dl>");
            }
        }
    }
    document.write("</ul>");
}

//表示切替~上位カテゴリ表示切替付き
function cat_menuClick(cate_id) {
    var catediv = document.getElementById("cat_menu"+cate_id);
    var topcatdiv = document.getElementById("top_cat_menu"+cate_id);

    if( catediv != null && catediv.style.display == "none" ) {
        catediv.style.display = "block";
        topcatdiv.innerHTML=topcatdiv.innerHTML.replace(_close,_open);
    } else {
        catediv.style.display = "none";
        topcatdiv.innerHTML=topcatdiv.innerHTML.replace(_open,_close);
    }
}

<!--category-->
    o.push( new get_o_cate("<%category_link>" , "<%category_name>" , "<%category_count>"));
<!--/category-->

add_cate();
S_top_category(tree_cnt,tree_end);

//-->
</script>
<noscript>
<ul>
<!--category-->
<li &align><a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a></li>
<!--/category-->
</ul>
</noscript>


現在右側に表示されているのがコレであります。ふむ、まぁいいんでないかな。ひとまずプラグインエリアへの表示はこれで完成かな....と思いきや、また下らんコトが頭を過る....
ってなワケで、まだ続く(^^;

テーマ:ブログのカスタマイズbyド素人 - ジャンル:コンピュータ

  1. 2006/04/21(金) 12:22:27|
  2. 一覧性創生時
  3. | トラックバック:0
  4. | コメント:0

プラグインエリア表示への道 その2

昨日の結果を踏まえて、自前の配列に取得した情報に取得した情報を追加して1つの配列にし、これを表示させてみましよう。

取得した情報を入れた配列の要素を自前の配列に入れてやるだけ。あとから配列に要素を加えることもデータを追加する事も出来るし、単独のhtmlとプラグインで何も動きに差が無いという事がこれで確認出来るワケです。「フリーエリア」のhtmlはこんなカンジ。

<script language="JavaScript" type="text/javascript">
<!--
    var o = new Array(); //オリジナルのカテゴリー情報
    var p = new Array(); //設定したカテゴリー情報
    //=================================================================
    //カテゴリーの動作設定
    //第一引数:name カテゴリー名
    //第二引数:t_category 上位カテゴリー名
    //第三引数:int_disp 初期表示状態;上位カテゴリの最初のものだけ有効 S:表示、H:非表示
    //第四引数:text 説明
    //第五引数:s_m ソート方法(省略時はN)
    // O:古い順、N:新しい順、C:エントリタイトルのコード順昇順、D:降順
    //第六引数:number 表示エントリ数 省略時は10
    //=================================================================
    p.push( new Category("正統派天幕生活" ,"活動記","S","正しいキャンプネタ","O",20));
    p.push( new Category("自力系顛末記" ,"活動記","S","くだらん自力系" ,"O",20));
    p.push( new Category("外道伝" ,"活動記","S","何かやりました(^^;","O",20));
    p.push( new Category("野外系品評会" ,"道具箱","S","無駄遣い?"));
    p.push( new Category("贋自転車愛好者" ,"道具箱","S","自転車系"));
    p.push( new Category("興味本位珍評" ,"道具箱","S","いろいろ"));
    p.push( new Category("JR通勤型" ,"鐵道愛好","H","","C",20));
    p.push( new Category("JR近郊型" ,"鐵道愛好","H","","C",20));
    p.push( new Category("JR特急型" ,"鐵道愛好","H","含急行型","C",20));
    p.push( new Category("私鉄等車輌" ,"鐵道愛好","H","","C"));
    p.push( new Category("鐵道" ,"寫眞展","H","ヘタクソ",""));
    p.push( new Category("日常" ,"寫眞展","H","ナニ撮ってるの?"));
    p.push( new Category("道具愛好癖" ,"戯言","H","隣に物欲大魔王(^^;","",5));
    p.push( new Category("鐵道趣味独白" ,"戯言","H","乗り鉄撮り鉄","",5));
    p.push( new Category("電脳日記改造" ,"戯言","H","カスタマイズ?","",5));
    p.push( new Category("一覧性創生時" ,"戯言","H","カテゴリー階層化など....","",5));
    p.push( new Category("日常的出来事" ,"戯言","H","雑言ですよ(^^;","",5));

//カテゴリー設定の配列化
function Category(name, t_category, disp_flag , txt, sort_method, number) {
    this.name = name;
    this.top_category = t_category;
    this.text = txt;
    if(disp_flag == "s" || disp_flag == "S"){
        this.init_disp = "S";
    }else{
        this.init_disp = "H";
    }
    if(sort_method == "" || sort_method == null){
        this.s_m = "N";
    }else{
        this.s_m = sort_method.toUpperCase();
    }
    //初期値=10
    if(number == null){
        this.number = 10;
    }else{
        this.number = number;
    }
}

//オリジナルのカテゴリー情報を配列化
function get_o_cate( url, name, number ) {
    this.url = url;
    this.name = name;
    this.number = number;
}

//カテゴリー情報の追加と表示
function show_cate() {
    //情報追加
    for(var i=0 ; i < p.length ; i++){
        for(var j=0;j            if(p[i].name == o[j].name){
                p[i].enumber = o[j].number;
                p[i].url=o[i].url;
                break;
            }
        }
    }
    //表示
    for(i=0; i < o.length ; i++){
        document.write(p[i].name,"(",p[i].enumber,")<br>");
    }
}

<!--category-->
    o.push( new get_o_cate("<%category_link>" , "<%category_name>" , "<%category_count>"));
<!--/category-->

show_cate();
//-->
</script>


で、表示させたイメージがこんなカンジ。



「単独のhtmlとプラグインで何も動きに差が無い」と書いたけど実は若干差があって、cssで各タグの書式を設定していたりすると思わぬ表示をしたりする。この辺りはまた明日(^^;

テーマ:WEB系勉強中 - ジャンル:コンピュータ

  1. 2006/04/20(木) 22:02:44|
  2. 一覧性創生時
  3. | トラックバック:0
  4. | コメント:0

プラグインエリア表示への道 その1

しかし引っ張るなぁ。余程ネタが無いんだなぁ、と思ってるアナタ、正解。そんなにネタが豊富な世界に暮らしていないし、ネタがすぐ浮かぶ程感受性が強ければしがないサラリーマンしてません....と言いつつも、こんなコトばっか書いてるんで鉄を中心にネタがたまってます。ダーツネタだって終わってないし。当分ネタに困らないなぁ(^^;

軽口はいいとして、ローカルでの準備がほぼ終わったのでFC2の中でいろいろといじってみますか。
管理画面で「環境設定」-「プラグインの設定」と開き、「プラグインの追加(公式)」を選ぶ。色々出てきますなぁ。まん中より下に「フリーエリア」というのがあるので、これを追加してやる。名前はフリーエリアのままで可、あとで変えられるもんね。あと、「カテゴリー1」のままで可。これも変えられるし。
追加してやると「プラグインカテゴリー1」の一番下に「フリーエリア」が表示されてますな。「設定の変更」を選ぶとプラグインの編集画面になる。そこで「HTMLを編集する」を選んでみませう。

[ フリーエリア ] のHTMLの編集

なんてタイトルの下に編集ボックスがあって

<!-- &freeareaの中にHTMLが代入されます。 -->
<p class="plugin-freearea" &align>
&freearea
</p>

なんてhtmlが表示されてるハズ。さて、ガンガンいじりましよう。失敗しても消してやり直せば良いんで大変気が楽。カテゴリーの情報を扱うのは

<!--category--><!--/category-->

エリアで、扱える情報は
<%category_link> - URLを表示
<%category_name> - カテゴリー名を表示
<%category_count> - カテゴリー数を表示
の3つのようであります。ここら辺は自分で調べてね(^^;
この情報を自前の配列に取得して表示させるだけの簡単なJavaScriptを試してみませう。先ほどのボックスの中身を

<script language="JavaScript" type="text/javascript">
<!--

    var o = new Array();

//オリジナルのカテゴリー情報を配列化
function get_o_cate( url, name, number ) {
    this.url = url;
    this.name = name;
    this.number = number;
}

//表示
function show_cate() {
    var i;

    for(i=0; i<o.length ; i++){
        document.write(o[i].name,"(",o[i].number,")</br>");
    }
}

<!--category-->
    o.push( new get_o_cate("<%category_link>" , "<%category_name>" , "<%category_count>"));
<!--/category-->

show_cate();

//-->
</script>

コレに置き換えてブログを表示させると....にひひひ、ちゃんと情報が取得されていますな。これを書いている時点ではこんなカンジであります。



よし、いけそうですな(^^;
  1. 2006/04/19(水) 18:25:03|
  2. 一覧性創生時
  3. | トラックバック:0
  4. | コメント:0

ツリー表示への道の寄り道 その4

昨日のソースの無駄は、呼ばれる度に画像名を取得しているコトにあるワケ。一度取得したらそれでいいハズ。その他にもよく見ると無駄があるので、ちょっとだけスマートにしてみる。
またソース変えるの面倒だから、直リンしちゃいましょう。ポチッとすると開くのでご注意を。当然、JavaScript無効でも動きませぬ。aタグが見づらいかもしれませんが、《html》《css》であります。こんなカンジでしょうか、暇な方はローカルにでも保存して見て下さい。
あ、cssは基本的に変えてません。それから、画像は適当に作ってfc2にアップしてあるのでurlもソコを指してマス。

や、プロじゃないもん、まだ改善の余地はたくさんあると思いマスよ。でもそろそろ飽きてきたのでこの辺りで次のステップに進みたいのであります。ひとまずローカルで出来る事はこの位にしておこうかと。
明日からはサイドの「カテゴリー」などが表示されているプラグインエリアに開閉式カテゴリー一覧を表示させるチャレンジでございます。
  1. 2006/04/18(火) 21:51:09|
  2. 一覧性創生時
  3. | トラックバック:0
  4. | コメント:0

ツリー表示への道の寄り道 その3

やー、小さなネタをこれでもかとばかりに引っ張っております。書くの面倒だけどね(^^;
昨日のソースで可愛くないのは、折りたたみテキスト/画像を別々に設定し、どちらかを使うというコトであります。

<div><a href=javascript:cat_menuClick"cat_menu0">(+)</a>活動記</div>

だろうが

<div><a href=javascript:cat_menuClick"cat_menu0"><img src="plus.gif" border="0"></a>活動記</div>

だろうがたいして変わらんワケ。"(+)"なり"<img src="plus.gif" border="0">"の部分を最初に指定するようにしてやればいいハズですな。
それじゃ、ってんで

var open_char = "(-)";
var close_char = "(+)";

のかわりに

var open_char = "<img src=\"minus.gif\" border="0">";
var close_char = '<img src="plus.gif" border="0">';

ってしてやると....一見表示はされるのだが、オープン状態の画像のみ。クローズ状態の画像は表示されない。どうやらローカルでhtmlと画像を同じフォルダに入れておいても、ブラウジングする場合は勝手にフルパスに変換している様子なので、表示切替するcat_menuClick関数の中の"replace"に引っ掛からないんですな。しょうがない、画像名だけを取り出してここを"replace"するロジックを作らないといけないみたい。
とりあえず切り替わるように対処するとこんなカンジかな。

<html>
<!-- ツリー表示を折りたたむテスト改造版 -->
<!-- 開閉ボタンの画像・テキスト両対応 -->
<!-- ツールチップも付けた -->
<!-- 開閉ボタンの画像・テキスト両対応化 -->
<!-- 但し画像名取得のコストが高い -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<LINK Type="text/css" Rel="stylesheet" Href="test.css">
<title>JavaScriptのTESTその4</title>

<script type="text/javascript">
    var p = new Array();
    //=================================================================
    //カテゴリーの動作設定
    //第一引数:name カテゴリー名
    //第二引数:t_category 上位カテゴリー名
    //第三引数:int_disp 初期表示状態;上位カテゴリの最初のものだけ有効 S:表示、H:非表示
    //第四引数:text 説明
    //第五引数:s_m ソート方法(省略時はN)
    // O:古い順、N:新しい順、C:エントリタイトルのコード順昇順、D:降順
    //第六引数:number 表示エントリ数 省略時は10
    //=================================================================
    p.push( new Category("正統派天幕生活" ,"活動記","S","正しいキャンプネタ","O",20));
    p.push( new Category("自力系顛末記" ,"活動記","S","くだらん自力系" ,"O",20));
    p.push( new Category("外道伝" ,"活動記","S","何かやりました(^^;","O",20));
    p.push( new Category("野外系品評会" ,"道具箱","S","無駄遣い?"));
    p.push( new Category("贋自転車愛好者" ,"道具箱","S","自転車系"));
    p.push( new Category("興味本位珍評" ,"道具箱","S","いろいろ"));
    p.push( new Category("テスト" ,"","H","","C",20));
    p.push( new Category("JR通勤型" ,"鐵道愛好","H","","C",20));
    p.push( new Category("JR近郊型" ,"鐵道愛好","H","","C",20));
    p.push( new Category("JR特急型" ,"鐵道愛好","H","含急行型","C",20));
    p.push( new Category("私鉄等車輌" ,"鐵道愛好","H","","C"));
    p.push( new Category("鐵道" ,"寫眞展","H","ヘタクソ",""));
    p.push( new Category("日常" ,"寫眞展","H","ナニ撮ってるの?"));
    p.push( new Category("道具愛好癖" ,"戯言","H","隣に物欲大魔王(^^;","",5));
    p.push( new Category("鐵道趣味独白" ,"戯言","H","乗り鉄撮り鉄","",5));
    p.push( new Category("電脳日記改造" ,"戯言","H","カスタマイズ?","",5));
    p.push( new Category("一覧性創生時" ,"戯言","H","カテゴリー階層化など....","",5));
    p.push( new Category("日常的出来事" ,"戯言","H","雑言ですよ(^^;","",5));

    //=================================================================
    //開閉ボタン関係
    // open_char 開状態の文字
    // close_char 閉状態の文字
    // hold_char 動作不能(サブカテゴリが無い場合)の文字
    //=================================================================
//簡易テキスト表示の場合
// var open_char = "(-)";
// var close_char = "(+)";
// var hold_char = "(*)";
//画像表示の場合、<img>タグを指定
    var open_char = '<img src="minus.gif" border="0">';
    var close_char = '<img src="plus.gif" border="0">';
    var hold_char = '<img src="hold.gif" border="0">';

//カテゴリー設定の配列化
function Category(name, t_category, disp_flag , txt, sort_method, number) {
    this.name = name;
    this.top_category = t_category;
//テキストが指定されなかった時にカテゴリー名をセットするなら以下のコメントを外す
// if(txt == "" || txt == null){
// this.text = "";
// }else{
        this.text = txt;
// }
    if(disp_flag == "s" || disp_flag == "S"){
        this.init_disp = "S";
    }else{
        this.init_disp = "H";
    }
    if(sort_method == "" || sort_method == null){
        this.s_m = "N";
    }else{
        this.s_m = sort_method.toUpperCase();
    }
    //初期値=10
    if(number == null){
        this.number = 10;
    }else{
        this.number = number;
    }
}

//ツリー風表示 開閉付き
function S_top_category(l1,l2) {
    var top_c_num = 0; //上位カテゴリ数/番号
    var listmark = "";

    document.write("<ul class=\"tree_cate\"");
    for(var i = 0; i < p.length ; i++) {

        //最初でなく、1つ前にも上位カテゴリーがあり、異なる上位カテゴリならばdivを閉じる
        if(i !=0 && p[i-1].top_category !="" && p[i].top_category != p[i-1].top_category)
            document.write("</div></dl>");

        //上位カテゴリーが存在しない場合~上位カテゴリーの位置に下位カテゴリーを表示
        if(p[i].top_category == ""){
                document.write("<li> ",hold_char," <a title=\"",p[i].text,"\">",
                    p[i].name,"</a></li>");

        //上位カテゴリーが存在するカテゴリーの場合
        }else{
            //上位カテゴリーの表示//////////////////////////////////
            //一番最初か、前のカテゴリーとは異なる上位カテゴリーの場合
            if(i==0 || p[i].top_category != p[i-1].top_category){
                //上位カテゴリー表示本体
                document.write("<li><div id=\"top_cat_menu" , top_c_num ,"\">" ,
                    "<a href=javascript:cat_menuClick(", top_c_num,")>", open_char,
                    "</a> ",p[i].top_category,"</div></li>");

                //ここから上位カテゴリーが変わるので、下位カテゴリーのidを変える
                document.write("<div id=\"cat_menu",top_c_num,"\"><dl>");

                //下位カテゴリは表示されている状態、初期表示状態にする
                if(p[i].init_disp == "H") cat_menuClick(top_c_num);

                ++top_c_num;
            }
            //以上、上位カテゴリーの表示////////////////////////////

            //下位カテゴリーの表示//////////////////////////////////
            //最後のカテゴリーでなく、次も同じ上位カテゴリーの場合~続く
            if(i+1 != p.length && p[i].top_category == p[i+1].top_category){
                document.write(l1,"<a title=\"",p[i].text,"\">",p[i].name,"</a><br>");
            }else{
                document.write(l2,"<a title=\"",p[i].text,"\">",p[i].name,"</a><br>");
            }
        }
    }
    //上位カテゴリーがあった場合はidを閉じる
    if(p[i-1].top_category != "") document.write("</div></dl>");
    document.write("</ul>");
}

//表示切替~上位カテゴリ表示切替付き
function cat_menuClick(cate_id) {
    var catediv = document.getElementById("cat_menu"+cate_id);
    var topcatdiv = document.getElementById("top_cat_menu"+cate_id);
    var _open , _close;
    var i,j;

    if(open_char.match( /<img/ ) != null){
        //開いている時の画像以下の文字取得
        for(i=0 ; i < open_char.length-1 ; i++){
            j=open_char.indexOf("/",i);
            //iが最後の"/"を指している
            if(j == -1){
                break;
            }else{
                i=j;
            }
        }
        if(i == 0) i = open_char.indexOf("\"",i) + 1;
        _open = open_char.substring( i, open_char.length - 1);
        j = _open.indexOf("\"",0);
        _open = _open.substring( 0, j);

        //閉じている時の画像以下の文字取得
        for(i=0 ; i < close_char.length-1 ; i++){
            j=close_char.indexOf("/",i);
            //iが最後の"/"を指している
            if(j == -1){
                break;
            }else{
                i=j;
            }
        }
        if(i == 0) i = close_char.indexOf("\"",i) + 1;
        _close = close_char.substring( i, close_char.length - 1);
        j = _close.indexOf("\"",0);
        _close = _close.substring( 0, j);
    }else{
        _open = open_char;
        _close = close_char;
    }
    if( catediv != null && catediv.style.display == "none" ) {
        catediv.style.display = "block";
        topcatdiv.innerHTML=topcatdiv.innerHTML.replace(_close,_open);
    } else {
        catediv.style.display = "none";
        topcatdiv.innerHTML=topcatdiv.innerHTML.replace(_open,_close);
    }
}

</SCRIPT>
</head>

<body lang=JA link=blue vlink=purple>
<style>
ul.tree_cate{
    list-style-type : none;
}
ul.tree_cate a{
    text-decoration : none;
}
</style>

<script type="text/javascript">
S_top_category("├ ","└ ");
</script>

</body>
</html>


一応動きますな。そろそろ無駄を省いて完成させられそうであります(^^;
  1. 2006/04/17(月) 21:16:30|
  2. 一覧性創生時
  3. | トラックバック:0
  4. | コメント:0

面倒だ!

ここのトコ、盛大なるマスターベーションのためにブログはJavaScriptを埋め込んだhtmlを大量に書いているのだが、そのままコードを載せるとうまく表示されないんですな。とにかく面倒。<code>タグ使えばいいかと思ったらそうでもないみたいで、「<」はいちいち「&lt;」としなくちゃいけないし、半角スペースで位置を調整しているのも「&nbsp;」に置き換えなければいけない。や、ここで「&lt;」なんて書いてるけど、コレも「&&lt;」と書いてるワケ。
しかも全部の「<」を置き換えればいいワケじゃなくて、tableタグなんて使ってるもんだから変える部分と変えない部分が混在してややこしいコトこの上ない。とにかく画面は「&nbsp」だらけで、たまに「&lt;」が出てきて意味の判る文字が出てきたと思ったらまた「&nbsp」。タマランですよ。抜けが無いかチェックはしておりますがヘンなトコあっても勘弁。

ちと雰囲気だけご紹介。


とてもIE上で書く気にならないのでエディタで書いてますわ(^^;
  1. 2006/04/16(日) 16:35:38|
  2. 電脳日記改造
  3. | トラックバック:0
  4. | コメント:0

残念っ!



千葉はもう葉桜なのだが、ちょっと北上すれば満開だろうと行ってみたら三分咲き。えーっ、そんなに北じゃないと思うんだけど....
それでも今回は他にも遊べてまあ満足君。や、前回満足しなかったワケじゃないんだけどね。しかし、なかなか満開の桜の下で、というワケにはいきませんな(^^;
  1. 2006/04/15(土) 00:00:00|
  2. 外道伝
  3. | トラックバック:0
  4. | コメント:0

ツリー表示への道の寄り道 その2

昨日、とりあえずツリー表示、開閉まで来た。ただクリックしても(+)のままだとカワイクない。よし、切り替えるようにして、どうせ可愛くするならテキストではなく画像も使えるようにしよう。更に昨日のバージョンだと最初は全カテゴリーが表示されてしまうのだが、設定してやれば初期状態で開閉をコントロール出来るようにしちまいますか。
うむ、それだけではツマランのでマウスポインタがメニュー上にある時にはツールチップのようにテキストが表示されるようにしますか。
開閉ボタンを表示しているのは昨日のソースの

document.write("<div>" ,
    "<a href=javascript:cat_menuClick(\"cat_menu",top_c_num,"\")>(+)</a>",
    p[i].top_category,"</div>");

この部分。ここで

<div><a href=javascript:cat_menuClick"cat_menu0">(+)</a>活動記</div>

なんてhtmlを作り出しているワケですな。前回はテキストとして"(+)"を使って直打ちしたのだが、何か変数にして、"(+)"か画像ファイル名を指定してやればいい。更に表示切替しているcat_menuClick関数のカテゴリー状態反転部分の中に表示テキスト(or画像)を切り替えるロジックを加えてやれば、クリックするたびに画像が変わるようになるはず。また、最初は表示させておき、もし初期状態非表示フラグが立っていたら表示反転のcat_menuClick関数を呼ぶようにしてやれば指定された初期表示状態にする事が出来る。
また、ツールチップは

<a title="表示したいチップ">画面に表示するテキスト</a>

で表示可能なので、適当な文字が表示されるようにすればよろしい。

さて、こんな改造を加えればOK....なのだが、このあたりでもうひとつ直しておく必要がありそう。
ここまでカテゴリー周りのタグは<p></p>にしたり、<ul><li>~</li>....<li><dl>~</dl></li></ul>タグ使ったり色々だったのだが、そろそろFC2の作法に従っておいた方がいいだろう。標準のカテゴリー表示プラグインでは

<ul>
    <li>カテゴリー</li>
    <li>カテゴリー</li>
    <li>カテゴリー</li>
</ul>

こんな感じになっている。今回、プラグインを公開するつもりも無いのだがこれに沿って

<ul>
    <li><div id="top_cat_menu0">上位カテゴリー</div></li>
        <dl><div id="cat_menu0">
            カテゴリー
            カテゴリー
            カテゴリー
            カテゴリー
        </div></dl>
    <li>カテゴリー(上位なし)</li>
    <li>上位カテゴリー</li>
        <dl><div id="cat_menu1">
            カテゴリー
            カテゴリー
        </div></dl>
</ul>

こんなカタチにしておく事が望ましいかと思う。ちなみにlivedoorなどでは標準状態では

<div class="sidebody">カテゴリー</div>
<div class="sidebody">カテゴリー</div>
<div class="sidebody">カテゴリー</div>

のような感じになっている様子。fc2でsidebodyクラスが使われているかどうか判らないが、怪しげなクラスは使わないのが吉だろう。
この辺りも加味するとこんなカンジになるかな。

<html>
<!-- ツリー表示を折りたたむテスト改造版 -->
<!-- 開閉ボタンの画像・テキスト両対応 -->
<!-- ツールチップも付けた -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<LINK Type="text/css" Rel="stylesheet" Href="test.css">
<title>JavaScriptのTESTその3

<script type="text/javascript">
    var p = new Array();
    //=================================================================
    //カテゴリーの動作設定
    //第一引数:name カテゴリー名
    //第二引数:t_category 上位カテゴリー名
    //第三引数:int_disp 初期表示状態;上位カテゴリの最初のものだけ有効 S:表示、H:非表示
    //第四引数:text 説明
    //第五引数:s_m ソート方法(省略時はN)
    // O:古い順、N:新しい順、C:エントリタイトルのコード順昇順、D:降順
    //第六引数:number 表示エントリ数 省略時は10
    //=================================================================
    p.push( new Category("正統派天幕生活" ,"活動記","S","正しいキャンプネタ","O",20));
    p.push( new Category("自力系顛末記" ,"活動記","S","くだらん自力系" ,"O",20));
    p.push( new Category("外道伝" ,"活動記","S","何かやりました(^^;","O",20));
    p.push( new Category("野外系品評会" ,"道具箱","S","無駄遣い?"));
    p.push( new Category("贋自転車愛好者" ,"道具箱","S","自転車系"));
    p.push( new Category("興味本位珍評" ,"道具箱","S","いろいろ"));
    p.push( new Category("JR通勤型" ,"鐵道愛好","H","","C",20));
    p.push( new Category("JR近郊型" ,"鐵道愛好","H","","C",20));
    p.push( new Category("JR特急型" ,"鐵道愛好","H","含急行型","C",20));
    p.push( new Category("私鉄等車輌" ,"鐵道愛好","H","","C"));
    p.push( new Category("鐵道" ,"寫眞展","H","ヘタクソ",""));
    p.push( new Category("日常" ,"寫眞展","H","ナニ撮ってるの?"));
    p.push( new Category("道具愛好癖" ,"戯言","H","隣に物欲大魔王(^^;","",5));
    p.push( new Category("鐵道趣味独白" ,"戯言","H","乗り鉄撮り鉄","",5));
    p.push( new Category("電脳日記改造" ,"戯言","H","カスタマイズ?","",5));
    p.push( new Category("一覧性創生時" ,"戯言","H","カテゴリー階層化など....","",5));
    p.push( new Category("日常的出来事" ,"戯言","H","雑言ですよ(^^;","",5));

    //=================================================================
    //開閉ボタン関係
    // open_char 開状態の文字
    // close_char 閉状態の文字
    // hold_char 動作不能(サブカテゴリが無い場合)の文字
    // open_url 開状態の画像
    // close_url 閉状態の画像
    // hold_url 動作不能の画像
    //=================================================================
    var open_char = "(-)";
    var close_char = "(+)";
    var hold_char = "(*)";
    var open_url = "minus.gif";
    var close_url = "plus.gif";
    var hold_url = "hold.gif";
//画像が設定されていれば画像を、設定されていなければテキストを使う
// var open_url = "";
// var close_url = "";
// var hold_url = "";

//カテゴリー設定の配列化
function Category(name, t_category, disp_flag , txt, sort_method, number) {
    this.name = name;
    this.top_category = t_category;
//テキストが指定されなかった時にカテゴリー名をセットするなら以下のコメントを外す
//    if(txt == "" || txt == null){
//        this.text = "";
//    }else{
        this.text = txt;
//    }
    if(disp_flag == "s" || disp_flag == "S"){
        this.init_disp = "S";
    }else{
        this.init_disp = "H";
    }
    if(sort_method == "" || sort_method == null){
        this.s_m = "N";
    }else{
        this.s_m = sort_method.toUpperCase();
    }
    //初期値=10
    if(number == null){
        this.number = 10;
    }else{
        this.number = number;
    }
}

//ツリー風表示 開閉付き
function S_top_category(l1,l2) {
    var top_c_num = 0; //上位カテゴリ数/番号

    document.write("<ul class=\"tree_cate\"");
    for(var i = 0; i < p.length ; i++) {
        //上位カテゴリーが存在しない場合~上位カテゴリーの位置に下位カテゴリーを表示
        if(p[i].top_category == ""){
            //最初でなく、前に下位カテゴリーがあった場合は<div>を閉じる
            if(i != 0 && p[i-1].top_category != p[i-1].name){
             document.write("</div></dl>");
            }
            if(hold_url == "" || hold_url == null){
             document.write("<li> ",hold_char," <a title=\"",p[i].text,"\">",
             p[i].name,"</a></li>");
            }else{
             document.write("<li><img src=\"",hold_url,"\" border=0> ",p[i].name,"</li>");
            }
        //上位カテゴリーが存在するカテゴリーの場合
        }else{
            //上位カテゴリーの表示//////////////////////////////////
            //一番最初か、前のカテゴリーとは異なる上位カテゴリーの場合
            if(i==0 || p[i].top_category != p[i-1].top_category){
                //最初でなく、前に下位カテゴリーがあった場合は<div>を閉じる
                if(i != 0 && p[i-1].top_category != p[i-1].name){
                 document.write("</div></dl>");
                }

                //上位カテゴリー表示本体
                //開閉画像が指定されていなければテキスト表示
                if(open_url == "" || close_url=="" || open_url==null || close_url==null){
                    document.write("<li><div id=\"top_cat_menu" , top_c_num ,"\">" ,
                        "<a href=javascript:cat_menuClick(", top_c_num,")>",open_char,"</a>",
                        p[i].top_category,"</div></li>");
                //開閉画像が指定されていれば画像表示
                }else{
                    document.write("<li><div id=\"top_cat_menu" , top_c_num ,"\">" ,
                        "<a href=javascript:cat_menuClick(", top_c_num,")>",
                        "<img src=\"",open_url,"\" border=0></a>"," ",
                        p[i].top_category,"</div></li>");
                }
                //ここから上位カテゴリーが変わるので、下位カテゴリーのidを変える
                document.write("<div id=\"cat_menu",top_c_num,"\"><dl>");
                //下位カテゴリは表示されている状態、初期表示状態にする
                if(p[i].init_disp == "H"){
                    cat_menuClick(top_c_num);
                }
                ++top_c_num;
            }
            //以上、上位カテゴリーの表示////////////////////////////
            //下位カテゴリーの表示//////////////////////////////////
            //最後のカテゴリーでなく、次も同じ上位カテゴリーの場合~続く
            if(i+1 != p.length && p[i].top_category == p[i+1].top_category){
                document.write(l1,"<a title=\"",p[i].text,"\">",p[i].name,"</a><br>");
            }else{
                document.write(l2,"<a title=\"",p[i].text,"\">",p[i].name,"</a><br>");
            }
        }
    }
    //上位カテゴリーがあった場合はidを閉じる
    if(p[i-1].top_category != "") document.write("</div></dl>");
    document.write("</ul>");
}

//表示切替~上位カテゴリ表示切替付き
function cat_menuClick(cate_id) {
    var catediv = document.getElementById("cat_menu"+cate_id);
    var topcatdiv = document.getElementById("top_cat_menu"+cate_id);

    if( catediv != null && catediv.style.display == "none" ) {
        catediv.style.display = "block";
            //開閉状態は文字
            if(open_url == "" && close_url==""){
                topcatdiv.innerHTML=topcatdiv.innerHTML.replace(close_char,open_char);
            //画像
            }else{
                topcatdiv.innerHTML=topcatdiv.innerHTML.replace(close_url,open_url);
            }
    } else {
        catediv.style.display = "none";
        //開閉状態は文字
        if(open_url == "" && close_url==""){
            topcatdiv.innerHTML=topcatdiv.innerHTML.replace(open_char,close_char);
        //画像
        }else{
            topcatdiv.innerHTML=topcatdiv.innerHTML.replace(open_url,close_url);
        }
    }
}

</SCRIPT>
</head>

<body lang=JA link=blue vlink=purple>

<style>
ul.tree_cate{
    list-style-type : none;
}
ul.tree_cate a:link{
    text-decoration : none;
}
</style>

<script type="text/javascript">
S_top_category("├ ","└ ");
</script>

</body>
</html>


htmlファイルを保存したフォルダにminus.gifだのplus.gifだのhold.gifなんてのを勝手に作って入れてやればその画像がアタマに表示され、minus.gifとplus.gifはトグルで表示が切り替わるハズ....これでひとまずは動くのだがまだまだ美しくない(^^;

[ツリー表示への道の寄り道 その2]の続きを読む

  1. 2006/04/14(金) 12:32:13|
  2. 一覧性創生時
  3. | トラックバック:0
  4. | コメント:0

ツリー表示への道の寄り道 その1

とっととブログの環境変数をいじって完成させればいいものを、すぐ寄り道したくなる悪い癖が出た。折角だから折りたためるようにしましょう。イランとか言ってた癖にねぇ(^^;

さて、折りたたませるためには

1)開閉したい部分には固有のidを付けておく。
2)上位カテゴリの上にマークを付け、クリックされるとメニューを開閉するJavaScriptを呼び出す。
3)呼び出されたJavaScriptは開閉したい部分を示すidを受け取り、表示状態を逆(開なら閉、閉なら開)にする。

この辺りの変更を加えるのが定石らしい。ってコトはS_top_category関数の中味をいじると共に、開閉ボタンがクリックされた時に呼び出される関数を作ってやればよろしい。

こんな感じでしょうか。

<html>
<!-- メニュー折りたたみのテスト -->
<!-- fc2の作法には従っていない -->
<!-- メニューでliタグ使っていない -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<LINK Type="text/css" Rel="stylesheet" Href="test.css">
<title>JavaScriptのTESTその2</title>

<script type="text/javascript">
    var p = new Array();

    //=================================================================
    //カテゴリーの動作設定
    //第一引数:カテゴリー名
    //第二引数:上位カテゴリー名
    //第三引数:説明
    //第四引数:ソート方法(省略時はN)
    // O:古い順、N:新しい順、C:エントリタイトルのコード順昇順、D:降順
    //第五引数:表示エントリ数 省略時は10
    //=================================================================
    p.push( new Category("正統派天幕生活" ,"活動記","正しいキャンプネタ","O",20));
    p.push( new Category("自力系顛末記" ,"活動記","くだらん自力系" ,"O",20));
    p.push( new Category("外道伝" ,"活動記","何かやりました(^^;","O",20));
    p.push( new Category("野外系品評会" ,"道具箱","無駄遣い?"));
    p.push( new Category("贋自転車愛好者" ,"道具箱","自転車系"));
    p.push( new Category("興味本位珍評" ,"道具箱","いろいろ"));
    p.push( new Category("テスト" ,"","","C",20));
    p.push( new Category("JR通勤型" ,"鐵道愛好","","C",20));
    p.push( new Category("JR近郊型" ,"鐵道愛好","","C",20));
    p.push( new Category("JR特急型" ,"鐵道愛好","含急行型","C",20));
    p.push( new Category("私鉄等車輌" ,"鐵道愛好","","C"));
    p.push( new Category("鐵道" ,"寫眞展","ヘタクソ",""));
    p.push( new Category("日常" ,"寫眞展","ナニ撮ってるの?"));
    p.push( new Category("道具愛好癖" ,"戯言","隣に物欲大魔王(^^;","",5));
    p.push( new Category("鐵道趣味独白" ,"戯言","隣に物欲大魔王(^^;","",5));
    p.push( new Category("電脳日記改造" ,"戯言","カスタマイズ?","",5));
    p.push( new Category("一覧性創生時" ,"戯言","カスタマイズ?","",5));
    p.push( new Category("日常的出来事" ,"戯言","","",5));

//カテゴリー設定の配列化
function Category(name, t_category, txt, sort_method, number) {
    this.name = name;
    this.top_category = t_category;
    if(txt == "" || txt == null){
        this.text = name;
    }else{
        this.text = txt;
    }
    if(sort_method == "" || sort_method == null){
        this.s_m = "N";
    }else{
        this.s_m = sort_method.toUpperCase();
    }
    //初期値=10
    if(number == null){
        this.number = 10;
    }else{
        this.number = number;
    }
}


//ツリー風表示開閉付き
function S_top_category(l1,l2) {
    var top_c_num = 0; //上位カテゴリ数/番号

    document.write("<ul>");
    for(var i = 0; i < p.length ; i++) {
        //上位カテゴリーが存在しない場合~上位カテゴリーの位置に下位カテゴリーを表示
        if(p[i].top_category == ""){
            //最初でなく、前に下位カテゴリーがあった場合は<div>を閉じる
            if(i != 0 && p[i-1].top_category != p[i-1].name){
                document.write("</div></dl>");
            }
            document.write("<p>",p[i].name,"</p>");
        //上位カテゴリーが存在するカテゴリーの場合
        }else{
            //上位カテゴリーの表示//////////////////////////////////
            //一番最初か、前のカテゴリーとは異なる上位カテゴリーの場合
            if(i==0 || p[i].top_category != p[i-1].top_category){
                //最初でなく、前に下位カテゴリーがあった場合は<div>を閉じる
                if(i != 0 && p[i-1].top_category != p[i-1].name){
                 document.write("</div></dl>");
                }

                //上位カテゴリー表示本体
                document.write("<div>" ,
                 "<a href=javascript:cat_menuClick(\"cat_menu",top_c_num,"\")>(+)</a>",
                 p[i].top_category,"</div>");
                //ここから上位カテゴリーが変わるので、下位カテゴリーのidを変える
                document.write("<div id=\"cat_menu",top_c_num,"\"><dl>");
                ++top_c_num;
            }
            //以上、上位カテゴリーの表示////////////////////////////
            //下位カテゴリーの表示//////////////////////////////////
            //最後のカテゴリーでなく、次も同じ上位カテゴリーの場合~続く
            if(i+1 != p.length && p[i].top_category == p[i+1].top_category){
                document.write(l1,p[i].name,"<br>");
            }else{
                document.write(l2,p[i].name,"<br>");
            }
        }
    }
    //上位カテゴリーがあった場合はidを閉じる
    if(p[i-1].top_category != "") document.write("</div></dl>");
    document.write("</ul>");
}


//表示切替
function cat_menuClick(cate_id) {
var catediv = document.getElementById(cate_id);
    if( catediv != null && catediv.style.display == "none" ) {
        catediv.style.display = "block";
    } else {
        catediv.style.display = "none";
    }
}



</SCRIPT>
</head>

<body lang=JA link=blue vlink=purple>

<script type="text/javascript">
S_top_category("├ ","└ ");
</script>

</body>
</html>

"test2.html"なんて名前で昨日のファイルが保存されているフォルダに保存して開いてみると....おお、ちゃんと開閉されますな。ここまで来ましたか(^^;
ちなみに、上位カテゴリーを持たないカテゴリーの動作確認用に「テスト」なんてのを加えてます。これは開閉させる必要は無いのでidをつける必要はナシ。本来の動作は上位カテゴリー名なら表示のみ、下位カテゴリーを持たないカテゴリーだったらurlを持たせるようにすればいいワケですな。

もう少し遊びたくなっちゃいました(^^;
  1. 2006/04/13(木) 18:06:52|
  2. 一覧性創生時
  3. | トラックバック:0
  4. | コメント:0

ツリー表示への道 その2

折角総て作るつもりなので、一般的にやられているカテゴリーのツリー化ロジックをそのまま使う気はなく、カテゴリー名は自由につけた。その分JavaScript側で設定してやる必要があるワケです。ここら辺は汎用性の高いモノを作る気なんて全くないのでお気楽に行きましょう。や、画面表示と簡単な配列だけの知識でコーディングしようというのもお気楽過ぎなんだけど(^^;

まずは自前の配列を作ってそこにカテゴリー情報を格納して表示させるだけのJavaScriptを作ってみますか。配列の要素としては

・カテゴリー名
 これがサブカテゴリー相当となる
・上位カテゴリー名
 第一階層のカテゴリー名
・一言コメント
 そのうちツールチップでも出しますか(^^;
・エントリー表示方法フラグ
 まだ使わないけどこれがミソになる(ハズ)
・エントリー表示件数
 使うかどうか判らんけど(^^;

この位にしておきますか。必要ならあとで変えればいいし、結構いい加減。で、配列を作ってこれらの要素を持たせて表示させるJavaScriptを作ってやる。もうねぇ、ミヨウミマネ(^^;
htmlとして

<html>
<!-- カテゴリー配列を宣言してツリー表示させるテスト -->
<head>
<META Http-Equiv="Content-Style-Type" Content="text/css; charset=ECU">
<LINK Type="text/css" Rel="stylesheet" Href="test1.css">
<title>JavaScriptのTESTその1

<script type="text/javascript">
    var p = new Array();
    var l1 = "├ ";
    var l2 = "└ ";

    //=================================================================
    //カテゴリーの動作設定
    //第一引数:カテゴリー名
    //第二引数:上位カテゴリー名
    //第三引数:説明
    //第四引数:ソート方法(省略時はN)
    // O:古い順、N:新しい順、C:エントリタイトルのコード順昇順、D:降順
    //第五引数:表示エントリ数 省略時は10
    //=================================================================
    p.push( new Category("正統派天幕生活" ,"活動記","正しいキャンプネタ","O",20));
    p.push( new Category("自力系顛末記" ,"活動記","くだらん自力系" ,"O",20));
    p.push( new Category("外道伝" ,"活動記","何かやりました(^^;","O",20));
    p.push( new Category("野外系品評会" ,"道具箱","無駄遣い?"));
    p.push( new Category("贋自転車愛好者" ,"道具箱","じてんこ"));
    p.push( new Category("興味本位珍評" ,"道具箱","いろいろ"));
    p.push( new Category("JR通勤型" ,"鐵道愛好","","C",20));
    p.push( new Category("JR近郊型" ,"鐵道愛好","","C",20));
    p.push( new Category("JR特急型" ,"鐵道愛好","","C",20));
    p.push( new Category("私鉄等車輌" ,"鐵道愛好","","C"));
    p.push( new Category("鐵道" ,"寫眞展","ヘタクソ",""));
    p.push( new Category("日常" ,"寫眞展","ナニ撮ってるの?"));
    p.push( new Category("道具愛好癖" ,"戯言","","",5));
    p.push( new Category("鐵道趣味独白" ,"戯言","","",5));
    p.push( new Category("電脳日記改造" ,"戯言","カスタマイズ?","",5));
    p.push( new Category("一覧性創生時" ,"戯言","一覧性向上のために....","",5));
    p.push( new Category("日常的出来事" ,"戯言","","",5));

//カテゴリー設定の配列化
function Category(name, t_category, txt, sort_method, number) {
    this.name = name;
    this.top_category = t_category;
    if(txt == "" || txt == null){
        this.text = name;
    }else{
        this.text = txt;
    }
    if(sort_method == "" || sort_method == null){
        this.s_m = "N";
    }else{
        this.s_m = sort_method.toUpperCase();
    }
    //初期値=10
    if(number == null){
        this.number = 10;
    }else{
        this.number = number;
    }
}

//ツリー風表示
function S_top_category() {
    var i;
    for(i = 0; i < p.length ; i++) {
        //上位カテゴリーが存在しない場合~上位カテゴリーの位置に下位カテゴリーを表示
        if(p[i].top_category == ""){
            document.write("<p>",p[i].name,"</p>");
        //上位カテゴリーが存在するカテゴリーの場合
        }else{
            //一番最初か、前のカテゴリーとは異なる上位カテゴリーの場合
            if(i==0 || p[i].top_category != p[i-1].top_category){
                document.write("<p>",p[i].top_category,"<br>");
            }
            //最後のカテゴリーでなく、次も同じ上位カテゴリーの場合~続く
            if(i+1 != p.length && p[i].top_category == p[i+1].top_category){
                document.write(l1,p[i].name,"<br>");
            }else{
                document.write(l2,p[i].name,"<br>");
            }
        }
    }
}

</SCRIPT>
</head>

<body lang=JA link=blue vlink=purple>

<script type="text/javascript">
S_top_category();
</script>

</body>
</html>

cssとして

BODY{ /*BODY要素のスタイル指定*/
font-size : 10pt;
text-align : left;
line-height : 1em;
margin : 2em;
}

こんな感じでいいんではないかと。現段階でCSSまでは作る必要無いんだけど、そのうちテンプレートを作る事を考えて今のうちから作っている。
それぞれ"test1.html""test1.css"として保存して同じフォルダに入れてtest1.htmlを表示させると

活動記
├ 正統派天幕生活
├ 自力系顛末記
└ 外道伝

道具箱
├ 野外系品評会
├ 贋自転車愛好者
└ 興味本位珍評

鐵道愛好
├ JR通勤型
├ JR近郊型
├ JR特急型
└ 私鉄等車輌

寫眞展
├ 鐵道
└ 日常

戯言
├ 道具愛好癖
├ 鐵道趣味独白
├ 電脳日記改造
├ 一覧性創生時
└ 日常的出来事

にひひ、一応表示されてますな。配列の扱いはこれでいいらしい。ま、ヘタクソだとか冗長だとか実行速度が....なんてコトはこの際ナシ。動けばいいのよ、動けば(^^;

配列の要素を設定する部分をサブルーチン(関数)化しているのだが、ここで配列の要素の初期化を行なっている。配列の要素はプロパティーのように扱う事が出来るようで、文字でも数字でも配列に押し込めるところが楽。昔のC言語では構造体の定義をしなきゃいけなかったんだけどねぇ....って、トシがバレます(^^;
一つのカテゴリーに名前やら上位カテゴリーやらコメントやら幾つかの要素があり、カテゴリーは複数あるので二次元配列になってるワケですな。あまり意識せずに使ったが、このあたりもCと異なって扱いはかなり楽な気がする。
あ、「//」以下はコメントとして処理されるそうで、ソース内随所に説明を加えております。

本当はブログが持っているカテゴリー情報を取得してこれを加工するのが汎用性も高いんだろうけど、
・カテゴリー名に余計な"[活動]"だとか"モノ:"なんてのを付けたくない。
・カテゴリーの表示順をブログとメニューで独立させたい。
・カテゴリー毎に表示方法など独自情報を持たせたい。
などのワガママを満たすためには致し方ないところ。

色々と面倒なトコロもあるけど、いいじゃない、素人のお遊びなんだから(^^;
ここまでで下調べは完了。と思ったらいらんコト考えちゃいまして....また明日。
  1. 2006/04/12(水) 18:29:59|
  2. 一覧性創生時
  3. | トラックバック:0
  4. | コメント:0

寄り道



今日もブログカスタマイズネタはお休み、ってか、別に毎日続ける必要も無いんだよな(^^;
先の週末は乗り鉄してていわゆるアウトドア系はナシと思っていたのだが、朝7時過ぎに帰宅したために時間はある。「諸般の事情」はあれど、一家で近場に出かけて思い思いのお遊び。別に幕営もなければ火遊びも無いのだが楽しく遊んできた。やー、アレもコレも楽しいんだよなぁ(^^;
  1. 2006/04/11(火) 17:34:27|
  2. 日常的出来事
  3. | トラックバック:0
  4. | コメント:2

ふつふつ



1日たって乗り鉄旅の余韻がジワジワと。やー、アレも良かった、コレも良かったと思い返してはニタニタしてる。元々ミョーなのだが益々ミョーなワタシ。こんな想いじゃブログカスタマイズネタなんて書いてられないので、ちょいと先日のネタ。

最近の車輌はコストダウンのせいか、「いかに快適に旅できるか」という部分に金を掛けていない気がする。特にJR東日本の車輌はいけない。ロングシートのE231系なんて、長時間乗る気になりません。旅ではない、通勤の延長。それに較べてJR東海の313系やJR西日本の223系は転換型セミクロスシートでまだ旅の感じがする。それでも古いクロスシートが醸し出す雰囲気には適わないですな。
窓のそばに備え付けられた小さなテーブルにお茶だの弁当を置いて流れる車窓を眺める....ノンビリとそんな旅が出来るのも今のうちだけかも知れない。
  1. 2006/04/10(月) 21:15:15|
  2. 鐵道趣味独白
  3. | トラックバック:0
  4. | コメント:0

ツリー表示への道 その1

さて、JavaScriptですよ。まずは手持ちの参考書をめくったり、WEB上で相性の合うページを探したり。で、ボチボチ始めた。ふむ、それ程ややこしくはないようですな。
あ、始める前に一言。セキュリティー対策等でJavaScriptをオフにしている場合、これからのハナシは全く無意味。

まずはどこにでもあるようなブラウザへの表示をしてみましょう。

<html>
<head>
<META Http-Equiv="Content-Style-Type" Content="text/css">
<title>JavaScriptの準備
</head>
<body lang=JA link=blue vlink=purple leftmargin="0" topmargin="0" bottommargin="0">
<SCRIPT LANGUAGE="JavaScript">
document.writeln("HELLO Javascript","<br>");
document.write("こんにちは");
</SCRIPT>

</body>
</html>

こんなのをtest1.htmとでも名前付けてローカルに保存し、ブラウザで見て見ると

HELLO Javascript
こんにちは

なーんて表示されてるワケ。ぷぷっ、面白い。
配列あたりになるとCだのVBだのとちょっと違っててこんな使い方をするらしい。

<html>
<head>
<META Http-Equiv="Content-Style-Type" Content="text/css">
<title>JavaScriptのTEST
</head>
<body lang=JA link=blue vlink=purple leftmargin="0" topmargin="0" bottommargin="0">

<!--配列-->

<SCRIPT LANGUAGE="JavaScript">
var colary = new Array(5)
colary[0] = "green";
colary[1] = "red";
colary[2] = "blue";
colary[3] = "pink";
colary[4] = "orange";

for (var i = 0; i < 5; i++) {
document.writeln("conlary[", i, "] = ", colary[i],"<BR>");
}
</SCRIPT>
</body>
</html>

これだと

conlary[0] = green
conlary[1] = red
conlary[2] = blue
conlary[3] = pink
conlary[4] = orange

こんなカンジに表示される。ちなみに配列は添字をテキストとしてプロパティー風に扱うことも出来るらしい。このあたりは後ほど。

あとは標準の関数というかメソッドを使っていけば大抵の事は出来そう。では明日配列に必要な情報をセットし、これをツリー表示させてみますか。
  1. 2006/04/09(日) 17:15:33|
  2. 一覧性創生時
  3. | トラックバック:0
  4. | コメント:0

乗り鉄三昧





ブログカスタマイズネタですっかりインドア派に変身したワタシ....なワケないか(^^;
この週末はテントはナシの乗り鉄三昧。これでもアウトドアと言うのかビミョーなトコロであるが、兎に角いっぱい乗りました。どんな経路か、乗り換えた駅だけちとご紹介。

4/7
(自宅)→千葉→新宿
新宿→松本[ムーンライト信州]
4/8
松本→中津川→名古屋→大垣→米原→長浜→敦賀→福井→金沢→直江津→新潟
新潟→大宮[ムーンライトえちご]
4/9
大宮→宇都宮....のつもりが、諸般の事情から大宮から直接帰宅したのだが、30時間位乗り続けていた感じ。ムーンライト連泊ってのも鉄にとってはそう珍しくないと思うけど世間一般からするとおバカ、家に帰って久し振りに風呂に入れるのが嬉しかったりする。

いや、でも楽しかったけどまだ乗り足りない気がするなぁ。今日の予定が果たせなかったのはちと寂しい。課題も大体判ったし、夏も何かしよっと(^^;
  1. 2006/04/08(土) 00:00:00|
  2. 外道伝
  3. | トラックバック:0
  4. | コメント:0

準備完了?

ムシムシとやっていたカテゴリー再構築もやっと完了。きっと抜けもあるしビミョーな部分も多いんだけど、ひとまず終了。ひー、目が疲れた(^^;

ではこれをアップロードしますか。アップロードする前にカテゴリーを削除し、新しいカテゴリーを登録しておく。これは手作業ですな、と言ってもたいした作業ではナシ。次に現在のエントリーを総て削除する。あ、削除したら復活は出来ないので、念のために寸前のバックアップを取っておいた方がいいかもしれませんな。
エントリーの一括削除機能は準備されていないようなので、ムシムシ消すしかないみたい。とは言うものの、「過去の記事一覧」で100件表示させ、一番下の方にある「全て選択する」をポチッとして、その横のリストボックスから「全て削除する」を選んで「実行する」ボタンを押すだけ。エントリーが200以上あってもこの操作を3回繰り返せば全エントリーが削除されるワケですな。これでエントリーはカラ、カテゴリーを修正したログをアップロード出来るようになった。

アップロードは管理者メニューで「ツール」「ログのインポート」を選んでやるとファイルを指定する画面が出てくる。ここで変更したファイルを指定してやればオシマイ。ただし、エントリー数があまりに多いとうまくいかないというハナシもアリ。ワタシの240程度のエントリーでは全く問題ございません。

ここまでで今日のネタはオシマイ。一日のネタとしては少ない気もするんだけど、ソースを掲示したりしてるとすぐにエントリーが長くなっちゃうんですな。ま、ボチボチね。

fc2でない方もおられるかも知れないので、fc2の管理画面なんぞを貼っておきます(^^;


  1. 2006/04/07(金) 17:38:12|
  2. 一覧性創生時
  3. | トラックバック:0
  4. | コメント:0

準備

「勉強しながら....」なーんて書いておきながら、ワタシはナマケモノ、すぐに現実逃避。や、まずは準備としてカテゴリーの再構築が必要なのよ(^^;
カテゴリーは

(-)活動記
├ 正統派天幕生活
├ 自力系顛末記
└ 外道伝

(-)道具箱
├ 野外系品評会
├ 贋自転車愛好者
└ 興味本位珍評

(-)鐵道愛好
├ JR通勤型
├ JR近郊型
├ JR特急型
└ 私鉄等車輌

(-)寫眞展
├ 鐵道
└ 日常

(-)戯言
├ 道具愛好癖
├ 鐵道趣味独白
├ 電脳日記改造
├ 一覧性創生時
└ 日常的出来事

こんな具合かな。現在は

日々是平穏
贋自転車愛好者
自力移動的活動
極私的道具考
鐵道偏愛駄作寫眞展
外道伝
正統派天幕生活
興味本位珍評
一覧性創生時

というカテゴリー分けで、だいぶ考えてカテゴリーを付け直さないといけない。や、今回の一連のネタは「戯言-一覧性創生時」に入れるつもりでカテゴリーを新設していたんだけど、付け直さないといけないエントリーは240程度。頭痛が痛い(^^;
コレを「過去の記事の管理」で1つずつ変更するのはトンでもないハナシなので、以前書いたように、MT形式で全記事を取り出してエディタで修正し、再度読み込ませる事にする。

エクスポートは管理者ページトップの「ツール」から「データのバックアップ」を選択し、
・ FC2ブログ形式でバックアップする
をクリックするとテキストファイルをダウンロードする事が出来る。ファイルはコードがEUCなのでそれなりに扱って下され。「fc2形式」となっているが、コレはMTと同じスタイルですな。一例としてこのブログの最初のエントリーを示す。

AUTHOR: ぼうず
TITLE: で、どうよ?
STATUS: Publish
ALLOW COMMENTS: 1
CONVERT BREAKS: default
ALLOW PINGS: 1
PRIMARY CATEGORY: 日々是平穏
CATEGORY: 日々是平穏

DATE: 12/21/2004 12:18:40
-----
BODY:
BLOG、だそうで。まだよく判ってないんだけど。
容量1Gにクラッときて始めたけど、あっちでもこっちでもやると大変だよね、きっと。
ま、しばらくはお試し、というコトで。

画像も貼れるんだから試さないと。なんてったって1G、使いであるなぁ。でも毎日画像貼ってたらあっという間だよね。って、毎日書くのか?(笑)
<a href="http://blog-imgs-27.fc2.com/b/o/s/boseskinhead/20041221101818.jpg"><img src="http://blog-imgs-27.fc2.com/b/o/s/boseskinhead/20041221101818.jpg" alt="20041221101818.jpg" border="0"><br clear="all">
-----
EXTENDED BODY:
追記したいコトがあってテスト兼ねた追記。
これまで頂いたコメントを今日追加。そのため日時は滅茶苦茶。

オフィシャルなもんじゃないし、許して下さい。
-----
EXCERPT:
-----
KEYWORDS:
-----
--------

最初の方にある2行、

PRIMARY CATEGORY: 日々是平穏
CATEGORY: 日々是平穏

がカテゴリーなワケ。サブカテゴリーを扱えないんだから"PRIMARY CATEGORY"は空欄でもいいじゃん、と思うのはワタシだけ?"PRIMARY CATEGORY"を取得する隠し変数があるんじゃないかと思うのもワタシだけ?(^^;

下らない呟きは置いておいて、1件ずつ読みながらカテゴリーを変えていきましょう。ココは力技しかない。ムシムシと頑張っております(^^;
  1. 2006/04/06(木) 18:38:01|
  2. 一覧性創生時
  3. | トラックバック:0
  4. | コメント:0

調査

まずはfc2の環境変数を調べてみる。正式版はココにありますわ。基礎を理解していないだけに判りづらいんだけど、

<!--category-->~<!--/category-->

なんてエリアがあって、その中ではカテゴリーの情報が扱えるらしい。確かにfc2標準の「カテゴリー」表示プラグインのhtmlは

<ul>
<!--category-->
<li &align><a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a></li>
<!--/category-->
</ul>

なんて具合になっている。ここをいじればいい....と思ったら、<!--category-->~<!--/category-->はカテゴリーの情報しか取得できず、ここで過去のエントリーを取得する変数が無い様子。過去のエントリー一覧を取得するためには

<!--titlelist-->~<!--/titlelist-->

なんてのが準備されている。ところがコレ、<!--titlelist_area--> ~ <!--/titlelist_area-->内でしか使えず、一覧モード時(?allでブログを表示させた場合)しか全エントリー一覧を取得する事は出来ないらしい。 ふむふむ、サイドバーに表示されるメニューの中に、過去エントリー付きカテゴリー一覧を表示する夢は断たれました....

ダラダラと下らんコトを書き綴ってるが、カテゴリー表示関係のワタシのキモチを整理すると

1)大きなカテゴリーの中でもいくつかのカテゴリー分けはしたい。(2段階でいいけどね)
2)カテゴリーのツリー表示は出来ても出来なくてもいい。(出来た方が判りやすけどね)
3)カテゴリーごとにエントリーの表示方法(日付昇順・降順、タイトル昇順・降順等)を変えたい。
4)カテゴリーごとにエントリータイトルの表示数を変えたい。

この位の事が出来ると過去の内容も参照しやすくなるのではないかと勝手に思っている。 1)を実現するためにはカテゴリーを新設して全エントリーのカテゴリを変更する必要がある。記事1つ1つを変更するのは面倒だが、幸いな事にfc2はMTフォーマットでエクスポート・インポート出来るので、一旦エクスポートした後エディターで"CATEGORY:"部分を変えてやればよろしい。このブログの場合、200以上あるエントリーを変更するのも面倒だけど、まぁコレは問題なし。カテゴリー名を決める段階で2)をどうするか決めればいいので、ここまでは技術的敷居は極めて低い。残るのは3)4)の敷居が高いコトが昨日までで判ったワケ。 でも、ちと待てよ、過去エントリー一覧を常時表示させる必要は無いんじゃないか、とも思うワケ。そりゃ常時表示されていた方が判りやすいかも知れないが、それほど長くないサイドメニューにエントリーのタイトルだけ表示されていても判り辛いかも知れぬ。ならばカテゴリーツリー表示機能付き一覧表示用テンプレートを自作し、過去エントリー参照専用画面としてエントリーの本文もちょこっと表示させた方が使い勝手は優れている鴨しれませんな。フムフム、ではこれに挑戦してみましょうか! とは言っても、HTMLは雰囲気で判ってる程度、CSSもちゃんと学ばないとイケナイ。JavaScriptも理解していないので、

1)サイドメニューに開閉式カテゴリーツリー表示を加える。
2)過去エントリー参照画面を作る。

の2段階での挑戦を計画君。 1)ではJavaScriptとプラグインのお作法を学び、大体判ってきた所でテンプレートの製作に取り掛かる戦法。や、テンプレート作るのにプラグインのお作法は勉強せんでもいい、とゆーツッコミはナシ。いいのいいの、やってみたいんだから。ボチボチやっていく様をブログのネタにしつつ、作っていく事にしますか(^^;
  1. 2006/04/05(水) 18:26:39|
  2. 一覧性創生時
  3. | トラックバック:0
  4. | コメント:0

リスト表示

昨日ご紹介のカテゴリーのツリー化は技術的には大変興味がある。
一方で、この方法を採らずとも「活動記」「├正統派天幕生活」「├自力系顛末記」「└外道伝」ってカテゴリーを作り、その表示順で表示させても似たようなコトは実現出来る。

活動記(0)
├正統派天幕生活(10)
├自力系顛末記(2)
└外道伝(5)
道具(0)


ってな感じに表示されることになる。ツリー化との差は折りたためないコトと「活動」がリンク表示になっているコト。や、各エントリーが属するカテゴリー名が

└その他

になるため、エントリー毎に表示されるカテゴリーを見られちゃうとちと悲しいか....総合的に考えるとやはりツリー化に分があるかも知れない。ま、昨日紹介のツリー化もエントリー毎に表示されるカテゴリーは

[活動記]自力系顛末記

なんてイラナイ文字まで入ってくるんだけど。ツリー化すると擬似階層化されてだいぶ見やすくなるコトが判ったのだが、コレだけでは片手落ち....

ブログは日記風に日々の戯言でよろしい、というのも一つの考え方だと思う。今までそんな考え方でダラダラと書いているのだが、HTMLを使ったHPに取って変わる可能性は充分にあると思う。何より楽だしね。
しっかりとカテゴリ分けしてエントリーを分類してやれば下手なHPよりも見やすくなると思うのだが、ブログの一番の問題点は過去エントリーの参照性が悪いことだろう。これを解消するための一つの方法がサブカテゴリだと思っているのだが、カテゴリーの表示方法を変えただけで完全には解決しないと思うんだな。

ツリー化表示したとしても、例えば「正統派天幕生活」サブカテゴリー(実際には「[活動記]正統派天幕生活」カテゴリねー)を表示させた時の記事一覧は古い順に表示させたい。一方で他のカテゴリー、例えば「道具箱-野外系品評会」なんてのは新しい順にしたかったり、「鐵道愛好-JR近郊型」なんてのはタイトルのコード順(=形式の昇順)に表示させたい。更に欲を言うならば、カテゴリーによって表示させる記事数を変えたかったりするワケ。活動ネタならば表示数は多い方が好みだし、「戯言」なんて最近のネタがいくつか表示されていればいいだろうし。カテゴリによって見たい・見せたい順番・項目数が異なると思うワケです。
こうなってくると本腰を入れないとダメですな。ちょちょいとプラグインをいじってお茶を濁すコトはムリ。JavaScriptとfc2の環境変数の理解は絶対に必要な条件なワケ。

むむー、キライではないけど面倒だなぁ。といいつつちとやってみようか(^^;
  1. 2006/04/04(火) 17:29:04|
  2. 一覧性創生時
  3. | トラックバック:0
  4. | コメント:0

サブカテゴリ?

FC2も機能向上を果たしてはいるものの、これを書いている06/4現在ではサブカテゴリーを扱うことは出来ない。livedoorに負けてるなぁと嘆いてもしかたないし、livedoorの方々にはlivedoorなりの悩みがあるようだ。
ワタシが「サブカテゴリ!」と騒ぐのはカテゴリを階層化したいわけですな。「活動」やら「モノ」やら「鉄」の中で更に細分化したカテゴリを作りたいワケ。よく解っていないが、livedoorではカテゴリー1、2と指定出来てマトリックス的な見方が出来るらしい。例えばパソコン関連のブログを書いていたとしてカテゴリー1はハード関連(AT/mac/UNIXなど)、カテゴリー2はソフト関連(プログラミング/ワープロ/画像処理など)なんて具合に分けられる、というコトだろうか。

ワタシの場合はどうか。発信したい大分類項目と言えば「活動報告」「モノネタ」「鉄ネタ」「写真」「戯言」位のもの、この大分類の下にいくつかの小分類があるイメージである。「鉄ネタ」と「写真」で多少のカブリはあるかも知れないが分類は可能なので、よくよく考えると最低限カテゴリーの階層化が出来ればいいコトになる。ソウナノカ、と思って検索してみるとJavaScriptを使ってカテゴリーのツリー化を実現しているブログはいくつかある。fc2でよくやられている方法は「活動」なんてカテゴリがあり、その中で「キャンプ」「自力・野営」「その他」なんて具合に分けたい場合、

[活動記]正統派天幕生活
[活動記]自力系顛末記
[活動記]外道伝

と3つのカテゴリを作り、JavaScript側でこれを分解して表示上

(-)活動記
├ 正統派天幕生活(10)
├ 自力系顛末記(2)
└ 外道伝(5)

としているんですな。あ、カッコ内はエントリー数ね。ちなみにlivedoorやJUGEMでは区切り文字として「:」を使ったスクリプトが出回っている様子。

活動記:正統派天幕生活
活動記:自力系顛末記
活動記:外道伝

ってな具合ですな。
コレはコレで使い道はあると思う。このメリットは「活動」の部分にエントリー数が出ていなくてちゃんとツリー表示になっているコト、もう一工夫すると折りたためて、最初は

(+)活動記
(+)道具箱
(+)鐵道愛好
(+)寫眞展
(+)戯言

なんて具合に表示され、(+)部分をクリックすると

(-)活動記
├ 正統派天幕生活(10)
├ 自力系顛末記(2)
└ 外道伝(5)
(+)道具箱
(+)鉄
(+)写真
(+)戯言

なんて具合に美しく表示されるようになるコトにあると思う。確かに良いんだけどね....長くなったのでまた明日(^^;
[サブカテゴリ?]の続きを読む

  1. 2006/04/03(月) 12:39:28|
  2. 一覧性創生時
  3. | トラックバック:0
  4. | コメント:0



千葉県下は桜の時期。エイプリルフールで雪の写真なんて出したんで、今日はこの週末の桜の様子でもお届け。満開とはいかなかったが、桜の下でテント張るのもなかなかオツですな。そんなに大きな焚き火をしないでも暖かいし、いい季節であります(^^;

年度が変わったし新ネタで攻めようと思っていたのだが、ダーツネタが中途半端。まいっか、ダーツは時事ネタじゃあるまいし忘れた頃にネタ出しするとして、ちょいと新企画でもやってみます(^^;
  1. 2006/04/02(日) 15:56:57|
  2. 外道伝
  3. | トラックバック:0
  4. | コメント:0

春の雪

凄い雪です(@.@;



[春の雪]の続きを読む

  1. 2006/04/01(土) 00:00:00|
  2. 外道伝
  3. | トラックバック:0
  4. | コメント:0

かうんたぁ(06.4.28~)


カレンダー

03| 2006/04 | 05
Sun Mon Tue Wed Thu Fri Sat
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 - - - - - -

プロフィール

ぼうず

私的カテゴリー

最新の記事

私的コメントリスト

私的トラックバック

私的月別アーカイブ

私的リンク

=> 詳しくはコチラ をドーゾ。

タグリスト

Nゲージ 野営 GMキット 鉄道 レイアウト 急行 幕営 電機 列車 時刻表 エアガン キャンプ 外道 特急 Nゲージ バックパック 鉄道模型 小湊 JavaScript  東海道本線 ビュッフェ 東海 

ブログ内検索

RSSフィード

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。