Raffaele Cecco「JavaScriptグラフィックス ゲーム・スマートフォン・ウェブで使う最新テクニック」オライリージャパン 相川愛三訳 1

　本書は、ワンランク上を目指す JavaScript プログラマーに向けた解説書です。主にグラフィックスやアニメーションを扱いますが、単に HTML5 Canvas や jQuery について説明するだけの書籍ではありません。

【どんな本？】

　Web ブラウザ上のゲーム・アプリケーションの開発用としては現在最も有力なプログラミング言語である JavaScript を使い、主に２Dのアクション・ゲームを作りたい人のための技術解説書。

　単にアニメーション用のインタフェースを紹介するだけでなく、実行速度を速くする方法、マシンの性能が違っても同じような操作感を実現するコツや、使うメモリの容量を減らす工夫、他言語と比べた JavaScript のクセ、CSS と組み合わせた印象的なエフェクトなど、今すぐ応用できるテクニックを豊富なソースコードと共に紹介する。

【いつ出たの？分量は？読みやすい？】

　原書は Supercharged JavaScript Graphics, by Raffaele Cecco, 2011。日本語版は2012年３月17日初版第１刷発行。単行本ソフトカバー横一段組みで本文約257頁。8.5ポイント46字×38行×257頁＝約449,236字、400字詰め原稿用紙で約1,124枚。文庫本なら上下巻ぐらいの分量だが、キャプチャ画像やイラストを豊富に収録しているので、実際の文字数は６～７割程度。当然ながら、ソース・プログラムもふんだんに出てくる。

　訳者は相当にプログラミングがわかっている人らしく、文章はこなれていて読みやすいし、言葉の使い方も適切。問題は内容で、次の条件三つをを全て満たす人向け。

1. HTML と CSS が書ける。少なくとも、この記事頁の HTML と CSS ぐらいは、マニュアルを見ながらでもいいので、自分で作れる。
2. JavaScript でプログラムを作れる。と言っても、この程度のオモチャで喜んでいる程度では苦しい。プログラミング技術として、クロージャ・コールバック・継承ぐらいは使えて、Web プログラマとしては DOM(Document Object Model、→XML用語辞典) による要素の追加や変更ができる。
3. jQuery を多少は知っている。日頃から使っていると更によし。

　意外なことに、ゲームを作った経験がない人でも、上記三つを満たす人なら、読みこなせる。なお、デバッガは Firebug を紹介しているので、ブラウザは Firefox を使っているといいかも。

　本書のゴールとしては、次のようなゲームやエフェクトが出てくる。ただし、サウンドはなし。

• 懐かしのインベーダーゲーム：PC版＆Android版
• チャット
• 棒グラフ：ポップアップする吹き出しつき

　描く画像は２Dが中心で、グラデーションや影をつけて立体感を出すあたりが限界。テトリスを作るのは可能だけど、ぷよぷよは少しエフェクトを簡素化しないと難しいかも。さすがに物理演算エンジンを酷使する３Dゲームまでは無理です。ゲーム専用機ならPSP未満、かな。

　HTML の規格だと、５章までは DHTML 対応で、６章から HTML5 が必要になる。

【構成は？】

　前章を受けて後の章が続く形なので、素直に頭から読もう。

訳者まえがき／まえがき １章　コードの再利用と最適化 1.1　高速化 1.2　何をいつ最適化するか 1.3　自家製コードプロファイリング 1.4　JavaScriptの最適化 1.4.1　ルックアップテーブル 1.4.2　ビット演算、整数、２進数 1.5　jQueryとDOM操作の最適化 1.5.1　CSSスタイル変更の最適化 1.5.2　DOM挿入の最適化 1.6　その他の情報 ２章　DHTML 2.1　DHTMLスプライトの作成 2.1.1　アニメーション 2.1.2　カプセル化と描画の抽象化(詳細隠蔽) 2.1.3　スプライトのコード 2.1.4　スプライトのコード 2.1.5　簡単なSpriteアプリ 2.1.6　より動きのあるスプライト 2.2　ｊQueryプラグインに変換 2.3　タイマー、スピード、フレームレート 2.3.1　setIntervalとsetTimeoutの使用 2.3.2　タイマーの精度 2.3.3　一定スピードの実現 2.3.4　Internet Explorer 6 の背景キャッシュ ３章　スクロール 3.1　CSSだけを使ったスクロール効果 3.2　JavaScriptを使ったスクロール 3.2.1　背景画像のスクロール 3.2.2　タイルベース画像のスクロール ４章　高度なUI 4.1　HTML5のフォーム 4.2　JavaScriptのUIライブラリ 4.2.1　jQuery UIを用いたWebインタフェース強化 4.2.2　Ext JSを用いた強力なUI 4.3　UI要素の自作 4.3.1　3D回転木馬の作成 ５章　JavaScriptゲーム 5.1　ゲームで使うオブジェクトの概要 5.2　ゲームのコード 5.2.1　ゲーム全体で用いる変数 5.2.2　キーの読み込み 5.2.3　キャラクタの移動 5.2.4　簡単なアニメーション効果 5.2.5　衝突判定 5.2.6　インベーダー 5.2.7　プレイヤー 5.2.8　シールド 5.2.9　UFO 5.2.10　gameオブジェクト 5.2.11　ひとつにまとめる

