その必要性は月別表示や検索結果表示モードで発生した

頁全体が読み込まれないと、否正確に言えば「popup表示用の要素がdocument内に存在し、かつその読み込みが完了しないと」popupイベントはエラーとなってしまう。そして先に書いたようにグループ表示モードの時のid重複を避けるため、popup表示用要素はHTML内に配置せず、Javascriptによって追加（append）する方法に切り替えた。

その結果ページの読み込みが完了しない限りpopup表示用の要素はページ内に存在せず、従ってpopup設定箇所にマウスオーバーした場合にはエラーが出てしまう。

つまり、頁完了まではpopupイベントを発生させないようにしなければ、利用者に迷惑を掛けてしまう。エラーが発生しないようユーザビリティを向上させるべきだ。

こうしてエラー対処を講じることとなった。

body部のonloadイベントハンドラー内にpopup関数を書き込む方法もあるが、それではonloadイベントが多数になりすぎる。そこで頁読み込み完了を示すフラグを立てる方法を採用することにした。

その方法は一般的なのかどうか分からないが、簡潔で気に入った

採用した方法は『Javascript第3版』（David Flanagan著）p.233に記載されている方法だ。onloadイベントハンドラ内に「window.loaded = true;」なるフラグを設定し、複数存在しているpopup関数の冒頭にこのフラグの真偽を確認する文を挿入して、window.loaded ==falseだったらreturnしてしまい、popup表示関数を停止してしまうのだ。

これによりpopupに係るエラーは出なくなった。

なお、この方法の素晴らしさはその汎用性にある。つまり、読み込み完了前に呼び出される可能性のある関数の全てにおいて、その1行目でflag値の真偽をチェックさせるようにすれば、関数内変数等の未定義エラーを避けることが出来るからである。

Ajaxなり、event.js（doxdesk.com: software: event.js）を使う選択肢もある

しかしそれらの方法は、今の私のJavascriptに関する知識では理解を超えるので、今回は原始的方法に拠らざるを得なかった。

• popup関連エントリイ一覧 in this Blog

それは複数エントリイ表示において支障が出たことから始まった。

月別表示、検索結果表示など複数のエントリイを１のページに表示することはよくあることだ。

ここにおいてHTMLテンプレート内でpopup用のdiv要素を設置してある場合（例えば、<div id="balloon"></div>のように設置した場合）、当該ページ内に同一名のidを持つdiv要素が表示されたエントリイ数だけ複数出来てしまう。この結果idの競合が起こってしまい、popup表示が思うようにいかない場合が発生したのである。

そこで・・・前から思っていたことなのだが・・・、Javascriptで挿入するようにすれば、複数エントリイ表示の場合でも、popup用の要素は1つしか存在しないように出来るので、その方法に変更することとした。

要素の挿入はDOMの一般的な方法であるappendChildを使ったが、今後のためにもエントリイ内に記録しておきたい。なお、balloonAppend関数はbody部onloadイベントハンドラー関数として埋め込んで起動している。

popup用div要素の追加コード

function balloonAppend(){ 　var i; 　for (i=1; i<4;i++){ 　　var elm = document.createElement("div"); 　　if (i==1) elm.setAttribute("id","balloon"); 　　else elm.setAttribute("id","balloon"+i); 　　document.body.appendChild(elm); 　} }

• 透明度・不透明度関連エントリイ一覧 in this Blog

それは透明化・不透明化関数の練習のためでもあった

透明化・不透明化はこのブログを設立した頃にはまだ、IEでしか出来ない状況だった。あるいはIE以外のbrowserにおけるその実現方法が分からなかった。

しかし、今回別件（要素の高さ取得）で要素の透明化の必要に迫られて調べてみたところ、IEだけではなくMozilla系、safari、Operaでもそれが可能であることを知った。（これはこれまでも何度も触れてきたWebサイト：youmos - 新しいWebビジネスや技術アイデアを活性化するWebマガジンのお陰である。ほぼ毎日新しいJavascript素材や海外の貴重なサイトの紹介が更新されているが、改めて深甚の感謝を献げたい。）

