HTML5 Conference 2012レポート
HTML5によるタフなモバイルアプリ開発の最前線
2012/09/14
2012年9月8日に慶應義塾大学で開催された「HTML5 Conference 2012」から、ディー・エヌ・エーの紀平 拓男氏によるセッションについてレポートする。
紀平氏は「インストールが嫌い、インストールのない世界にしたい」という思想の持ち主で、「ネイティブアプリではなく、Webにアクセスしてすぐに遊べるコンテンツが理想」という言葉からセッションを始めた。
同氏は、「なぜ、今HTML5なのか」を、Flashと対比しながら説明した。FlashはモバイルOSからはなくなっていく一方だという現状を踏まえ、それに代わる技術としてHTML5が台頭してきている。今までFlashで実現していた表現は、ほぼHTML5でも実現できる状況であることを、自社コンテンツのアニメーションを紹介しながら説明した。
このデモは、同じゲーム中の同じアニメーションを、画面左側はFlash、右側にはHTML5で表示するというものだ。片方の動きが遅くなるようなこともなく、言われるまでどちらがFlashなのか分からなかったほどだった。
しかし、HTML5にはまだ、ネイティブアプリにはかなわない点が3つあると紀平氏は述べた。「3Dの描画」「音楽」「速度」だ。
このうち、速度のキモとなる「描画」を改善するために、DeNAでは以下のようなツールを提供しているという。
- ExGame……フィーチャーフォン向けSWFコンテンツを、スマートフォン向けコンテンツにスムーズに変換できるSWF変換エンジン
- Pex(Post Ex Game)……Flashを利用したHTML5ツール。ExGameでフィーチャーフォンとの互換性を保つためにパフォーマンスを犠牲にしていた部分をスマートフォンに特化させ、アニメーション表現などがよりリッチになり、HTML5ベースでの開発も可能になった
- ngCore on HTML5……ネイティブアプリと比べて遜色のないゲームの実現に向けて日々アップデートされているゲームエンジン
- Arctic.js……Mobageの人気ゲームタイトルで使用されているHTML5開発支援フレームワーク
さらに同氏は、「HTML5によるタフなモバイル開発」に向けて、「速度」「メモリ」「電池」という3つの課題に取り組んでいるという。
速度の高速化は、iOSでのCanvasのGPUサポートで実現された。今後は、「いかにキャッシュさせるか」が大きなポイントになるという。
メモリに関連しては、例えばガベージコレクションひとつ取っても、長期保存するメモリと短期間で消えるメモリを区別するなどの細かな調整を行っている。また、使用メモリを最小化する場合、デバイスによって「どこでメモリが増えるか」がそれぞれ異なるため、実機を用いた調査が必要になる。OSごとの調査方法として、Chrome Developer Tool:Heap Snapshotは「神ツール!」(紀平氏)だそうだ。
消費する電池を最小限に抑えるには、「どこでCPUが使用されているか」がキモになり、CPU使用率が高い描画に関しての細かなTIPSの説明があった。ポイントは、「描画しないくていい場合はとにかく描画しない」こと。いかにも当たり前なのだが、それを地道に、詳細に詰めていくことこそが、パフォーマンスの向上につながるそうだ。
最後に、紀平氏は、現状のモバイルアプリ市場は、GmailやGoogle Mapsがまだ登場していなかったころのPCブラウザの状況と似ていると発言し、「優れたWebアプリの出現によって状況はガラリと変わる」と強調した。「現在、HTML5のWebアプリ状況は、世界と比べても日本の方が優れている! これからモバイルアプリで日本が世界をリードしていきたい」という言葉で締めくくった。
関連リンク
関連記事
情報をお寄せください:
- GASで棒、円、折れ線など各種グラフを作成、変更、削除するための基本 (2017/7/12)
資料を作る際に、「グラフ」は必要不可欠な存在だ。今回は、「グラフの新規作成」「グラフの変更」「グラフの削除」について解説する - GET/POSTでフォームから送信された値をPHPで受け取る「定義済みの変数」【更新】 (2017/7/10)
HTMLのフォーム機能についておさらいし、get/postメソッドなどの内容を連想配列で格納するPHPの「定義済みの変数」の中身や、フォーム送信値の取り扱いにおける注意点について解説します【PHP 7.1含め2017年の情報に合うように更新】 - PHPのfor文&ループ脱出のbreak/スキップのcontinue【更新】 (2017/6/26)
素数判定のロジックからbreak文やcontinue文の利点と使い方を解説。for文を使ったループ処理の基本とwhile文との違い、無限ループなども併せて紹介します【PHP 7.1含め2017年の情報に合うように更新】 - Spreadsheetデータの選択、削除、挿入、コピー、移動、ソート (2017/6/12)
Spreadsheetデータの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する
|
|
キャリアアップ
- - PR -
転職/派遣情報を探す
「ITmedia マーケティング」新着記事
Metaに潰されないために残された生き残りの道は?――2025年のSNS大予測(Snapchat編)
若年層に人気のSnapchatだが、大人にはあまり浸透していない。一方で、AR(拡張現実)開...
「猛暑」「米騒動」「インバウンド」の影響は? 2024年に最も売り上げが伸びたものランキング
小売店の推定販売金額の伸びから、日用消費財の中で何が売れたのかを振り返るランキング...
Netflixコラボが止まらない 「イカゲーム」シーズン2公開で人気爆上がり必至のアプリとは?
Duolingoは言語学習アプリとNetflixの大人気ドラマを結び付けたキャンペーンを展開。屋外...