iOS Safari Examples

Safari の拡張 CSS と iOS Safari の TouchEvent のサンプルを作ったので、 Flasher 目線で気づいたこと、コーディングの際に気をつけることをピックアップします。 文字じゃ伝わらない箇所については、後ほどコードベースな別エントリを書くつもりです。 サンプルは TouchEvent 起点で動くので iOS Safari じゃないと意味不明だと思います。 一部のサンプルで Flickr API のレスポンスを Native JSON でデコードしているため、iOS4 以上が必要です。

サンプルの概要

Index

ナビゲーションです。QR コードを貼っておきます。（Optiscan にて動作確認済み）

Gesture

iOS Safari の表示オブジェクトは ‘touchstart’, ‘touchmove’, ‘touchend’, ‘gesturestart’, ‘gesturechange’, ‘gestureend’ というタッチスクリーンデバイス特有のイベントを発行します。 touch 系の pageX, pageY といったタッチしている位置情報を表すプロパティを利用して、画像をタッチしたままドラッグします。 gesture 系の rotation, scale といったピンチの状態を表すプロパティを利用して、画像を回転・拡大縮小します。

Rotation

スワイプして円形に配置した画像を回転させるサンプルです。 回転させる表示オブジェクトを親として、その子に10枚の画像を円形に配置します。

Cover Flow

スワイプしてカバーフローサンプル。10 枚セットでロードして次のセットをロードします。 Rotation と違い、入力イベントから変形処理行う対象の表示オブジェクトは複数で、且つ表示オブジェクトが増えていくので、全オブジェクトに変形処理を掛けると 50 枚を超えた辺りからレンダリングがついてこなくなります。 このサンプルでは、中央にあるオブジェクトの左右 10 枚のオブジェクトのみに変形処理を行い、それより外にあるオブジェクトは visibility: hidden; として表示自体を切って余計なレンダリングをしないようにしています。

Multitouch

touchstart, touchmove, touchend 時にタッチしている位置を取得・描画するサンプルです。

Singletouch Drawing

1 本の指でタッチして、動かす速度に応じて太さの異なる線を canvas に描くサンプルです。

Multitouch Drawing

複数本の指でタッチして、複数のタッチを繋ぐ多角形を canvas に描くサンプルです。

気づいたこと・注意点

• iOS Safari / Mac Safari / Win Safari はそれぞれレンダリングが微妙に違うぽいので、 対象の Safari 以外でのレンダリングは参考程度にとどめておいた方が良いかもしれません。 Chrome も WebKit を使っていますが、実装していないプロパティ満載なので確認にはおすすめしません。
• 3D 変形した子エレメントを持っている親エレメントを 3D 変形させる際、子エレメントを 3D として回転させるには、 親エレメントに -webkit-transform-style: preserve-3d; を設定しておく必要があります。
• -webkit-box-reflect: hoge; と posistion: absolute; を併用すると、 -webkit-box-reflect: hoge; がレンダリングに反映されません。
• Touch オブジェクトは内部的にプロパティを書き換えながら使いまわされているぽいので、 前回値をとっておくためには Touch オブジェクトの参照をとっておくのではなく、 とっておきたいプロパティの値自体を取得して変数等に格納しておく必要があります。（jp.ferv.blog » Blog Archive » Touch オブジェクトの注意点参照）
• 3D 変形したオブジェクトのヒットエリアがずれることがある。 （このサンプルでは、 3D 変形したオブジェクトへの click イベントや touch イベントではなく、 幅と高さが 100% なエレメントへの touch イベントを使うことで回避しています。）
• 初期値を与えてからトランジションを開始する場合は、トランジションのプロパティの書き込みは非同期に実行します。（jp.ferv.blog » Blog Archive » 初期値を与えてからトランジション参照）
• iOS4 以上の Safari は JSON のエンコード・デコードをサポートしています。 （Native JSON をサポートしているブラウザは、JSON – Wikipedia, the free encyclopedia » Native JSON を参照。 可能ならば Native JSON を使用する JS ライブラリもリストアップされています。）

雑感

“HTML5(video, audio, canvas) + CSS3(transform, transition, animation) + JavaScript” が主要ブラウザで動く未来があるなら、 今回のサンプルの様なコンテンツなら Flash から置き換わっていくかもしれないなと。 でも未来すぎるかもしれん・・・今のところ使えるとしたら iOS 専用コンテンツくらいだし。

ガイドやリファレンス

• Safari Visual Effects Guide : グラデーション・マスク・リフレクション・トランジション・アニメーション・タッチイベント・ジェスチャイベントとかの使い方
• Safari DOM Extensions Reference : Safari の拡張 DOM リファレンス
• Safari CSS Reference: Supported CSS Properties : Safari の CSS リファレンスのプロパティのページ