６章　HTML5 Canvas 6.1　Canvasのサポート 6.2　ビットマップかベクターか？　あるいは、その両方か？ 6.3　Canvasの制限 6.4　CanvasとSVGの比較 6.5　CanvasとFlashの違い 6.6　Canvasエクスポータ 6.7　Canvasの描画の基本 6.7.1　Canvas要素 6.7.2　描画コンテクスト 6.7.3　矩形の描画 6.7.4　直線と曲線を使ったパスの描画 6.7.5　ビットマップ画像の描画 6.7.6　色、境界線、塗り潰し 6.8　Canvasを使ったアニメーション 6.9　Canvasと再帰的な描画 6.9.1　Canvasによる樹木のページレイアウト 6.10　DHTMLスプライトをCanvasのスプライトに置き換える 6.10.1　CanvasSpriteオブジェクト 6.10.2　他のコードの修正 6.11　CanvasとWebSocketを使ったグラフィカルなチャットアプリ 6.11.1　WebSocketの利点 6.11.2　WebSocketoのサポートとセキュリティ 6.11.3　チャットアプリ ７章　ベクトル計算 7.1　ベクトルの計算 7.1.1　足し算と引き算 7.1.2　拡大と縮小 7.1.3　正規化 7.1.4　回転 7.1.5　内積 7.2　JavaScriptによるベクトルオブジェクトの作成 7.3　ベクトルを使った大砲シミュレーション 7.3.1　シミュレーション全体で用いる変数 7.3.2　弾丸 7.3.3　大砲 7.3.4　背景 7.3.5　メインループ 7.3.6　ページレイアウト 7.4　ロケットのシミュレーション 7.4.1　ゲームオブジェクト 7.4.2　障害物オブジェクト 7.4.3　ロケットオブジェクト 7.4.4　背景 7.4.5　衝突判定と反作用 7.4.6　ページレイアウト 7.4.7　改良・改造のアイデア

８章　Google Chart Tools 8.1　制限事項 8.2　グラフ一覧 8.3　画像グラフ 8.3.1　データ形式とグラフ分解能 8.3.2　動的なデータの使用 8.3.3　まとめ 8.4　インタラクティブなグラフ 8.4.1　インタラクティブなグラフのペイント ９章　jQuery Mobile 9.1　jQuery Mobile の基本 9.2　TilePic：モバイル向けのWebアプリ 9.2.1　TilePicゲームの説明 9.2.2　TilePicゲームのコード 9.3　PhoneGapとは 10章　PhoneGap 10.1　インストール 10.1.1　JDKのインストール 10.1.2　Android SDKのインストール 10.1.3　Eclipseのインストール 10.1.4　ADTのインストール 10.1.5　PhoneGapのインストール 10.2　EclipseでのPhoneGapプロジェクトの作成 10.2.1　App.javaファイルの変更 10.2.2　AndroidManifest.xmlファイルの変更 10.2.3　簡単なWebアプリを作成してのテスト 10.2.4　TilePicアプリのテスト 付録A　ソケットサーバのソースコード 付録B　モバイル版 Orbit Assault B.1　jQuery Mobileによるモバイル対応 B.1.1　タッチによる砲台操作 B.1.2　画面回転の対応 B.1.3　ページレイアウト B.2　PhoneGapによるネイティブアプリ化 索引

【全般】

　掟破りの楽しさ。いやこの記事を書く時点では５章までしか読んでいないんだけど。

　なんといっても、いきなり最適化の話が出てくるのが掟破り。プログラミングの教科書なら、普通は「まずチャンと動くようにしろ、最適化はその後だ」と来る筈なんだがｗ

　というのも、出てくる例の多くが、リアルタイムの応答が必要なモノが多く、実効速度に厳しい制限があるモノが多いため。そんなわけで、プログラミングの本としては、JavaScript が云々というより、リアルタイム系のゲームを作る際のコツやテクニックの紹介がやたら楽しいし、他のプログラム言語にも応用できそうな話が多い。

　ということで、次の記事に続きます。

【関連記事】

• Raffaele Cecco「JavaScriptグラフィックス ゲーム・スマートフォン・ウェブで使う最新テクニック」オライリージャパン 相川愛三訳 2
• David Flanagan「JavaScript 第六版」オライリージャパン 村上列訳
• Eric.A.Meyer「CSS完全ガイド第2版 CSS2&CSS2.1対応」オライリージャパン 株式会社クイープ訳
• Shelley Powers「初めてのJavaScript 第２版」オライリージャパン 武舎広幸・武舎るみ訳
• John Whitington「PDF構造解説」オライリージャパン 村上雅章訳
• Andy Oram, Greg Wilson編 Brian Kerninghan, Jon Bentry, まつもとゆきひろ他著「ビューティフルコード」オライリージャパン 久野貞子,久野靖訳 1
• 書評一覧：科学/技術