iPhone特有の技術いろいろ

2008年10月31日(金)
松本 庄司

変形とアニメーション

 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の場合はクロスブラウザ対応や過去の互換性を気にすることなく新機能を試すことができますので、ぜひ実機で確かめてみてください。
    株式会社モディファイ
    CTO。ProjectVine、もじら組などオープンソース系コミュニティーでの活動後、大手SIerにてJavaによるアプリケーションフレームワークの構築を手がける。ベンチャーインキュベータを経て、現在は株式会社モディファイにてJavascript/CSSと格闘する毎日。http://www.modiphi.com/

    Think ITメルマガ会員登録受付中

    Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

    Think ITメルマガ会員のサービス内容を見る

    他にもこの記事が読まれています