Sponsored Link

その９．見た目を変えてみよう

まずは最初の画面
小梅：
さて、ペットルームの設置にもだいぶ慣れてきたよね。 いいかげん理屈は飽きたろうし、そろそろオリジナル色を出してみたくなっただろうけど、どう？
ぶら：
やりたい！けど…やっぱまだこわいよ。わかんないし。
小梅：
無難なところからオリジナル色を出すには、まず見た目じゃないかな。
ちょいとこの絵を見てみそ。
ぶら：
これ…PET ROOM？ぜんぜん感じが違うよ？
小梅：
これは、ことねっつ さんが配布してる改造版のPET ROOMを元に、守也香さんが設置してるうさぎと遊べ。なの。
改造版だから表示される内容が違うけど、基本動作はオリジナルと同じです。
どう？
ぶら：
うさぎがすっごくかわいい！白い背景と溶けあうみたいで、絵をすごく引き立ててるね。
小梅：
配色と絵、それと罫線やボタン表示の使い方１つで、ものすごく印象が違うでしょう。
CGIを改造してイベントやコマンドを追加したりして特色を出すほかに、視覚的な要素で特色を出すという手もあるわけ。
ぶら：
罫線とか、ぼくの知ってるタグじゃないみたい…
小梅：
だってこれHTMLじゃないもん。CSS、スタイルシートってやつ。 視覚的な効果を出すことが目的で作られた物だから、デザインに変化を持たせるのはお手のものってところね。
守也さんはこのほかにもアニメーションGIF、つまり動くGIF画像を使ってさらにカワイクしておいでだよん。
ぶら：
見た目の変化…ぼくにもできるかな。
小梅：
少し、やってみようか。まあエラーの１つや２つや３つは覚悟してもらうとして…テーブルって判る？<TABLE><TR><TD>…って指定して表組みつくるタグ。
ぶら：
んと、なんとなくなら。 <TABLE>から</TABLE>までが表の指定タグで、<TR></TR>が行の指定で、<TD>から</TD>がひとつの囲み。
小梅：
そうそう。たとえば
<TABLE BORDER=1>
<TR>
<TD>１行目１列</TD>
<TD>１行目２列</TD>
</TR>
<TR>
<TD>２行目１列</TD>
<TD>２行目２列</TD>
</TR>
</TABLE>
とやると、
１行目１列 １行目２列
２行目１列 ２行目２列
こんな感じに。
ぶら：
このborderって指定を0にすると線が見えなくなるってのは知ってるよ。
小梅：
そうそう。「テーブル？それ何？ぜんぜんわかんなーいっ！」って人は事前にテーブルタグについて勉強してくること。
解説サイトは山のようにあるから、ここではやりません。
最初の画面に手を加える
小梅：
さて、小梅の「ぶらいととあそぼう」を旧バージョンをプレイしてみてくれたことはあるかな？
あそこではぶらいとがお迎えしている画像があったよね？
ぶら：
はーい。ぼくが手を振ってまーす。
小梅：
あれはとっても簡単。「名前入力」の上に画像を表示させているだけです。まずその部分を探してみましょう。
ぶら：
あ！わかった！「お名前を入力してください」って言葉で検索すればいいんじゃない？
小梅：
OK！探してみて。
ぶら：
みっけ！■L409だ！
小梅：
要するにここに<img src="">っていうタグを加えればいいわけ。ただ…
ぶら：
小梅のうそつきー！<img src="bright.gif">ってタグいれたらエラーでたそー！
小梅：
話は最後まで聞きなさいよー！
これはhtmlじゃないんだから、直接タグ入れたらエラーになるの当たり前でしょー！
ぶら：
じゃあどうするのさー
小梅：
■L409を見てよ。
CGIで画面に文字を出そうとしたり、htmlのタグを書こうとする時には、必ず
print "と\n";の間に書く
と覚えて。
ぶら：
じゃあ、print "で始まるのはみんな画面に出す文字やhtmlなの…？
小梅：
うん。だから<img src="bright.gif">と書きたい時には…
ぶら：
ええっと…
print "<img src="bright.gif">\n"; かな…？
小梅：
惜しい！今からそれを説明するんだからしょうがないけど、ダブルクォーテーション、つまり「"」はperlつまりCGIの命令でも使う記号だから、「命令じゃないよー、これをそのままprintしたいんだよー」ということを主張しないといけないの。
これはprint "と\n";の間の「"」の前に「\」をつけるという約束なんだ。これやらないとやっぱりエラーになります。エスケープ文字っていうらしいんだけどね。
ぶら：
printの次の「"」は命令だけど、"bright.gif"の「"」はhtmlだってことだね。
じゃあ、print "<img src=\"bright.gif\">\n";かしら？
小梅：
おけ、基本はおさえたね！
あとは、画像と「お名前を…」の文字がつながっちゃわないように<br>タグが要るよね。
それから、文字がみんな左寄せになってるから、もし画像を真ん中に置きたい時には、<center>タグも要ります。
これらを総合してみると
&tabletop;
print "<center>
<img src=\"bright.gif\"></center>
<br>\n";
print "お名前を入力してください（半角カナ禁止）。<br>\n";
こんな感じね。もちろんimgフォルダに画像を入れてる場合には./img/bright.gifになるし、それ以外の場所に置いてる時も同様ね。
名前入力

お名前を入力してください（半角カナ禁止）。

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


