>>前回

 新しいブラウザーが登場したとき、いつも問題となるのが互換性だ。IE9では、JavaScriptの仕様が標準規格のECMAScript5に準拠し、W3C(World Wide Web Consortium) DOMに対応した。実際に、標準規格に基づくJavaScriptをいくつか動作させてみると、問題なく動作した。1種類のコードをIE、Firefox、Chromeなど、複数のブラウザーで動作させることが可能になった。IE9は現行標準のCSS(Cascading Style Sheets)3にも対応し、その点でも他のブラウザーとの互換性が向上した。

 ただし、IE8以前のMicrosoft独自仕様に合わせて開発したWebアプリケーションはそのままでは動作しない可能性がある。また、ユーザーのブラウザーの種類やバージョンを判定し、それに合わせたJavaScriptのコードを動作させるアプリケーションも誤動作するかもしれない。IE9をIE8以前と誤判定して、IE8以前向けのコードを実行する恐れがある。

 IE9とIE8以前のJavaScriptの変更点については、米MicrosoftがWebサイトで詳しく解説している注1(以下、「Compatibility Cookbook」)。ただしその項目数は、CSSなどに関するものも含めて約30個に及ぶ。

 それらのうち影響が大きい変更点を探るため、広く使われているJavaScriptライブラリのソースコードを調べることにした。IE9向けにバージョンアップしたライブラリを探してソースコードの変更点を調査し、実際の動作と併せて検証した。読者が開発するWebアプリケーションでも、同じような変更が求められる可能性が高いと考えた。

 調べたJavaScriptライブラリは3種類ある。画像を拡大表示する「Lightbox2」、イベント処理やHTML要素の操作を容易に記述できる「jQuery」と「prototype.js」である。

「非標準」の属性を参照できない

 Lightbox2とjQueryのソースコードを調べると、IE8以前向けとIE9向けで、HTMLタグの属性を参照する部分に違いがあった。その具体例をLightbox2で示す(図2)。

図2●IE9ではタグの属性を参照するコードに違いがあった<br>IE8以前向けJavaScriptコードではタグの属性を参照できず、正しく動作しない
図2●IE9ではタグの属性を参照するコードに違いがあった
IE8以前向けJavaScriptコードではタグの属性を参照できず、正しく動作しない
[画像のクリックで拡大表示]

 まず、Lightbox2の実際の動きを見てみよう。IE9向けに修正される前のLightbox2を、IE9で動作させたのが図1左下である。本来ならリンク先に指定された画像データがブラウザー上で拡大表示されるはずが、リンク先のページに遷移してしまった。一方、IE9向けに修正したLightbox2を動かすと正しく拡大表示された。リンクをクリックしたら、いったんブラウザーの画面全体が暗くなり画像がクローズアップされていく。

 Lightbox2のソースコードは、IE8以前向けとIE9向けで図2のように違っていた。アンカータグの「rel」と呼ぶ属性を参照する部分が変更されている。IE8以前向けのコードでは「.rel」と記述していたのが、IE9向けでは「.getAttribute("rel")」と記述されていた。

 このような修正がなぜ必要なのかを、前述のCompatibility Cookbookで調べた。IE9ではECMAScript5に準拠するため、「非標準属性」への参照方法が変更されたことが分かった。relのような非標準属性は、IE9ではgetAttributeと呼ぶメソッドを使って参照する。なお、標準属性への参照方法は変わらない。アンカータグの標準属性には「href」があるが、IE8以前でもIE9でも「.href」と記述して参照する。

 同じような修正はjQueryにも存在した。筆者のこれまでの開発経験でも、非標準の属性を参照するケースはよくある。読者のWebアプリケーションでそうしたコードを記述していたら変更しなければならない。