Internet Explorer 9 の機能概説

(1)

目次へ次へ

Internet Explorer 9 の機能概説

● まえがき

東日本大震災の影響で公開が多少延期されたようだが、2011 年 3 月に Internet Explorer 9 の正式版が世界的にリリースされた。日本でも、4 月 26 日に日本語版が公開された。

IE9 では、ユーザー・インターフェイスや JavaScript エンジンが刷新され、Web ブラウザ自体が大きく生まれ変わっている。 HTML5/CSS3/SVG などの最先端 Web 標準技術への対応が強化され、さらに「アドレスバーと検索ボックスを統合したワンボックス（One box）」、「ピンで固定されたサイト（Pinned Sites）」、「分離できるティアオフタブ（Tear-off tabs）」といった新機能も追加されている。公開してから１年経過して評価に自信を得たのか、マイクロソフトは次項に示すように、自動アップグレードに移行すると発表した（日本マイクロソフトは、2012 年 3 月中旬より実施すると 3 月 5 日に発表した）。これを機に、まだまだ使いこなされているとは思えない IE9 の主な新機能や、Web制作やWebアプリケーション開発に関連するであろう事柄を取り上げ、解説してみたい。

● Internet Explorer の自動アップグレードについて

2011 年 12 月、全世界の Windows XP、Windows Vista、Windows 7 のユーザーに対し、それぞれの Windows がサポートする最新の Internet Explorer への自動アップグレードを開始する旨が発表された。 1 月のオーストラリアとブラジルを皮切りに、全世界で対象の Windows ユーザーに対し、順次自動アップグレードが既に始まっており、日本でも2012 年 3 月 27 日より実施され始めた。 Internet Explorer はこれまで自動更新を通じて配信されてきた。しかしセキュリティ更新プログラムのような「重要な更新プログラム」と異なり、ユーザーがインストーラーを起動してインストールを実行する必要があった。今回の自動アップグレードでは、Windows Update の設定で自動更新を有効にしていれば、特に追加の操作なしで常に最新版の Internet Explorer にアップグレードされる。アップグレード自体は Windows Update のインフラを通じて行われ、自動更新を有効にしているユーザーに対してのみ配信される。

対象となる Windows/IE のバージョンと、適用される IE のバージョン

対象 Windows 対象となる IE のバージョン適用される IE のバージョン Windows XP RTM, SP1, SP2 Internet Explorer 6/7 自動アップグレード対象外 Windows XP SP3 Internet Explorer 6/7 Internet Explorer 8 Windows Vista RTM, SP1 Internet Explorer 7/8 自動アップグレード対象外 Windows Vista SP2 Internet Explorer 7/8 Internet Explorer 9 Windows 7 RTM, SP1 Internet Explorer 8 Internet Explorer 9

尚、過去 Internet Explorer 8/9 の自動更新において、「インストールしない」を選択しているユーザーは自動アップグレードの対象外となる。また、企業などで自動アップグレードを拒否したい場合もあるが、 Internet Explorer 9 自動配布の無効化ツールキット（Internet Explorer 9 Blocker Toolkit）が用意されているから、この場合はこれをダウンロードして適用すればよい。

● Internet Explorer 9 の外観

(2)

①

は「ワンボックス」と呼ばれ、アドレスバーと検索ボックスを統合したもの。この中のは検索用ボタン、は互換表示用ボタン、は更新ボタンである。

②

は「タブ」、

③

のは「ホームボタン」、

④

のは「お気に入り、フィードおよび履歴を表示するボタン」、

⑤

のは「ツールボタン」で主要なメニューが纏められているこのように画面上部をシンプルにまとめ、必要があれば右クリックにより「メニュー」、「ステータスバー」などを従来通りに開けるようにしている。新しいタブを開いたときには、「よく使うサイト」を表示するようにしているのも新しい工夫である。尚、「Alt」キーが「メニューバー」を開閉するショートカットキーになっていることを覚えておくと便利だ。即ち、上図のような状態で「Alt」キーを押すと「メニューバー」が開かれ、再度「Alt」キーを押すか「Esc」キーを押すと「メニューバー」が閉じられる。

● 分離できるタブ

タブブラウズという機能が IE7 で採用され、タブを切り替えるだけで２つの画面を見ることができるようになった。しかし、２つの画面を見ながら作業したいこともあるだろう。このため、IE9 では更に進化させて「ティアオフタブ（Tear-off tabs）」という分離できる形式が採用されている。次の図で説明する。左に示すように２つのタブの内、１つのタブをドラッグし始める。デスクトップまでドラッグしてドロップする。

(3)

すると、次に示すように独立した２つのウィンドウに分離される。

ここで、タスクバーの任意の箇所で右クリックすると左に示すようなメニューが表示されるから、「ウィンドウを左右に並べて表示」をクリックすると、下に示すように２つのウィンドウが配置される。

(4)

分離された２つのウィンドウを、元のように２つのタブに戻すことができる。このためには、一方のウィンドウのタブを次の図のようにドラッグして、他方のウィンドウのタブ位置にドロップする。

