html5事情@android, iphone

HTML5 事情 @Android, iPhone

小林悠Id:yukoba

いつもは、処理系 on JS 。今日は、役に立つ話を！！

今日話す事1. ビューポート2. <canvas> のバグ3. WebStorage

4. <audio>

5. マルチタッチ6. WebSocket

7. 描画速度のベンチマーク

ビューポート論理的な表示領域 <meta name='viewport' content='width=32

0,user-scalable=no'> @Android

物理 px ： 240, 320, 480↓Normal Screen (320px) → screen.width↓viewport width → window.width

ビューポート標準： iPhone, Android = 980px 最小

• iPhone → 200px ズーム可能• Android → 320px ズーム不可能 @ Normal

Screen 詳細は、以下で検索

• Safari Web Content Guide• android “Supporting Multiple Screens“


4. <audio>



<canvas> のバグ iPhone

• 3.1 まで、文字の描画がめちゃくちゃ。• 逆さまで黒字で変な位置に表示される。• 描画命令を送ってもピクセル操作で取り出せ

ない

<canvas> のバグ Android 2.0, 2.1

• スケーリングがめちゃくちゃ• 物理スクリーン → Normal Screen へのスケ

ーリングと上手くかみ合っていない• 完璧な回避は、たぶん無理。• 詳細は、 yukoba canvas バグで検索

Android 1.6, 2.2• 致命的な問題は、たぶんないです


4. <audio>



WebStorage

Android 2.0 以降、 iPhone• OK

Android 1.6• 未実装


4. <audio>



<audio>

バッググラウンド再生できない→ ゲームで使えない


4. <audio>



マルチタッチ iPhone OS 2.0 以降

• ontouchstart, ontouchmove, ontouchend, ontouchcancel

• ongesturestart, ongesturechange, ongesutreend

• 詳細は Safari Web Content Guide で検索

マルチタッチ Android

• Dalvik アプリは 2.1 以降、マルチタッチ可• JS は API だけ用意してあって、 2.2 現在、不

可→ ゲームに困る！


4. <audio>



WebSocket

未実装プロトコルが互換性なき改訂が続いてい

て、 PC ですら α 版の状態


4. <audio>



描画速度のベンチマークPentium-M GeForce 7600 GS Android 2.2

<canvas> 568 507 → 272 2712

<canvas> with scale 4185 5997 → 533 6109

上下の比 7.4 倍 12 倍 → 2.0 倍 2.3 倍

GPU なし → あり

Flash draw (BitmapData)

3496 2125 8186

Flash draw (Bitmap) 1107 984 4157

Flash draw with scale (BitmapData)

4810 3203 10909

Flash draw with scale (Bitmap)

4239 2891 7324

Flash copyPixels 512 453 2274

html5事情@android, iphone

Technology