変形とアニメーション

変形とアニメーション

　CSS3では、Transformという要素の変形と、Transition/Animationというアニメーションの機能がワーキングドラフトになっています。iPhone（Webkit）ではこの機能を先取りし、CSSのみで変形とアニメーションができます。

　変形は「-webkit-transform」によって指定します。対応している変形機能は、移動、拡大縮小、回転です（図3-1）。

　-webkit-transformの詳しい説明は、Safari CSS Transform Guide for iPhone OS（https://developer.apple.com/webapps/docs/documentation/iPhone/Conceptual/SafariCSSTransformGuide/Introduction/chapter_2_section_1.html）を参照ください。

　アニメーションは「-webkit-transition:<対象> <時間> <アニメーションモード>」です。-webkit-transitionが指定された要素のCSS指定が変化すると、変化前と変化後のスタイルの差がアニメーションで表現されます。

#box { -webkit-transition:all 1s ease-in-out; background:red; }
.scaled { -webkit-transform:scale(0.5); background:blue; }

　対象要素のclassを直接変えなくても、div#boxの親要素のclassによってボックスの指定が変わる場合でも問題ありません。

#box { -webkit-transition:all 1s ease-in-out; background:red; }
.scaled #box { -webkit-transform:scale(0.5); background:blue; }

　変形とアニメーションを組み合わせたサンプルをダウンロード（http://www.thinkit.co.jp/images/article/146/5/14653.zip）できますので、参照ください（14653.zip/1.55 KB）。また、iPhoneのSafariでのみ動く「要素の3D変換の例」も入っています（図3-2）。

　さらに、-webkit-transitionとはまた別に、-webkit-animationと@-webkit-keyframesという方法もあります。

　-webkit-transition、-webkit-animationの詳しい説明は、Safari CSS Animation Guide for iPhone OS（https://developer.apple.com/webapps/docs/documentation/iPhone/Conceptual/SafariCSSAnimationGuide/Introduction/chapter_2_section_1.html）にあります。

ライブラリについて

　メジャーなiPhone用Webサイトのためのライブラリを紹介します。どのライブラリも「いかにお手軽にiPhoneのネイティブアプリケーションのような見た目と動きのWebサイトを作るか」を考えてあります。

　iUI.js（http://code.google.com/p/iui/）はiPhone風UIライブラリの老舗です。

としてiPhoneのリストページを1枚のHTMLにまとめておけば、トップにバックボタンのついたページが表示され、ネイティブアプリケーションのような見た目と動きの階層選択ができます。

　iWebKit（http://iwebkit.net/）もiUI.jsとほぼ同じですが、iUI.jsでは1ページ1リストという構造なのに対し、iWebKitの場合はページ内をセクション分けしてリストを複数持つことができます。

　Universal iPhone UI Kit（http://code.google.com/p/iphone-universal/）ではさらにいろいろなリストビューを使えます。普通のリストだけではなく、コンタクトリスト風、YouTubeアプリケーション風、クロックアプリケーション風などのほか、イメージリストがあったり、チャットのバブル装飾や大きなボタンなども準備されており、眺めているだけでもなかなか面白いです。ただし、こちらは上の2つで実装されている「ぬるっとページ遷移」は実装されていないため、動かしていると少し気持ちが悪いです。

　これらのライブラリを使えば、少なくともアプリケーションっぽい見た目はかなり簡単に作れます。

　以上、iPhone用Webサイトの世界はいかがだったでしょうか。

　まだまだCSS3なんて先の話だと思っていましたが、iPhoneの場合はクロスブラウザ対応や過去の互換性を気にすることなく新機能を試すことができますので、ぜひ実機で確かめてみてください。