(5)

前へ次へ

「ピンで固定されたサイト」

について

● ピンで固定されたサイトとは？

IE9 には Pinned Sites という機能が導入された。日本語では「ピンで固定されたサイト」とか「ピン留めサイト」と訳されているが、以降「固定サイト」という言葉で説明を行う。この機能は、Web サイトを Windows 7 のタスクバーに固定する機能で、これにより、「ブラウザを開く」という最初の手順を飛ばして、 Windows 7 のタスクバーから目的の Web サイトに直接アクセスできるようになる。尚、後で述べる方法でデスクトップや［スタート］メニューにも固定サイトのショートカットを作成できる。

説明を読むよりも試してみた方が理解が早いので、実際に固定サイトを作成してみよう。

まず、IE9 のアドレスバーの左端にある「Web サイトのアイコン」を Windows 7 のタスクバーにドラッグ＆ドロップする。（「タブ」をタスクバーにドラッグ＆ドロップしても、同じ結果が得られる。）

すると、そのWeb サイトのアイコンがタスクバーに現れ、先ほど開いていた IE9 が閉じられて、次に示すようなそのサイト専用の外観を持つ IE9 が立ち上がる。

(6)

即ち、［戻る］ボタンの左横には、そのサイトアイコンが表示されており、［戻る］／［進む］ボタンの外観が黄色くなっている。このような配色になっているのは、サイトアイコンの持つ色に自動的にそろえられるからである。このような外観から、サイト専用ブラウザであることが一目で分かる。［戻る］ボタンの左横に表示されるサイトアイコンは、このサイトの［ホーム］ボタンとなっており、通常 IE9 の右上端に表示されるホームボタンは表示されない。開かれているこのサイトの表示を一旦閉じ、タスクバーに表示されているこの固定サイトのアイコンを右クリックすると、左に示すような画面が表示される。この例では、タスクとして５つのジャンプリストが表示されている。このジャンプリストの何れかのメニューをクリックすると、そのページを直接開くことができる。このように固定サイトでは、表示できるジャンプリストに、独自の項目を追加できるが、これについては後で詳述する。デスクトップに固定サイトのショートカットを作成するには、タスクバーの場合と同様に、サイトアイコンをデスクトップにドラッグ＆ドロップすればよい。［スタート］メニューに追加するには、左の図に示すように、メニューバーの［ツール］メニューを開き、そこから［スタートメニューにサイトを追加］を実行すればよい。［スタートメニューにサイトを追加］を実行すると、左のような確認画面が表示されるから、［追加］ボタンを押す。これで、この Web ページを直接表示するための固定サイトショートカットが［スタート］メニューに追加される。

(7)

［スタート］ボタンから、［すべてのプログラム］を開くと、上述の操作で追加された固定サイトのショートカットが出来ていることを確認できる。このショートカットの上でマウスを右クリックして、［スタートメニューに表示する］を実行する。上の操作の後、メニュー表示を前に戻すと、左のように［スタートメニュー］に表示されていることを確認できる。このショートカットの上にマウスを移すと、右側にこのWeb ページに関連するタスクとしてジャンプリストが表示される。ジャンプリストに表示されている何れかをクリックすると、そのページを直接開くことができる。

● 従来通りのショートカットを作成するには？

上述した固定サイトのショ－トカット（拡張子は website）をクリックすると、既に IE9 が立ち上がっていたとしても、そのサイト専用の外観を持つ IE9 が別ウィンドウとして開かれる。従来のショートカット（拡張子は url）の場合は、既に IE が立ち上がっていれば、同じ IE の別なタブに表示され、２つの IE が立ち上がることはなかった。

(8)

IE7 で導入されたこのタブブラウズと呼ばれる方法に慣れた人には、IE9 で新しく導入された固定サイトを使いにくいと感じることもあろう。その場合には、次のようにすれば従来通りのショートカットを作成することができる。

まず、IE9 のアドレスバーの左端にある「Web サイトのアイコン」を「Shift」キーを押しながら Windows 7 のタスクバーにドラッグ＆ドロップする。すると、左に示すような IE9 のジャンプリストが立ち上がり、「いつも表示」の中にショートカットが表示される。また、IE9 のアドレスバーの左端にある「サイトアイコン」を 「Shift」キーを押しながらデスクトップにドラッグ＆ドロ ップすると、デスクトップに従来通りのショートカットを作成することができる。「ファイル」メニューから「送信」 → 「ショートカットをデスクトップへ」をクリックしてもよい。

● 固定サイト機能への対応方法

Web ページ制作にあたって、IE9 で導入された固定サイトへの対応方法として次の項目について簡単に説明する。  サイトアイコンの設置  タスクとしてのジャンプリストの設定

(9)

サイトアイコンは、通常ファビコン（Favicon, Favorite icon の略）と呼ばれるもので、「お気に入りアイコン」と呼ばれることもある。かなり昔から使われており目新しいものではないが、作り方は次の通り。

1. 真四角の gif または png 形式の画像を用意する。背景を透明にしてもよい。

