今まで作った3DCGを再掲載するために改めてレンダリングしています。（レンダリングとは、端折って言えば設計図を実物に見せる様にするようなものです）

　今まで作った3DCGは、以前使っていたマックの環境に制限された事が多く、特にレンダリングサイズがモニタが800×600という小さいものでしたので、それより大きなサイズにはなかなか出来なかったのです。でも新しくした現在では、1280×1024という大きなサイズでモニタできるし、CPUもG3の233KHzからG4の1.25GHzでメモリも768MBですし、大きなサイズでレンダリングしても以前よりは短くて済むと思って、まとめてレンダリングしてみました。

　........と言いたいところですが、「レンダリングしてみました」ではなく「レンダリングしています」が正解という現状です。

　とりあえず10数ファイル分をレンダリングできましたがまだ10個程ファイルが残っています。

　使っている3DCGソフトは一昔前のマックでは定番だったSTRATA（ストラタ）というメーカーのVision3dという廉価版のものを現在も使っています。.....本当、一昔前まではSTRATAが定番でユーザー数も多かったのですが、今ではマイナーなソフトになってしまいました。長い間Mac版オンリーでWin版を出すのが遅かったし、ソフトの方向性も業務用向けのような内容でもなく、かといって完全にホビー向けというわけでもない路線だった...辺りの理由が考えられますが、やっぱり個人的にも不満だったのがモデリング機能の乏しさでした。

　ちょうどバーチャルビューティでしたっけ、3DCGで美少女キャラを作るのが流行り出した時に、ShadeやLightwaveなんかが持てはやされましたが、STRATAでは..........無理でした。もちろん中にはSTRATAで作っていた人もいましたが、それはごく僅か。リアルな美少女キャラはおろか、他のモデリングでさえもSTRATAでは難しかったと思います。
　ただ、レンダリングの仕上がりの美しさは特筆もので、レンダリング方式で一般的な「レイトレーシング」でレンダリングした中ではフェアに判断しても、他のソフトと比べて1、2を争うものだったと思います。

　かくいう自分もソフトをShadeに乗り換えようかと今まで何度も思いましたが、3DCGより音楽の方が制作の比重が大きいので、3DCGをやらない時は本当にやらなくて、2、3ヶ月はソフトを全く立ち上げないというのもよくある事でしたので....、見送っていました。でも3DCGをやり始めるとまた欲しくなってしまうんですよね。w

　そんなSTRATAを今でも使い続けてきましたが、改めて今レンダリングしはじめて、作ったファイルの意外数にびっくりしてしまいました。なんだかんだいってもけっこう作っていたんですね。なかなか良い出来のままの作りかけのものや公開していなかったものなどいろいろあって、ちょっとこのままでは勿体無いかも......。

　話がそれましたが、とにかくレンダリングに時間が掛かっています。STRATAには、レンダリング途中のファイルや後でレンダリングするものをサスペンドファイルというものにできるのですが、これを自動処理してくれる機能があって、レンダリングしておきたいサスペンドファイルをまとめて設定しておけば、次々とレンダリングしてくれるというものです。

　これを使って、他のソフトを使っている時はもちろん、寝ている時や離れているときでもず〜っとパソコンはレンダリング作業をしてくれるのです。ここ2、3日はずっと起動したまま、ぶっ通しでレンダリングしています。

　.........でもまだ終わりません.............。1つのファイルのレンダリングに7時間くらいかかっているものがあるし.........。あぁ。

　方向性は何となく頭の中で決まってはいるのですが、なかなかフレーム状にデザイン出来なくて苦戦しています。

　前にも書いた通り、ゴシックには横方向よりも縦方向への装飾が目立っていて、縦方向へのデザインを横へ並べただけというものが、今まで調べてきたなかではほとんどがそうだったので、参考になるものも少なく大変です。

　ゴシック調のフレーム......よくWeb素材などでもゴシックフレームと銘打ってあるもののほとんどは、ゴシックといえばゴシックなのでしょうが、...........単にレース模様でも、クラシックの額縁っぽいものでもゴシックフレームになってしまっているし、個人的には申し訳ないですが全然違うものにしか見えなくて........。

　海外のサイトで見つけたものの中に、ゴシック調のベッドやイスの写真があったのですが、これが多少参考になりそうでした。ゴシック建築に見られる「尖頭アーチ」をモチーフにしたものに、これもゴシックの特徴である「四葉飾り（quatrefoil）」をあしらったデザインで、囲ってはいなかったものの、ゴシックの特徴を上手く取り入れたところを見習いたいです。

