HTML5インタラクティブ表現ガイド

～HTML5、CSS3、Canvas、CreateJS、JavaScript～

［表紙］HTML5インタラクティブ表現ガイド　～HTML5，CSS3，Canvas，CreateJS，JavaScript～

紙版発売
電子版発売

B5変形判／256ページ

定価2,838円（本体2,580円＋税10%）

ISBN 978-4-7741-5766-5

ただいま弊社在庫はございません。

電子版

→学校・法人一括購入ご検討の皆様へ

書籍の概要

この本の概要

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

こんな方におすすめ

  • Webデザイナー

この書籍に関連する記事があります！

リッチでインタラクティブな表現も，Web標準の技術で実現できる
ちょっとわかりにくいかもしれませんが，まずは図1をご覧ください。マウスの動きに合わせて円のグラフィックが次々に現れては消え，また次々に現れます。

目次

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