2. 作成した画像をファビコン用の形式に変換する。アイコン作成ソフトでも変換できるが、Web上にある変換サイトを利用するのが簡単。例えば、Dinamic Drive - Favicon Generator など。このサイトでは、ブラウザのアドレスバーやお気に入りなどでの表示に使われる 16x16 のアイコンの他に、デスクトップ用の 32x32 のアイコン、Window XP 用の大きな 42x42 のアイコンも含めたファビコンを作ることができる。

3. 作成したファビコン（favicon.ico）をサイトサーバーににアップロードし、表示したいページの <head>～</head> の中に次の１行を書き加える。

<link rel="shortcut icon" href="favicon.ico の URL">

HTML を使用して静的ジャンプリストを追加するには、次のような <meta> タグを使う。 <meta name="msapplication-task"

content="name=＜タスク名＞;action-uri=xxx/page1.html;icon-uri=xxx/favicon.ico"> ここで、meta 要素の name 属性は、"msapplication-task" であり、content 属性は、セミコロンで区切られた次の必須のパーツから構成される。

name: ジャンプリストに表示するタスク名。

action-uri: タスクが実行されたときに表示する Web ページの URL。 icon-uri: タスクの左に小さく表示されるファビコンの URL。

追加するジャンプリストタスクごとに上に示したような <meta> タグを書き加える。

ちなみに本稿では説明を割愛するが、「タスク」カテゴリ以外にも、独自のカテゴリを作成してメニュー項目を追加したり、タスクバーのアイコン表示の上に別の画像を付け加えるオーバーレイアイコンを指定したり、タスクバーのアイコンを点滅させたりなど、さまざまなことが行える機能が用意されている。

(10)

前へ次へ

IE9 での HTML5 対応

● HTML5 について

HTML の現在の最新バージョンは 1999 年 12 月に制定された 4.01 である。 W3C での HTML の仕様策定は4.01 で一段落となり、仕様策定作業は XHTML（Extensible HyperText Markup Language）に移行した。汎用的マークアップ言語として仕様が制定されていた XML をベースに、Web 用に新しく制定されたのが XHTML である。マシンで読み易くするための仕様である XML をベースとしたことで、XHTML によってすべてのウェブ･コンテンツがマシン可読なデータベースとなる世界が期待された。 XHTML1.0 はHTML4.01 との互換性が考慮されていたため、現在でも広く普及している｡マシンが読み易くなることと引き換えに、人にとっては難しいマークアップとならざるを得ない。 XHTML1.1 からは、よりXML 色が濃いものとなり、W3C は、さらに進化させるべく XHTML2.0 の策定に取り掛かったが、下位互換性が殆んど考慮されなかったため、XHTML1.1 や XHTML2.0 が使われることは殆んどなかった。ブラウザベンダーは、この W3C の方向性に対して疑問を抱くようになり、XHTML2.0 を実装する気配を見せなかった。このような状況の中で、下位互換性などウェブ制作者の意向を反映し、さらなる発展を実現できる新しい HTML 策定のため、 2004 年に、 Opera 、 Mozilla 、 Apple は、 WHATWG （ Web Hypertext Application Technology Working Group）という WG を独自に設立した。その時点では HTML5 という言葉はなく、「Web Applications 1.0」と「Web Forms 2.0」という名前で仕様が作成されていた。 W3C は XHTML2.0 の反省から、2007 年 3 月に後方互換性を考慮した HTML 策定に着手すると報道発表。 2007 年 4 月に、WHATWG は W3C に対して、WHATWG で策定している仕様を、W3C で｢HTML5｣という名前で策定を開始してはどうかと打診し、W3C はそれを受け入れた。 W3C は、 XHTML 2 WG の活動を 2009 年末に終了し、以降は HTML5 に注力することになり、「HTML5」が次世代標準となることが確定した。 HTML5 の仕様は 2011 年 5 月 25 日には最終草案に達し、2014 年に勧告される予定となっている。しかし、HTML5 が扱う範囲の広さや、W3C のこれまでの勧告プロセスを考えると、勧告に至るまでのスケジュールは、実際どうなるのかは分からない。 W3C が HTML5 を最終勧告とするためには、2 つ以上のブラウザの実装が完了していることを条件に挙げており、各ブラウザベンダーは、HTML5 の実装を強力に推し進めている。仕様のスリム化、ブラウザベンダーの協力により、近い将来勧告に至ることが期待されている。

● IE9 での対応

最近、HTML5 への注目度が高まっている。特に Google が強力に推進している印象のある HTML5 だが、 IE9 の機能を調べるとマイクロソフトも積極的に取り組もうとしていることが分かる。 IE がこれまで HTML5 を無視してきたかというと、決してそんなことはない。IE8 には、 ● DOM ストレージ ● AJAX ナビゲーション ● ドキュメント間メッセージング（XDM）などのHTML5 機能が既に搭載されている。マイクロソフトは HTML5 サポートを IE9 でさらに進め、HTML5 に関するさまざまな機能を追加した。具体的には、主に下記のようなHTML5 機能が実装されている。 ● <audio>／<video> 要素のサポート ● <canvas> 要素のサポート ● セマンティック要素 ● テキスト選択 API

