楽しいこと：JS+CSS3アニメーション

久しぶりの更新です。
最近のお仕事はスマートフォン向けのブラウザソーシャルゲーム作成。
というか変換に近いかも。



スマホ対応サイトの開発に携わってる方は分かると思うけど、
iPhoneなどのiOSではFlashが動かない。
今やソーシャルゲームユーザーのスマホ率は40%を超えるそうで、
iPhoneに対応しないゲームなんて話にならないところまで来ているとか。



そこでFlashベースで作られたものを元に
HTML5(+JS+CSS3アニメーション)版に出すのが
現在の案件という訳。




今のところiOSとAndroidがターゲットのため
Chromeで開発し、webkit系ブラウザ用で動くようにさえすれば
上記の両者に対応するということになるんだけど、
実際のところはそうもいかない。



自分自身去年末に3年愛用したW63CAからついに
AndroidケータイのXperia Acroに買い換えた訳だけど、
実は今回の仕事で初めて知ったことがある。
それはAndroidのブラウザはなんとChromeではないということ！



PCのChromeはベータの時から使っていたし、
SafariもOS Xに搭載されたバージョン1から使っていて
どちらもwebkit系というのは知っていたけれど
さすがにAndroidのブラウザはChromeだろうと勝手に思い込んでいた。
調べてみる限りあのブラウザはあくまでも「ブラウザ」という名称だそうで、
確かに多くのソースを共有しているがChrome開発チームとは別の、
Androidチームが作っているそうだ。




そのためか実際、Webkit系ブラウザ向けのCSSアニメーションを使った
ブラウザアプリを開発していると
PC版SafariやChromeとの多くの相違点にびっくりする。
PCではちゃんと表示できても、
実機で見るとまともに動かない部分がかなりある。
例えば-webkit-animation-fill-modeといったような、
webkitプリフィックスを使ったCSSのプロパティ等である。
上記は現在多くのAndroidケータイで採用されている
Android2.3のブラウザでは完全に無視される。



iPhoneのほうについては、3GSなどの古い機種でも
今のところ最新のiOSにバージョンアップすることによって
比較的最新のSafariが使えるためバグに悩まないで済むと思いきや、
何せアップデート自体に問題が多いため
(失敗すると最悪データ全消去なのは周りでは有名)
古いiOSのまま使っているユーザーも相当数いることから
iOS4でも検証を行わなければならないのは非常に面倒な話である。


こちらは動かないというよりは主にパフォーマンス面の
問題が多いので、画像の配置やJSの書き方などに一工夫必要になる。




今のところそれらについての情報が記載されているサイトが少ないので、
次回から少しずつここで書いていきたいと思う。