アプリ制作の技術者から学ぶ当連載や、中村洋基氏をはじめとするクリエイターが登壇する11月17日（土）開催のセミナー、中国・上海のWeb制作会社訪問ツアーなどの豪華賞品が当たるアプリアワードを行う「TapApp(タップ＊アップ)プロジェクト」と連動した連載第3回は、実際にソーシャルゲームのコーディングを行っているサイバーエージェント(以下、CA)のデベロッパーに、すぐに使えるJavaScript高速化のテクニックについて聞いた。

高速化がもとめられるスマホ用Webアプリ開発の現場

スマートフォン用ゲームというと、ネイティブアプリケーションの形で提供されるものをまず思い浮かべるかもしれないが、最近ではソーシャルゲームを中心に、ブラウザ上で動作するWebアプリケーションとして提供されるタイトルが続々と登場している。ユーザーがアプリをダウンロードする手間がなく、iPhone、Androidなど複数のプラットフォームに対応可能といったメリットから、今後Webアプリケーションは一層の増加が予想され、ゲームのみならずスマートフォン向けサービス全般においてWebアプリケーションのニーズが高まると考えられる。

これらWebアプリケーションのUI開発で用いられるのは、一般的なWebサイトと同じHTML、CSS、JavaScriptといったWeb標準技術だ。しかし、スマートフォンはPCに比べるとまだまだ計算性能が低いため、JavaScript を高速に処理し、スムーズに画面を表示させるためにはそれなりの工夫が必要となる。特にゲームのようなサービスでは操作に対する反応のスピードがユーザー体験を大きく左右するので、デベロッパーはいかに高速なUIを開発するかに日々腐心している。そこで蓄積されたノウハウは、スマートフォン向けのWebアプリケーションはもちろん、通常のWebサイトの開発にも応用できるものだ。

Webアプリケーションとして提供されるソーシャルゲームのインターフェイスではWeb標準技術が用いられ、快適なユーザー体験のため、JavaScript高速化などのノウハウが駆使されている。これはスマートフォン用サイト開発でも応用可能だ

ベンチマークサイトなどで計測すると、スマートフォンのJavaScript処理速度は最新機種であっても一般的なPCの10分の1程度。さらにネットワークが低速で不安定なため、動作の重いインターフェイスはユーザー体験を大きく損ねる。この2つの弱点をいかにカバーするかが、Webアプリケーション開発の勘所となる

今回は、CAのデベロッパー・平木聡氏に、CAが運営する「Ameba」上で提供されているゲーム「ULTIMATE RACER」を例に、JavaScript高速化テクニックの一部を解説してもらった。また、本誌開発者向け技術動向の記事執筆でおなじみの後藤大地氏には、技術監修を担当してもらった。

平木聡　Ameba事業本部スマートフォンDiv.ディベロップメントグループ ディベロッパー。DTPオペレーターからWebデベロッパーへの転身を経てCAに入社。



Session A　scriptタグをbodyの閉じタグの直前へ移動させる

ブラウザは読み込んだHTMLの先頭から順に処理していくため、スクリプトが表示の妨げとなることがある。これは記述する箇所の工夫でクリアできる。

JavaScriptのコードはHTMLのhead要素に含めずに、body要素を閉じる直前へと移動させる。JavaScriptの高速化術としては最も基本的なものだが、意外と知られていないことも多く、忘れられがちなテクニックだ。(平木)

head要素内にJavaScriptのコードを置いた場合、記述されているすべてのコードをダウンロードして評価を終えるまで、描画処理はブロックされる。このため、ユーザーはページを読み込んだ段階で一瞬もたつくような感覚を覚える。だがbodyが閉じる直前に書いておけば、HTML/CSSが描画されたあとで処理を実行することができる。これだけで最初の表示が速くなったような印象を与えることができるので、簡単だがとても大きな効果が期待できる方法だ。(後藤)

head要素内にJavaScriptが記述されていると、評価を終えるまで描画処理がブロックされ、その間は白紙のページが表示されたままになる

body閉じタグの直前に記述し、最後に読ませることで、JavaScriptの処理結果がなくてもレンダリング可能な部分を先に表示。体感的な速度を上げることができる

Session B　DOMツリーへのアクセスを最小限にする

DOMツリーへのアクセスは高い負荷がかかる処理となる。そのため、JavaScriptがDOMに触れる回数を意識して減らすことで高速化が図れる。

「ULTIMATERACER」では、必要最小限だがJavaScriptのライブラリとしてjQueryを採用している。jQueryを利用したスクリプトの中で要素へのアクセスを記述する際、便利なのでCSSセレクタを使うことになるが、2回目以降のアクセスには変数を用いるようにした。これによりDOMツリーをたどる処理を減らしている。(平木)

jQueryは扱いやすいセレクタが存在しているためよく利用されるライブラリだが、要素へのアクセスに毎回セレクタを使う書き方をしてしまいがちだ。いくらjQueryのセレクタの性能が良いとはいっても、これではDOMツリーをたどる重たい処理が毎回発生してしまうことになる。セレクタを使ったアクセスは最初の一回だけにして、あとは変数を経由してアクセスするようにするだけでも、十分な高速化が期待できる。(後藤)

同じDOM要素に複数回アクセスする場合には、最初のアクセスで変数に保存しておけば2回目以降DOMツリーをたどる必要がなくなり、処理の高速化につながる。これも基本的なテクニックだが、有用性が高い

※サービス開発運用状況によって、仕様に変更が入る可能性がありますのでご了承ください。
※当記事は、株式会社マイナビ刊行の「Web Designing」2012年11月号掲載の記事を加筆、修正したものです。

雑誌「Web Designing」では、今、Webクリエイターが知っておくべきスマートフォンUI のデザイン、開発のアイデアを学べるセミナーを開催します。基調講演の中村洋基氏をはじめとする、最前線で活躍するたくさんのデザイナー、開発者が登壇するセミナーになりますので、ぜひ参加をいただければと思います。また来場された方には、マイナビ発行の最新の開発者向け書籍一冊をもれなく差し上げます。

詳細はTapApp(タップ＊アップ)プロジェクト公式サイトまで。現在、申し込みも行なっている。