★テーマ
スマートフォンにおけるHTML5実装の最先端
●スピーカー
株式会社ディー・エヌ・エー CTO室
紀平 拓男 氏
今回の話題はスマフォに限る
現在出来る事について話す
今後新しく追加されたり、変更しされたりする内容もある
●HTML5とは？
HTML + JSの複合体
APIが豊富になった
ドット単位の描画が可能なCanvas
SVC
CSS3
localStorage
FlashでもHTML5でも同レベルのクオリティが出せる
○Webアプリ機能の拡充
・ApplicationCache機能
一度アクセスすれば、二度目からはキャッシュを利用する事が可能
アプリケーション固有の情報も持ち合わせる
・localStorage機能
●アプリに劣っている部分
○３D
・OpenGLが使えない
・WebGLはFirefox for mobileのみサポート(デフォルトのブラウザでは動かせない)
・MicrosoftはWebGLをサポートしない
○音楽
・制限が多い
・音のタイミング調整が非常にシビア
・iPhoneは、画像がタッチされたタイミングでのみ再生が可能
３G回線に負荷をかけないため
・WindowsPhoneとiPhoneは同時に２つの音源を出力出来ない
BGMと同時に効果音を鳴らす等
○速度
・実行速度は遅い
・描画が遅い
・JSの実行が遅い
●描画手段
Canvas ラスターグラフィックス
SVG ベクターグラフィックス
CSS3 変形やアニメーション
SVGはAndroid2系でサポート外
上手くやればCanvasで代用可能
●AndroidよりiPhoneの方が遅い
○iOS4
・drawImageが遅い、いかに回数を減らすか
・DOM構造でCanvasの上に物をのせない
・オンメモリーcanvas
・いかにキャッシュに乗せて、drawImageの回数を減らせるか
○iOS5
・GPUをsupportしている
・drawImageは早くなったが、他の処理が重くなっている
canvasは使いこなせば優秀だが、そこまで特性を知って辿り着くのがキツい
●CSS3
基本的にGPUサポート
同時に動く物体数が2縲・ならいいが、増えると急激に重くなる
特にAndroidで、ブラウザバージョン間、端末間の互換性が無い事が多い
変形に関してはAndroid2.2以降に関してはある程度期待出来る
アニメーションに関しては、問題が多発している
Canvasとは逆でとっつきやすいが、途中で急に動かなくなったりする
○Canvasが有効
・シチュエーションに応じて変わるアニメーション
・同時に動く物が多い時(ゲーム的な物など)
○CSS３が有効
・1枚もののアニメーション
・同時に動く物が少ない
・もともと使われていたCSSの拡張なので、触りやすい
●JavaScript Engine
○JSが重い理由
・アルゴリズムが重い
・JITが重い
・GSが重い
JITが重い時は、eval、ループの中でクロージャを何回も生成する等の原因を探る
本来JITで重くなるはずがない
●Garbage Collection
○AndroidにおいてはFull GCが走る事がある
・秒単位で画面が止まったりする
・どのタイミングで走るのかはブラウザ依存
○V8は世代別GCを利用している
・なるべくリソースが新しいうち(新世代のうち)に解放する(マイナーGCのうちにGCする)
○iOSは、メモリが足らなくなると落ちる
○メモリ対応 王道
・何度も使うメモリをあらかじめ確保する
・頻繁に使う画像は、最初に全部ロードする
・あまり出し入れをすると、フラグメンテーションが起こる
・上限の決まっているオブジェクトは、初期化時に上限まで確保しておく
オブジェクトの生成の回数を減らす
無駄に生成することをなくせる
○メモリ対応 邪道
・何とか実機上でのメモリ使用量を確認する
・どの部分でどれだけメモリを消費するか
(iPhoneSimulator、UIWebViewは信用できない)
・ジェイドフレーク
やるならiPodTouchに入れてやる
セキュリティ上は何もガードがなくなる
メモリ使用量が100Mに収まるように作れば、大体問題はなくなる
●実機でのプロファイル
○ExGameなどでは自作プロファイルを使用
・関数単位でcount,total, selfを取得
・どの関数のプロファイルを取るかを指定
・ビルトインAPIも指定可能
・プロファイルのタイミングを設定可能
・結果をサーバに送信
○実機でのデバッグ
・JsConsole
・console.log
・iPhoneでも設定すれば参照可能
console.error hack
ログの種類によって色を変えたりすると見やすい
●ngCoreをHTML5で作っている
アプリと変わらない速度でHTML5でも使える
●HTML5の将来
○インストールソフトの時代は終わる
インストールすることは、開発者もユーザーもメリットが薄い
○将来あるべき姿はどのようなものか
10年後どのような世界であるべきかと自分が思っている方向を信じ続けること
●感想
HTML5はこれからのスマフォ時代に欠かせないスキルになってくるので、
今回のデブサミの中で一番楽しみにしていたセッションだった。
かなり技術者向けの内容で、パフォーマンス面での対応だったり、canvasのメリット、デメリット等も分かり、
これから実践していく上でも非常に役立つ内容だったと思う。
エンジニアでもこれらを使いこなせるようになれば有益な技術なので、
この話も参考に習得していきたい。
スマートフォンにおけるHTML5実装の最先端
●スピーカー
株式会社ディー・エヌ・エー CTO室
紀平 拓男 氏
今回の話題はスマフォに限る
現在出来る事について話す
今後新しく追加されたり、変更しされたりする内容もある
●HTML5とは？
HTML + JSの複合体
APIが豊富になった
ドット単位の描画が可能なCanvas
SVC
CSS3
localStorage
FlashでもHTML5でも同レベルのクオリティが出せる
○Webアプリ機能の拡充
・ApplicationCache機能
一度アクセスすれば、二度目からはキャッシュを利用する事が可能
アプリケーション固有の情報も持ち合わせる
・localStorage機能
●アプリに劣っている部分
○３D
・OpenGLが使えない
・WebGLはFirefox for mobileのみサポート(デフォルトのブラウザでは動かせない)
・MicrosoftはWebGLをサポートしない
○音楽
・制限が多い
・音のタイミング調整が非常にシビア
・iPhoneは、画像がタッチされたタイミングでのみ再生が可能
３G回線に負荷をかけないため
・WindowsPhoneとiPhoneは同時に２つの音源を出力出来ない
BGMと同時に効果音を鳴らす等
○速度
・実行速度は遅い
・描画が遅い
・JSの実行が遅い
●描画手段
Canvas ラスターグラフィックス
SVG ベクターグラフィックス
CSS3 変形やアニメーション
SVGはAndroid2系でサポート外
上手くやればCanvasで代用可能
●AndroidよりiPhoneの方が遅い
○iOS4
・drawImageが遅い、いかに回数を減らすか
・DOM構造でCanvasの上に物をのせない
・オンメモリーcanvas
・いかにキャッシュに乗せて、drawImageの回数を減らせるか
○iOS5
・GPUをsupportしている
・drawImageは早くなったが、他の処理が重くなっている
canvasは使いこなせば優秀だが、そこまで特性を知って辿り着くのがキツい
●CSS3
基本的にGPUサポート
同時に動く物体数が2縲・ならいいが、増えると急激に重くなる
特にAndroidで、ブラウザバージョン間、端末間の互換性が無い事が多い
変形に関してはAndroid2.2以降に関してはある程度期待出来る
アニメーションに関しては、問題が多発している
Canvasとは逆でとっつきやすいが、途中で急に動かなくなったりする
○Canvasが有効
・シチュエーションに応じて変わるアニメーション
・同時に動く物が多い時(ゲーム的な物など)
○CSS３が有効
・1枚もののアニメーション
・同時に動く物が少ない
・もともと使われていたCSSの拡張なので、触りやすい
●JavaScript Engine
○JSが重い理由
・アルゴリズムが重い
・JITが重い
・GSが重い
JITが重い時は、eval、ループの中でクロージャを何回も生成する等の原因を探る
本来JITで重くなるはずがない
●Garbage Collection
○AndroidにおいてはFull GCが走る事がある
・秒単位で画面が止まったりする
・どのタイミングで走るのかはブラウザ依存
○V8は世代別GCを利用している
・なるべくリソースが新しいうち(新世代のうち)に解放する(マイナーGCのうちにGCする)
○iOSは、メモリが足らなくなると落ちる
○メモリ対応 王道
・何度も使うメモリをあらかじめ確保する
・頻繁に使う画像は、最初に全部ロードする
・あまり出し入れをすると、フラグメンテーションが起こる
・上限の決まっているオブジェクトは、初期化時に上限まで確保しておく
オブジェクトの生成の回数を減らす
無駄に生成することをなくせる
○メモリ対応 邪道
・何とか実機上でのメモリ使用量を確認する
・どの部分でどれだけメモリを消費するか
(iPhoneSimulator、UIWebViewは信用できない)
・ジェイドフレーク
やるならiPodTouchに入れてやる
セキュリティ上は何もガードがなくなる
メモリ使用量が100Mに収まるように作れば、大体問題はなくなる
●実機でのプロファイル
○ExGameなどでは自作プロファイルを使用
・関数単位でcount,total, selfを取得
・どの関数のプロファイルを取るかを指定
・ビルトインAPIも指定可能
・プロファイルのタイミングを設定可能
・結果をサーバに送信
○実機でのデバッグ
・JsConsole
・console.log
・iPhoneでも設定すれば参照可能
console.error hack
ログの種類によって色を変えたりすると見やすい
●ngCoreをHTML5で作っている
アプリと変わらない速度でHTML5でも使える
●HTML5の将来
○インストールソフトの時代は終わる
インストールすることは、開発者もユーザーもメリットが薄い
○将来あるべき姿はどのようなものか
10年後どのような世界であるべきかと自分が思っている方向を信じ続けること
●感想
HTML5はこれからのスマフォ時代に欠かせないスキルになってくるので、
今回のデブサミの中で一番楽しみにしていたセッションだった。
かなり技術者向けの内容で、パフォーマンス面での対応だったり、canvasのメリット、デメリット等も分かり、
これから実践していく上でも非常に役立つ内容だったと思う。
エンジニアでもこれらを使いこなせるようになれば有益な技術なので、
この話も参考に習得していきたい。