>>前回

 新しいブラウザーが登場したとき、いつも問題となるのが互換性だ。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ではタグの属性を参照するコードに違いがあった
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アプリケーションでそうしたコードを記述していたら変更しなければならない。

この先は会員の登録が必要です。有料会員(月額プラン)は初月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら