ことねっつ

ＰＥＴＲＯＯＭ大改造
【萌え萌えキャラクターズと遊ぼー。】

ＰＥＴＲＯＯＭのデザインを変えてみよう

まず最初に、お断りしておかなければいけませんね。

管理人は、デザインセンス皆無です(^^;
味も素っ気もありません、ごめんなさい。

では、このページで何をしようとしているかと申しますと、
「デザインを変更したい場合に、どこをどのようにいじればいいのか」
その場所を、掲載したいと思います。

つまり、デザイン自体はご自分で考えるということですので、
期待していた方、これまたごめんなさいm(_ _)m

…ですが、ふふふ。
Ｐｅｒｌの奥義（でもないでもないですが）、「ヒアドキュメント」というものも、
ここでご紹介したいと思いますので、
必要ない方も、ちらりと見ていって頂けると、今後の改造が楽になるかもしれません。

では最初に、いきなり「ヒアドキュメント」について、から（笑）

いくら実行結果がＨＴＭＬ（タグ）で返ってくると言っても、
スクリプトを組むときは、

    print "<BODY bgcolor=\"black\" text=\"white\">\n";

のように、print文を使って書きます。
タグに限らず、画面に何かを表示させたいときにも使われていますよね？
（ちなみに「\n」は、改行になります）

これを見て下さい。

# ------------------------- #
# Sub Header
# ヘッダー
# ------------------------- #
sub header {
    print "Content-type: text/html\n\n";
    print "<html>\n<head>\n";
    print "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=Shift_JIS\">\n";
    print "<title>$title</title>\n";
    &style;
    print "</head>\n";
    print "$body\n";
    $headflag = 1;
}

ＰＥＴＲＯＯＭのヘッダーという関数ですが、
print文の中身を一部抜粋・修正して並べてみますと…、

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>$title</title>
</head>

ホームページをタグを打って作ったことがある人なら、分かりますよね？
そうです、ＨＴＭＬ文書の頭の方に書く項目たちです。
ＰＥＴＲＯＯＭでは、何か画面を表示するときに、必ずこの関数を呼んでいます。

つまり、print文を使って、毎回ＨＴＭＬ文書を作成しているのです。
だから、ブラウザで見ることが出来るのですね。

Ｐｅｒｌで、ブラウザにて「おはよう」という画面を表示したいときは、

    print "<html>\n";                        
    print "<head>\n";
    print "</head>\n";
    print "<body>\n";
    print "おはよう\n";
    print "</body>\n";
    print "</html>\n";

と組んで、それがブラウザに返ってくると、

<html>                                       
<head>
</head>
<body>
おはよう
</body>
</html>

となって、画面に「おはよう」と表示されるのです。

ヘッダーの部分は、ＰＥＴＲＯＯＭですでに用意されているので、
気にする必要はありませんが、
デザインを変更していくときに、いちいちprint文を使って、
やれ、ダブルクォーテーションの前には「\」を付けなきゃいけないとか、
やれ、ソースを見やすくするために「\n」を入れないと、とか、
とにかく面倒で、分かりづらくなってしまいます。

出来れば、Ｐｅｒｌのソースに、そのままタグを書きたいですよねぇ…、
普通のＨＴＭＬ文書を書く時みたいに…。

ソ～ナンス！　それを可能にしてくれるとっても便利なモノが、
「ヒアドキュメント」なのであります～っ！

使い方は、とっても簡単。

print <<"EOM";    # ヒアドキュメント開始



EOM               # ヒアドキュメント終了

この間には、タグやら何やら、そのまま書くことが出来るのです～。
しかも、「$name」などの変数もそのまま使うことが可能だったりします。
参考書も持っていない管理人がどうしてそんなことを知っているのかって？
えと、ＫＥＮＴさんのＹＹＢＢＳで使われているんです、はい。
ちなみに「ことねっつＢＢＳ」は、そのＹＹＢＢＳを改造したものです、
影も形もありませんね（笑）
ですので、本来これを「ヒアドキュメント」と言うのかどうかすら怪しいです（おぃ）
ちなみに、「EOM」とか書いてありますが、これもＫＥＮＴさんので使われていた単語で、
別に「HTML」とか、何でもいいみたいです。
ただし、開始と終了で合わせてくださいね。

といっても、実際の使い方がさっぱりですね。
と言うわけで、デザインの変更箇所を紹介しがてら、使ってみようと思います。

スタイルシートを利用する。

ＰＥＴＲＯＯＭでは、デザイン変更のためかどうか分かりませんが、
スタイルシートの設定が、関数としてまとめられています。

スタイルシート（sub style）を見て下さい。

# ------------------------- #
# Sub Style
# スタイルシート
# ------------------------- #
sub style {
    print "<STYLE TYPE=\"text/css\">\n";
    print "<!--\n";
    print "A:link {text-decoration: none }\n";
    print "A:visited {text-decoration: none }\n";
    print "body,tr,td,th { font-size:$fontsize }\n";
    print "-->\n";
    print "</STYLE>\n";
}

まずはこれをヒアドキュメントを使って書き換えてみます。

# ------------------------- #
# Sub Style
# スタイルシート
# ------------------------- #
sub style {

print <<"EOM";

<STYLE TYPE="text/css">
<!--
A:link {text-decoration: none }
A:visited {text-decoration: none }
body,tr,td,th { font-size:$fontsize }
-->
</STYLE>

EOM

}

これで、全く同じです。
いつも見る、スタイルシートの設定、そのままですよね！
しかも、この通り$fontsizeという変数も、そのまま使えるんです。

では、あとはスタイルシートの参考書を買って、ご自分で…、
というのは、あんまりなので、参考になるかどうか分かりませんが、
「さっちんのお部屋」の設定をご紹介します。
詳しくは、ホントに参考書をご覧下さい(^^;

あ、あとですね、基本的にＩＥでのみ、有効と考えてください。
ネスケでは対応していないモノがありますので。

「さっちんのお部屋」のスタイルシートをヒアドキュメントにしたものです。

# ------------------------- #
# Sub Style
# スタイルシート
# ------------------------- #
sub style {

print <<"EOM";

<STYLE TYPE="text/css">
<!--
body{ background:url("kabegami.gif") #ffffff fixed; color:#606060; font-size:10pt;} # １行目
tr,td,th{ color:#606060; font-size:10pt;}                                           # ２行目
small{ font-size:9pt;}                                                              # ３行目
a:link,a:visited,a:active{ text-decoration:underline; color:#606060;}               # ４行目
a:hover{ text-decoration:none; color:#ffffff; background-color:#606060;}            # ５行目
-->
</STYLE>

EOM

}

１行目（bodyタグの設定）
background:url("kabegami.gif")　…　背景画像の指定
#ffffff　…　背景色の指定
fixed;　…　スクロールしたとき背景画像は固定
color:#606060;　…　文字色の指定
font-size:10pt;　…　文字サイズの指定

２行目（tableタグの設定）
color:#606060;　…　tr,td,thタグ内の文字色の指定
font-size:10pt;　…　tr,td,thタグ内の文字サイズの指定

３行目（smallタグの設定）
font-size:9pt;　…　文字サイズの指定

４行目（aタグの設定）
text-decoration:underline;　…　リンク、既リンク、現リンクの飾り指定（下線を付ける）
color:#606060;　…　リンク、既リンク、現リンクの文字色の指定

５行目（aタグの設定）
text-decoration:none;　…　マウスが乗ったときの飾り指定（下線をなくす）
color:#ffffff;　…　マウスが乗ったときの文字色指定
background-color:#606060;　…　マウスが乗ったときの背景色指定

スタイルシートをいじるだけで、見た目はだいぶ変わります。
しかも一括で指定できるので、覚えると大変便利ですが、
ＩＥとネスケでだいぶ対応が違うので、ご注意下さい。

bodyタグとtableタグを利用する。

ＰＥＴＲＯＯＭでは、bodyタグとtableタグに関して、変数で設定を変えられるようにしてあります。
ただしtableタグの方は、ＰＥＴＲＯＯＭの一番外枠を形成するテーブルですので、
中身で使ってるテーブルの設定は変更されません。

スクリプトの最初の方に、

# ボディーの設定
$body = '<body bgcolor="#FFFFFF" text="#000000" link="#000000" vlink="#000000" alink="#000000">';
# テーブルの設定
$table = '<table width="280" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#FF9999">';

とありますので、ここをいじるだけです。
…ここは、いまさら説明しなくても、すでにお分かりですよね、すみません(^^;

いよいよ、中身のデザイン変更。

ここで重要になってくるのが、
&bodytopと、
&bodybottomと、
&tabletopと、
&tablebottomという、
４つの関数です。
とりあえず、ここをヒアドキュメントに置き換えて、１つずつ中身を見てみますと、

# ------------------------- #
# Sub Body Top
# ボディ上部
# ------------------------- #
sub bodytop {

print <<"EOM";

<div align="center">
$table
<form method="$method" action="$cgiurl">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="$barcolor">
<tr>
<td valign="top"><img src="$img$ltimg" width="$ris" height="$ris"></td>
<td><div align="center">$font1$_[0]</font></div></td>
<td valign="top"><div align="right"><img src="$img$rtimg" width="$ris" height="$ris"></div></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>

EOM

}

# ------------------------- #
# Sub Body Bottom
# ボディ下部
# ------------------------- #
sub bodybottom {

print <<"EOM";

</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="$barcolor">
<tr>
<td valign="bottom"><img src="$img$lbimg" width="$ris" height="$ris"></td>
<td><div align="center">

EOM

    print "<a href="$backurl" target="$backtarget">[$backword]</a>\n" if $printback == 1;
    print "　<a href="$cgiurl?mode=owner&name=$FORM{'name'}&pass=$FORM{'pass'}">[飼い主ランキング]</a>\n" if $actionflag == 1;
    if ($FORM{'mode'} eq "owner") {
        print "　<a href="$cgiurl?mode=back&name=$FORM{'name'}&pass=$FORM{'pass'}">[戻る]</a>\n";
    }
    elsif ($FORM{'mode'} ne "end") {
        print "　<a href="$cgiurl?mode=end">[終了]</a>\n";
    }

print <<"EOM";

</div></td>
<td valign="bottom"><div align="right"><img src="$img$rbimg" width="$ris" height="$ris"></div></td>
</tr>
</table>
</td>
</tr>
</form>
</table>
</div>

EOM

}

ＰＥＴＲＯＯＭで表示する画面というのは、ほぼ全て、
この&bodytopと&bodybottomで挟まれています。
つまり、スクリプトに、

    &bodytop('タイトルなど');
    print '真ん中部分';
    &bodybottom;

と書くだけで、こうなります。

左上の
枠画像

タイトルなど

右上の
枠画像

真ん中部分

左下の
枠画像

飼い主ランキング・戻る・終了など

右下の
枠画像

…一気にここまで、勝手に作ってくれちゃうのです。

では、次に&tabletopと&tablebottom。

# ------------------------- #
# Sub tabletop
# テーブル上部
# ------------------------- #
sub tabletop {

print <<"EOM";

<table width="100%" border="0" cellspacing="$f_space" cellpadding="0">
<tr>
<td>

EOM

}

# ------------------------- #
# Sub tablebottom
# テーブル下部
# ------------------------- #
sub tablebottom {

print <<"EOM";

</td>
</tr>
</table>

EOM

}

こちらは、なんて事はない、テーブルタグの最初と最後の書式をまとめて書いているだけなんです。
これは主に&bodytopと&bodybottomの間で呼ばれています。
つまり、スクリプトでこう書くと…、

    &bodytop('タイトルなど');
    &tabletop;
    print '真ん中部分';
    &tablebottom;
    &bodybottom;