(11)

● 位置情報（Geolocation） API ● ジェネリック要素の取り扱い

以下に、それぞれについて簡単に紹介する。

● <audio>／<video> 要素のサポート

HTML5 の中でも特に期待されている <audio> タグと <video> タグがサポートされている。 <audio> タグは、業界標準の MP3 および AAC オーディオを、また <video> タグは、業界標準の MPEG-4/H.264 ビデオを、HTML ページに埋め込んでプラグインなしで再生できる機能を提供する。 <video> タグは、ページ上のほかの要素（例えば HTML コンテンツや、画像、SVG グラフィックなど）と合成可能で、しかも HD 解像度で 60fps のビデオもフルスクリーンで再生可能な GPU ベースの動画再生機能を提供する。 GPU 利用のため、DXVA （DirectX ビデオアクセラレータ）とハードウェアビデオデコーダに対応している。 <video> タグの使用例を下に示す。先頭行の「<!DOCTYPE html>」は、HTML5 文書であることを示す宣言。 HTML5 での推奨文字コードは UTF-8 なので、別ウィンドウに表示される文書は UTF-8 で書いてある。 1 2 3 4 5 6 7 8 9 10 11 12 <!DOCTYPE html> <html> <head>

<title><video> tag Sample</title> </head>

<body>

<video width="480" height="272" autoplay

src="http://ecn.channel9.msdn.com/o9/mix/10/mp4/CL01.mp4"> ビデオがありません。 </video> </body> </html> video.html

● <canvas> 要素のサポート

HTML5 の中で注目されている <canvas> タグもサポートしている。 <canvas> タグは、動的に 2 次元ビットマップ画像を描画する機能を提供する。そのレンダリングでは、やはり GPU が活用される。

実際に <canvas> タグを利用する際には、次のコードのように JavaScript の Canvas 2D API と組み合わせて用いる。 1 2 3 4 5 6 7 8 9 10 <!DOCTYPE html> <html> <head>

<title><canvas> tag Sample</title> <script type="text/javascript"><!-- function drawCanvas() { // 描画コンテキストの取得 var cvs = document.getElementById('sample'); if (cvs.getContext) { var ctx = cvs.getContext('2d'); canvas.html

(12)

11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 // 青色の円を描画 ctx.beginPath(); ctx.fillStyle = "rgb(0, 162, 232)";

ctx.arc(98, 73, 70, 0, 2*Math.PI, true); ctx.fill(); } } // --> </script> </head> <body onload="drawCanvas()">

<canvas id="sample" style="background-color: yellow;"> ブラウザが<canvas>タグをサポートしていません。 </canvas> </body> </html>

● セマンティック要素

IE9 では、HTML5 の新しいセマンティック要素（文書構造上の意味を持つタグ）もサポートしている。具体的には、下記のようなタグがサポートされている。 ● <article> タグ：記事を示す。 ● <header> タグ：ヘッダを示す。 ● <nav> タグ：ナビゲーションを示す。 ● <hgroup> タグ：セクションの見出しを示す。 ● <section> タグ：セクションを示す。 ● <footer> タグ：フッタを示す。 ● <aside> タグ：補足情報を示す。 ● <figure> タグ：図表を示す。 ● <figcaption> タグ：図表のキャプションを示す。 ● <mark> タグ：このタグで囲んだテキストは、ハイライト表示される。これらのセマンティック要素は、例えば次のような形で用いる。 1 2 3 4 5 6 7 8 9 10 11 12 13 <!DOCTYPE html> <html> <head> <title>セマンティック要素 Sample</title> </head> <body> <article> <header> <h1>セマンティック要素の使い方</h1> <p>セマンティック要素の使い方を説明します。</p> </header> <p>記事のテキストを記述します。</p> <section> semantic.html

(13)

14 15 16 17 18 19 20 21 22 23 24 25 26 <h2>1 つ目のセクション</h2> <p>このセクションに含まれるテキストを記述します。</p> </section> <section> <h2>2 つ目のセクション</h2> <p>このセクションに含まれるテキストを記述します。</p> </section> <footer> フッタを記述します。 </footer> </article> </body> </html>

● テキスト選択

API

テキスト選択API とは、ユーザーによるテキストの選択を取得・操作するための機能である。 IE9 でサポートしているのは、下記の3 つの機能である。

1. getSelection 関数： window オブジェクトに対する Selection オブジェクトを返す。 Selection オブジェクトは、現在選択されているテキストを表す。 2. selectionStart プロパティ：現在選択されているテキストの開始位置を取得／設定する。 3. selectionEnd プロパティ：現在選択されているテキストの終了位置を取得／設定する。 次に、getSelection 関数の利用例のコードを示す。 HTML ページ上の任意のテキストを選択した状態で、［test］ボタンをクリックすると、その選択されたテキストがメッセージボックスに表示される。 1 2 3 4 5 6 7 8 9 10 11 <!DOCTYPE html> <html> <head>

