The Blue and Violet Storys

[LINK]

「鑑賞-紅葉」


　実装にあたっての苦労は別段ありませんでした。「空から降る雪」の掲載時に、これまで使っていた古いスクリプトの仕様との変更箇所を、そのままこの「紅葉」のスクリプトに施しただけですんなり動きました。
　あとは、これまで単純にグラデーションだった背景を、写真に差し替えただけです。

　実はこのスクリプト、「空から降る雪」よりも以前に開発したもので、私がJavaScriptで遊ぶようになって、ほとんど最初のスクリプトにあたります。当時は、普通に存在したトップページなどに、JavaScriptを挿入するタグを加えるだけで、ブラウザにかぶさる形で紅葉やトンボを表示させるといった使い方でした。例によってGalleryコーナーの仕様に合わせて作り変えてあります。

　まあ、こないだは季節柄を意識して雪を降らせましたが、今回は勢いということで。（苦笑）


≪ 続きを隠す

[PIC]
　その名も「魔法の言葉」

　ごく限られた一部ウケというそしりもなんのその、ひたすら遊んでいたものです。そういえば、先日UPした「空から降る雪」も似たようなものなんですけどね。

　ほとんど休止状態になったり、突然移転したり、サイトを大改造したり、といった経過の中で以前のようなHPビルダー半分、JavaScript半分といった環境から大きく異なってしまった今、かつてのコンテンツの復活には、いささか手間を要しました。
　なるだけ、今のサイトのスタイルの中に挿入する形で実現したいですからね。

　当時、どっかのサイトのJavaScriptの応用例から引っ張ってきたものを、適当に改造して実現した「魔法の言葉」ですが、今回はまったく新しく作り変えることで、そのの目的を達成しました。

　分かる人しかわからない、独りよがりなネタに、興味がおありの方は、ぜひ覗いてみてくださいませ。


Galleryコーナー

「魔法の言葉」は、鑑賞と同じくGallery（展示コーナー）の一部として実装しています。


≪ 続きを隠す

[PIC]

「鑑賞-空から降る雪」

　スクリプト自体は、私がHPを一番最初に始めたころに、遊び半分で作っていたもので、かなり古いものになります。

　今回、実装にあたっては、当初ブラウザのを全面を使って表現していたものを、Galleryコーナーの仕様に合わせてコンテンツエリアの中に押し込むという手続きを施しました。

　特にそれによってコードが複雑になったわけではないのですが、降らせる雪の座標を特定するために、親コンテナであるコンテンツエリア（div）のブラウザ上からの位置取得に手間取りました。

　文字通り、IEとそのほかのブラウザでは、コンテナの座標を取得するためのプロパティ（OffsetLeftやOffsetTop）の挙動が異なっていたわけですね。
　IEの方は、純粋に対象コンテナのさらに上の親コンテナに対する相対座標を返すのに対して、比較してみたFireFoxでは、おおもとであるbodyからみた座標を返すようです。
　利用する側から見たら、FireFOXの方がずっと簡単に扱えますが、IEの仕様では、bodyから子コンテナ、さらに孫コンテナと入れ子になっているコンテナのIDを対象コンテナまで順に辿ってその合計を取ってやらなければなりませんでした。

　なんとも、面倒くさい仕様です。

　それはともかく、なんとか実装しました。動作確認はIE7.0とFireFOX3.0でしか行ってませんが、おそらく他のブラウザでも大丈夫だと思いたいものです。



≪ 続きを隠す

　やはりてこずったのは投稿コーナーの中の３つの投稿用掲示板でした。
　実は、通常の掲示板の方は、若干の手直しをしつつ、マイナーバージョンアップをしてきた経過があるのですが、投稿コーナーはそのひとつ前のバージョンのままでした。まずはそこから手をつけないといけませんからね。

　どちらかというと、気を使ったのは、将来XHTMLの1.0strictや1.1に移行することを考えて少しでも厳格な記述にしようと全コンテンツのスキンを見直していたということでしょうか。古い記述が随所に残っていた喫茶「FlowLight」や七夕～あなたの願い事、海に浮かべた小瓶などは真っ先に赤点候補です。

　ちなみに、そのXHTMLですが、現在HP版は「XHTML1.0 Transitional」で記述しています。コンテンツの中にはインラインフレームを使っているものがありますし、リンクページからのリンクはやはり別窓を開く方が現実的だと考えているからですけどね。

　とはいうものの、私が今のところXHTMLの文法チェックをさせていただいているAnother HTML-lint gatewayは、実際のHPのXHTML宣言を無視して別のバージョンのXHTMLやHTMLとしても文法チェックをしてくれるので、折に触れて、「XHTML1.0strict」でのチェックをするようにしています。おおよそは無難な結果を得られました。（１００点満点は無理として、チェックされるのが分かっている－－確信犯？－－ページは別にして、ほぼ９０点以上をマーク）

　ついでですが、Markup Validation Serviceにて全ページの認証を得られましたので、トップページに「W3C」のロゴを掲示させていただきました。なるほど、みなさん（？）ここでチェックしておられたんですねぇ。
　どちらかというと上の「Another HTML-lint gateway」に比べると採点は若干甘いようです。致命的な記述のミスがなければ通してくれるみたいですね。まぁ、現実的なセンといったところでしょうか。


≪ 続きを隠す

[PIC]
　結局、「小説おき場」でこしらえたスクリプトをそのまま（なんの修正も加えずに）使いまわしています。つまり、データ構造を「小説おき場」と同じ形式に設置しなおした上で、コーナースキンで帳尻を合わした形です。

　もともと、小説置き場に導入したスクリプト自体が、かなり汎用性のあるものを想定していたわけですが、データの格納の仕方がまったく異なっていたことに加えて、数が多く（６０件以上あった）、手作業での修正が大変だったので、逆にデータ変換のためのスクリプトを組んだ方が早いということになってしまいました。（それまで試行錯誤した苦労がふっとんだ／笑）


　さて、コンテンツの携帯対応作業も大分進んできました。

　残るのは……、投稿コーナーでしょうか。
　掲示板と同じスクリプトとはいえ、スキンがかなりの色物ですからねぇ。（汗）


≪ 続きを隠す