技術評論社サイトのロゴ

HTML5インタラクティブ表現ガイド ～HTML5、CSS3、Canvas、CreateJS、JavaScript⁠～

「HTML5インタラクティブ表現ガイド」のカバー画像
著者
池田泰延（いけだやすのぶ） 　著
定価
2,838円（本体2,580円＋税10%）
発売日
2013.6.8［在庫なし］ 2013.6.21
判型
B5変形
頁数
256ページ
ISBN
978-4-7741-5766-5 978-4-7741-5857-0

サポート情報

概要

HTML5の大きな魅力はリッチでインタラクティブな表現力です。CSS3、JavaScript、さらにはCanvasといった技術を組み合わせることで、従来はFlashでしかできなかったような多彩な表現も可能になります。本書では、段階をふみながら、より高度な表現方法までをサンプルとともに紹介します。とくにCanvasについては、FlashライクなJavaScriptライブラリ群である「CreateJS」の使用法をくわしく解説します。ありきたりのHTML5表現に満足できない方は、ぜひ本書をご活用ください。

こんな方にオススメ

  • Webデザイナー

目次

Chapter1　HTML5

1-1　HTML5の基礎

  • HTML5の宣言
  • 新しいマークアップ要素

1-2　マルチメディア系の新機能

  • videoタグ
  • audioタグ
  • SVGの表示

1-3　アプケーション向けの新機能

Chapter2　CSS3

2-1　CSS3の新要素

  • 透明度
  • 色の指定方法
    • rbga()
    • hsla()
  • 角丸
  • グラデーション
  • 2D変換行列
    • 移動
    • 回転
    • スケール
  • 3D変換行列
  • ウェブフォント
  • CSS3アニメーション
    • CSS Transition
    • CSS Animation

2-2　トランジション効果

  • 2D
    • ディゾルブ効果
    • スライド
    • アイリス
  • 3D
    • フリップ（3D）
    • キューブ（3D）
  • CSS3とJavaScriptによるエフェクト制御
    • JavaScriptによるスライド

2-3　ボタンのアニメーション

  • CSS3によるボタンのデザイン
  • ボタンのロールオーバー／ダウン
  • ボタンのアニメーション演出（1）
  • ボタンのアニメーション演出（2）

2-4　スクロールバーのカスタマイズ

  • CSS3によるスクロールバーのカスタマイズ

Chapter3　JavaScript／jQuery

3-1　JavaScriptのクリエイティブ表現の基礎

  • HTML5とJavaScript
    • JavaScriptによる要素の制御
    • setInterval()メソッドによるアニメーション
    • setTimeout()メソッドによるアニメーション
    • requestAnimationFrame()メソッドによるアニメーション
    • requestAnimationFrame()メソッドのクロスブラウザ化
  • jQuery
    • jQueryのセレクタの使い方
    • readyイベント
    • 任意のイベントの設定
    • jQueryのアニメーションの使い方
    • アニメーションの後に関数を実行する方法
    • アニメーションの停止方法

3-2　サウンド制御

  • audioタグによる効果音設定

3-3　 スクロールバーのフルカスタマイズ

  • スクロールバーの基本的な実装
  • スクロールバーへのイージングの適用

3-4　テキストエフェクト

  • 落下しながら現れるテキスト
  • スケーリングしながら現れるテキスト
  • ランダムで現れるテキスト

3-5　移動アニメーションによる画面遷移

  • 移動アニメーションによる画面遷移
  • グラフィックのスライドに立体感をもたせる
  • CSS3によるアニメーション
  • transformプロパティーを使う

3-6　 Three.JSによる3D表現

  • Three.jsの基礎知識
    • Three.jsとは
    • Three.jsの入手方法
    • Three.jsの基本
    • Three.jsの構造
    • ジオメトリ
    • マテリアル
    • ライト
    • オブジェクトのプロパティー操作
    • オブジェクトのアニメーション
    • カメラ座標操作
  • Three.jsの応用サンプル
    • 羽ばたく蝶
    • ジニーエフェクト

Chapter4　Canvas／CreateJS

4-1　Canvas／CreateJSの基礎

  • Canvasの基礎
    • canvasタグの使い方
    • 図形の描画
  • CreateJSの基礎
    • CreateJSとは
    • EaselJSの利用
    • EaselJSを始める
    • EaselJSのさまざまな図形
    • EaselJSでテキストを表示する
    • EaselJSで画像を表示する
    • EaselJSで動きを作成する
    • EaselJSでマウスインタラクションを実装する
    • EaselJSでフィルター効果
    • 表示オブジェクトのネスト
    • トゥイーン効果

4-2　グラフの表現

  • 棒グラフ
  • 棒グラフのアニメーション
  • 円グラフ

4-3　スプライトシート

  • EaselJSでのスプライトシートの実装

4-4　プリロード

  • PreloadJSによるプリロード

4-5　サウンド制御

  • SoundJSによる効果音設定
  • SoundJSのFlashプラグイン

4-6　EaselJSによるグラフィック表現

  • 重なりあう円
  • マウス座標から現れる円
  • スライスエフェクト
  • 流体パーティクル

Chapter5　ツールによるHTML5コンテンツの制作

5-1　Google Swiffy

  • 使い方
  • HTMLの構造
  • サポートされている機能

5-2　Flash Professional Toolkit for CreateJS

  • 使い方
  • HTMLの構造
  • サポートされている機能

プロフィール

池田泰延（いけだやすのぶ）

筑波大学第三学群工学システム学類卒。株式会社ICS代表取締役。FlashやHTML5を用いたプロモーションサイトの制作や、ゲーム、AIRアプリの開発などを主に手がける。Webのインタラクション表現に関する最新技術を研究し、ブログ「ClockMaker」やセミナー・勉強会で積極的に情報共有に取り組んでいる。筑波大学非常勤講師も務める。

主な著書：
『FlashではじめるAndroid アプリ開発入門』（共著、技術評論社）
『ActionScript3.0開発のためのFlashDevelop完全ガイド』（共著、技術評論社）
『Flash 3Dコンテンツ制作のためのPapervision3D入門』（エクスナレッジ）
『Stage3Dプログラミング　～GPUを使ったFlash 3Dコンテンツ制作～』（ワークスコーポレーション）

URL：http://clockmaker.jp/blog/
Twitter ID：clockmaker