<title>Text Selection API Sample</title> </head>

<body>

Please select this text and click button. <input type="button" value="test"

onclick="alert(window.getSelection().toString())" /> </body>

</html>

selection.html

● 位置情報（

Geolocation）API

位置情報API とは、IE9 が実行されている PC の現在の地理位置情報に、Web アプリケーションからアクセスするためのものである。その位置情報に基づき、例えば地図上に吹き出しを表示したり、現在地の天気予報を自動的に表示したりするような使い方が考えられる。下記のコードを実行すると、位置情報API を用いて現在の緯度／経度を Web ページ上に表示する。 1 2 3 <!DOCTYPE html> <html> <head> geolocation.html

(14)

4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<title>Geolocation API Sample</title> </head> <body> <script type="text/javascript"><!-- if (window.navigator == null) { alert("Navigator が見付かりません。"); } var gl = window.navigator.geolocation; if (gl == null) { alert("Geolocation をサポートしていません。"); }

var id = gl.watchPosition(successCallback, errorCallback); function successCallback(position) { document.write("現在の緯度／経度は<b>「" + position.coords.latitude + "／" + + position.coords.longitude + "」</b>です。"); window.navigator.geolocation.clearWatch(id); } function errorCallback(error) { alert("エラー・コード：" + error.code); } // --> </script> </body> </html>

● ジェネリック要素の取り扱い

HTML 解析処理が改善され、ジェネリック要素の取り扱いなどが HTML5 仕様に変更されている。ジェネリック要素とは、未定義で独自のタグのことである。 IE8 まではこれらのタグは無視されていたが、 IE9 からは解析され、CSS との関連も正しく反映される。例えば、下記の <mytag> タグは、正しく CSS が適用される。 1 2 3 4 5 6 7 8 9 10 11 12 <!DOCTYPE html> <html> <head>

<title>Generic Element Sample</title> <style type="text/css">

mytag { color: red; } </style>

</head> <body>

This is a <mytag>Generic Element</mytag>. </body>

</html>

(15)

前へ次へ

IE9 での CSS3 対応

● CSS3 について

CSS のバージョンには、CSS1、CSS2、CSS2.1、CSS3 の４つがある。最初の CSS Level 1 (CSS1) は、 1996 年 12 月に発表され、その後 1999 年 1 月に修正版がでた。 HTML 仕様は、1997 年 12 月制定の HTML4.0 で、見栄えの記述は CSS を使って行なうように改められ、装飾用のタグや装飾用の属性などは非推奨とされた。 1999 年 12 月に HTML4.01 が制定され、これが HTML4 の最終仕様になっている。 CSS1 の上位互換として CSS Level 2 (CSS2) が 1998 年 5 月に発表されたが、2008 年 4 月にこれの修正版が出ている。 CSS Level 2 Revision 1 (CSS2.1) は、CSS2 のエラーを修正、一部の機能を変更、削除、既に広く実装されている機能を追加して、CSS2 を置き換えることを意図し、2007 年 7 月に勧告候補が公開された。その後、2009 年 4 月、2009 年 9 月に内容の誤りを訂正して改訂された勧告候補が公開され、3 回勧告候補が公開されたあと、2010 年 12 月に草案に戻ってしまった。 CSS2.1 の勧告がどうなるのか分からないが、殆んどのブラウザベンダーはCSS2.1 の勧告候補に準じた機能を実装している。 CSS3 は多くのモジュールから構成されることになっており、モジュール毎の仕様草案が策定されつつある。モジュール毎に仕様策定のためのロードマップが作成されているが、実際の仕様策定作業は、計画よりもかなり遅れている。ブラウザベンダーでは、一部のモジュールを先行実装して機能拡張を図っているが、足並みが揃っている訳ではない。

● IE9 での対応

IE9 では、HTML5 に加え、CSS3 のサポートも強化されている。 IE8 は CSS2.1 仕様に準拠していたが、 IE9 では CSS3 の一部の仕様も取り入れている。具体的には、主に下記のような CSS3 機能がサポートされている。 ● 値と単位モジュール ● ボーダー： border-radius プロパティ

● 背景： background-clip/ background-origin/ background-size/ box-shadow プロパティ ● 2D 変換： -ms-transform／-ms-transform-origin プロパティ ● RGBA／HSLA カラー・モデル ● 透過性指定： opacity プロパティ ● セレクタ（Selectors Level 3） ● メディア・クエリ・モジュール以下に、それぞれについて簡単に紹介する。

● 値と単位モジュール

IE9 では、CSS3 機能を使うために必要となる新しい単位がサポートされている。具体的には下記の単位が用意されている。【角度の単位】 ● deg：度。 ● grad：グラード。 ● rad：ラジアン。 ● turn：回転数。【時間の単位】

(16)

● ms：ミリ秒。 ● s：秒。【相対的長さの単位】 ● rem：ルート要素のフォント・サイズ。 ● vw：ビューポートの幅。 ● vh：ビューポートの高さ。 ● vm：ビューポートの幅、またはビューポートの高さのうち、小さい方の値。 ● ch：レンダリング・フォントでの「0」（ゼロ）という文字の幅。

