HTML5 事情 @Android, iPhone 小林 悠 Id:yukoba
いつもは、処理系  on JS 。 今日は、役に立つ話を!!
今日話す事 <ul><li>ビューポート </li></ul><ul><li><canvas> のバグ </li></ul><ul><li>WebStorage </li></ul><ul><li><audio> </li></ul><ul><...
ビューポート <ul><li>論理的な表示領域 </li></ul><ul><li><meta name='viewport' content='width=320,user-scalable=no'> </li></ul><ul><li>@A...
ビューポート <ul><li>標準:iPhone, Android = 980px </li></ul><ul><li>最小 </li></ul><ul><ul><li>iPhone -> 200px ズーム可能 </li></ul></ul>...
今日話す事 <ul><li>ビューポート </li></ul><ul><li><canvas> のバグ </li></ul><ul><li>WebStorage </li></ul><ul><li><audio> </li></ul><ul><...
<canvas>のバグ <ul><li>iPhone </li></ul><ul><ul><li>3.1 まで、文字の描画がめちゃくちゃ。 </li></ul></ul><ul><ul><li>逆さまで黒字で変な位置に表示される。 </li><...
<canvas>のバグ <ul><li>Android 2.0, 2.1 </li></ul><ul><ul><li>スケーリングがめちゃくちゃ </li></ul></ul><ul><ul><li>物理スクリーン -> Normal Scre...
今日話す事 <ul><li>ビューポート </li></ul><ul><li><canvas> のバグ </li></ul><ul><li>WebStorage </li></ul><ul><li><audio> </li></ul><ul><...
WebStorage <ul><li>Android 2.0以降、iPhone </li></ul><ul><ul><li>OK </li></ul></ul><ul><li>Android 1.6 </li></ul><ul><ul><li>...
今日話す事 <ul><li>ビューポート </li></ul><ul><li><canvas> のバグ </li></ul><ul><li>WebStorage </li></ul><ul><li><audio> </li></ul><ul><...
<audio> <ul><li>バッググラウンド再生できない </li></ul><ul><li>-> ゲームで使えない </li></ul>
今日話す事 <ul><li>ビューポート </li></ul><ul><li><canvas> のバグ </li></ul><ul><li>WebStorage </li></ul><ul><li><audio> </li></ul><ul><...
マルチタッチ <ul><li>iPhone OS 2.0 以降 </li></ul><ul><ul><li>ontouchstart, ontouchmove, ontouchend, ontouchcancel </li></ul></ul>...
マルチタッチ <ul><li>Android </li></ul><ul><ul><li>Dalvik アプリは 2.1 以降、マルチタッチ可 </li></ul></ul><ul><ul><li>JS は API だけ用意してあって、 2.2...
今日話す事 <ul><li>ビューポート </li></ul><ul><li><canvas> のバグ </li></ul><ul><li>WebStorage </li></ul><ul><li><audio> </li></ul><ul><...
WebSocket <ul><li>未実装 </li></ul><ul><li>プロトコルが互換性なき改訂が続いていて、PCですらα版の状態 </li></ul>
今日話す事 <ul><li>ビューポート </li></ul><ul><li><canvas> のバグ </li></ul><ul><li>WebStorage </li></ul><ul><li><audio> </li></ul><ul><...
描画速度のベンチマーク 2274 453 512 Flash copyPixels 7324 2891 4239 Flash draw with scale (Bitmap) 10909 3203 4810 Flash draw with sc...
Upcoming SlideShare
Loading in …5
×

HTML5事情@Android, iPhone

5,281 views

Published on

AndroidおよびiPhoneでのパソコン向けブラウザとの差異などを説明しています。

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,281
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

