サイト概要ログ表示用のデザインテンプレート

Yomi-Searchログ表示デザインに関してのお話

Yomi-Search設置に成功してしばらくすると、ログ表示をイメージどおりにカスタマイズしてみたくなるかと思います。いくらかでもお役に立てればと思い、ログ表示とソースコードの関係を、簡単に書いてみました。
まずログ表示を読む

まず、template/kt.htmlにおいて、ログ表示の部分がどこか?ということですが、純粋にテーブル表示の部分のみを云うのであれば
オリジナルのkt.htmlにおいては
289行目あたりから370行目あたりでしょう。

そこで、秀丸、あるいは窓の社などのテキストエディタで、まずkt.htmlを開き、
そのあたりをにらめっこしてください。

すると、$Slog[0]とか$Slog[12]とかが見えると思います。
これをデータ変数と云います。データとは文字通り、登録した方々のサイトデータです。「タイトル名」とか、「URL」、あるいは「サイト紹介文」などですね。

ですから、結局のところログ表示のデザインとは、このデータ変数を、テーブル内にどのように配置するかということになるわけです。
そこでまずデータ変数の具体的な内容をチェックしておきましょう。


上記データ変数は実際のログ表示で、以下のような配置になっています。

$Slog[1] &put_icon(マーク表示)
更新日:$Slog[4] [修正・削除$Slog[0]] [管理者に通知$Slog[0]]
$Slog[12]
$Slog[10]カテゴリ表示
$Slog[6] サイト紹介文
$Slog[7] 管理人コメント

これを仮データで実装してみると

ホームページ登録Rio-net-Search

更新日:2008/07/09(Wed) 19:31 [修正・削除] [管理者に通知]
[サーチエンジン:Yomi-Search系] [サーチエンジン:総合]
紹介文です。
管理人コメントです。

のように表示されるわけです。

次に、ソースコードと、実際の表示の関係を示していきますが、
その前に、ちょっと、覚えておけば楽になるポイントが
print<<"<!--HTML-->";<!--HTML-->は何かな?ということです。。

これは
「ここはPerl コードではありません。この間は、htmlで書いてありますよ。」
というような意味です。

ホント、「確かに」、この間はhtmlで書いていますね。
print<<"EOM";〜EOMも、同じような意味です。

つまり、言い方を変えれば、この間はHTMLで書かなければいけませんよ。ということになのです。

これは収穫!
このおせっかい話で最も強調したいところなんでした。
これを理解しているだけで、早い人はなんとなく、書き換えが出来るようになったりします。

余談はさておいて、
ソースを読むときは、繰り返しますが
print<<"<!--HTML-->";
<!--HTML-->
間は htmlで書かれている実行文だと思って下さい。
表示されているのは、この実行文なわけです。

また、たいていは
print<<"<!--HTML-->";の直前には
条件文が書かれていることが有ります。

たとえば、
第4番目のバナー表示のところ

if($Slog[12]){
# (↑修正不可↑)-->
print<<"<!--HTML-->";
<br><img src="$Slog[12]" width=$EST_reg{Mbana_w} height=$EST_reg{Mbana_h}>
<!--HTML-->
#<!--(↓修正不可↓)
}

この中で、最上段の箇所

if($Slog[12]){

これは
「もし、登録データ中、バナーデータ $Slog[12]) が有った場合は」
という意味の条件式で、すぐ下の
print<<"<!--HTML-->";から<!--HTML-->間に書かれている
「バナー表示」の実行文

<br><img src="$Slog[12]" width=$EST_reg{Mbana_w} height=$EST_reg{Mbana_h}>

を条件づけているわけです。

なんとなくわかってきたと思いますが
そんなところから始めればいいと思います。後は、ソースコードに親しむということでしょうか?

以上のことを踏まえながら、じっと眺めていれば
自然とわかっていくようになります。

#<!--(↓修正不可↓)
&EST_reg;
sub PRlog{
local($jump_url);
if($EST{rank_fl}){
$jump_url=$Slog[2];
$jump_url=~s/(\W)/'%' . unpack('H2',$1)/eg;
$jump_url="$EST{cgi_path_url}$EST{rank}?mode=link&id=$Slog[0]&url=$jump_url";
}
else{$jump_url=$Slog[2];}
# (↑修正不可↑)-->
print<<"<!--HTML-->";
<!-- ログ表示 -->
<table border=3 cellpadding=7 id=log>
<tr id=log-1>
<td><a href="$jump_url" target="_blank" style="text-decoration:none">■</a> <a href="$jump_url"><font size="+1"><b>$Slog[1]</b></font></a>
<!--HTML-->
ホームページ登録Rio-net-Search

&put_icon; #<!-- ←アイコンを付加 -->

print<<"<!--HTML-->";
<br><br><font size="-1">更新日:$Slog[4][<a href="$EST{cgi_path_url}regist_ys.cgi?mode=enter&id=$Slog[0]" target="">修正・削除</a>]
[<a href="$EST{cgi_path_url}regist_ys.cgi?mode=no_link&id=$Slog[0]&pre=on&title=$Slog[1]">管理者に通知</a>]
</font>
<!--HTML-->
更新日:2008/07/09(Wed) 19:31 [修正・削除] [管理者に通知]

#<!--(↓修正不可↓)
if($CK_data[3] && !($EST{html} && $ganes{$LC_kt})){
print<<"EOM";
<br>
[<input type=checkbox name="id_$Slog[0]" value="on"> 削除チェック]
アクセス数:$Slog[13]
EOM
}

if($Slog[12]){
# (↑修正不可↑)-->
print<<"<!--HTML-->";
<br><img src="$Slog[12]" width=$EST_reg{Mbana_w} height=$EST_reg{Mbana_h}>
<!--HTML-->
#<!--(↓修正不可↓)
}

# (↑修正不可↑)-->
print<<"<!--HTML-->";
</td>
</tr>
<!--HTML-->

#<!--(↓修正不可↓)
unless($ganes{$LC_kt}){
print<<"EOM";
<tr id=log-2>
<td>
EOM
@kt=split(/&/,$Slog[10]);
foreach(@kt){
if($ganes{$_}){

print "[<a href=\"$Ekt$_$Eend\">";
#print $ganes{$_}; #カテゴリ名を短縮カテゴリ名で表示
print &full_kt($_); #カテゴリ名をフルカテゴリ名で表示
print "</a>] "; #1カテゴリごとに改行する場合は print "</a>] <br>"; に修正
}
}

print<<"EOM";
</td>
</tr>
EOM
}
[サーチエンジン:Yomi-Search系] [サーチエンジン:総合]

# (↑修正不可↑)-->
print<<"<!--HTML-->";
<tr id=log-3>
<td>$Slog[6]</td>
</tr>
<!--HTML-->
紹介文です。

if($Slog[7]){
print<<"<!--HTML-->";
<tr id=log-4>
<td><font id=kanri>$Slog[7]</font></td>
</tr>
<!--HTML-->
#<!--(↓修正不可↓)
}
管理人コメントです。

# (↑修正不可↑)-->
print<<"<!--HTML-->";
</table><br>
<!-- /ログ表示 -->
<!--HTML-->

#<!--(↓修正不可↓)
}

foreach $line(@log_lines){
@Slog=split(/<>/,$line);
&PRlog;
}
# (↑修正不可↑)-->


関連リンク

Yomi-Searchについて
スポンサードリンク