● ボーダー：

border-radius プロパティ

IE9 では、CSS ボーダー（境界線）機能として「border-radius プロパティ」が追加されている。 border-radius プロパティとは、ボーダーの四隅の角を、任意の半径による円で丸くする機能である。ボーダーのプロパティとしては、下記の5 つのプロパティが新たに提供される。 ● border-radius プロパティ：四隅の角を丸くする。 ● border-top-left-radius プロパティ：左上隅の角を丸くする。 ● border-bottom-left-radius プロパティ：左下隅の角を丸くする。 ● border-top-right-radius プロパティ：右上隅の角を丸くする。 ● border-bottom-right-radius プロパティ：右下隅の角を丸くする。下記のコードは、border-radius プロパティの利用例である。 1 2 3 4 5 6 7 8 9 10 11 12 <!DOCTYPE html> <html> <head>

<title>Border Module Sample</title> <style type="text/css">

p { border: blue 10px double; border-radius: 20px; } </style> </head> <body> <p>Border Module</p> </body> </html> border.html

● 背景：

background-clip/ background-origin/ background-size/ box-shadow

プロパティ

また、CSS 背景（background）機能として下記の 4 つの CSS プロパティが追加されている。 ● background-clip プロパティ：背景の描画対象となる領域を「border-box」／「padding-box」／「content-box」から指定する。その領域部分で背景画像が切り抜かれ、領域外には描画されない。 ● background-origin プロパティ：背景の描画対象となる領域の開始位置を「border-box」／「padding-box」／「content-box」から指定する。 ● background-size プロパティ：背景画像のサイズを指定する。幅・高さをピクセル値やパーセント値で指定できるだけでなく、縦横比を維持して拡大縮小することで画像全体を描画領域に含める「contain」や、描画領域全体に

(17)

余白を作らないように拡大・縮小する「cover」を指定できる。 ● box-shadow プロパティ：レンダリング要素（ボックス）にドロップ・シャドウ（影）効果を付ける。下記のコードは、上記の背景関連の CSS3 プロパティの利用例である。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <!DOCTYPE html> <html> <head>

<title>Background Module Sample</title> <style type="text/css">

p { border: blue 10px double; border-radius: 20px; width: 300px; height: 100px; padding: 20px; background-image:url("Penguins.jpg"); background-clip: padding-box; background-origin: content-box; background-size: contain; box-shadow: 10px 10px 30px #000000; } </style> </head> <body> <p>コンテンツ</p> </body> </html> backgroung.html

● 2D変換： -ms-transform／-ms-transform-origin プロパティ

IE9 では、レンダリング要素を 2 次元空間で変換できる CSS3 機能がサポートされている。具体的には下記の 2 つの CSS プロパティが追加されている。ただし、プロパティ名に「-ms-」というベンダ・プレフィックスが必要である。 ● -ms-transform プロパティ： 2 次元変換を指示する。 ● -ms-transform-origin プロパティ：変換の原点を指定する。既定の原点は、レンダリング要素の中心点（「50% 50%」という値に相当）となる。下記のコードは、その2D 変換のサンプル・コード。 1 2 3 4 5 6 7 8 9 10 11 12 <!DOCTYPE html> <html> <head>

<title>CSS3 2D Transforms Sample</title> <style type="text/css">

#trns {

background-color: red;

-ms-transform: translate(-50px, 150px) rotate(40deg); -ms-transform-origin: 50% 50%;

}

</style> </head>

(18)

13 14 15 16 <body> <p id="trns">Transforming...</p> </body> </html>

● RGBA／HSLAカラー・モデル

IE9 では、RGBA カラー・モデル、つまりアルファ・チャンネルによる透過性（透明度）の指定がサポートされている。下記のコードはそのサンプル。 1 2 3 4 5 6 7 8 9 10 11 12 <!DOCTYPE html> <html> <head>

<title>RGBA Color Model Sample</title> <style type="text/css"> p { background-color: rgba(0, 255, 0, 0.3); } </style> </head> <body> <p>Coloring</p> </body> </html> rgba-color.html 上記のコードのように、通常の「#00FF00」や「red」のような指定ではなく、下記の構文で RGBA 値を指定する。 rgba(赤色, 緑色, 青色, アルファ・チャンネル) 赤色／緑色／青色には、「0」～「255」の整数、もしくは「0%」～「100%」の割合を指定する。割合表記の場合は「rgba(0%, 100%, 0%, 0.3)」のようになる。アルファ・チャンネルには、「0」（透明）～「1.0」（不透明）の値を指定する。また、HSL （色相：Hue／彩度：Saturation／輝度：Lightness）や HSLA カラー・モデルにも対応しており、下記の構文で HSLA 値を指定できる。 hsla(色相, 彩度, 輝度, アルファ・チャンネル) 色相には、「0」～「360 度」の角度を指定する。例えば、赤色は「0」／「360」度、緑色は「120」度、青色は「240」度になる。彩度と輝度には、「0%」～「100%」の割合を指定する。アルファ・チャンネルには、「0」（透明）～「1.0」（不透明）の値を指定する。

