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の書き方などに一工夫必要になる。




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

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

2009-07-09

OS関連:困ったこと Fedora10からFedora11へのアップグレード

00:55

少し前、遊び&勉強用にふるーい自作マシンにFedora10を入れて

たまにいじっていたのだが、

今日なんとなしに起動したらFedora11のアップグレード案内が。

ウィザードが起動したのでどんどん次へ進んで、

再起動したらよくあるFedoraインストール画面になり、

勝手にインストールが進行していた。

ここ最近のLinuxディストリビューションの進化っぷりに

少し感動したが、なんと60%くらいのところ、

Jakartaなんたらというパッケージのインストール途中でフリーズしていた。

Alt+F1〜F5まで押してみたらどれかのコンソールにエラーっぽい文言を発見。


仕方ないので再起動したら

とりあえずログイン画面までは行ったのだが、

なにやら電源管理が正しくインストールされませんでしたと表示される上に

USBでつないでいるキーボードマウスどちらも反応しない・・・

たぶんUSBサポートが動いていない?

マザーボードPS/2端子は壊れているのでUSBしか使えないのだが、

困ったものである。。



仕方ないので暇があったらISOダウンロードして上書きインストールする予定。

そしてFireFoxがあまり好きではないので

Google ChromeLinux版が早くリリースされますように。

2009-04-14

IEにおけるjquery.ajax()

17:54

久々にAjaxな画面を書いたらちょっと壁に当ったのでメモ。


当たった壁というのは、タイトルどおりJquery.ajax()を使い

レスポンスにJSONデータを想定した際に

FF3、Safari4、ChromeはOKなのにIE7、8だと正常に動かない件。

厳密にはerrorで指定したコールバック関数が呼ばれてしまう。

他のブラウザだとsuccessで指定したコールバック関数が動くのに。


ajax()にはオプション引数のうち、dataTypeというパラメーターがあり、

json、jsonp、textなどを指定できる。

これを指定するとレスポンスに対する解釈をしてくれて

データの扱いが便利になるという代物。

いろいろ試してみたがIE8標準のデバッガ「開発者ツール」には

相変わらずparseerrorの文字が。

つまり、それ以前の問題っぽい。



JqueryにおけるAjaxを解説しているサイトを調べて回ったところ、

結局レスポンスを返すサーバー側が原因と判明。

今回はサーバー側はPHPになっているのだが、

IEにJSONデータをレスポンスとして判別させるためには

Content-Typeにapplication/jsonを指定しなければならないらしい。

XMLHttpRequestは本来XML向けだし仕方ないか。

というかJquery側のバグじゃないのか・・・


というわけでPHPのソースに

header('Content-Type: application/json;charset=UTF-8');

を追加したら難なく解決。