Webテクノロジーが進化したことによりJavaScriptグラフィックスを使ったリッチなWebアプリケーション開発が可能になりました。本書ではJavaScriptによる最新のグラフィックスプログラミングについて解説します。ゲームやDHTMLエフェクト、HTML5 Canvasなどの実例を通して、高性能なJavaScriptグラフィックスの実装方法を学びます。グラフィックスやアニメーションだけでなく、WebSocketを用いた通信、Google Chart Tools、スマートフォン向けのトピックまで幅広く扱います。日本語版では、パソコン向けのWebゲームをjQuery Mobileでモバイル向けに改造し、PhoneGapでネイティブアプリへ変換する方法について加筆しました。
●本書で扱うアニメーションやゲーム(サンプルコードは「関連ファイル」タブページからダウンロード可)。
翻訳者の相川氏のブログには、本書の追加情報や関連する技術情報が掲載されています。
JavaScriptグラフィックス
―ゲーム・スマートフォン・ウェブで使う最新テクニック
Raffaele Cecco 著、相川 愛三 訳
- TOPICS
- Web , HTML/CSS , JavaScript
- 発行年月日
- 2012年03月
- PRINT LENGTH
- 288
- ISBN
- 978-4-87311-528-3
- 原書
- Supercharged JavaScript Graphics
- FORMAT
関連ファイル
目次
訳者まえがき まえがき 1章 コードの再利用と最適化 1.1 高速化 1.2 何をいつ最適化するか 1.3 自家製コードプロファイリング 1.4 JavaScriptの最適化 1.4.1 ルックアップテーブル 1.4.2 ビット演算、整数、2進数 1.5 jQueryとDOM操作の最適化 1.5.1 CSSスタイル変更の最適化 1.5.2 DOM挿入の最適化 1.6 その他の情報 2章 DHTML 2.1 DHTMLスプライトの作成 2.1.1 アニメーション 2.1.2 カプセル化と描画の抽象化(詳細隠蔽) 2.1.3 DOMの挿入と削除を最小化 2.1.4 スプライトのコード 2.1.5 簡単な Spriteアプリ 2.1.6 より動きのあるスプライト 2.2 jQueryプラグインに変換 2.3 タイマー、スピード、フレームレート 2.3.1 setIntervalとsetTimeoutの使用 2.3.2 タイマーの精度 2.3.3 一定スピードの実現 2.3.4 Internet Explorer 6の背景画像キャッシュ 3章 スクロール 3.1 CSSだけを使ったスクロール効果 3.2 JavaScriptを使ったスクロール 3.2.1 背景画像のスクロール 3.2.2 タイルベース画像のスクロール 4章 高度な UI 4.1 HTML5のフォーム 4.2 JavaScriptのUIライブラリ 4.2.1 jQueryUIを用いた Webインタフェース強化 4.2.2 ExtJSを用いた強力なUI 4.3 UI要素の自作 4.3.1 3D回転木馬の作成 5章 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 ひとつにまとめる 6章 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 WebSocketのサポートとセキュリティ 6.11.3 チャットアプリ 7章 ベクトル計算 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 改良・改造のアイデア 8章 Google Chart Tools 8.1 制限事項 8.2 グラフ一覧 8.3 画像グラフ 8.3.1 データ形式とグラフ分解能 8.3.2 動的なデータの使用 8.3.3 まとめ 8.4 インタラクティブなグラフ 8.4.1 インタラクティブなグラフのイベント 9章 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 AndroidSDKのインストール 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によるネイティブアプリ化 索引