● 透過性指定：

opacity プロパティ

また、opacity プロパティにより透過性を指定することもできる。アルファ・チャンネルの場合と同じように、「0」（透明）～「1.0」（不透明）の値を指定する。下記はそのサンプル・コードである。 1 2 3 4 5 6 <!DOCTYPE html> <html> <head> <title>Opacity Sample</title> <style type="text/css"> p { background-color: #00FF00; opacity: 0.3; } opacity.html

(19)

7 8 9 10 11 12 </style> </head> <body> <p>Coloring</p> </body> </html>

● セレクタ（

Selectors Level 3）

セレクタとは、CSS でスタイル定義する要素を選択するための構文である。 IE9 では、セレクタが強化され、さまざまな疑似クラスがサポートされている。疑似クラスとは、単純な要素指定では表現しきれないような特殊な条件に基づき、要素を選択する方法である。例えば「<li> 要素」という指定は単純なセレクタで解決できるが、「何番目の子要素」という特殊な指定を実現するには疑似クラスを利用する必要がある。実際にコードを見た方が分かりやすいので例を示す。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <!DOCTYPE html> <html> <head>

<title>CSS3 Selectors Sample</title> <style type="text/css">

li:nth-child(1) { background: red; } </style> </head> <body> <ul> <li>1:a</li> <li>1:b <ul> <li>2:A</li> <li>2:B</li> <li>2:C</li> </ul> </li> <li>1:c</li> </ul> </body> </html> selectors.html 6 行目の「:nth-child(1)」がセレクタの疑似クラスである。これにより、<li> 要素の親から見て、1 番目の子要素となる <li> 要素が選択される。サポートされている主な疑似クラスは、下の表のとおり。なお、疑似クラスの書式は、下記のようにコロン「:」で始まり、その直後に疑似クラス名が続く。オプションがある場合は、さらに丸カッコ「( )」に囲んだ値を続ける。疑似クラス説明 E:root ドキュメントのルートとなる <E> 要素が選択される

E:nth-child(n) <E> 要素の親から見て、n 番目の子要素となる <E> 要素が選択される E:nth-last-child(n) <E> 要素の親から見て、後ろから数えて n 番目の子要素となる <E> 要素

(20)

E:nth-of-type(n) <E> 要素の型で、n 番目の兄弟要素となる <E> 要素が選択される E:nth-last-of-type(n) <E> 要素の型で、後ろから数えて n 番目の兄弟要素となる <E> 要素が選

択される

E:last-child <E> 要素の親から見て、最後の子要素となる <E> 要素が選択される E:first-of-type <E> 要素の型で、最初の兄弟要素となる <E> 要素が選択される E:last-of-type <E> 要素の型で、最後の兄弟要素となる <E> 要素が選択される E:only-child <E> 要素の親から見て、唯一の子要素となる <E> 要素が選択される E:only-of-type <E> 要素の型で、唯一の兄弟要素となる <E> 要素が選択される E:empty 子要素もテキスト・ノードも持たない <E> 要素が選択される

E:enabled 有効になっている <E> UI（ユーザー・インターフェイス）要素が選択される E:disabled 無効になっている <E> UI 要素が選択される E:checked チェックされている <E> UI 要素（ラジオボタンやチェックボックスなど）が選択される E:not(s) 単純なセレクタ「s」に合致しない <E> 要素が選択される

● メディア・クエリ・モジュール

最近では特にスマートフォンの登場により、画面の解像度（横幅が何px か）により、CSS を切り替えたいというケースが増えてきている。このようなニーズに対応できるのが、CSS3 のメディア・クエリ・モジュールである。 CSS には、「@media ルール」と呼ばれる条件分岐の記述により、画面「screen」なのか、印刷「print」なのかを判定して、適用する CSS コードを切り替える機能（メディア・クエリ・モジュール）が用意されている。 CSS3 のメディア・クエリ・モジュールには、画面の解像度を判別する機能も追加されている。具体的には、「min-width」や「max-width」などのプロパティである。例えば次のコード例では、画面表示時のブラウザの表示領域サイズの横幅が、300px 未満ではコンテンツ領域全体に緑色の背景色を設定し、300px 以上では赤色に設定している。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <!DOCTYPE html> <html> <head>

<title>Media Queries Sample</title> <style type="text/css">

@media screen and (max-width: 300px) { body { background-color: #00FF00; } }

@media screen and (min-width: 300px) { body { background-color: #FF0000; } } </style> </head> <body> </body> </html> media-queries.html これを実行すると、横幅が 300px 未満であれば背景色が緑色になる。ブラウザの右端をドラッグすることでサイズを変更して 300px 以上にすると赤色に切り替わる。厳密には、「max-width: 300px」（300px 以下）と「min-width: 300px」（300px 以上）という指定は、お互いに300px を含む。このコードの場合、後述のコードの指定が優先されるので、横幅が「300px」のときには結果的に「min-width: 300px」の方の CSS が適用される。

(21)

IE9 での性能向上

● 新

JavaScriptエンジンによる高速化

Ajax などの普及に伴い、Web における JavaScript の利用と重要性はますます高まってきている。 Google ドキュメントなどの Web アプリケーションでは、大量の JavaScript コードが実行されており、 JavaScript エンジンの性能がその Web アプリケーションの性能に直結するようになってきた。このため、各ブラウザのJavaScript エンジンの高速化が図られている。 IE8 までの IE でも、このような時代背景を踏まえて、JavaScript を実行するためのスクリプト・インタプリタの性能改善に努めてきた。しかし、従来型のスクリプト・インタプリタは、少量の JavaScript コードには最適ではあるものの、大量のJavaScript コードを持つ今日のアプリケーション、そして明日の HTML5 アプリケーションには向いていない。そこでマイクロソフトは IE9 で、これまでの JavaScript エンジンを捨て、マイクロソフト社内での開発コード名「Chakra」という新しい JavaScript エンジンを採用した。マルチコアを活用する設計になっており、JavaScript のコンパイルを、IE と並行して別の CPU コア上でバックグラウンドで行うことで高速化を図っているという。

下に示したのは、マイクロソフトが2011 年 3 月 IE9 の公開に際して公表した Chakra の最終データで、IE8 と比べて約18 倍の処理速度となっている。尚、Windows XP 上で比較したとき、IE8 は IE6 の約 7 倍、 IE7 の約 5 倍高速な処理が可能とのことだから、IE9 では如何に大幅な性能向上を達成したかが分かる。

● ベクターグラフィック言語「

SVG」のサポート

IE9 では、2D ベクターグラフィック言語の「SVG（Scalable Vector Graphics） 1.1 第 2 版」をサポートしている。

(22)

る。 1 2 3 4 5 6 7 8 9 10 11 12 13 <!DOCTYPE html> <html> <head>

<title>SVG Sample 1</title> </head>

<body>

</svg> </body> </html> svg-1.html SVG の元々の目的は、2 次元のグラフィックを XML で記述したファイル（拡張子は svg を使用する）を提供し、それをHTML または XHTML などの文書で読み込んで使うことであった。 svg ファイルは、次のように記述すればよい。 1 2 3 4 5 6 7 <?xml version="1.0"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="80" fill="#333" fill-opacity="0.3"/> <circle cx="150" cy="140" r="60" fill="blue" fill-opacity="0.5"/> <text x="30" y="90" fill="white">This is SVG.</text>

</svg> このコードを svg-2.svg として保存する。上記のファイル svg-2.svg を、SVG イメージとして <object> タグで読み込むこともできる。例えば次のようなコードになる。 1 2 3 4 5 6 7 8 9 10 11 <!DOCTYPE html> <html> <head>

<title>SVG Sample 2</title> </head>

<body>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

(23)

4 5 6 7 8 9 10 11 12 13 14 15 16 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Embedding SVG</title> </head> <body> <h1>Embedding SVG in an XHTML Document</h1> <p>Embedding the file <em>svg-2.svg</em>

using the <strong>object</strong> element:</p> <object data="svg-2.svg" type="image/svg+xml" width="230" height="220"> <p>ブラウザが SVG に対応していません</p> </object> </body> </html>

● GPUによるハードウェア・アクセラレーション

主要ブラウザがいまこぞって開発を進めている分野がGPU を活用したレンダリング性能の向上である。グラフィックや動画のデコード、テキストのレンダリング、画像データの加工などの処理に GPU を使うようにすると、性能の向上や品質の向上が見込めるだけではなく、CPU 負荷が低減するためその分ブラウザのほかの処理をCPU に回すことができるという利点もある。この分野で今もっとも進んでいるのが IE9 らしい。クロスプラットフォームで展開しているほかの主要ブラウザと異なり、Windows というプラットフォームに固定された IE はそれだけ OS の提供する機能を使いやすい立場にある。 Windows の提供する GPU を活用するための機能を、もっとも最初に取り込みやすいブラウザといえる。

IE9 では、例えば前述した HTML5 の <video> タグが指定されている場合は、CPU ではなく GPU でビデオを再生する。また、ブラウザ上のテキスト描画では、ディスプレイでの文字表示を滑らかにする ClearType 技術（アンチエイリアシング技術）を搭載する DirectWrite API が使用されている。

このため、強力なGPU を持つユーザーほど高速描画の恩恵を受けることができる。またマルチコア CPU を利用している場合、処理を各コアに分散して実行可能なため、<video> タグを利用した HD 動画再生などでもコマ落ちすることなく、スムーズにできるようになる。尚、「インターネットオプション」の「詳細設定」で、「アクセラレータによるグラフィック」という項目にある「GPU レンダリングでなく、ソフトウェアレンダリングを使用する」にチェックマークが付いていないことを確認しておく必要がある。＜以上＞ 2012/04/09 庄司

Internet Explorer 9 の機能概説