bradtosのWEB開発日記

WEB開発エンジニアbradtosによる、JavaScriptやHTML5/CSS3の最新情報などなど・・・



2012-03-11

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

02:19

久しぶりの更新です。

最近のお仕事はスマートフォン向けのブラウザソーシャルゲーム作成。

というか変換に近いかも。



スマホ対応サイトの開発に携わってる方は分かると思うけど、

iPhoneなどのiOSではFlashが動かない。

今やソーシャルゲームユーザーのスマホ率は40%を超えるそうで、

iPhoneに対応しないゲームなんて話にならないところまで来ているとか。



そこでFlashベースで作られたものを元に

HTML5(+JS+CSS3アニメーション)版に出すのが

現在の案件という訳。




今のところiOSAndroidがターゲットのため

Chromeで開発し、webkitブラウザ用で動くようにさえすれば

上記の両者に対応するということになるんだけど、

実際のところはそうもいかない。



自分自身去年末に3年愛用したW63CAからついに

AndroidケータイXperia Acroに買い換えた訳だけど、

実は今回の仕事で初めて知ったことがある。

それはAndroidブラウザはなんとChromeではないということ!



PCのChromeベータの時から使っていたし、

SafariOS Xに搭載されたバージョン1から使っていて

どちらもwebkit系というのは知っていたけれど

さすがにAndroidブラウザChromeだろうと勝手に思い込んでいた。

調べてみる限りあのブラウザはあくまでも「ブラウザ」という名称だそうで、

確かに多くのソースを共有しているがChrome開発チームとは別の、

Androidチームが作っているそうだ。




そのためか実際、Webkitブラウザ向けのCSSアニメーションを使った

ブラウザアプリを開発していると

PC版SafariChromeとの多くの相違点にびっくりする。

PCではちゃんと表示できても、

実機で見るとまともに動かない部分がかなりある。

例えば-webkit-animation-fill-modeといったような、

webkitプリフィックスを使ったCSSプロパティ等である。

上記は現在多くのAndroidケータイで採用されている

Android2.3のブラウザでは完全に無視される。



iPhoneのほうについては、3GSなどの古い機種でも

今のところ最新のiOSバージョンアップすることによって

比較的最新のSafariが使えるためバグに悩まないで済むと思いきや、

何せアップデート自体に問題が多いため

(失敗すると最悪データ全消去なのは周りでは有名)

古いiOSのまま使っているユーザーも相当数いることから

iOS4でも検証を行わなければならないのは非常に面倒な話である。


こちらは動かないというよりは主にパフォーマンス面の

問題が多いので、画像の配置やJSの書き方などに一工夫必要になる。




今のところそれらについての情報が記載されているサイトが少ないので、

次回から少しずつここで書いていきたいと思う。

トラックバック - http://d.hatena.ne.jp/bradtos/20120311/1331486389
リンク元