Diary of a Madman

癲狂院に置かれた或る一冊のノートブック
狂気の記憶が焼き付いた、深淵なる倒錯の記録の数々。
« 連係作業 | メイン | そうそうトップページも »
Materialer's Hammer & 癲狂院

 修正がようやく終わりました。
意外に時間が掛かってしまいました。......本当はもっと単純ですぐ終わるはずだと思っていたのですが......。どちらかというと癲狂院の方の修正に手間取ってしまいました。


 まず、HTML+CSSのソースに修正箇所があってそれを直すのに苦労しました。VMLでアルファチャンネルPNGを透明化させると、なぜか右下に1ピクセルずれるのです。例えば1枚の画像をスライスしてテーブルレイアウトした時に、そのままだと1ピクセル分右下にずれて、レイアウトが崩れてしまうんです。VMLのことを良く知らないのもあるかもしれませんが、検索しても全くヒットしないし根本的に対処するのは無理だったので、しかたなくアルファチャンネルPNGの<img>タグに、クラス指定してあります。 もっともこのことは、癲狂院を公開する前から把握していた事ですし、Materialer〜と違って、テーブルレイアウトよりもレイヤーでパーツを重ねているデザイン故にposition指定しているので、1ピクセルずれようが関係ないのですが。ただ、その箇所ごとに別のクラス指定していたので、CSSがぐっちゃぐちゃになってしまっていたので、それを中心に、CSSの部分を今回修正しました。

 これは当コンテンツのようなposition指定でがちがちにレイアウトする場合のためのtipsですが、そういうレイアウトをする場合、position: relative; と margin で位置調整をした方がよいということです。position: relative; とtop,leftで調整すると、元の位置の部分が空白になるので、1つくらいならば良いかもしれませんが、組み合わせてレイアウトすると崩壊します。w いや、本当です。ただ、これも限界があってすべてをmarginでの調性で済ませられるわけではなくて、top,leftと併用することによってうまく崩壊を免れる様です。

 テーブルのセルを動かすには、position: relative; top,leftでしか移動できなかったと思います。marginでは動かなかった様な.....。とにかく、アルファチャンネルPNGを扱うと、もうとんでもない事になるので、気が狂います。w VMLを適用するのはWindowsのIEでのみなので、ブラウザごとにCSSを切り替える様にしないと、他のPNGに対応しているブラウザでズレてもいないのに左上に1px分詰めてしまうことになるので、よく見るとちょこっとだけ潰れているように見えてしまいます。

 そういうわけで、ちゃかちゃかとJavaScriptでCSSの振り分けをしています。IEのCSSバグを逆に利用した、CSSハックを利用する手もあるのですが、Win:IEに限らず、もう色々なブラウザが様々な解釈で表示するので、その部分だけを抜き出してJavaScriptで振り分けています。ちなみにそのスクリプトは自前です。自分でもJavaScriptが組めたなんて!.....とはいっても2行程度ですけどね。w


 そんな見えない所をよりスマートに修正したのがほとんどですが、それ以外は動作の高速化の修正でした。
自分の環境では、Win:IEの動作はすごく高速で、テレポート移動も別にさくさくと動いてくれていたのですが、Mozilla系のブラウザではどうしようもなく遅いのです。以前は、まあ打つ手がなく諦めていたのですが、テレポートのJavaScript内で、テレポートの速度を調節する箇所で、ブラウザごとに振り分けるスクリプトを書き込むことによって、1つのスクリプトで各ブラウザのコントロールが可能になりました。Mozilla系ではIEの4倍程の速さに設定しています。それくらい処理が遅いのです。 なんとなく分かったことは、テーブルレイアウトで画像を敷き詰めている場合や、インラインフレーム使った場合、背景画像を固定した場合、遅くなる様です。.....ってこれら全部を適用しているわけですが.......。  せっかくなので、修正のついでにWin:IEも若干速度を上げました。もっと上げても良いかもしれませんが、パソコンによっては、画面が飛ぶ気がする。w ただ、Windows XP以前のOSとIEの古いバージョンでは、どうも動作が怪しい感じ。それらに関してはもうどうしようもないし過去のことなのでスルーさせていただきます。うちのセレロン互換のAMDの900MHzでメモリ256MBのWindowsXP SP2 の2年前のノートPCであれだけ高速に動いたのですから、たぶん最近のXP搭載マシンなら問題ないはず.........。

 あとはファイルサイズ。
前にも書きましたが、奇跡の8bitアルファチャンネルPNGがFireworksでは書き出し可能なので、すべてのPNG画像をパッチ処理で一気に変換して、アップしました。今まで1ページの総ファイル数が1MB超なんてざらだった悪夢の様なページがどれもほぼ1/3以下になりました。......とはいっても、結局の所、ADSL1M以上でないと辛いかも.....。

 そして、フレーム仕様ページ。
もうどうしようもなく重いって方のためにせめてもの策として、フレーム仕様も用意しました。フレーム用に各ページを用意するのはご免なのでそれはできませんが、それでも軽いし、少しでもビジターに見てもらうための努力をそれなりにはしています。..........だって本当に人が来ないんだもの.....。せっかく苦労して作っても誰も見てくれないんだったら努力は水の泡になってしまうし......。10hit/day...なんていう状況から抜け出したいです。癲狂院なんかもっとひどくて3hit/dayくらいあれば多い方だもん。(ぉぃそれって......) ......まあコンテンツの中身が乏しいっていうのは認めざるを得ませんが、それでも、Web制作のリンク集などは充実している気がしますし、けっこう参考になる箇所もあるとは思います.........。


 あと、このDiaryのアドレスを変えました。他人には関係ないかもしれませんが、管理人としては、やっぱりtenkyouinのディレクトリに収めたかったので、インデックスとアーカイブなどは全て移動しました。


 まあそんなわけで、ようやくこの2つのコンテンツ、修正箇所も無くなり、放置出来ます。(ぉぃ) 次はコンテンツの充実です。でもその前に伏魔殿の設置と第七天のリニューアル作業が残っているわけですけど。w

† | TOPへ▲

トラックバック

このエントリーのトラックバックURL:
http://www.seventh-heaven.jp/diary/mt-tb.cgi/358

癲 狂 院 [+] -Cruel Insane Asylum- Copyright© Yusuke Kobayashi S E V E N T H † H E A V E N メール
TopUp HiUpDownDown HiBottom