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

 

この本の概要

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の構造

 

サポートされている機能