人気ブログランキング | 話題のタグを見る
 
ジオシティーズ広告のブラウザ別不具合とその対策
※この記事の内容は、2005年の夏頃の、ジオシティーズの広告スクリプトの全面的な変更に伴い無効なものとなっています。ただし、変更後のスクリプトには、Mozilla/Firefoxなどにおいて別の不具合があり、これは2006年2月現在まだ修正されていません。この不具合については続・ジオシティーズ広告スクリプトの不具合をご覧ください。

ジオシティーズ広告のブラウザ別不具合とその対策_b0023722_20353248.gifWindowsのInternet Explorerで見るgeocities.jp(co.jpではないほう)の広告はスマートでいい感じなのだが(左図)、スマートである部分をメンドーなDHTMLで実現していやがるため不具合が存在する。そもそも現時点で、この広告が本来の意図通りに表示されるのはWindowsのIEとNetscape Communicatorのみで、それどころかSafariとIEを含むMac OSの(くおそらく)全てのブラウザや、WindowsでもMozilla/Netscape(Gecko版)やOperaではそもそもなにも表示されない。もちろんなにも表示されないケースは放置でいいのだが、問題は表示される場合で、条件次第で出鱈目な表示が行われてしまう場合がある。
この広告は、scriptタグをサーバサイドで本来のHTMLドキュメントにインクルードして吐き出しているわけだが、このインクルードが、どういうタイミングでなのかは不明なのだが、ドキュメントの末尾にまとめてインクルードされる場合と、その前後に分散する場合があり、問題は前後に分散する場合に発生する。


ジオシティーズ広告のブラウザ別不具合とその対策_b0023722_2036251.gifIEの場合
図はIEでこれが起こった場合の画面(以下の修正を施す以前の状態)。
このページでは、右側のサイドメニュー部分のレイヤーがposition:absoluteで、他の部分とオーバーラップすることになるわけだが、広告部分のレイヤー(を書き出しているスクリプト)がHTMLドキュメントのドアタマに登場するおかげで、必然的にそれより後に登場するサイドメニュー部分のレイヤーが広告部分のレイヤーを覆い隠してしまう
この問題は、広告部分のレイヤーを、最上層にあらためて重ね直すスクリプトを、本来のHTMLドキュメント内に用意しておくという方法で回避することにした。

var target = document.getElementsByTagName("div");
for (var i = 0; i < target.length; i++) {
    target[i].style.zIndex = 1
}

注意!「document」+半角のドットという文字列は書き込み拒否されるため、この部分のドットは全角にしてます。


このスクリプトはhead内に書かれること(head内のscriptタグで読み込まれる外部jsファイルに書かれること)を想定しているわけで、このスクリプトが実施される以前に登場している全てのdivのz-indexを1にしている。body内(のポジション指定のあるレイヤーの登場より後)に書く必然性があるのならdivのidを取り出して条件判断を行う必要があるわけだが、それだとジオ側でid名を変更した場合などにいちいち書き直さないとならなくて、メンドーなのでこれでいいかなと。

IEではもうひとつ困った問題がある。これはむしろIEの問題なのだけど、scriptタグが本来のHTMLドキュメントの前後に分散してインクルードされるということは、IEがサーバから受け取るHTMLドキュメントはscriptタグから始まることになる。IE6はHTMLドキュメントが適切なDOCTYPE宣言で始まっていると「W3C標準仕様準拠モード」になるわけだが、ドキュメントがscriptタグで始まるため、当然このモードは無効になる。これで最も困る点は、標準準拠モードである場合とそうでない場合で標準のfont-sizeが異なり、標準準拠モードでは「medium」が標準なのに、そうでない場合はこれが「small」となってしまい、本来の見栄えより字がデカくなってしまうことが起こり得る。これはfont-sizeの指定にlarge/medium/smallといった表記を採用している場合に起こるわけで、従ってこの表記は使えない。もちろんポイント数を指定するようにすればこの問題は回避できるが、そうするとIEではユーザが文字サイズを変更することができなくなってしまう。ウェッブデザイナーには、ユーザに見た目を(極力)変更されたくないと、好んでこの方法を用いるものもいるが、個人的な好みは逆で、ユーザが任意に文字サイズを変更できたほうがいいと思っているのでこの方法は採らない(しかしやはりデフォルトの見た目をブラウザの好き勝手にはされたくないわけで)。てなことで、ここはlarger/smaller、あるいは%による指定などで凌ぐことにした。


ジオシティーズ広告のブラウザ別不具合とその対策_b0023722_20361539.gifFirefoxの場合
Mozilla/Netscapeで広告表示がシカトされるならFirefoxでも同様だろうと思ったらところがどっこい。Firefoxでは表示しようとしてしまうのだが、現時点でのこのスクリプトはFirefoxへの対応ができておらず、スクリプトが読み込まれる部分に広告部分の「残骸」が表示されてしまう。そして、肝心かなめの広告バナー画像自体がまるっきり表示されない。とは言え、スクリプトがドキュメントの末尾にまとめてインクルードされる場合、これは通常ページの末尾に表示されることになるので、その見苦しさは許容範囲である。
問題はインクルードが前後に分散される場合で、図はこれが起こった場合の画面(以下の修正を施す以前の状態)。ご覧の通り、広告の残骸がドアタマに表示され、とんでもなく見苦しい状態になってしまう。
ジオのサーバはFirefoxのことをNetscape Communicatorだと思い込んでいて、広告部分を古のlayerタグによってレイヤー化しようとしているのだが、Firefoxはこのタグをきちんとはサポートしていないためこの部分はレイヤーとして成立しておらず、そのためマトモな表示にならないわけだ。こうなると、見栄えを確保するためにはこの部分を「隠す」しかないわけで、広告を「隠す」のはもちろん規約違反なんだけど、肝心の広告バナー画像自体がそもそも表示されないのだから、決してジオの利益を損ねちゃいないもんね( ´_ゝ`)
さて、しかしFirefoxではlayerタグを操作しても無意味なわけで、それではlayerタグの子要素はと言えばtableタグなのでそちらを非表示にすることにした(もちろんドキュメントの冒頭からインクルードが行われている場合のみですよ)

var target = document.getElementsByTagName("table");
for (var i = 0; i < target.length; i++) {
    target[i].style.display = "none"
}

注意!「document」+半角のドットという文字列は書き込み拒否されるため、この部分のドットは全角にしてます。


スクリプトはIEの場合とクリソツだけど、bodyタグの中に書いちゃうとIEの場合よりも大変なことになる(なんせ、それ以前に登場する全てのtableが表示されない)。IEの場合より厄介なのは、これらのtableタグにはidもnameも指定されていないため、それらを用いた条件判断ができない。判断材料として使えるのはtableタグの個数くらいかな?


しかしなんでこんなつまらんことで苦労するんだか(´ー`;)
広告媒体としてはズサンなこと甚だしいわけだが、日本のジオシティーズは自社稿以外の広告がないことを考えると、やはり広告媒体として成立させることは(少なくとも現時点では)考えておらず、有料のジオプラス(及び、それがタダで利用できるYahoo!BB)への誘導で成立させようとしていて、そういう苦労がイヤならカネ払いな、という戦略なのかもな。

なお、本家geocities.comはIEでもFirefoxでも表示自体はきちんと為される。ただしインクルードが前後に分散される場合、scriptタグで始まりDOCTYPE宣言が無効になるのは同じだが、これはしょうないか。
by ucb2004 | 2004-11-29 21:25 | ウェブ制作


<< ガリシア・オンTV Mozilla Firefox >>