こんばんは。Windows 7βを試用中ですが、写真をお洒落に見せるスクリプト (photoeffect.js)が、IE8βでエラーとなり意図した効果が得られないのを発見。調べてみると、IE8ベータがVMLをサポートしていないのが原因っぽいです。おそらく、正式版ではVMLはサポートされるとは思いますが、確証はないので(Silverlightとかあるし)、現時点での回避策を考えてみました。
IE8には、3つのレンダリングモードがあり、(紆余曲折ありましたが)デフォルトではフル標準モードでレンダリングされます。じゃ、どんな時にQuirksモード(後方互換[1]の非標準モード)になるかというと、以下の場合です。
- 文書中に DOCTYPE宣言がない場合
- 文書型が HTML3.0以下の場合
- HTML4.0 TransitionalまたはFramesetのDOCTYPE宣言にURLを含まない場合
の3つです。詳しくは、SummerWind - IE8のレンダリングモードに関するまとめ あたりを参照。
今どきのブログシステムでは、これらに該当しない可能性が高く、IE8は標準モードで動きます。なので(少なくとも現時点では)VMLのスクリプトが動かないわけです。じゃ、どうするか? 簡単そうなのは、METAスイッチGを使うこと。とりあえずVMLはIE7モードでは問題なく作動するので、以下のようなmetaタグをwebページに追加すれば良いです。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
確かに、これは簡単だし現実的な解決法ですが、こうしちゃうと、JavaScriptもIE7モードになっちゃいます。IE8では、querySelectorAllなどのSelectors APIやらDOMオブジェクトに対するgetter/setter API など、面白そうなAPIがサポートされるのに、IE7モードで走らせると、それらが使えません。
出来れば、IE8モードのままでVMLも有効にしたいです。こんなときに使えるのが、インラインフレーム<iframe>。最近、ちっとも更新されていないのが気がかりな Dean Edwardsのエントリー が参考になります。
つまり、IE8なページの中で、sandbox化されたIE後方互換の環境を構築し、その中でVMLを走らせるわけです。実際のデモを見たほうが早いと思うので、IE8βでアクセスしてみて下さい。IE7でも動きます。
→ http://p2b.jp/demo/vml-IE8.html
IE8やIE7では、どう見えるかイメージショットも載せておきます。
ここでは、単に画像を出力させるVMLを、以下のように関数化しています。
function vmlImg(src, w, h, r){ /* @src: 画像ファイルを指定 @ w: 表示させる横幅 @ h: 縦幅 @ r: 回転角度(オプション)、-360~360 */ var ifr = document.createElement("iframe"); ifr.marginWidth= "0"; ifr.marginHeight= "0"; ifr.scrolling = "no"; ifr.frameBorder = "0"; ifr.style.width = w + "px"; ifr.style.height = h + "px"; document.body.appendChild(ifr); var idoc = ifr.contentWindow.document; idoc.write(""); idoc.close(); // これがないと document.body は null になる if(idoc.namespaces){ if(!idoc.namespaces.v){ idoc.namespaces.add("v", "urn:schemas-microsoft-com:vml", "#default#VML" ); } } idoc.body.style.backgroundColor = document.body.currentStyle.backgroundColor; var img = idoc.createElement('<v:image src="'+ src +'" />'); var imgcss = img.style; imgcss.width = w + "px"; imgcss.height = h + "px"; if(r){ imgcss.rotation = r; ifr.style.width = 2 * w + "px"; ifr.style.height = 2 * h + "px"; } idoc.body.appendChild(img); }
IE8版ではVMLが正式にサポートされるのを期待して、深追いはしません。
- [1] 言葉の問題なので、本文とは関係ないですが、前方互換なのか後方互換なのか、上位互換なのか下位互換なのか訳わかめ。視点をどこに置くかの差ですし。IE8から見て、IE7以下は過去のものだから、それらに対する互換性ということで、後方互換みたいに使いましたが、何か違うような。まぁ、言いたいことが分かれば良いのかなって。[^]
Comments