1. としきのやしき正門
  2. 電算棟
  3. 板塀(掲示板)の手入れ(改造)
  4. ツリー表示変更

ツリー表示変更

私が掲示板のオリジナルスクリプトに加えた改良の中で、一番派手なのが、ツリーの表示方式を変更したところでしょう。
オリジナルでは、階層構造を表現するのにリスト形のタグを使っていましたが、見た目もツリーになるように、ここを罫線素片を使った物に変えました。
スクリプトは、デフォルトのリスト表示の部分を例にとると、こんな感じですね。


    $i=0;
    @x=();
    $padding = "";
    $x[0] = 0;
    open(IN,"$logfile") || &error("Open Error: $logfile");
    if ($mode ne "past") { $top = <IN>; }
    while (<IN>) {
        ($no,$reno,$lx,$sub,$email,$url,$name,$dat,$msg,$t,$h,$pw,$w,$oya,$sml,$child) = split(/<>/);

        if ($reno == 0) { $i++; }
        if ($i < $page + 1) { next; }
        if ($i > $page + $p_tree) { next; }

        $x[$lx+1]=$child;
        $x[$lx]--;

        $padding = " ";
        for ($j=0;$j<$lx;$j++){
            $padding .= ($x[$j]<=0)?" ":"┃";
        }
        $padding .= ($x[$lx]<=0)?"┗":"┣";

        # 所定時間以内の投稿は[NEWマーク]表示
        if ($time - $t > $new_time * 3600) { $newsign = ""; }
        else { $newsign = $newmark; }

        # 記事タイトル長調整
        $sub = &cut_subject($sub);

        # 過去記事
        if ($mode eq "past") {
            if ($lx == 0) {
                print "<a href=\"$script?mode=allread&amp;no=$no&amp;page=$page\">$treehead</a> ";
            } else {
                print "$padding";
            }
                print "<a href=\"$script?mode=allread&amp;pastlog=$in{'pastlog'}&amp;no=$oya&amp;page=$page&amp;act=past\#$no\">$no\.$sub</a> - <strong>$name</strong> $dat \n";
        # 削除記事
        } elsif ($pw eq 'DEL') {
            if ($lx == 0) {
                if ($i != $page + 1) {print "</td></tr></table>";}
                print "<dd><br><table summary=\"$sub\"><tr>$td_nowrap<a href=\"$script?mode=allread&amp;no=$no&amp;page=$page\">$treehead</a> - ";
                print "$no\.$sub - $dat\n";
            } else {
                print "$padding";
                print "$no\.$sub - $dat\n";
            }
        # レス記事
        } elsif ($lx != 0) {
            print "$padding";
            print "<a href=\"$script?mode=msgview&amp;no=$no&amp;reno=$reno&amp;oya=$oya&amp;page=$page\">$no\.$sub</a> - <strong>$name</strong> $dat $newsign\n";

        # 親記事
        } else {
            if ($i != $page + 1) {print "</td></tr></table>";}
            print "<dd><br><table summary=\"$sub\"><tr>$td_nowrap<a href=\"$script?mode=allread&amp;no=$no&amp;page=$page\">$treehead</a> ";
            print "<a href=\"$script?mode=msgview&amp;no=$no&amp;reno=$reno&amp;oya=$oya&amp;page=$page\">$no\.$sub</a> - <strong>$name</strong> $dat $newsign\n";
        }
        print "<br>";
    }
    close(IN);
    print "</td></tr></table></dd>\n";
    if ($mode ne "past") { print "</DL>\n"; }

ここで例にあげたのはデフォルトで表示されるツリー形式のリストの部分ですが、個別の発言表示の部分と一括表示の部分のツリー表示も変更しています。ただ、コードはほとんど同じですので省略します。

ポイントとなるのは、$childという変数です。
これは、その発言自身にいくつの子発言がぶら下がっているかという事を示すデータです。
もう1つ、$lxという変数も重要です。これは、その発言が何番目の階層にいるかという事を示すデータです。
この2つのデータから、作業用の配列変数$xに、どの階層にはいくつの発言があるかという情報を格納します。そして、$xの情報を基に、そのとき表示しようとしている発言のタイトルに適した罫線素片の情報を$padding変数に組み立てて、$padding変数と発言タイトルを表示するという段取りになっています。

実は、この部分ではもうひとつ、見栄えにかかわるトリッキーなことを行っております。
ツリー全体をtableタグで囲んであるのです。
こうすることにより、ブラウザの表示ウィンドウの横幅以上にツリーの階層が深くなっても各行の折り返しが発生せず、見た目を維持することができるわけです。ただ、これはデメリットもあって、そのように横が広くなってしまった場合に横スクロールが必要になってしまうわけで、これを好まない人もいるようです。ただ、掲示板オーナーである私が、そのようなデメリットが存在することを承知で見栄え優先のためにこれを選択したわけですから、利用者の方には我慢していただくほかはありません。



板塀(掲示板)の手入れ(改造)
電算棟
やしきの間取り


Copyright © 2006-2007,2010 としき
このページの情報及び著作権は「としき」に帰属します。
Toshiki / toshiki @ jcom.zaq.ne.jp