PB Dispaly Image MakerをIE（Javascript切）にも対応させる
追記 2017.1.03
-ms-filter の使用可否の判定には、checkActiveX.js @GitHub を参照ください。
注意 2011.6.17
以下の記事では、JavaScript と ActiveX が混乱しています。JavaScript と ActiveX はそれぞれ別々に切ることができるまず。
ActiveX の検出について、現在は JavaScript で判定しています。この場合、JavaScript が無効だと ActiveX の検出ができませんが、JavaScript と ActiveX は同時に無効にされることがほとんどだろう、という判断です。
ActiveX 検出用の JavaScript は以下のソースを参考にしてください。ActiveX の有無で読み込みする画像ファイルが変わる場合、なるべく早い段階で ActiveX の検出を済ませておきたいところです。そこで以下のソースのコードでは window.onload を待たずに実行できる書き方をしています。
IE独自拡張のfilter
IE8以前のブラウザでは透過やドロップシャドウ、グラデーションといった効果を独自拡張のfilterプロパティでできて、他のモダンブラウザと近い表現ができます。
これにより、2001年のリリースにもかかわらずいまだにしぶといブラウザシェアを誇るIE6（10%くらい）から最新の Firefox4 やChrome10 まで、おおむね似たような感じでサイトを表示できたりします。
（ちなみにPB-100の宇宙では、IE6の兄貴IE5.5にも対応。MacIE5.2でもそこそこ見れたりします。クール！！）
さて、このIE独自拡張の filter ですが JavaScript が切られていると機能しないという欠点があります。セキュリティ上の理由でしょうがこれはかなり困ります。
薄くしたフォントを重ね合わせる
■ ■ - ■ - ■ - ■ - ■ - ■ - ■ - ■ - ■ - - -
PB Dispaly Image Maker では、フォントを薄くしたり、薄くしたフォントを重ね合わせることができます。これにより PB-100 用アクションゲームのスピード感をいかんなく再現できたりします。（当時の同クラスのマシンの中でも PB-100 は高速な BASIC を備えていました！！）
このフォントの階調を変えるのに、IE では件の filetr が使われています。つまり IE の JavaScript が切られている場合、無透過100%真っ黒のフォント同士が重ね合わせて表示されて何がなにやら分からなくなります。
そもそもこういうことを想定して設計するべきですが、今回は変態的なテクニックを使って（泥縄的に）css 内で JavaScript の有無による分岐を起こします。（css expression を使ってページ読み込み時にクラスを書き換える）
IE でかつ JavaScript なしの場合はすべての階調を持った10倍サイズのフォントデータを読み込んでゴニョゴニョする形にしました。
IEではcssの独自プロパティbackground-position-x,background-position-yがあって、モダンブラウザ用（JavaScript 有効の IE にも）の background-position (x) (y)を background-position-x だけ上書きする、といった使い方もできました。
この手のことはたまに不具合を出すこともありますが、正しく動いたので非常に助かりました。IE限定ですがcssスプライトのやりやすくなるいいプロパティです。ただし background-position-x は Chrome でも有効になったので（ということは Safari にも）、今回はスターハックで Chrome には読み込まれないようにしました。
また、CSSスプライトがうまく置き換わらないことがありましたが、background-position > background-image の順にプロパティが当たるようにすると改善しました。
実はフォントは擬似的な透過で実際には重なった下のフォントは透けて見えません。濃いほうのフォントが必ず上側に来るようにz-indexで調整したところ、ほとんど気にならないレベルの表示が得られました。（ただし■などの巨大なフォントの場合、一方のフォントを完全に隠してしまいますので注意が必要です）
つまり、javascriptが切られた場合のIEでの透過表示は擬似的なものですし、通常より10倍大きな画像データを読み込むハンディもあります。
またIE8の標準準拠&IE8モードでは肝心のcss expressionが動かなくなるため、IE8モードで動いている場合は問答無用で擬似透過を行うようにしました。最新のブラウザが一番対応状況が悪いというのはちょっと気持ち悪い結果ですが、、、
そうそう、IE7 と IE8 については透過度を変えた png を用意すれば擬似でない表示が得られる（アニメGifなカーソルを除く）、と思いましたがpng同志の重ねあわせがメチャメチャになっていました。（png8 と png24 問題に引っかかったのかも、、、あとで再トライしてみよう、、、）png24 ならできた！
MacIE5.2 への対応
今回の変更では、さらにMacIE5.2にも（擬似）透過フォントの表現ができるようになりました。MacIE では filter すらないためそもそも透過フォントの表現ができませんでした。
さらに残念なことに、background-position-x 等のプロパティがないため、透過度ごとに読み込む画像を計10枚用意する対処法となりました。
このため、PB Display Image Makerを構成するファイルが一挙に3倍に増えてしまいましたし、MacIE でこのサイトを見ているユーザも僕以外に思いつきませんが、やりました。
MacIE でも background-image を設定する位置が重要らしく、css の最後に配置することで動作が確認できました。このあたり厄介ですね。
また、PB-100の宇宙を表示して確認したところ、一部で表示が乱れました。他のところは正しく表示されているため、処理落ち的なことが起きているのかと、それ以上は深く追求していません。ひとつのページにあんまり大量に PB Display Image を配置するのは（MacIE には）よくないのかもしれません。