げんちゃんゲームランド

げんちゃんゲームランド - 無料ブラウザゲーム 商人物語のサイト

2007年12月11日(火)

掲示板デザイン

雪は降らなかったが、なかなか寒い日だった。

掲示板のデザインを変えようと思い、いろいろ考えているがいいものが思いつかない。まぁ今のでもいいが、なんとなく変えてみたい。このデザインというのが意外と時間がかかるもので、レシピ集や画像ギャラリーも、できるまで時間がかかっている。センスがないので仕方がない。漠然と、完成のイメージはあるのだが、なかなか形にならない。なんとなく、ドット絵っぽい雰囲気にしたいのだが、どうもなぁ。ヘタに凝ろうとするからこういうことに・・・。

雪が軽く積もっており、朝夕は寒かった。

しばらく忙しかったが、ようやくゆったりとしてきた。まぁ、来週にもテストがあるけど。レシピ集や制作日誌の改良もやろうと思っているが、今一番作ってみたいのは掲示板だ。まぁ、今どき掲示板作ったところで、というところもあるが、いろいろな人が参加するような仕組みの基本として、掲示板があるということで。一言掲示板的なもののサンプルは書籍などにも結構あるが、レス式のはあまりない。レス式になると、親記事・子記事の関係や、ログをどうするかなどいろいろと問題が発生し、難易度が上がる。すべて自分で作るのは難しいかぁ。やはりKENT-WEBさんのプログラムを改造するのがいいかな。自分は、KENT-WEBさんとWeb Libertyさんの2つのCGI配布サイトを使っている。もちろん、他にも配布サイトはたくさんある。KENT-WEBさんは、昔からあって、本まで出ているほどの有名サイトで、CGIのお手本的なサイトだ。ソースもわかりやすく、改造もしやすいし、再配布も許可されている。ただ、デザインはソースに含まれているので、細かなデザインの改造は少し難しいし、それほど機能が多彩というほどでもない。一方、Web Libertyさんは、多機能で高性能なCGIを提供しており、おそらくほとんどすべてがスキン式になっている。スキン用のファイルを書き換えるだけで簡単にデザインを変えることができるので、デザイン配布サイトからダウンロードすれば、簡単に外見を変更できる。プラグインを追加して新しい機能を追加することもできるので便利だ。しかし、プログラムが複雑で、改造はまず不可能。掲示板については、今後改造することも考えてKENT-WEBさんの改造でやってみよう、と。投稿キーシステムなどのスパム対策も既についているので、いろいろと勉強になるかもしれない。ちなみに、本サイトの場合、ブログシステムやアクセス解析、現行掲示板はWeb Libertyさんのものを使っており、アクセスカウンター、各種データベースはKENT-WEBさんのものだ。掲示板は、Web Libertyさんの昔のバージョンを使っており、最新バージョンと互換性がなくなっていた。新しいものを導入すればいいのだが、昔の書き込みを存続させたいというこだわりがある。今回、ログの形式を確認したところ、変換用のプログラムを作れば、掲示板にログを対応させられそうだ。

2007年12月09日(日)

室内ドット絵一応完成

雪がどんどん降っていた。

商人物語ゲーム街の室内ドット絵が一応完成。といっても、ゲームに参加している人でないとわからないのだが、一応こんな感じ。
ファイル 1037-1.png
この間作成した風景は、それほど表示させる機会はないが、室内ドット絵は毎回表示されるので結構大事である。しかも、ただの飾りではなく、クリックできる場所が結構ある。このように、画像の任意の場所をリンクにするのは、なかなか難しい。これをどうやって実現するかについては、3つくらいの方法がある。まずは、スタイルシートの絶対配置による重ねあわせを利用した方法。げんちゃん素材街のように、建物の間を走る車とか、重ね合わせの表現ができる。ただ、スタイルシートを厳密に組まないと、難しい。また、絶対配置した部分はいいが、その周囲の編集がし難くなる。次に、テーブルを細かく組み、テーブルの各セルに背景画像を設定し、その上に画像をのせる方法。画像の重ね合わせは、背景画像と、のせる画像の2つまでしかできないが、手軽に使うには適している。あと、クリッカブルマップを使う方法もある。これは、1枚の画像の特定の場所をリンクとする方法で、地図などに使うと便利である。今回用いたのは、テーブルタグを使った方法で、以下のように画像を区切っている。
ファイル 1037-2.png
少しテーブルタグを知っている人なら、テーブルタグで左側を2行にして、右側が1行という配置はできそうだが、右側の変則的な列の配置はできないように見える。このような変則的なセルの結合をさせるには、結合させていないダミーのセルを上にこっそり配置しておくとよい。最近はテーブルデザインは使われなくなってきているが、テーブルタグを理解すると、意外と便利である。テーブルの中では、「valign」と「align」によって、クリックさせたい画像を配置すればよい。