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

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

気合いを入れ直して　＆　方向性を変えて（笑）、
徐々にアップしていきますので、お楽しみにっ！

初めに掲載されていた文章は一番下にあります〜(^^;

まずデザインについて。
基本的にＰＥＴＲＯＯＭでは、テーブルタグを駆使して画面を作っております。
画面全体、つまりベースになるテーブルの開始タグが書かれているのは、
ボディ上部（sub bodytop）という関数（サブルーチン）です。
これに対応する、終了タグが書かれているのが、
ボディ下部（sub bodybottom）という関数です。

そしてその関数の間で、つまりベースのテーブルの上にさらにテーブルを作っているのが、
テーブル上部（sub tabletop）（開始タグ）と、テーブル下部（sub tablebottom）（終了タグ）です。

さらに、名前入力画面の区切り（？）（遊び方〜、や、注意など）や、
ペットの画像を表示する関数は、テーブルのセルとして書かれています。



…と、文章で書いても分かりづらいですので、下のテーブルを見てください。

まず、ＰＥＴＲＯＯＭの名前入力の画面で、
テーブルのborderとpaddingの値をいじったモノです。

大きなテーブルに、セルが縦に７つあって、
１、２、４、６、７番目のセルの中で、
さらにテーブルを作っているのが分かりますでしょうか…。

名前入力
sub bodytopでベースのテーブルを作成。
<tr><td>で１つ目のセルを作り、
その中に、セル３つ（横並び）のテーブルを作って、
角の丸い画像と、タイトルを表示。
</tr></td>で１つ目のセルを閉じて、
<tr><td>で２つ目のセルを作る。
お名前を入力してください（半角カナ禁止）。

データ保存用にパスワードを入力してください。
入力情報を保存
２つ目のセルの中に、
セル２つ（縦並び）のテーブルを、
sub tabletopで作成。
sub tablebottomでテーブルを閉じる。
ペット育成ゲームの遊び方 </tr></td>で２つ目のセルを閉じて、
３つ目のセルを、sub barで作成。
<tr><td>で４つ目のセルを作る。
まずお名前とパスワードを入力してください。
OKを押すとペットの部屋に入室できます。
部屋にはペットが住みついています。
初めての方には警戒しますが、
慣れてくるとなつくようになります。
餌をあげたり遊んであげたりしてください。
 ４つ目のセルの中に、
セル１つのテーブルを、
sub tabletopで作成。
sub tablebottomでテーブルを閉じる。
注意 </tr></td>で４つ目のセルを閉じて、
５つ目のセルを、sub barで作成。
<tr><td>で６つ目のセルを作る。
ペットは3日以上餌を食べないと死にます。
一回の来室後、15分は見るだけになります。
5日間訪問がない場合、データから削除されます。
６つ目のセルの中に、
セル１つのテーブルを、
sub tabletopで作成。
sub tablebottomでテーブルを閉じる。
[ホーム] 　[終了]
sub bodybotoomで、
６つ目のセルを閉じて、７つ目のセルを作り、
その中に、セル３つ（横並び）のテーブルを作って、
角の丸い画像と、「ホーム」「終了」などを表示させ、
ベースのテーブルも閉じる。



次に、訪問したときの画面で、
テーブルのborderとpaddingの値をいじったモノです。

大きなテーブルに、セルが縦に６つあって、
１、２、５、６番目のセルの中で、
さらにテーブルを作っているのが分かりますでしょうか…。

ペットデータ(1代目)
sub bodytopでベースのテーブルを作成。
<tr><td>で１つ目のセルを作り、
その中に、セル３つ（横並び）のテーブルを作って、
角の丸い画像と、タイトルを表示。
</tr></td>で１つ目のセルを閉じて、
<tr><td>で２つ目のセルを作る。
名前：ちゃっぴぃ 性別：オス
名付け親：Ｒ.Ｃ.Ｔ-ｅ 年齢：生後114日
最後に餌を食べた日：2001年9月27日(木)
２つ目のセルの中に、
セル５つ（ご覧の並び）のテーブルを、
sub tabletopで作成。
sub tablebottomでテーブルを閉じる。
※ここはちょっと特殊。
</tr></td>で２つ目のセルを閉じて、
３つ目と４つ目のセルを、sub petnowで作成。
（セルと１つ作ったあとに、内部でsub barを呼び出している）
<tr><td>で５つ目のセルを作る。
布団の上で丸まっています
餌をあげる
なでる
外に出す 		遊ぶ
しかる
飼い主ランキング

５つ目のセルの中に、
セル３つ（ご覧の並び）のテーブルを、
sub tabletopで作成。
sub tablebottomでテーブルを閉じる。
[ホーム] 　[終了]
sub bodybotoomで、
５つ目のセルを閉じて、６つ目のセルを作り、
その中に、セル３つ（横並び）のテーブルを作って、
角の丸い画像と、「ホーム」「終了」などを表示させ、
ベースのテーブルも閉じる。



…と、まぁ、こんな感じにデザインされています。
オレンジ色のタグは、関数で自動でやってくれない部分です。
自分で書く必要がありますので、
デザインを根本的に変えるには、、
やはり、この構造をしっかり理解する必要が出てきます。

…ですが、そこまで解析するには、ＨＴＭＬタグだけでなく、
多少のＰｅｒｌの知識も当然必要になってきますので、難易度が高いです。

ホームページをタグ打ちで作っている方なら、
これを見るだけでなんとなく分かるかもしれませんが、
タグをあまり知らない方にとっては、こんな構造を見せられても、
サッパリですよね…(^^;






前置きが、いつも以上に長かったですが、

…というわけで、ことねっつのＰＥＴＲＯＯＭ大改造では、
その辺のことは多少理解できなくても、
簡単なデザイン変更を、簡単に出来るように、
改造、もしくは解説をしていきます。






第１弾：sub barの本当の使い方

上の表でいくと、
名前入力の画面の３つ目と５つ目のセル、そして、
訪問時の画面の４つ目のセルで使われているsub barですが、
この背景色は、最初の方の設定に出てくる、

# バーの色
$barcolor   = '#FF3333';

で決められています。
つまりこの設定を変えると、sub barが使われているところが、
全部この色に変わるわけです。
（実際には、最初のセルと最後のセルのテーブルの背景色も一緒に変わりますが）

これをバラバラに設定したいとき、もしくは背景画像を使いたいときなど、
実は最初からそういうことが出来るようになっているのです。

使い方はとっても簡単。

&bar('背景色または背景画像の指定など','表示する文字');

さて、実際に何を書けばいいかというと、

背景色を指定したい場合は、
&bar('bgcolor="#ffffff"','表示する文字');
と、普通にtdタグで使う背景色指定をそのまま書いて下さい。

背景画像を指定したい場合は、
&bar('background="画像ファイル名"','表示する文字');
です。

そうなんです、ここにはtdタグで使えるものが、
そのまま使えるのです、alignもvalignもＯＫです。

背景色青で文字を右寄せしたいときは、
&bar('bgcolor="#0000ff" align="right"','表示する文字');
と、書けちゃう訳なのです〜。

…って、全然改造じゃないですが（爆）






ただ今準備中ですので、
もうしばらくお待ち下さいませ。






ＰＥＴＲＯＯＭのデザインを変えてみよう
過去バージョン、挫折編（爆）

えぇと…、管理人、頑張って数時間かけてページを作っていたんですが、
途中で挫折しました(^^;
ごめんなさい、楓彩里さん。

何故、挫折してしまったかというと、
テーブルタグの使い方が、複雑すぎなのです、ＰＥＴＲＯＯＭは…。
これを上手いこと説明しようと思ったんですが…、おいらにはダメでした(^^;

関数の中に、開始タグや終了タグが含まれているので、
それを見越してタグを閉じたり、開いたりしなければならないのですが、
こればっかりは、ＰＥＴＲＯＯＭを何回も改造して、
もう慣れというか、感覚というか、そういったモノが頭の中に入っていないと、
サクサクとデザインできないと思われるのです。

スクリプトの中で、テーブルの開始タグがないのに、いきなり、

print '</td></tr>\n';

とか、出てくるところがありますよね？
これは、その上の方で使われている関数の中で、開始タグを設定しているのです。

ＰＥＴＲＯＯＭは、こんな感じの使い方が多用されていますので、
どこで、どのテーブルのセルを閉じたのか、または開いたのか、
常に分かっていないと、デザインを大幅に変更するのは、難しいのです。

一番分かりやすい方法は、
&bodytopと&bodybottom、&tabletopと&tablebottomを、ソース上で展開して、
テーブルタグをborder="1" cellpadding="5"ぐらいにして表示すると、
構造が丸分かりになりますが、サイズが大きくなってしまいますし、
ソースがゴチャゴチャしてしまいます(T_T)

というわけで、この件に関しては、個人サポートとさせて下さい。
「この画面をこんなデザインに変えたいんだけど…」というのを、
出来るだけ具体的に質問していただければ、お答えすることは出来ると思います。

あとは、何回も質問していただいて、自分で感覚を掴むか、
ＰＥＴＲＯＯＭを細かく分析して頂くしかないです、うぅ、すみません。



▼一応、残骸はこちら。
ＰＥＴＲＯＯＭのデザインを変えてみよう
になるはずだったページ

…文才の無さが、恨めしいですぅ…。