Chrome+HTML5 Developers Live Japan #5
- 2. 2 Broadtail Confidential Confidential2 • このスライドは、 Chrome+HTML5 Developers Live Japan #5 にて使用予定のスライドです。 • 以下のURLからライブの様子をご覧いただけます – https://plus.google.com/events/cmmlimc40bamuk1la1qjgk2unh8 – ライブコーディング等を予定しておりますので、是非実際 の映像と共にお楽しみいただければと思います。 ネットでこのスライドを見ている方へ
- 3. 3 Broadtail Confidential Confidential3 • 紀平 拓男（きひら たくお） – 株式会社ディー・エヌ・エー – @tkihira – DeNAにおいてHTML5の総括を担う • 会社を2つ設立したシリアルアントレプレナー • HTML5によるFlash Runtime『ExGame』を製作 • 「インストール」が大嫌い。インストールの無い世 界にしたい 自己紹介
- 5. 5 Broadtail Confidential Confidential5 • PCでは、リッチコンテンツといえばFlashだった – 滑らかな曲線の描画、アニメーション、音や動画 – Flashの普及率はかなり高かった • スマートフォンではFlash Playerが利用できない – iOSではFlashが再生できない – AndroidでもFlash Playerの新規配布は終了している • そこで注目を浴びたのが、HTML5 – HTML5はFlashと同等の表現力がある – 標準規格であり、Adobe1社の思惑で仕様が決まらない mobile Web: FlashからHTML5へ
- 6. 6 Broadtail Confidential Confidential6 • PC Chromeで使える機能がほぼすべて使える – Canvas, CSS3, SVG などの描画系 – WebSQL, localStorage, applicationCache などのストレージ系 – Web Audio API, Video Streaming などのメディア系 – Geolocation, Web Workers, postMessage などの機能系 • HTML4の時代と比べると、 – 曲線のある図形の描画が可能になった – アニメーション能力も非常に高くなっている • HTML5でFlash並のアニメーションが達成可能になっ た Mobile Chrome の HTML5 対応
- 7. 7 Broadtail Confidential Confidential7 • しかし、ネイティブアプリには敵わな い • アプリに比べて、 – 3D – 音楽 – 速度 の点で劣っている HTML5の課題
- 8. 8 Broadtail Confidential Confidential8 • 特に、現実的には描画速度が一番の問題 • HTML5の描画手段 – Canvas: ラスターグラフィックス – CSS3: 変形やアニメーション • モバイルHTML5の最前線は、いかにこれらの 機能(Canvas/CSS3)を用いて描画速度を上げる か、が最も熱い 描画手段
- 9. 9 Broadtail Confidential Confidential9 • CSS3での描画速度向上に関しては、Google I/O 2013に てセッションで公開 – https://developers.google.com/events/io/sessions/325091862 – PC Chrome向けの解説だが、基本はMobile Chromeでも同じ • 今回は、Canvasでの描画速度向上技術のご紹介 – モバイルのHTML5ゲームにおいては、Canvasを用いた描画速 度の最適化がメイン – 2013年5月、 DeNAはCanvas高速化技術を Google I/O 2013で出展 高速化テクニックの紹介
- 11. 11 Broadtail Confidential Confidential11 DeNAブース at Google I/O 2013
- 13. 13 13 Canvasの基礎
- 14. 14 Broadtail Confidential Confidential14 • Canvasは、JavaScriptで中身を書き換えられる<img>み たいなもの – <img>とほぼ同じように使える – プログラムから操作しやすいように色々な命令がある • Canvasはプログラムで動的に作成してもよいし、 HTMLのタグとして書いてもよい • 実際に書いてみましょう Canvas(1): 作り方
- 15. 15 Broadtail Confidential Confidential15 • Canvasを操作する場合はContextを使う – Canvas#getContext を使って取得する – Contextに対して、描画条件の設定や実際の描画を行う • 線や曲線の描画は、「パス」と呼ばれる線を定義し て行う – 線を描きたい場合は、パスを定義してstrokeを呼び出す – 塗りつぶす場合は、パスを定義してfillを呼び出す – パスは直線、ベジェ曲線、円弧などが利用できる – 中空にしたい場合は、パスを逆順に定義して描画する Canvas(2): Contextとパス
- 16. 16 Broadtail Confidential Confidential16 • Canvasでは、アフィン変換が使える – アフィン変換とは、平行移動や回転、拡大縮小などを組み 合わせた変形を可能にする行列変換のこと – 画像を変形して描画するには、この命令を使うのがベスト • 使いやすいAPIとして、scale、rotate、translateが用意 されている – それぞれ拡大、回転、平行移動 • 上級者向けのAPIとして、transformとsetTransformが用 意されている – 自分好みの変換が出来るようになる Canvas(3): transform
- 17. 17 Broadtail Confidential Confidential17 • メモリ上には存在するけれども、DOMには属さない Canvasエレメントを活用する – 一般的に「オンメモリ・キャンバス」と呼ばれる • オンメモリキャンバスを活用すると、 – 画像のキャッシュ、再利用 – 画像に対する修正 などの応用が可能になる。うまく利用すると大変高 速 • ただし、使えば使うほどメモリを消費するので注意 Canvas(4): on memory canvas
- 18. 18 Broadtail Confidential Confidential18 • パスを使った描画がdrawImageよりも高速な場合があ る – 特にパス数が少ない場合 • パスの計算を一度で済ませて、描画命令のみ抽出し 関数化することで大幅な高速化につながる – このテクニックを使わない場合にくらべて10倍以上高速に なるシーンもある – データを読み込んで、毎回同じ描画を書くようなシーンに 最適 Canvas(5): パス描画の高速化テクニック
- 19. 19 Broadtail Confidential Confidential19 • Dirty Rectを考慮して描画する • Dirty Rectを使うと、 – 描画範囲が狭くなるので、目に見える高速化が期待できる – 電池の持ちが圧倒的に長くなる ので、余力があれば是非とも取り組むべき Canvas(6): drawImageの高速化テクニック
- 21. 21 Broadtail Confidential Confidential21 • WebGL – ブラウザ上でシェーダーを使った描画が可能になる • PNaCl (Chrome) – ネイティブアプリと遜色のない実行速度が可能になる • スピードが出ない、3Dが使えないなどの問題がどん どん改善されてゆく • ネイティブアプリをインストールせずとも、ネイテ ィブと同等の性能が発揮できるようになっていくだ ろう 今後登場するであろう技術
- 22. 22 Broadtail Confidential Confidential22 • 日本のモバイルHTML5の技術は世界でも最先端 • これからはChromeが普及し、互換性の問題が徐々に 解消されていく – Chromeチームの方々には大変感謝しています、ありがとう ！ 終わりに