この結果望んでいた透明化・不透明化コードを書くことが出来たのだが、 Smooth　Scroll を実現した今、改めて「ソフトなWeb表示の変化」に興味を抱いた。

一方、アメリカを熱狂させたらしい iPhone の紹介動画をいくつか見て、Apple社がそれで実現しているSmooth Scrollやソフトな表示の変化に、改めて強い関心を抱いた。

かくして、随所に設置しているmouseover時に表示されるpopupについて、それを表示する際に透明化から不透明化への変化を持たせたい、と思い始めた。

既にこのサイト上でそれを実現しているので、随所で表示されるポップアップが「ほゎ〜っ」と表示されることはここで触れるまでもないだろう。

▲ToTop

ここでは、実現に当たっての苦労談を綴っておきたい

要素の透明化・不透明化について（検索キーワードは"Javascript opacity"）検索すると沢山のサイトがヒットする。日本語サイトだけでも約50万件（2007/07/07_0100am時点）がリストアップされる。

そのヒットリストの上位5Webを覗いてみると先ほど触れたyoumosもあるし、数年前にも見かけた内容が、画像のフェードイン・フェードアウト - e-Webに収録されている。All AboutのYUIモーションopacity,Easing... - ［JavaScript］All Aboutは、流行のAjaxを使った例として興味深い。

透明化・不透明化はsetTimeout関数を使用することになるが、その例を色々さがしてみても、殆どが setTimeout("function()",msec) のようにfunctionに引数を取っていない。その場合functionの対象要素や必要な引数は皆global変数として定義し、function()の外で値を設定する方法をとっている。しかしこの方法は一つや二つの要素を対象として利用する場合には支障がないが、沢山の要素を対象としてsetTimeout関数を使おうとする場合、引数として対象オブジェクトや透明度の数値をセットしたくなるのだ。何故ならばそうした方が汎用的な関数として利用しやすいからである。

名著『Javascript ＆ DHTMLクックブック』（著者Danny Goodman）には、setTimeout内の関数に引数がある場合のコードの綴り方が書いてあるが（p.95）、何故そうするのか説明がなく応用を利かせることが難しい。

ところで、e-Webの方法はIE限定であるが、youmosで紹介されているスクリプトを使えば、FF、Opera、safariに拡張できるものであり、貴重な点はsetTimeout関数内に引数を取っている点である。その方法を採用すればおそらく巧く動くだろうと思う。但し、name属性はXHTMLでは非推奨なのでidを活用することになるだろう。しかし、よく考えれば透明化・不透明化のsetTimeout関数内で、getElementByIdで対象を取得するのは無駄に時間を要すると思う。だからこそ、最善の方法はAjaxを勉強してマスターする道もあるか、とまで考えたが、当面その時間が取れそうもない。かくして、id属性を活用するe-webの方法は採用せず、setTimeout関数内の関数に引数を取らない方法で透明化・不透明化を行った。

YUI（Yahoo! User Interface Library）を分析してみたが、理解には時間が掛かりそうだ

その上で、Ajaxマスターへと進むのがこの際の最善の道ではないかと思い、yuiをダウンロードしその内容を調査してみた。しかし、それらは余りに沢山のコードからなっており、内容を理解して使いこなすには膨大な時間が掛かりそうだ。YUIの内容を理解しないまま使えるだけ使う道もあるが、そのようなことはしたくない。

だからといって、たかが透明化・不透明化を行うために全てのYUIを理解するには、その内容はかなり膨大で難解である。

しかし、透明化・不透明化については、id指定した要素をsetTimeout関数を使って操作する点は変わらず、膨大な内容を理解してから使うほどのことはない、と言うのが結論である。

▲ToTop