入力情報を保存
ペット育成ゲームの遊び方
まずお名前とパスワードを入力してください。
okを押すとペットの部屋に入室できます。
部屋にはペットが住みついています。
初めての方には警戒しますが、
慣れてくるとなつくようになります。
餌をあげたり遊んであげたりしてください。
注意
ペットは3日以上餌を食べないと死にます。
一回の来室後、0分は見るだけになります。
5日間訪問がない場合、データから削除されます。
[ホーム] 　[終了]
と、こんな感じになります。
PET ROOMのテーブル制覇
小梅：
さてpet roomのレイアウトはこのテーブルが多用されてます。
テーブルの中にテーブルが何個も入ってるの。入れ子っていうんだけどね。
自分のペットルームにアクセスして、最初に出る画面をブラウザの「ファイル」→「名前をつけて保存」で保存すると、その画面が勝手にhtml化されて保存されます。それをメモ帳などで開いてみると、<table>で始まるテーブルタグがたくさんあるのが判るよ。
ぶら：
テーブルの中にテーブル？
小梅：
うん。ペットルームでテーブルがらみのタグを持っているサブルーチンは５つあるの。
■L887のsub bodytop
■L910のsub bodybottom
■L942のsub tabletop
■L952のsub tablebottom
■L962のsub bar
つまりこの５つの中のテーブルタグは、いろいろなサブルーチンで共通に使われてるわけね。 この他に、それぞれのサブルーチン内に書かれているタグもあるわけ。
まあ要するに、それぞれの場面で、テーブルの中に表示するものが違ってくるじゃない？
「名前入力」だったり「コマンド」だったり…そのせいでこういう複雑な作りになってるんだけどね。
ぶら：
&bodytopとか、&tabletopとか書かれてるところは、全部テーブルってことだね。
小梅：
それをふまえて…さっきやった最初の画面。これは■L396のsub enternameなので、それがどんなふうに構成されているかはここ。
sub enternameの構成
ぶら：
…すいません帰らせてもらいます
小梅：
ああこれこれ、逃げるな。長いしでかいし文字数多いからギョッとするけど、案外これでシンプルなつくりなんだってば。
ぶら：
どこがシンプルぅ〜！？テーブルタグはいっぱいだしifとかまで混ざってるしinputとかわけわかんないのあるし
小梅：
いや実はこのテーブル作成死ぬかと思ったけどさ、本当は。
まず、<form><input>といった部分は書き換えたりしないこと。これは表示に関係のない部分だし、書き換えたら送信とかできなくなったりするからね。これは単にここに置いてあるおまじないかなんかだと思って、<table>や<td>のタグに集中すること。
ぶら：
サブルーチンとサブルーチンにまたがって開始タグや閉じタグがあるよぅ
小梅：
あるんだよ。さっきあげた５つのサブルーチン、これを変えると他も変わっちゃうよ。他でも使ってるサブルーチンだから。
だから、ここだけ変えたい時には、まずサブルーチンを消して、それに変わるものを書き加えてやらなければならないの。
いちばん簡単な例をあげてみようか。
■L424
&bar('', 'ペット育成ゲームの遊び方');
これを書き換えたいとするね。sub barをいじると他も全部変わっちゃうから、この部分を差し替えます。
■L962のsub barの中味、つまり{ から}の間、
print "<tr align=\"center\" bgcolor=\"$barcolor\"><td $_[0]><font color=$font1>$_[1]</font></td></tr>\n";
こいつをまるっとコピーして、
&bar('', 'ペット育成ゲームの遊び方');
とすりかえます。
ぶら：
たんま。$_[0]とか$_[1]ってなに？
小梅：
はい、これは「勝手に代入システム」と申しまして…って私が勝手に命名したんだけど。
('', 'ペット育成ゲームの遊び方')この部分の１番目が$_[0]に、２番目が$_[1]に自動で代入されます。
ぶら：
$_[0]は「''」だから空欄、$_[1]は「ペット育成ゲームの遊び方」になるってこと？
小梅：
ぴんぽーん。&で始まる命令の後ろの（　）にこういうふうに文字がくっついてくる時には、先頭から順番に$_[0]、$_[1]…と割り振られていきます。なので、これもすりかえないといけません。
print "<tr align=\"center\" bgcolor=\"$barcolor\"><td><font color=$font1>ペット育成ゲームの遊び方</font></td></tr>\n";
こんな感じね。
ぶら：
つまり…L121からL127は
print "</td>\n";
print "</tr>\n";

print "<tr align=\"center\" bgcolor=\"$barcolor\"><td><font color=$font1>ペット育成ゲームの遊び方</font></td></tr>\n";

print "<tr>\n";
print "<td>\n";
こうなる、と…。で、ここを書き換えるわけだね。
小梅：
まあ少なくとも、人に「ここを書き換えま〜す」「は〜い、コピー&ペースト〜」ってもんじゃないわな。
だから「ううっとても私にはできない！」と思ったら、好みの改造版を配布してる人を捜しましょう。
Missing Linkさんのページにも改造版を配布している人のページが紹介されてます。
特に、さっき言ったことねっつさんは改造版を配布してるほか、いろいろはプチ改造やナイス改造をBBSに掲載してるから、ぜひ一度うかがってみようねー。
私もそこでものすごくお世話になりました。
ぶら：
…もし、自分好みのレイアウトの改造版がなかったら…？
小梅：
気合いと根性でやれ。
TOP >> 1 >> 2 >> 3 >> 4 >> 5 >> 6 >> 7 >> 8 >> 9 >> 10 >> 11

PET ROOMはMissing Linkさんが配布されているCGIゲームです

[コーナートップ] [ブライト翔ぶ！] [ぶらいとふぉーらむ]