【エンジニアカフェEvent】エンジニアカフェ× CyberX 技術勉強会 #2 ～スマホ対応でJavascript、HTML5はどう使う？～ に行ってきました
【エンジニアカフェEvent】エンジニアカフェ× CyberX 技術勉強会 #2 ～スマホ対応でJavascript、HTML5はどう使う？～
http://www.pasonatech.co.jp/event/index.jsp?no=3434&key=caf
の勉強会に行ってきました。
家に帰ってblogに書くまでが勉強会！ということで、まとめてみました。
「事例の発表」ではなく、Tipsを多く語っていただいたので、
非常に参考になりました(*ﾟ▽ﾟ)ﾉ
--------------------
■アニメーションのオーサリングから、専用ツールを使うパターン
現状、メジャーどころでは
・sencha animator
・hype
がある。
■アニメーションの方法は2通りある。
・DOMベースで作る
domのパラメータを変えてアニメーションさせる
・Canvasベースで作る
マイフレーム書き換える(CanvasにDrawする)、
よくある他のプラットフォームのアニメーション描画と同じ感じ。
※透明の画像を重ねていくと、DOMだとかなり重くなる。
※それもあり、現状だと、canvasベースの方が速度が出るのでお勧めとのこと。
■jsのアニメーションに使えるライブラリも、
アニメーション用だけに作られているわけではないが、
以下の物がある。
・enchant.js DOMベース、今度canvasベースの物が出るらしい。
・easel.js adobeが採用
■FLA、SWFを変換するツールに関して
・swf animator converterという、
swfをマイフレームキャプチャーして、
javascriptで再生させるようなツールもある。
・Swiffy等の変換ツールを使うと、svgで画像が出されるが、
一部、android機種が対応していないので、pngに置き換える必要がある。
・android2.1系にcanvas処理にバグがある！
（拡大回転すると正しく出ないとか）
・FlashForward(カヤック)も検討したが、
グラデーションの変換が上手くいかないので採用を見送った。
・ツールを使ってもandroidでは動かないことがある
（大量に機種があるのでチェックも大変・・）
・Adobe createJSというFLASHからhtml5を出せる物が出るらしいので
それには期待している。
--------------------
■実際にhtml5+javascriptでフィーチャーフォン向けのアプリを、
スマフォWEBアプリに移植した際のTips
・素材pngは表示サイズの2倍で持っている（大きい解像度の時対策）
・User-Agent偽造には、タッチイベントを取得出来ない場合は利用できないようにするとかで対応
（でもこの方法もすり抜けることは可能とのこと・・）
・忘れがちだが、js内のajaxで値を送る際、
そのままではエスケープされていない文字列になってしまっているので、
きちんとエスケープするようにする。
・Reel(グリー)やExGame（モバゲー）は非常に使えるのだが、
それぞれのプラットフォームで動かす時しか使えない・・
・スマートフォンWEBアプリは容量無制限だが、3G回線で悲惨なことになるので、
cssスプライトを使って画像を1枚にまとめ、httpリクエスト減らす。
→css sprite generatorなどの便利ツールもある
・あと画像を利用しないボタン(HTML5+css3)にするとか
・ファイル圧縮ツールを使う
1/3くらい縮むのでオススメ、さらにソースを読みにくくしてくれる
Mlnify PHPで実装された圧縮ツール
YUI Compressor ←オススメらしいです
Google Closure Compiler
・Apatchにmod_deflateをいれ、
サーバ上で圧縮してからレスポンスを返す方法もある。
この方法は協力で、サイズがおよそ半分くらいに減る。
（※但し、もちろんサーバのCPUを食うので注意）
・時間かかる処理は遅延実行！
firebugなどを使って、レンダリング時にどこに時間がかかっているのか調べて、
重い処理は非同期で実行させる。
bodyのonLoadよりも、
DOMContentLoadedを使う方がコンマ何秒か早いのでオススメとのこと。
・DOM処理はまとめておこなおう
ループ回数分のレンダリングが発生するので重い。
配列にappedしたいhtmlをため込んで、最後にappendする。
（1000回forで追加していく場合と比べ、２〜5倍ほど早かった）
・xhr(xmlHttpRequest)の連射による描画は止めよう！
間違えて実行してしまったxhrの完了を待ってから、次のxhrが実行されることになってしまう。
なので、止める必要がある場合は、xmlHttpRequest.abort()
で破棄するように。
（サーバに投げられたオブジェクトは、
もちろん生き残ったままになってしまうが・・）
・リアルタイムに合成を必要としないFlashは、
画面のパラパラマンガ再生で乗り切れる。
（swf animator converterを使うと言うこと？）
--------------------
