米Appleが、HTML5、CSS3、JavaScriptなどWeb標準技術で構築されたWebサイトのリッチな表現力や機能を紹介するショーケースページ「HTML5 Showcase」を公開した。Safariブラウザを使って、以下の7つのデモを体験できる。

• ビデオ：videoタグを使ってWebページに組み込まれた動画プレイヤー。再生/一時停止、画面サイズの変更が可能。再生画面全体を傾けて奥行きを出す機能も備える。

• タイポグラフィ：CSSとSVGを用いたベクターベースのフォントの装飾。書体・サイズ・色の変更のほか、行間・字間・透明度の調節、回転や影のオン/オフなどが可能。

• ギャラリー：CSSトランジションと3Dトランスフォームを用いた写真ギャラリー機能。写真が流れるストリップを2D/3D、縦方向/横方向に切り替えられ、またグリッド表示も可能。

• トランジション：CSS 2Dおよび3Dトランスフォームを用いたオブジェクトのトランジションのデモ。写真の切り替えを使って、Cube、Rotate In、Unfoldなど10個のトランジションの効果を確認できる。

• オーディオ：音楽のサンプルが30秒間再生される。audioタグを用いて、コントローラと共にオーディオ再生機能がWebサイトに組み込まれている。

• 360度：JavaScriptを用いた360度スクロール。iPod touchの写真をドラッグしてマウスを左右に動かすと水平方向に360度回転する。

• 仮想現実：CSS 3Dトランスフォームを用いた3Dビュー。ニューヨーク5番街のApp Storeのキューブ内から上下左右を見渡せる。

再生中のTRONのトレーラー動画にタイトルをマスク	タイポグラフィをiPadで実行。画像ではなくフォントだからテキストとしてコピー/ペースト可能

WebブラウザのHTML5サポートが進めば、プラグインを導入することなく、デモにあるような動的で機能豊かなWebサイト/Webアプリが可能になる。そのためHTML5はパソコンとモバイルデバイスの垣根を取り払うソリューションになると期待されている。AppleのHTML5 Showcaseのデモはパソコン用のSafariだけではなく、iPad/ iPhone/ iPod touchのSafariでも同様に動作する。

なおSafari以外のWebブラウザでHTML5 Showcaseのデモを体験しようとすると、Safariのインストールを促すウインドウがポップアップする。だが「Developers: Learn how to do it yourself.」という部分の[Learn more]から開発者ページに移動し、開発者ページで各デモを開いて[View Demo]をクリックすると、Chromeブラウザでは「ビデオ」と「仮想現実」以外のデモが動作する。

HTML5 Showcaseを試せるのはSafariのみ。他のブラウザでデモを実行しようとするとSafariのインストールが促される	開発者向けページを訪れれば、ChromeでもHTML5デモの多くを体験可能