息をするのも面倒くせぇ (by ゲイラ - 北斗の拳) というわけではありませんが、できるだけ文字を書きたく / 入力したくないこの私。iCalにも、自分以外にはわからないほど略した文字列を書き込んでいます。で、3月22日の予定は「人犬」。もちろん飛鳥了のことではありません、バリウムを飲まなきゃならないんです……ああ、憂鬱。

さて、今回は「Safari 3.1」について。Leopardの発売に先立ちOS X 10.4.11とともにリリースされたv3.0から約4カ月、メジャーバージョンこそ変わらないものの、機能的には大きく前進している。いまやOS Xユーザ必携のこのWebブラウザについて、これまで紹介してこなかった機能を中心に検証してみたい。

ついに登場「Safari 3.1」

まずはお約束、ベンチマーク

Safari 3.1のウリは、なんといっても「高速性」。すでに当コラム第262回で説明したとおり、getElementsByClassName関数のネイティブ実装などによる、JavaScript処理系の高速化が主な理由だ。

早速、ベンチマークを測定してみよう。利用するのは、WebKit開発チーム謹製の「SunSpider 0.9」、その詳細はこちらの記事を参照いただきたい。

そのスコアだが、ベンチマークに要した時間はSafari 3.0.4の約37%、つまり約2.7倍高速といえる。処理速度には定評のあるFirefox 2.0と比べても、約3.7倍の速度だ。同じくJavaScriptが高速化されたFirefox 3.0 -- 現時点ではβ4 -- と比較しても、Safari 3.1の優位は変わらない。JavaScriptの処理速度に関していうかぎり、Appleがいう"世界最速"はダテではないといえる。

表1: SunSpider 0.9の実行結果(単位: ミリ秒)

Safari 3.1 Safari 3.0.4 Firefox 3.0 β4 Firefox 2.0.0.12
3d 396.9 1268.1 491.1 1773.8
access 510.5 1821.9 570.8 1000.4
bitops 450.4 1628.8 463.4 3417.7
controlflow 89.8 213.8 41.1 90.2
crypto 233 740 248.4 507.2
date 283.7 481 379.6 1541.7
math 445.1 1125.4 490.8 978.5
regexp 209.8 344.7 273.4 595.6
string 644.5 1244.7 807.9 2200.1
TOTAL 3263.7 8868.4 3766.5 12104.9
※:テストにはMacBook Pro 2.33GHz / 2GB RAM、Mac OS X 10.5.2を使用

DLLのバージョンから判断すると、OS X版とコードベースはほぼ同一のはず

同時公開されたWindows版Safari 3.1についても検証したところ、興味深い結果となった。ハードスペックが同じマシン (MacBook Pro 2.33GHz / 2GB RAM、OSはWindows XP SP2) で実行したにもかかわらず、同じSafari 3.1のスコアに大きな差が現れたのだ。ライブラリを確認してみたが、WebKit.dllのバージョンは3.525.13.0とコードベースは大差なく、基盤であるOSとAPIの性能差によるところが大きいと推測できる。ちなみに、Internet Explorer 7と比較したWindows版Safari 3.1の速度は約5倍という結果だった。

表2: Windows XPで行ったSunSpider 0.9の実行結果

Safari 3.1 Internet Explorer 7
3d 728.2 1496.8
access 941 2109.4
bitops 797 1943.8
controlflow 184.6 571.8
crypto 524.6 1231.2
date 490.8 1003.2
math 768.8 1378.2
regexp 365.4 428
string 1162 18871.6
TOTAL 5962.4 29034

見ろ、動画が静止画のようだ

いち早くHTML5 (として正式採用であろう) の機能を取り入れたことも、Safari 3.1の特徴の1つ。その概要は第262回で説明済だが、その際紹介しなかった機能をいくつか紹介してみよう。

その1つが、動画・オーディオエレメントのサポート。まずはSafari 3.1を使い、こちらのWebサイトにアクセスしてほしい。ページ中ほどに、iPod touchのプロモーションビデオが現れるはず。先ほどベンチマークを比較したWebブラウザは、このページで使用しているHTML5のエレメント (video、audio) には対応していないため、表示されるのは「This is fallback content」というつれないメッセージのみだ。

非対応のブラウザ (左) では表示されないが、Safari 3.1ならiPod touchのビデオが表示されるはず

このビデオ、ビデオの中央にマウスオーバーすれば再生と停止の操作ができるのだが、注目してほしいのは右下のボタン。[+]のときクリックすればフルカラムまで拡大、[-]のときクリックすれば縮小できるのだ。しかも、ページ内の他の要素も、その拡大 / 縮小にあわせてレイアウトが変わる。まるで静止画のように動画を扱えるというわけだ。

インパクト大! なCSSアニメーション

見た目のインパクトは、動画エレメントより「CSSアニメーション」のほうが上かもしれない。論より証拠、まずはSafari 3.1でこちらのWebサイトにアクセスしてほしい。画面下の「2. Animating your Transforms」にあるbox1やbox2へマウスオーバーすると……それらのアイテムが動くのだ。

画面上の箱が滑らかに動く!!

このページでは、「-webkit-transform」プロパティを使用したCSSアニメーションの使い方が、かんたんに紹介されている。こちらのページには、Appleが提出したプロポーザルの全文が掲載されているので、あわせて参考にしてほしい。この機能が普及しすぎて、あらゆるWebサイトが"飛び出す絵本化"することは願い下げだが、洗練された使用法が確立されればWebページの見せ方も大きく変わることだろう。