こんばんは。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