JavaScriptグラフィックス

―ゲーム・スマートフォン・ウェブで使う最新テクニック

[cover photo]
TOPICS
Web , HTML/CSS , JavaScript
発行年月日
PRINT LENGTH
288
ISBN
978-4-87311-528-3
原書
Supercharged JavaScript Graphics
FORMAT
PDF
Ebook
3,080円
Ebookを購入する

Webテクノロジーが進化したことによりJavaScriptグラフィックスを使ったリッチなWebアプリケーション開発が可能になりました。本書ではJavaScriptによる最新のグラフィックスプログラミングについて解説します。ゲームやDHTMLエフェクト、HTML5 Canvasなどの実例を通して、高性能なJavaScriptグラフィックスの実装方法を学びます。グラフィックスやアニメーションだけでなく、WebSocketを用いた通信、Google Chart Tools、スマートフォン向けのトピックまで幅広く扱います。日本語版では、パソコン向けのWebゲームをjQuery Mobileでモバイル向けに改造し、PhoneGapでネイティブアプリへ変換する方法について加筆しました。

●本書で扱うアニメーションやゲーム(サンプルコードは「関連ファイル」タブページからダウンロード可)。

翻訳者の相川氏のブログには、本書の追加情報や関連する技術情報が掲載されています。

関連ファイル

目次

訳者まえがき
まえがき

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によるネイティブアプリ化

索引