PETROOM大改造
【萌え萌えキャラクターズと遊ぼー。】

PETROOMのデザインを変えてみよう

気合いを入れ直して & 方向性を変えて(笑)、
徐々にアップしていきますので、お楽しみにっ!

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

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

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

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



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

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

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

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

データ保存用にパスワードを入力してください。



入力情報を保存
2つ目のセルの中に、
セル2つ(縦並び)のテーブルを、
sub tabletopで作成。
sub tablebottomでテーブルを閉じる。
ペット育成ゲームの遊び方 </tr></td>で2つ目のセルを閉じて、
3つ目のセルを、sub barで作成。
<tr><td>で4つ目のセルを作る。
まずお名前とパスワードを入力してください。
OKを押すとペットの部屋に入室できます。
部屋にはペットが住みついています。
初めての方には警戒しますが、
慣れてくるとなつくようになります。
餌をあげたり遊んであげたりしてください。

4つ目のセルの中に、
セル1つのテーブルを、
sub tabletopで作成。
sub tablebottomでテーブルを閉じる。
注意 </tr></td>で4つ目のセルを閉じて、
5つ目のセルを、sub barで作成。
<tr><td>で6つ目のセルを作る。
ペットは3日以上餌を食べないと死にます。
一回の来室後、15分は見るだけになります。
5日間訪問がない場合、データから削除されます。
6つ目のセルの中に、
セル1つのテーブルを、
sub tabletopで作成。
sub tablebottomでテーブルを閉じる。
[ホーム]  [終了]
sub bodybotoomで、
6つ目のセルを閉じて、7つ目のセルを作り、
その中に、セル3つ(横並び)のテーブルを作って、
角の丸い画像と、「ホーム」「終了」などを表示させ、
ベースのテーブルも閉じる。



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

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

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

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



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

…ですが、そこまで解析するには、HTMLタグだけでなく、
多少のPerlの知識も当然必要になってきますので、難易度が高いです。

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






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

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






第1弾:sub barの本当の使い方

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

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

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

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

使い方はとっても簡単。

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

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

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

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

そうなんです、ここにはtdタグで使えるものが、
そのまま使えるのです、alignvalignもOKです。

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

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






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







PETROOMのデザインを変えてみよう
過去バージョン、挫折編(爆)


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

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

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

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

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

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

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

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

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

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



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


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