　もちろん、先述の「本来」のゴシックらしかぬデザインが悪いわけでもなく、デザインとして素敵なものもありますから、ゴシックとは別の方面で参考にしようと思っています。

　それと.........どうしても取り入れたいなと思っているのが、フランボワイヤン様式。フランボワイヤンというのはフランス語で炎を意味するらしいのですが、このフランボワイヤン様式こそが、ゴシック最後の様式なのです。この様式が一瞬流行った後、ゴシック文化は衰退していってしまうのです。まさしくゴシック最後の炎。.......陽炎の様にゆらゆらと燃えるそのデザインは優雅ながらもどこか儚げな雰囲気も立ちこめているかの様です。ただ、取り入れたいと思っても、参考になりそうな資料がほとんどなく形も複雑なので、これは..........相当苦戦しそうです。

　とにかく、紙にいろいろ書いてデザインを練っています。いくつか大まかな形に出来たので、第一歩は踏み出せた感じです。タイトル周り、大／中／小...それぞれのフレームに適したデザインを決められれば、後は割と楽なのですが....。2Dでパス描きにするか3DCGにするかで、使用するデザインも変わってしまいますし.........。

　こんなことを言っても、ゴシックを知らない人には、自分がゴシックっぽくないと思ってもそう見えてしまうかもしれないし、実際そんなことはどうでもよいものなのかもしれません。作るのも大変だし作らない方が時間の無駄にならないかもしれません。自分でもその辺りを迷う程だし。...........作ってもリアクションないし............。

