◆ TOP ページへもどる
|
◆ TOP INDEX ／ 日記「いつも通り」 |
|
|
■ ４月３０日 （火） ◆ 「いつの間に」 いつの間にやら、４月も終わりである。月末である。 妙に暑かったり妙に寒かったり、冷房入れたりストーブつけたり春は春は春はどこへいったと歌いたくなるような陽気の中、何やらあちらのモノを探して読みふけったりこちらのモノを探して観賞したりしていたら、あっという間であったよーな気がしないでもない。 要するに、まったく大した事はしていない。 そんな中、相変わらず月末の日記更新である。 ◆ 「四月になるバカもの」 ４月も１日は、懲りずに今年もエイプリルフール・ネタをやってみた。 「◆ 白い画面をフーフーするとホームページがあらわれる」という、ハッキリ言って風呂に入って鼻ほじりながら思いついたよーなネタであるが、本当は深い思考の中、風呂に入って鼻ほじりながら思いついたネタである。 いや、実にくだらなくて自分でも呆れている。 実は、エイプリルフールの一週間前から、今年のネタを考えていたのであるが、これがまた まったく 何も 全然 アイデアが出なかったのである。 体調が悪かった事もあり、酒も飲めない。 まさに頭の中は真っ白。 ３月の３１日になってもアイデアの「ア」の字も出なかったので、今年はネタを欠番にする事を本気で考えたりしていたのである。 何か、モバイルやらスマートフォンやらのネタでも、と思ったのだが、頭の中でネタを発展できず。 そんな中、もう真っ白な画面でも出しておくかー、と思いついたら、何か手抜きもできそうな、「画面フーフー」ネタが出て来たのである。 あまりに馬鹿馬鹿しくて、自分で頭を抱えた。 ネタが出来たら、とっとと HTML 書きである。 最初は、白い画面を出すだけで、我慢できずにクリックしたらいつもの目次ページに飛ぶようにしようと思ったのだが、これではちょっと芸がない。 フーフーしていたら、段々とページが現れるようにする事に決定。 ページ移動の時にフェードイン・アウトすればよいので、 JavaScript で何とかなると思い、ちょいと色々なソースを検索。 ペキペキとスクリプトを書いてみたが、「徐々にページが現れる」という様にはならず。 「 jQuery 」という JavaScript ライブラリも導入してテストしてみたのだが、やっぱり上手くいかず。 ・ jQuery ◆ http://jquery.com/ （※ 今回の目的には合わなかったが、優れ物なので後日色々と遊ぶ次第。押忍） どーやっても上手くいかないのであるが、４月１日になって０時も過ぎてしまった。 とりあえず画面が反応しないページだけでもアップロードしておく。 アップロードした後、 さらに本腰を入れてソースを検討。 ここは思案の思案橋、と考えてみる。 「ページ移動がうまくいかないなら、ページ移動しなきゃいいじゃない」 と思いつく。 簡単な話である。 ページを見えなくするオブジェクトをページの前面に置いて、オブジェクトを段々と透明にしていけば良いのである。その後、ページがちゃんと使えるように、オブジェクトを廃棄。 これなら、意外と簡単なスクリプトで済みそうである。 そう、簡単な ── と、思うたら、簡単ではなかった。 白いオブジェクトは白い背景のテーブル（ table タグ）。 これをスタイルシートのＺバッファを使って、ページの前面に配置。 そのままでは何やら端の方が見えてしまうので、ページ全体のマージンは０に設定。 オブジェクトを段々と透明にするスクリプトは、あちこちの JavaScript 入門ページを参考にして、書く。 あまり綺麗なスクリプトではなかったが、成功。 その後、見た人が「えー」と思いつつ試しにフーフーする（と思われる）時間を何度もカウントし、実験で出た時間の 85% に設定。 そして調整。（これは冗談ではなく、マジである。） アップロードしたら、朝陽が眩しかったのである。 めでたく完徹である。 （続く） （←おい） ◆ 「四月のバカ者」 さて、アップロードしたエイプリルフール・ネタのページのお話。 翌日 もとい、当日の夜。 「 D&D Online 」にインすると、よくプレイをご一緒するミシャ殿から 「画面がずれてわからなくなってる」 とのご指摘を受ける。 いかん、手抜きをして Internet Explorer 8 でしか確認していなかったのである。 画面がずれているという事は、スタイルシート関係であろうとアタリを付けて、ソースを確認 ── したが、よく解らず。 ここでいきなり Google Chrome をインストールである。 Chrome で見ると、確かにテーブルは左に寄っているわ、テーブルの背景が透明になってページが隠れてないわ、スクリプトは動いてないわ、意図しないページであるどころか、訳がわからないページになっている。 ここは、「 IE なら許されるけど実はちょっと違うんだよ」と思われるタグを、一つ一つ修正してゆく。 私はページのレイアウトに table タグを使うのが好きなのだが、これは本来の使い方ではない。 そんな訳で、ページを隠す為に画面一杯（ Width=100% ）に表示していた table タグを、 div に切り替え。 ちょこちょこと修正すると、意図したページになる。 いやっふー。 さらに、動かないスクリプトも見直し。 見直し ── したが、まったく解らず。 色々と検索したり試した結果、「 IE と他のブラウザは、透明度を変更する方法が違うんだよーん」という事が判明。 ふざけるな。 ちなみに、スクリプト内はこんな感じ。 まずは、オブジェクトの ID をゲットして、変数 obj に代入。 obj = document.getElementById("Wrap"); ID 名 Wrap は、ページを隠す div タグに勝手につけた名前。 お次に、透明度を変更する為、オブジェクトのプロパティを変更。 obj.style.filter = "alpha(opacity=" + alph + ")"; コレは IE の方法。 変数 alph はアルファ値。 0 で透明。 100 で不透明。 この変数 alph をタイマーで段々と変えていって、徐々に透明に。 alph0 = alph / 100; obj.style.opacity = alph0; コレは IE 以外の方法。 opacity プロパティの範囲は 0.0 〜 1.0 （ 0.0 で透明、 1.0 で不透明）なので、変数 alph を１００分の１にしている。 オブジェクトの、変更するべきプロパティを何となく把握できたので、スクリプトを修正。 さらに、ゴチャゴチャしていたスクリプトをシンプルに修正。 無事、 Chrome でもネタページが表示されたのである。 試しに使った、古い FireFox でも無事に表示。 後日、 PS3 でも動作確認。 よかったよかった。 ふと気が付くと、また朝陽が昇っていた。 こんな短いスクリプトで、ずいぶん苦労するとは馬鹿な話である。 とはいえ今回、とても勉強になったのである。 |
◆ TOP ページへもどる