新しいSafari 3.1はCSSアニメーションをサポート -自由人PENGの再チャレンジ日記-

2008/03/20(木)

『新しいSafari 3.1はCSSアニメーションをサポート』

アップルからMacの標準WEBブラウザーであるsafariの新版safari3.1がリリースされました。

アップルの公式サイト（http://www.apple.com/jp/news/）によると

2008年３月18日、アップルは本日、Mac®とWindows PCのための世界最速のウェブブラウザ、Safari™ 3.1を発表しました。SafariはウェブページをIE7と比べて1.9倍、Firefox 2と比べて1.7倍速く読み込みます。Safariはまた、JavaScriptも他のブラウザに比べて最大6倍速く動作させるほか、高度にインタラクティブな次世代のWeb 2.0のエクスペリエンスを提供するために必要な最新の革新的ウェブ標準をサポートする最初のブラウザでもあります*。Safari 3.1にはOS® XとWindows用があり、 www.apple.com/jp/safari から今すぐ無料でダウンロードすることができます。

つまり世界で一番速いというのがウリらしい

で、「最新の革新的ウェブ標準をサポートする最初のブラウザでもあります」とは、どういう意味かというと現在策定中のHTML 5 の新要素などをサポートしてるよってこと

具体的には、ウェブページ上に写真を配置するように動画や音声を埋め込むことのできる＜video＞タグや＜audio＞タグ、CSSアニメーションやCSS 3 Webフォントをサポートしました。

なかでも特筆なのはCSSアニメーション（CSS transforms and transition）

CSSアニメーションとは、今までFlashやJavaScriptなどで作っていたアニメーション効果をCSSで作れちゃう機能です。

プログラムの知識がなくても動きのあるサイトが作れるので、

新米Webデザイナーさんの救世主になりそうです。

もし、早速safari3.1をダウンロードしたのなら、

ここをクリックしてみてください

ま、こんなことが、簡単にできるわけですわ

えっ？何も起こらなかった？

CSSアニメーションをサポートしていないブラウザで見ていても何も起こらないよ

ちなみに今のは「回転」させたい要素をDIVタグで囲んでタグ内に

「style="-webkit-transition: -webkit-transform 5s ease-in" onclick="this.style.webkitTransform='rotate(360deg)'"」

と書き込むだけ

他にもマウスのポインタを上に持ってくると徐々に消えていくボタンとか徐々に拡大するボタンなんかもCSSだけで作れます

これは便利！

参考サイト：
Surfin’ Safari - Blog Archive » CSS Animation
（http://webkit.org/blog/138/css-animation/）

The Art of Web ~ CSS: Animation Using CSS Transforms
（http://www.the-art-of-web.com/css/css-animation/）

上記のサイトでCSSアニメーションを使った様々な効果が楽しめます。

ただし現状ではsafari3.1でしかCSSアニメーション見れませんのであしからず

そしてWebフォントもWebデザイナーにとってうれしい機能です

ページ上に表示される文字は、そのページを見ているパソコンのOSの中に入っているフォントを使って表示されます。

だから見ているパソコン（OS）が違えば、表示される字体も変わってきます

Webデザイナーなら、できれば字体もデザインの一部として、こだわりたいと思うもの

そんなWebデザイナーの夢を叶えてくれそうなのが、Webフォントです

仕組みとしては、ページ読み込みの際に、そのページ表示に必要なフォントでパソコン（OS）に入っていないフォントがあれば自動的にダウンロードする仕組みです

これで、どのパソコン（OS）で見ても同じ字体で表示できるようになるはず

アルファベットの場合はね

日本語のフォントの場合は、アルファベットに比べて文字数が多いので、漢字まで使えるフォントはほぼ有料になってしまいます。

当然のことながら、それらの有料フォントは無断でダウンロードできないので、Webフォントで使うことはできないはず

日本でのWebフォントの利用はとても限定的なものになると思われます。

勝手にWebフォントとして有料フォントを使えば著作権法違反になるでしょう

それでもボタン部分やタイトル部分でデザインされた文字で表現したかったとき、わざわざ文字を画像に変換していた手間がなくなるだけでも、かなりのウェブサイトの制作作業の短縮につながります。

ただし、このWebフォントも今のところsafari3.1だけ