HTML5事情@Android, iPhone

  1. 1. HTML5 事情 @Android, iPhone 小林 悠 Id:yukoba
  2. 2. いつもは、処理系 on JS 。 今日は、役に立つ話を!!
  3. 3. 今日話す事 <ul><li>ビューポート </li></ul><ul><li><canvas> のバグ </li></ul><ul><li>WebStorage </li></ul><ul><li><audio> </li></ul><ul><li>マルチタッチ </li></ul><ul><li>WebSocket </li></ul><ul><li>描画速度のベンチマーク </li></ul>
  4. 4. ビューポート <ul><li>論理的な表示領域 </li></ul><ul><li><meta name='viewport' content='width=320,user-scalable=no'> </li></ul><ul><li>@Android 物理 px : 240, 320, 480 ↓ Normal Screen (320px) -> screen.width ↓ viewport width -> window.width </li></ul>
  5. 5. ビューポート <ul><li>標準:iPhone, Android = 980px </li></ul><ul><li>最小 </li></ul><ul><ul><li>iPhone -> 200px ズーム可能 </li></ul></ul><ul><ul><li>Android -> 320px ズーム不可能 @ Normal Screen </li></ul></ul><ul><li>詳細は、以下で検索 </li></ul><ul><ul><li>Safari Web Content Guide </li></ul></ul><ul><ul><li>android “Supporting Multiple Screens“ </li></ul></ul>
  6. 6. 今日話す事 <ul><li>ビューポート </li></ul><ul><li><canvas> のバグ </li></ul><ul><li>WebStorage </li></ul><ul><li><audio> </li></ul><ul><li>マルチタッチ </li></ul><ul><li>WebSocket </li></ul><ul><li>描画速度のベンチマーク </li></ul>
  7. 7. <canvas>のバグ <ul><li>iPhone </li></ul><ul><ul><li>3.1 まで、文字の描画がめちゃくちゃ。 </li></ul></ul><ul><ul><li>逆さまで黒字で変な位置に表示される。 </li></ul></ul><ul><ul><li>描画命令を送ってもピクセル操作で取り出せない </li></ul></ul>
  8. 8. <canvas>のバグ <ul><li>Android 2.0, 2.1 </li></ul><ul><ul><li>スケーリングがめちゃくちゃ </li></ul></ul><ul><ul><li>物理スクリーン -> Normal Screen へのスケーリングと上手くかみ合っていない </li></ul></ul><ul><ul><li>完璧な回避は、たぶん無理。 </li></ul></ul><ul><ul><li>詳細は、yukoba canvas バグで検索 </li></ul></ul><ul><li>Android 1.6, 2.2 </li></ul><ul><ul><li>致命的な問題は、たぶんないです </li></ul></ul>
  9. 9. 今日話す事 <ul><li>ビューポート </li></ul><ul><li><canvas> のバグ </li></ul><ul><li>WebStorage </li></ul><ul><li><audio> </li></ul><ul><li>マルチタッチ </li></ul><ul><li>WebSocket </li></ul><ul><li>描画速度のベンチマーク </li></ul>
  10. 10. WebStorage <ul><li>Android 2.0以降、iPhone </li></ul><ul><ul><li>OK </li></ul></ul><ul><li>Android 1.6 </li></ul><ul><ul><li>未実装 </li></ul></ul>
  11. 11. 今日話す事 <ul><li>ビューポート </li></ul><ul><li><canvas> のバグ </li></ul><ul><li>WebStorage </li></ul><ul><li><audio> </li></ul><ul><li>マルチタッチ </li></ul><ul><li>WebSocket </li></ul><ul><li>描画速度のベンチマーク </li></ul>
  12. 12. <audio> <ul><li>バッググラウンド再生できない </li></ul><ul><li>-> ゲームで使えない </li></ul>
  13. 13. 今日話す事 <ul><li>ビューポート </li></ul><ul><li><canvas> のバグ </li></ul><ul><li>WebStorage </li></ul><ul><li><audio> </li></ul><ul><li>マルチタッチ </li></ul><ul><li>WebSocket </li></ul><ul><li>描画速度のベンチマーク </li></ul>
  14. 14. マルチタッチ <ul><li>iPhone OS 2.0 以降 </li></ul><ul><ul><li>ontouchstart, ontouchmove, ontouchend, ontouchcancel </li></ul></ul><ul><ul><li>ongesturestart, ongesturechange, ongesutreend </li></ul></ul><ul><ul><li>詳細は Safari Web Content Guide で検索 </li></ul></ul>
  15. 15. マルチタッチ <ul><li>Android </li></ul><ul><ul><li>Dalvik アプリは 2.1 以降、マルチタッチ可 </li></ul></ul><ul><ul><li>JS は API だけ用意してあって、 2.2 現在、不可 -> ゲームに困る! </li></ul></ul>
  16. 16. 今日話す事 <ul><li>ビューポート </li></ul><ul><li><canvas> のバグ </li></ul><ul><li>WebStorage </li></ul><ul><li><audio> </li></ul><ul><li>マルチタッチ </li></ul><ul><li>WebSocket </li></ul><ul><li>描画速度のベンチマーク </li></ul>
  17. 17. WebSocket <ul><li>未実装 </li></ul><ul><li>プロトコルが互換性なき改訂が続いていて、PCですらα版の状態 </li></ul>
  18. 18. 今日話す事 <ul><li>ビューポート </li></ul><ul><li><canvas> のバグ </li></ul><ul><li>WebStorage </li></ul><ul><li><audio> </li></ul><ul><li>マルチタッチ </li></ul><ul><li>WebSocket </li></ul><ul><li>描画速度のベンチマーク </li></ul>
  19. 19. 描画速度のベンチマーク 2274 453 512 Flash copyPixels 7324 2891 4239 Flash draw with scale (Bitmap) 10909 3203 4810 Flash draw with scale (BitmapData) 4157 984 1107 Flash draw (Bitmap) 8186 2125 3496 Flash draw (BitmapData) GPU なし -> あり 2.3 倍 12 倍 -> 2.0 倍 7.4 倍 上下の比 6109 5997 -> 533 4185 <canvas> with scale 2712 507 -> 272 568 <canvas> Android 2.2 GeForce 7600 GS Pentium-M

×