HTML 5の表現力 楽しいアプリ制作の会 TWorks 蜜葉

HTML 5の機能追加① HTML 5マークアップ の追加/廃止 Video/Audio対応 Canvasタグ Formの強化 アプリケーションキャッシュ クロスドキュメントメッセージング

HTML 5の機能追加② Drag&Drop API Geolocation API Web Workers Web Storage Web Database Web Sockets 沢山あります。時間の都合で全部の説明は出来ません。今回は「表現力」ということで、それに関係するタグを中心に説明します。

Canvasタグとは ブラウザ上に、図や画像を描画するために策定された仕様 従来はFlashやJavaのプラグインで実現していましたが、Canvasタグにより、JavaScriptのみで描画が可能に 沢山あります。時間の都合で全部の説明は出来ません。今回は「表現力」ということで、それに関係するタグを中心に説明します。

Canvasタグ① こんな感じで書きます <canvas id="canvas1" width="300" height="300"> 　　Canvasに対応していないブラウザです。 </canvas>

Canvasタグ② window.onload = function() { 　　// img要素を作成 　　var image = document.createElement("img"); 　　// 画像の読み込みが完了したら 　　image.onload = function() { 　　　　var canvas = document.getElementById("canvas1"); 　　　　// 描画コンテキストを取得 　　　　var ctx = canvas.getContext("2d"); 　　　　// 画像を描画 　　　　ctx.drawImage(image, 0, 0); 　　　　// 画像を半透明にし、画像を反転させて描画 　　　　ctx.globalAlpha = .1; 　　　　ctx.transform(1, 0, 0, -1, 0, image.height * 2); 　　　　ctx.drawImage(image, 0, 0); 　　}; 　　// 画像のURLをセットし、読み込み開始 　　image.src = "./images/hogehoge.gif"; }

2dコンテキスト メソッド パスAPI 矩形 色・スタイル 状態 変形 ピクセル操作 描画 opaqueオブジェクト テキスト 沢山あります。時間の都合で全部の説明は出来ません。今回は「表現力」ということで、それに関係するタグを中心に説明します。

メソッド（パスAPI） arc() 円弧 arcTo() サブパスを繋ぐ円弧 beginPath() コンテキストのサブパスを０に bezierCurveTo() ベジェ曲線 clip() 描画領域のクリッピング closePath() パスを閉じる fill() 塗りつぶし isPointInPath() 座標がサブパス内にあるか判定 lineTo() 線分描画 moveTo() サブパスの開始点を指定 quadraticCurveTo() 二次曲線 rect() 四角形 stroke() サブパスに沿って線を描画 沢山あります。時間の都合で全部の説明は出来ません。今回は「表現力」ということで、それに関係するタグを中心に説明します。

メソッド（矩形） clearRect() 矩形をクリア fillRect() 矩形の塗りつぶし strokeRect() 矩形の輪郭を描画 沢山あります。時間の都合で全部の説明は出来ません。今回は「表現力」ということで、それに関係するタグを中心に説明します。

メソッド（色・スタイル） createLinearGradient() 線形グラデーション createPattern() 描画パターンの指定 createRadialGradient() 円形グラデーション 沢山あります。時間の都合で全部の説明は出来ません。今回は「表現力」ということで、それに関係するタグを中心に説明します。

メソッド（状態） restore() スタックから描画状態を取り出し save() 現在の描画状態をスタックへ追加 沢山あります。時間の都合で全部の説明は出来ません。今回は「表現力」ということで、それに関係するタグを中心に説明します。

メソッド（変形） rotate() 回転 scale() 拡大縮小 setTransform() translate() 沢山あります。時間の都合で全部の説明は出来ません。今回は「表現力」ということで、それに関係するタグを中心に説明します。

メソッド（ピクセル操作） getImageData() 矩形のピクセルをイメージとして取得 putImageData() イメージをピクセル描画 沢山あります。時間の都合で全部の説明は出来ません。今回は「表現力」ということで、それに関係するタグを中心に説明します。

メソッド（描画） drawImage() 画像を描画 沢山あります。時間の都合で全部の説明は出来ません。今回は「表現力」ということで、それに関係するタグを中心に説明します。

メソッド（opaqueオブジェクト） addColorStop() グラデーションの終点を指定 沢山あります。時間の都合で全部の説明は出来ません。今回は「表現力」ということで、それに関係するタグを中心に説明します。

メソッド（テキスト） fillText() テキストの描画 strokeText() measureText() 文字列の描画幅を取得 沢山あります。時間の都合で全部の説明は出来ません。今回は「表現力」ということで、それに関係するタグを中心に説明します。

Canvas/Videoの実践 ここからは蜜葉たんが、ブロック崩しを 作ります。もちろんCanvasを使います。 このブロック崩しでは Canvas#rect() Canvas#circle() Canvas#drawImage() Video#play() を使います。

終わりに Video#play()とjQuery#play()がかぶっています。そのため$(“#sampleVideo”).play() と書くとjQuery#play() が実行されてしまい、エラーになりました。 今日紹介した内容は、HTML 5のほんの一部分です。 いろいろサンプルが公開されています。いろいろな可能性を見つけてください。 HTML 5は現在ドラフトで、機能面はまだまだ変わって行くかもしれません。勧告は2010年の予定です。

おまけ W3C HTML5 http://dev.w3.org/html5/spec/Overview.html HTML5.JP http://www.html5.jp/ Chrome Experiments http://www.chromeexperiments.com/

ご清聴、ありがとうございました。