2010年10月15日金曜日

サイトリニューアル進捗状況(10/15現在)

昨夜、一昨日夜とも連続で爆睡してしまったため、あまり夜は進みませんでしたが、昨日の午後にある程度進めることができました。

昨夜から子供が熱を出し体調を崩し、寝られないと頻繁に起きてきてしまうため、夜ずっと横につきっきりでいることにしていました。そしたら、爆睡してしまいましたが。。
今日の昼間は子供と小生と二人きりで過ごすので、予定よりもあまり作業は進まないかもしれませんが、何とかできるところまで頑張ります。。とりあえず、定例の失敗事例登録から進めます。


サイトリニューアルについては、昨日の午後、目次ページのHTML、CSSのコードを記述していて、改めて仕様の見直しの必要性に気付きました。で、昨日午後から昨夜子供が起きてくるまで、および布団の中でもずっと仕様について考え事をしていて、ほぼ修正案を固めました。

昨日までに書いたような仕様(各メニュー項目へのボタン内のアイコン、タイトル文字、解説文字とも独立したGIF画像ファイルで与える)とすると、ボタン1個あたりのファイルサイズ(3つのGIFファイルの総量)が20kB前後になってしまいます。
ボタンの数が先日の画面ハードコピーの例では12個でしたが、これを増量して18個にしようと思っているので、タイトルバー(JPEGファイル、60kB前後)と合わせると、18×20+60=420kB程度にもなってしまいます。
何とかGIFファイルを使ってもっとファイルサイズを圧縮する方法も考えましたが、どうも難しいようです(詳細は未確認ですが、GIFファイルは、JPEGファイルと比べ、個々のファイルを1つにまとめてもファイルサイズはあまり小さくならない??ようです)。

一方、タイトルバーとボタン18個全体を画面ハードコピー的に一つのJPEGファイルとして保存すると、おおよそ200kB程度であり、かつロールオーバー時のボタン(ボタンの上にマウスカーソルが来たときに色が変わったときのボタン)をやはり18個全部ハードコピー的にJPEGファイルにすると、150kB程度であり、合計すると350kBと、上述のGIFファイル方式よりもファイルサイズを圧縮できます。
加えて、こちらのJPEG方式の方が、デザインの自由度も圧倒的に高くなる上、HTML、CSS、JavaScriptのコードも簡素化されるので、いくつものメリットがあることが分かります。

そこで、これらのメリット、デメリットを鑑み、GIFファイル方式はやはりここでは諦め、JPEG方式にすることにしました。


さらに、JPEGファイルはボタン1個ずつ別々のファイルに分割するよりも、全体をまとめて一つのファイルにした方がファイルサイズの総量が小さくなるので、先日述べたimgタグを使う方式(画像ファイルの伸縮はできるが、一つの画像ファイルの中から一部を切り出して表示することができない)ではなく、当初のように、background-imageを用いる方式(画像ファイルの伸縮はできないが、一つの画像ファイルの中から一部切出し表示が可能)に変更することにしました。

background-image方式は、ユーザーのPC環境(画面・ウィンドウサイズ)に合わせて、何通りもサイズの異なるJPEG画像ファイルを用意しなければならないという大変さがありますが、何よりユーザー側でダウンロードするファイルサイズが軽くなり、その分通信時の重さを感じさせにくくなるというメリットが大きいと考えています。もっとも、今時のADSLや光回線ならば殆ど違いはないですし、逆にアナログモデム9600bpsならどちらもアウトでしょうが。。
加えて、何通りも用意するといっても、この場合はPower Point上で一つの画像オブジェクト(拡張メタファイルなど)を適宜伸縮して、その大きさで画像ファイルとして保存するようにすれば、それほど手間もかからないため、デメリットは少ないと考えています。

逆に、仰せつかっているWing Brainの目次ページは、アイコンなども使用しない予定のため、こちらは文字部分をGIFファイル化する方式の方がメリットが大きいと考え、その方式に変更する予定です。こちらも合わせて進めたいと思います。

最後に、TOPページは、当サイト、Wing Brainとも、imgファイル方式で、画像ファイルの中身以外は仕様として完全に同一のものとする予定です。

以上の仕様で作成を進めてゆきます。

0 件のコメント:

コメントを投稿