･ﾟ･(ﾉД`)･ﾟ･ｼｸｼｸ

　IE5からサポートされた、ブラウザのアドレスバー左に表示されるアイコンとブックマークに表示されるアイコン、これをFavicon（ファビコン）と呼びますが、サポートされてからかなり経過していることやMacでもSafariなどが対応してきたおかげか、最近よくみかけるようになりました。

　第七天もけっこう前からファビコンを表示しています。ただ、このファビコン、ファイルが基本的にWindowsのアイコンファイルなので、Macで作るにはWindowsのアイコン形式「.ico」で作らなければいけないので、どのソフトでも作れるわけではないと思っていたんです。一応、Macのフリーソフトでその「.ixo」で書き出せるソフトもあってそれで作ってみたりしたのですが、どうもWinで思うように表示されなかったりしたので、Winでわざわざアイコンを作ったりして手間取ったので、もうそれっきりでした。

　リニューアル作業で、コンテンツが増えたので、それぞれのコンテンツごとにアイコンをつけた方がいいなと思って、また作る事にしました。.......で、色々調べて新たなフリーソフトでアイコンを作ってみたのですが、Macではうまく表示されるのにWinのIEではうまく表示されなくて........。前みたいにWinでわざわざ作らなくてはいけないのかとうんざりしていたのですが、再度調べていたら、オンラインで他の画像からファビコンを作ってくれるというサイトを知って早速試したところ、あっけなく成功。

　ちなみに現行のIEでは、ファビコンが表示されない場合もあって、初めて訪れたサイトではまず表示されるのですが、ブックマークしたサイトなどは表示されなかったりすることがあって、不安定です。Mozilla系では安定しているようですが。

　しかし、16*16のサイズで表現するのって難しいですね。200*40サイズのバナーを作るのでさえ苦労する自分にとって当然苦労しました。ただ単に大きなサイズの画像を16*16サイズに縮小しただけで済む場合もあるのですが、元画像があまりにも複雑なデザインだったりすると分からなくなってしまうので、ポイントとなる部分のみを切り抜きしてそれを縮小させるとか、あるいは1ドッドずつ描いていくしか無い.......ですよね....。素材工房のハンマーは最初、縮小しただけのアイコンにしたのですが、パッと見てすぐにハンマーだとはわかってもらえなさそうだったので、1ドットずつ描く事にしました。.....まあなんとか一応形にはなったので良いかなと思っています。ちょっと汚いですけど。

　サイトをお持ちの方はバナーを用意するのと同様に、これからはファビコンも用意した方が良さそうです。

Favicon Japan!!

　公開した伏魔殿のコンテンツは、今まで公開した癲狂院と素材工房のコンテンツよりもさらにトリッキーなことをしています。アルファチャンネルPNGを背景画像にして、ページ全体の背景画像が透けるように見せる事によって空間的な演出をより出してみました。

　今までにもそういうことを試してみたのですが、どうしても背景に1ピクセル程の枠線が表示されてしまって、その線がどうしても消せなくて諦めていたんですが、ネットで色々調べたら消せる方法が見つかって、今回導入してみた次第です。

　普通に<img>にアルファチャンネルPNG画像を貼るときは、VMLレンダリングで表示するために<img>を<v:〜>のタグで囲み、Win:IEのみそのタグに置き換える様な方法を採っていたのですが、背景画像では同じように背景にする部分、<div>で囲った部分をやはりVMLで塗りつぶす、という感じで表示しています。

　いつものように、Win:IEがアルファチャンネルPNGをサポートしていないせいで苦労するわけです。そんな中、次期バージョンの7.0でアルファチャンネルPNGに対応する、という記事を見つけました。
　IEBlog : IE7 Transparent PNG Implementation
　マイクロソフトのブログのようで、次期バージョンIEの仕様についていろいろ書かれていて、他の追加としてはタブブラウザにするなどが挙げられている様です。それで、PNGについてはやはりきちんと対応してくれそうです。今まで、Win版のIEだけがアルファチャンネルPNGに対応していなかったせいで、PNGがちっとも普及しなかった原因だと思うのです。現状ではGIFの代わり程度ですし。複雑な透明が表現できるアルファチャンネルPNGがサポートされれば、Webデザインが大きく変わるはずです。

　　もしかしたら、既に自分がやっているようなことが他サイトでもありうるかもしれません。そうなると....少し悔しい気もしますが、どのサイトでもそうなるわけではないし、なによりサイトデザインの捉え方が人とは違う感覚で作っているので、同じには........ならないかも。

　なお、IE7は次期バージョンのOSが出るまで出ないと言われていましたが、どうやらそれを待たずにリリースされるようですね。今年の夏にもベータ版がリリースされる様ですし、かなり楽しみです。

今週、新たに† PANDEMONIUM †を公開しました。

　このコンテンツは、女神転生ラストバイブル1／2と、ゴッドメディスンのMIDIデータを単に載せているだけなのですが、今までこれらを目当てに第七天へ訪れていた方々にとって、それ以外のコンテンツには関心はないし、どうでもよいコンテンツなのだと思うんです。別にそれに対して不満があるわけではないですし、多分、自分がそういう立場だったとしても、お目当てのコンテンツ以外はスルーしてしまうと思います。

　そんなことを以前から感じていたので、どうしてもそれらだけをまとめて別のコンテンツとして区別したいと思っていました。ラストバイブル自体は別に邪悪な雰囲気の作品ではないのですが、一応「女神転生」のシリーズですし、モンスターも悪魔ではないですが、魔獣として、西洋のファンタジーに出てくる悪魔や堕天使が登場するので、第七天と対極する設定として伏魔殿を設置しようと思っていました。

　サイトの雰囲気は他のコンテンツ同様に、もう1年以上前から決まっていて、第七天の青色+清楚なゴシック調に対して邪悪で赤と黒を基調としたゴシック調でいこうと決めていました。.......もっと具体的に言えば.......ネットゲームのディアブロIIのACT4の景観。実を言うとかなり真似ています。もちろん真似られる程簡単ではないし、テキスト周りのフレームデザインなどはオリジナルです。

　それで、去年の今頃、せっせと第七天用に作っていたノートルダム大聖堂（パリ大聖堂）の3DCGの一部を使って、新たに組み立ててCGにしました。クリアストリー（ステンドグラスを嵌める高窓）と、今回新たに作ったフライングバットレスを並べた奥に炎が吹き出している.....そういう感じになりました。　大きく高く伸びたクリアストリーとフライングバットレスはゴシック建築の特徴の1つで、実際作ったCG程の高さのクリアストリーはないし、フライングバットレスも天井から下に流れる力を地面へ流す役割を持つ梁なので、天井がない状態のあのCGでは必要ないのですが、ゴシックぽさを表す飾りってことで付けてみました。ちなみにクリアストリーはパリ大聖堂、フライングバットレスはランス大聖堂のものを真似ています。

　使うフォントは、フライングバットレスを支える小塔、ピナクルをイメージさせるようなフォントにしました。（WoodType）　赤と黒の強いコントラストで、なかなか狙った雰囲気が出せていると思います。

　テキスト周りの装飾は、昨年末に買ったアドビの「Live Motion」のパス機能を使って作りました。このパス機能は、たぶんイラストレーターのパス機能を取り入れたもので、簡素なものですが自分にとってはそれまでそういう機能を持つソフトを2Dでは持っていなかったので重宝しています。.....そう、3DCGソフトのSTRATA VISION3dの平面モデリングの機能として同じ様にベジェ曲線を描ける機能があって、いつもよく使っていたので、多少の使い方の違いがあれどすぐ慣れました。

　最初はああいう感じではなくてゴシック建築にあるような装飾を真似ようと思っていたのですが、手間ひまかかるし、第七天との区別が明確にならないような気がしたので、ゴシック調はやめて単に悪魔っぽさを感じられる様なものにしてみました。　そこで今回今までと制作方法が変わった点としては、作る前に紙にデザインを描いて決めてからそれを見つつパスを描いていったことです。　悪魔っぽいデザインのフレーム....っていったって頭に浮かばないし難しいかも....と思っていたのですが、とにかく鉛筆握ってとにかく描いていったら案外すぐにまとまってしまって。やっぱりすぐに消せたり描いたり出来る紙が良くて、デザインを練るには良いですね。紙と言っても小さなメモ帳に描いたのですけどね。

　よく悪魔の翼として描かれる、コウモリの羽の様な線の広げ方に、同じように悪魔の持つかぎ爪のような鋭い曲線の組み合わせのつもりで描いていきました。......なんだかタトゥーデザインにもいけそうなデザインになってしまったのですがどうでしょう......。よく二の腕とか足首に、あんな感じの輪のタトゥーを入れてる人っているでしょう？....っていっても実際見かけたのは一度か二度程ですけど。　あと、試しにシルバーアクセサリーのような質感のテクスチャを施したら、これがいけそうでね....やっぱりシルバーアクセサリ作るべきだって思いました。

　あ、あとペンタグラムをくどい程多用したのも十字架がシンボルの第七天と対極化させるためです。タイトルロゴには、逆さ十字をあしらっていますが、それ以外はとことん使いまくりました。.....逆さ十字が反キリストを象徴すると思う方がいるかもしれませんが、実は違います。逆さ十字というのは、聖ペトロが磔になるとき、イエスと同じ磔では申し訳ないと逆さ十字にして自ら望んで磔になったといわれています。だから別に反キリストの意味はありません。ちなみに同じ理由で聖アンデレは、Xの形の十字架で磔になっています。アンデレ十字とか言いますね。　.......まあそんな事実だったとしても、逆さに向いているっていうのが地獄を指している感じで、使ってみました。

　テレポートコントローラーも、それをモチーフにペンタグラムのリングをアイコンにしてくっつけてみました。他のコンテンツのテレポートコントローラーは魔界のミスリル銀で出て来ていますが、この伏魔殿のは、魔力によって動いています。w　魔界へ赴いて、魔獣の骨を拾って来て、それに十字架とペンタグラムをくっ付けて魔力をかけてコントローラーが出来たんですよ。ww　魔力がもっとあれば完璧な姿に出来たのですが、力及ばずゾンビ状態になってしまいましたが。というわけで、あのコントローラーだけは生きています。w　もっと魔力を鍛えないと！！！（ぉぃ）w

　そう！　そのコントローラーの両目のアニメーション、実は初Flashファイルです。アニメーションGIFにしようと思ったのですが面倒くさいし、LiveMotionにはせっかくFlash機能がついているのですから敢えて挑戦してみました。.......かなり地味ですけどね。.....本当は各メニューボタンをクリックするときに音を鳴らすとか、マウスを乗せた時にアニメーションさせるようなこともしたいと思ったし実際それほど難しくないので出来たとは思いますが、重くなってしまうのでやめにしました。

...............うぅ、長くなってしまいました。　でもなかなか満足しています。肝心のコンテンツはスカスカですけど...........まあ、女神転生ファンから完全に相手されていないラストバイブルを少しでも盛り上げられたら......良いなと思っています。

修正したのでした。
これもけっこう無茶なCSSの使い方+激重画像使っていたりしたので、前々から修正しなくてはとは思っていました。ちょっと画像が大きかったので、1024*768のサイズで見ると、十字がでかすぎ。なので一回り小さくコンパクトにまとめました。他には......どうでもよいことなのでしょうが、タイトルのフォントサイズ、ページの余白、ページ下部のバナー台、結構細かい箇所まで綿密に修正しなおしました。　なんとなく縦に長いページにしたかったので、今回の修正で、うまく収まる所に収まった、という感じで、満足しています。

　そういえば、Materialer〜と癲狂院、それぞれテキストに使うフォントも改めてCSSを書き直しました。今までWindowsのフォントについて良く知らなかったためフォント指定に消極的だったのですが、このDiaryをWinで見ると字間が妙に空いてカッコワルく感じてたので、なんとかしようと思っていろいろ調べたら...........どのWindows機にも確実に標準でインストールされているフォントって、意外に少ないことがわかりました。　特に和文フォントは少なく、明朝体などは通常のテキストのフォントサイズではギザギザで読みづらいし、結局、ゴシックフォントの3つだけになってしまうんですね....。その中でも字間が気に入った、"ＭＳ Ｐゴシック"にしました。プロポーショナルフォントですね。欧文フォントについても、Materialer〜のほうでは部分的に指定しています。Macにも同じくインストールされている"Impact"を使っています。癲狂院の方でも試してみたのですが、合う様なフォントがなくて............残念です。"　University Roman"が標準でインストールされていればねえ.....。ラッキーなことにうちのWin機には最初からインストールされていたのだけど.....。　とにかくフォントの力は医大だと思っているので、フォントの埋め込み技術とか気になっているけど、あれって実用的ではないし。　
　　Macをお持ちでないウインドウズユーザーの方は、ぜひ一度マックで自分のサイトを見てほしいです。........ぜったい驚くから。こんなに綺麗なの？？？って思うはずだから。　OS Xになってから標準でインストールされているヒラギノシリーズは本当に素晴らしいフォントです。OS側で常にアンチエイリアスがかかっているせいもあると思いますが、滑らかで美しいのです。それが普通に表示されるんですよ。　ためしにCSSのフォント指定で、"ヒラギノ角ゴ Pro W3"とか、"ヒラギノ明朝 Pro W3"と指定してみれば、..........Winでは残念ながら変わらないけど、Macで見ると、見違える　！　角ゴの方は指定しなくてもデフォルトで指定されているのであんまり意味ないかもしれませんが。

　あ、あと、そう！　スクロールバーの着色も今回初めてしてみました。Win:IE独自のプロパティなので、以前は邪道だと思っていました。Macには関係無いし、IEの「勝手に実装した」プロパティだと思っていたので。.........確かに勝手に追加したプロパティですが、実際のブラウザのシェアを考えれば、多くの環境で表示されるわけだし、W3Cに従わないから何だかんだ言ったとしても、......( ・x・)ﾌｰﾝ　って感じでしょう？　せっかくそういう機能があるのだし、その機能の有無でレイアウトが崩れるわけではないし.....と思って、指定しました。　その結果、すごく見栄えが良くなった気がします。スポイトツールでスクロール付近の背景画像の色を取り出して、その色で指定しているので、うまく馴染んでくれて満足しています。　あえてブラウザウインドウには指定せずに、コンテンツ内部の、overflow: auto; で疑似インラインフレームになる部分だけ、指定しています。

　部分的ですが、カーソルの指定もしています。.........よく巷で、カーソルがえらいことになっているサイトを見かけたりしますが、あれって......ちょっと廚臭いので、やだな〜と思って敬遠していたのですが、ヘルプのリンクだけは、ヘルプのカーソルになるようにしたほうがいいかなと思って、そうしました。

　そんなわけで、あと気になっているのが、テキストの影を表示出来るプロパティ。　実はこれ、Macの標準ブラウザ、Safariのみ対応しています。これはSafariの独自のプロパティではなくて、CSS2に規格としてきちんと盛り込まれているものなので、この先廃止されなければ、いずれは他のブラウザも対応してくれるはず！　最近そのことを知ったので...........近いうちに......どこかに影をっ！

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

　まず、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

　なんだか、自分のやりたいことはすべてこれらのソフトをフルに使う事によってほとんど可能なのかも。もちろん将来は分からないけど現状では問題無しだし。.......改めて振り返ると、ソフトの選択肢は間違っていなかったのかも、って思います。どれも1万〜2万以内の低価格なソフトなのに上手い具合に機能が重なっていないから幅広く対応できたのですね.....。

今回の素材工房だって、手持ちのソフトを総動員して作っています。

STRATA Vision3d 5.0　で、3DモデリングしてレンダリングイメージをJPEG形式で保存。

Photoshop Elements1.0　で開き、背景を取り除き、色調補正、テクスチャをレイヤーに重ねたりして、もともとコントラストの弱い出力になりがちなVision3dのレンダリングイメージを補正。PSD形式で保存。

ImageStyler1.0（現在はLiveMotion2.0）に取り込み、レイヤースタイルを追加。影を付けたり、ImageStylerで別に作ったロゴやボタンなどと組み合わせたものをグループ化して、PNG形式で保存。

Fireworks4　で開き、スライス設定を必要ならば設定した後、Web用に画像を最適化し、画像を書き出し。その際にスライスした場合は、テーブルレイアウトされるHTMLソースも一緒に書き出し。ここで画像関係の作業は終了。

書き出したHTMLを、Dreamweaver4で開き、多少修正した後、そのテーブルレイアウトのソースを、別のHTMLファイルに組み込み、同時にページを制作し保存。

mi（ミミカキエディット／フリーウエア）でHTMLファイルを開き、XHTML用に修正、細部を修正してWebページ全体が完成。

　.......6つもソフト使ってるよ.........。さっさとDreamweaverを最新バージョンにして、Photoshopのフルバージョンを買え！って感じですが。　特にDreamweaver4は、もう4年くらい前のものになるので、CSSの表現はほとんどアテに出来ないし、HTMLだって、Validではない記述を平気でするし、その修正が面倒くさいので、これだけはアップしておきたいかも。現行Dreamweaverがバージョンアップしてしまったら、アップグレードできなくなってしまうし。（2世代前までがアップの対象だったはず）

　それなので、今はテーブルレイアウトと画像配置のみソフトで行い、他のほとんどは手書きでタグ打ち状態です。そのタグ打ちに便利なのが、少し前から使い始めたmi（ミミカキエディット）というMacではだいぶ前からポピュラーだったフリーウエアのテキストエディタを使っています。デフォルトでも標準のテキスト形式はもちろん、HTMLやCSSの記述にも対応していて、タグや要素をメニューから選ぶだけでポンとテキスト内に記述されるので、ちまちまと打つ手間も省けるので助かっています。ユーザの方が作成された「モード」と呼ばれる拡張機能を組み込む事により、さらに機能がアップするので大変便利です。
　ユーザの方が作成された、XHTMLに対応したモードで編集しているのですが、文字コードもユニコード（UTF）に対応しており、テキストの変換も楽だし大変助かっています。XHTMLでは、タグ等は全て小文字で表記することになっているのですが、DW（Dreamweaver4）で書き出されたものは大文字も混じっているし、<br>もXHTMLでは、<br />という風に閉じなければいけないのですが、DWでは閉じてくれないので、改行を多用する文章の記述は出来ないので、miで編集しています。検索／置換機能も優れていますし.......本当、素晴らしいソフトです。

　.....とまあ、こんな感じでいつも作っています。
他の人も、いくつもソフトを多用しているのかもしれませんが、なんだか自分の場合は、それがやたらみみっちい感じが.............なきにしもあらず。いやいやそれでもよいのです。低価格のソフトでもこうして一応それなりのサイトは作れるし、なにより宝の持ち腐れにならないから、罪の意識に苛まれずに済みます。w

　素材工房（というより鍛冶屋って感じだけど）のコンテンツで使っている画像ファイルを見ていたら、アルファチャンネルPNGなのに妙にサイズが小さいファイルを見つけました。他の同じ程度の大きさの画像だと90KB程度になっているのに、30KB程度....。32bitPNGは圧縮していない形式なのに.........。

　どう考えたって手持ちのソフトで書き出したに決まっているのですから、使ったソフトをいろいろ調べていたら発見！

　なんとFireworksでは、8bitのPNGにもアルファチャンネルによる透明化を実現出来たのです！！！　.....たぶんその画像は何かの手違いでそういう書き出しをしてしまったのだと思います。......自分でも気付いていなかったので....。

　手持ちのグラフィックスソフトでPNGの書き出しが出来るのは、Adobe ImageStyler1.0、Photoshop Elements1.0、Macromedia Fireworks4で、ImageStylerでボタンやプレート等を作った場合はImageStylerで書き出しをし、その画像のうち、スライスする必要があるものは、Fireworksで処理していました。

　ImageStylerは古いソフトなので、デフォルトではアルファチャンネルによる透明化PNGは書き出し出来ないのですが、Photoshop ELにあるプラグインのファイル形式フォルダにあるPNGのプラグインをImageStylerのプラグインフォルダに入れる事によって、アルファチャンネルによる透明化が可能なのです。（......たぶんこれを発見したのは自分だけだろうな....）　それでも書き出し可能なのは、8bitか32bit（=TrueColor）のどちらかで、8bitでは圧縮はできるのですがアルファチャンネルには対応しておらず単一の透明化のみ可能なので、GIF形式と同じ様なものです。32bitはオプションがなく、アルファチャンネル透明化可能ですが圧縮無しの書き出しになってしまうので、ちょっとした大きさのボタンでも、100KB超はざら、という具合です。

　同じプラグインにしているはずなのに、Photoshop Elementsでは、32bitの選択肢がなく、8bitと24bitの書き出しに対応しており、8bitについてはImageStylerと基本的には同じでカラーの割り当てが出来るくらいで、24bitがImageStylerでの32bitと同じ機能らしいのですが、ファイルサイズがImageStylerでの書き出しよりも少し小さくなるのです。たぶん24bitだからなのでしょうが。それでもまあ五十歩百歩みたいなものなので、大きなサイズには変わりありません。

　Firework4では、8、24、32bitそれぞれ選択肢があるのですが、24bitでは透明化できないので、32bitでしかアルファチャンネル対応していないと思っていたので、そのまま32bitで書き出ししていました。

　なのに......なのに.........8bitでもアルファチャンネル対応出来たとは......迂闊でした。自分の間抜けぶりを改めて認識するはめになってしまいましたが、とにかくこの事実を知った事は、非常に有益でした。ほとんど1/3程に小さく出来るのですから、あれだけPNGを大量使用しているコンテンツにとっては物凄いサイズ減少になるわけです。8bit=256色までしかカラーが使えないのですが、カラーの割り当てがこのFireworks、非常に上手く、ほとんど元画像と同じ状態で書き出しできるんです......。ちょっと信じられないくらいです。

　でも....8bitPNGって、確かGIFと同様に単一の透明化しかできない仕様だったはず.....。PNG関連のサイトを見てもそう書かれているのに.....、。ということは、8bitでアルファチャンネルを持てるPNGはFireworks独自のファイルなの？？？　でもIEを初めとして、ブラウザチェックに使っている全てのブラウザできちんと表示できたし......。ちょっと「?」な感じ。それに........実はついうっかりして、結合せずにレイヤーマスクを残した状態のPNG画像をそのまま使っていたものもあったのですが、それも問題なく表示できるし.............Fireworksってすごいかも。

　なぜ、こんなにPNGに執着しているかというと、W3Cが、今後のWeb用の画像ファイルとして、PNGを奨めているからです。というか、いろいろとライセンス関係で問題のあるGIFに変わって高機能の画像形式を用意しようとW3Cが提案してきたものの結果がPNGなのですから、今後Webでは標準になるはずです。W3Cがそう言っているんだから、それに従わざるを得ないですし。HTMLだってそのうちXHTMLで書かれたWebページが多くなるでしょうし、エンコードだって、ユニコード(UTF-8/16）になっていくでしょうし.....。　とはいえ、事実上の標準ブラウザであるWin:IEがアルファチャンネルPNGに対応していないせいで、普及が進んでいないという現実もあるので、次バージョンのIE次第なのかもしれませんが。　しかし他のブラウザは全て実装しているし、どうせW3C辺りからも対応を迫られているでしょうから、対応するとは思いますが。

　ともかく、32bitPNGを大量に書き出してしまった今頃になって気付いたのは遅すぎるのですが、Fireworksにはパッチ処理機能もあるので、まあ楽に変更できるでしょうし、近いうちに、鍛冶屋も癲狂院も、ぐっと画像の読み込みが早くなるはずです。

　当コンテンツのアルファチャンネル付きのPNGの透明化は、VMLという形式で、その透明化を実現しています。置き換えるには、タグの代わりにで表記するらしいのですが、とあるサイトで、特に何のタグも表記せず通常のままで透明化出来る変換プログラムが配布されていたので、それを採用していました。

　ところが不具合が少しあって、それはもちろん前々から把握していたのですが、変換するにはこれが仕様なのだと諦めていたのです。その不具合というのは、全ての画像がダウンロードされたにもかかわらず、透明化にならないという症状です。クリックしたりウインドウ内をスクロールしてあげたりすると、変換が進行され(?)、透明化になるのですが、どうやら画像の量が多いとその症状になりやすいようです。このブログのページや、リンク集の「Paranoia」のページでも酷い具合です。たいていクリックしてやったりしてやらないと透明化にならないです。

　このことを知らない（知る由もない）ビジターには、うざったく感じるはず.........。特に黒背景の上に、でかでかと白い背景付きの画像が出て来たら、なんかバグってる感じだし、その後何も反応がなければ（透明化されなければ）、その後続きを見たいとはなかなか思わないかもしれません。それらのことが不安だったのですが、表現の具体化のためにやむを得ず......という具合でした。

　素材工房のリニューアル化で、BBSにもこのPNGの透明化を変換プログラムで済ませようと思って、同じ様にしてみたのですが、どうもうまくいかないのです。ファイルがCGIのせいなのかわかりませんが、透明化出来ないのです。仕方ないので、タグからに変換するために、1つ1つタグを書き加えていく事にしてみたら、何故か透明化できたのです。BBSでは画像を多用している上に、CGIスクリプト内に散らばったHTMLの部分から1つ1つ書き加えていくというのは非常に面倒くさいのですが、これしか方法がないので。手間をかけて全て付け加えました。

　きちんと全ての画像が透明化できました。その後もレイアウトの配置等で何度もページを開いているうちにふと気付いたのです。.............こんなに画像を多用しているのに、何もしなくてもきちんと透明化される..........って。

たまたまキャッシュが残っていてそれのせいだと思ってクリアしたり、何度もページを更新してもスムーズに透明化されるんです！　...........もしかしたら、多少手間が掛かっても、こちらの方法で透明化した方がいいかもしれない.......と、他のページにも書き加え修正してみました。

　結果は全て良好！　重いリンクのページでも透明化されていないままの状態で表示されることはなく、スムーズに表示できるようになりました。もちろん画像をダウンロードする時間はかかりますが、最近の通信環境だったらだいたい大丈夫なはずです。

　とりあえずリニューアル後の素材工房をご覧になって下さい。あのカッコワルい白背景画像が出ないはずです。素材工房のリニューアルが終わったら（もうすぐです）、癲狂院の方のページも修正することにします。これはかなり自分にとって嬉しい事です。マックで見ているのと変わらない表示進行ですし。（Macで使えるブラウザはデフォルトで全て透明化がサポートされています）

　また、今回は、ウェブの総本山である、W3CのValidのチェックを標準にしてページ作りに励みました。XHTMLの1.0の上に、Transitionalなので、従来のタグも使えますし、Strictよりも仕様がかなり甘いので、普通にページ作りしていればValidになるのですが、うちみたいにヘンなものに執着していたり、ヘンな癖が身に付いてしまってからだと、なかなかValidなページ作りをしづらいところがあります。きちんとしたwebページ作りを解説しているサイトで学べば難しくないはずですので、悪い癖が付く前に学ばれる事をお勧めします。　初心者向けのサイトで解説されている内容は、分かり易い様に簡略化されている場合が多いので、そのままだと拙い場合があります。もちろん最初から一気に学ぶ事は大変ですからそれは仕方の無い事ですが、いずれは学んでほしいかな.....と思います。　文章構造がめちゃめちゃな当サイトの管理人が言う筋合いではないのですけどね。

　とりあえず素材工房のリンクはそういうサイト作りに大変参考になるサイトを数多く紹介しています。代わりに素材屋サイトは載せていません。なぜなら素材工房のビジターのほぼ全てが、素材協同組合からの訪問なので紹介する意味がないのです。

　というわけで、出来れば日曜日辺りにはオープンさせたいと思っています。各ページは出来上がって既にアップも済ませているのでそれだけをメニューにして公開してしまってもいいのですが........やっぱり、テレポート機能は最高だから.....。工房内はY,X軸、どちらにも動く配置にしてあります。.......もっとも、第七天を含めすべてのコンテンツの配置は、ちょうど去年の今ぐらいに既に出来上がっていたのですが。これに第七天のテレポート機能が加わると..........完全に「空間的な」サイトになるはず............。