PDC Japan 2010、ご来場誠に有難うございました – HTML5 with Internet Explorer 9 フォローアップ
皆様、こんにちは！
先週のPDC Japan 2010、お忙しいところご来場有難うございました。私のセッションにも多くの方にご来場いただき、誠に感謝しております。
早速セッション内容の解説をしていきたいと思います。
1．The Beauty of the Web
https://www.beautyoftheweb.com/
自己紹介に続いてｗ、最初にこちらのデモサイトから、幾つかデモを見て戴きました。
・iMDB Videoタグの端的な使い方のご紹介として
・ The Shodo Video/Audio/Canvas これらのタグの使用例として。デザインのコンセプトについて。
・ eBay Deals Drag & Drop API の実装例として
IE9のBetaのリリース時に合わせて作られたショーケースです。まだご覧戴いていない方は是非ご覧ください。
2. セッション内容
持ち帰って戴きたい事としては、下記の3つでした。纏めも同様です。
・HTML5 は Web の未来
我々もこれに投資しており、W3Cにも多くのリソースを投入して、製品開発に即時反映しようとしていること、そしてIE9ではここが非常に強く意識されていること
・IE9 とVisual Studio / Expression Web で快適にHTML5 のプログラミングが可能
Visual Studio 及び Expression Web そしてそれらのアドインを使うことにより、新しいタグやマークアップの記述、そしてJavascriptの実装が非常にやり易いこと等
・HTML5 を適材適所で推進することは極めて重要
HTML5だけでは現在のところ実装が難しいところも多々あります。そこで、Web ブラウザーのプラグインでしか実現できないところと、現状の HTML5 による実装で十分なところをよく理解して、アーキテクトが適用要件を見極めて、実装技術を決定すべきであるということ
Silverlightでなければできないこと、例えばプレミアムなメディア体験(著作権保護を含む)、業務アプリケーションにおけるディレクトリサービスとの連携やローカル(COM資産等)との連携、は多々あります。
この点については、是非今週末のこちらのイベントThe Future of Silverlight に、徹夜で参加してくださいｗ
3．HTML5 とは
WHATWG 及び W3C が HTML4 に代わる 次世代の HTML として策定を進めている HTML 仕様です。
現状普及しているHTML4.01 の現状の問題点としては、次の2点があります。
・HTML タグで構造付けされた HTML 文書の作成と公開が目的
・Web アプリケーションを作成するには機能不足
そこで、HTML5 の特長としては、
・HTML 文書を作成する機能自体の改良を実施
これはセマンティックス要素等、文章構造をロジカルにし、可読性を高め、SEO対策等にも利用可能なようにするということです。具体的には、Article, Section, Nav, Aside, Hgroup, Header, Footer, Figure, Figcaption, Address 等々です。
・Web アプリケーションを開発するための様々な仕様を追加
これは、下記でご紹介するHTML5の新タグや新しく追加されたAPIのことを示します。
以上2つということになります。 これらにより、FlashやSilverlight等のブラウザープラグインで実現できる機能のうちの一部を標準の HTML や JavaScript でシンプルに実現できる、ということになります。
そして、 このWeb アプリケーションプラットフォームとしてのHTML5ということで、広義のHTML5？という場機部分と、狭義のHTML5という部分について、提示しています。この図がそうですね。広義のHTML5の中には、Web SocketsやWeb Storage等々色々ありますが、このセッションでは主に前者(狭義のHTML5の)W3C HTML5と書いてあるところをメインに、構文要素、Video/Audio、Canvas、フォーム要素、リッチテキストAPI、ドラッグ&ドロップAPIというとことを中心に、ご紹介しました。
4．HTML5 と Internet Explorer 9 との関係
HTML5への準拠度は非常に高いのと、それ以外に、CSS3、SVG、ECMAScript 5th Edition、等のWeb標準技術への準拠度も高いということになります。今回紹介したのもこれらになります。
5．HTML5 による Web アプリケーション構築ツール
・Visual Studio 2010 Web Developer Express Edition
・Visual Studio 2010 Professional Edition 等以上
Express Edition は無償版ながらほぼ全ての開発が可能です。
HTML5 / JavaScript のインテリセンス (入力補完機能) があります。下記を使ってください。
HTML 5 Intellisense for Visual Studio 2010 and 2008 SVG Intellisense schema for Visual Studio 2010 and 2008
Expression Web 4 試用版 HTML5 Schema Configuration Add-In for Expression Web
・F12
6．HTML5 によるリッチな UI の実装方法
・HTML5構文要素
ここでご紹介したのは、セマンティックス要素が重視されるようになったということ、そのため、ロジカルな文書構造にするためのタグがいくつか追加されたこと、その結果、SEO対策等デモ多くのメリットを享受できるようになること、でした。
HTML5 の新しいマークアップ
<body>
<h1>body 要素の見出し</h1>
<section>
<h1>section 要素の見出し</h1>
<blockquote>
<h1>blockquote の見出し</h1>
<section>
<h1>引用された内容が持つセクション</h1>
</section>
</blockquote>
</section>
</body>
・Video/Audio
Videoタグに関しては、下記のような特長があります。
・MPEG-4 / H.264 video をサポート
・60 fps までのフレームレートに対応
・Windows 7 では、ハードウェア Video デコーダーに対応
・再生コントロールをデフォルトで実装
・スクリプトを使って DOM 経由で操作可能
<video id=“myVideo” src=“video.mp4” autoplay controls> </video>
タグの属性
src - 再生するファイルの指定
Autoplay - 準備出来次第再生する
controls - コントロールを表示する
preload - ページ読み込み時に再生ファイルを読み出す
loop - 繰り返し再生
height & width - 再生するプレーヤーの高さと幅
これを実装するとこのようになります。
Video のデモのソース
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>Video Demo</title>
</head>
<body>
<h1>Video デモ</h1>
<video id="vd1" width="800" height="480"
src="https://localhost:63147/WP7 Feature Video.mp4"
autoplay controls loop
</video>
</body>
</html>
実行結果はこんな感じです。controls を追加しているので自動でStart、Pause、等のボタンが表示されています。
Audioタグに関しても、下記のような特長があります。
・MP3 と
Advanced Audio Coding ( AAC )
・再生コントロールをデフォルトで実装
・スクリプトを使って DOM 経由で操作可能
<audio src="audio.mp3" id="audioTag" autoplay controls></audio>
タグの属性
src – 再生するファイルの指定
autoplay – 準備出来次第、再生する
controls – コントロールを表示する
preload – ページ ロード時に再生ファイルを読み出す
Audio のデモは、TestDrive にあるこちらをご参照ください。
https://ie.microsoft.com/testdrive/HTML5/HTML5AudioXMLPlaylist/Default.html
・Canvas
Canvasとは、Javascript で 2D の図形を描くことができるブロック要素のことです。Canvas 要素は、図などのフォーマットではなく、グラフィックスを描画する領域を示す指定した範囲内で、図形などの線画、画像などの 2D Graphics を自由に描画できます。すなわちグラフィックスの描画が可能な領域を示します。
実装方法としては、下記の通りです。まずはCanvasを定義します。
<canvas id=“mycanvas” width=“100” height=“200”> </canvas>
次に、JavaScript を用いてキャンバスに描画するため、2d 描画コンテキストを取得します。
var canvas = document.getElementById(“mycanvas”);
var context = canvas.getContext(“2d”);
このあたりまでは、必ずおまじないとしてｗ、毎回書くことになりますね。
Canvas1のデモのソースは、こちらです。ここでは写真（Imageファイル）をCanvasの中にロードして表示します。
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>Canvas Demo 1</title>
</head>
<body>
<h1>Canvas サンプル１</h1>
<canvas id="canvas1" width="760" height="480">
</canvas>
</body>
</html>
<script type="text/javascript">
//Canvas要素のDOMオブジェクトを取得
var canvas = document.getElementById("canvas1");
//描画コンテキストを取得
var ctx = canvas.getContext("2d");
//イメージ要素を生成
var image = new Image();
//画像の読み込みが終わり次第、Canvasに書き出す
image.onload = function () {
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
};
//画像のロードを開始する
image.src = "https://localhost:63147/911_turbo.jpg";
</script>
実行結果はこんなイメージです。Windows 7の追加のテーマの中にある壁紙を使っています。
Canvasで四角形を描画する
次に、四角形を描画します。ソースコードは下記の通りです。
Canvasで四角形を描画
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>Canvas Demo 2</title>
</head>
<body>
<h1>Canvas サンプル 2</h1>
<canvas id="canvas1" width="300" height="400">
</canvas>
</body>
</html>
<script type="text/javascript">
onload = function () {
draw();
};
function draw() {
/* canvas要素のDOMオブジェクト取得*/
var canvas = document.getElementById("canvas1");
/* canvas要素の存在チェックとCanvas未対応ブラウザの対処 */
if (!canvas || !canvas.getContext) {
return false
}
/* 2D描画コンテキストの取得 */
var ctx = canvas.getContext("2d");
/* 四角を描く */
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(120, 20);
ctx.lineTo(120, 120);
ctx.lineTo(20, 120);
ctx.closePath();
ctx.stroke();
}
</script>
これを実行すると、このような形が描画されます。
このCanvasの描画コンテキストには、他にも数十のメソッドがあり、これを使って自由自在に図形の描画ができますので、ぜひ色々とお試しください。
Canvas でアニメーション
次にCanvas でアニメーションを行う方法です。
Canvasは、ベジェ曲線等も描画できますし、その図形をアニメーションとして動かすこともできます。
2 種類のアニメーション方法があります。
1）Frame-based
Frame-based: オブジェクトは、フレームのアップデート毎に同じ数だけ動きますので、動作させるマシンに依存しますが、実装がシンプルとなります。
2）Time-based
Time-based: オブジェクトは、時間毎に同じピクセル数だけ動きますので、マシン依存もなくゲーム等に向くのではないか？と思われます。
それでは、実際にソースコードとその実行例をご紹介しましょう。
CanvasAnimationのソース
<!DOCTYPE html>
<!--
// THIS CODE AND INFORMATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF
// ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO
// THE IMPLIED WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A
// PARTICULAR PURPOSE.
//
// Copyright (c) Microsoft Corporation. All rights reserved
-->
<html xmlns="https://www.w3.org/1999/xhtml">
<meta http-equiv="X-UA-Compatible" content="IE=9" >
<head>
<script language="javascript" type="text/javascript">
var myCanvas, ctx;
var x1 = 10, y1 = 10,
x2 = 200, y2 = 10,
distance = 5, speed = 250;
var img;
var imgWidth;
var imgHeight;
var lastFrameTime = 0;
window.addEventListener("load", Main, false);
function Main() {
myCanvas = document.getElementById("myCanvas");
if (myCanvas.getContext) {
ctx = myCanvas.getContext("2d");
img = new Image();
img.addEventListener("load", function () {
imgWidth = 150;
imgHeight = 150;
lastFrameTime = new Date().getTime();
setInterval(draw, 16);
}, false);
img.src = "img.jpg";
}
}
function draw() {
drawFrameBased();
drawTimeBased();
}
function drawFrameBased() {
y1 += distance;
// make image show up again when it falls of the page
if (y1 > (ctx.canvas.height - imgHeight)) {
y1 = 10;
}
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.fillText("Frame Based Animation", x1, 10);
ctx.drawImage(img, x1, y1, imgWidth, imgHeight);
}
function drawTimeBased() {
// time since last frame
var now = new Date().getTime();
dt = (now - lastFrameTime) / 1000;
lastFrameTime = now;
y2 += speed * dt;
// make image show up again when it falls of the page
if (y2 > (ctx.canvas.height - imgHeight)) {
y2 = 10;
}
ctx.clearRect(x2, 0, ctx.canvas.width - (x1 + imgWidth), ctx.canvas.height);
ctx.fillText("Time Based Animation", x2, 10);
ctx.drawImage(img, x2, y2, imgWidth, imgHeight);
}
</script>
</head>
<body>
<canvas id="myCanvas" width="500" height="500">
Canvas is not supported.
</canvas>
</body>
</html>
FrameBased、TimeBased、それぞれの実装については当該メソッドをご覧ください。いずれもCanvasの中に、JPGイメージをロードしています。また図をクリアしてタイトルを入れて図を再描画するという処理と、図が一番下まで行ったら上に戻るという処理は、共通です。
これの実行イメージはこちらになります。
・SVG
次に、SVGについてご説明しました。
SVGはScalable Vector Graphics (SVG)の略です。Canvasで描画するのとどう違うのか？といえば、誤解を恐れずに言えばPaintツールとDrawツールのようなものです。Paintツールでは、オブジェクト上に新しいオブジェクトを書くと上書きされてしまいますが、Drawツールではそのようなことはありません。独立したものとして扱われます。用途としても、拡大・縮小に耐えられるような画像をWebサイトで使いたい場合には、SVGを選ぶことが多いでしょう。
特徴としては、中身は XML で JavaScript 等から簡単にアクセス可能です。ポピュラーなグラフィックスソフト/アプリケーションでサポートしています。また、 Inline HTML、Inline XHTML に対応 しています。アセットとして.aiファイルや.psdファイル、あるいはVisio等で作成された図等がある場合には、これを直接SVGのタグから、読み込むことができます。
ご紹介したデモは、こちらです。国連の組織図で、TestDriveにあるものです。ぜひご覧ください。
http://ie.microsoft.com/testdrive/Graphics/OrganizationChart/Default.xhtml
またデモのソースはこちらです。
SVGデモのソース
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>SVG Demo</title>
</head>
<body>
<h1>SVG サンプル</h1>
<svg width="400" height="200" xmlns="https://www.w3.org/2000/svg">
<rect fill="red" x="20" y="20" width="400" height="300"/>
<rect fill="blue" x="60" y="60" width="400" height="300"/>
</svg>
</body>
</html>
これを実行するとこのようなイメージになります。右クリックすると、赤い四角形や青い四角形が保存できること、形式が *.svgになっていることがお分かり頂けるでしょう。
またここで、F12（開発ツール） をご紹介しています。F12を押してツールを起動し、下記のように要素をBlueからYellowにするなど直接編集することが可能です。色々と試してみてください。
・CSS3
続いて、CSS3対応等CSSサポートの進化については、下記の通りです。セッションでは、この中からMedia QueriesとBorder-Radius対応についてご紹介しました。
・完全な CSS 2.1 のサポート
・Selectors
少ないスクリプトでシンプルなマークアップを可能にします。
・Namespaces
XHTML での名前空間を Style elements で利用できます。
デバイスの解像度により、レイアウトを切り替えることができます。このリンクにあるTestDriveのデモをご紹介しました。解像度を変えて実際にお試しください。
ソースとしては参考となるのがこちらです。通常のPC、ネットブック、モバイル、とCSSを用意しておけば、特別に携帯用のサービス等を用意せずに自動対応することができます。特にスマートフォン対応には重要ですよね。
参考ソース
//メディアのプロパティに応じて、スタイルを自動選択
<link href="mobile.css "rel="stylesheet" media="screen and (max-width:480px)"
type="text/css"/>
<link href="netbook.css "rel="stylesheet" media="screen and (min-width:481px) and (max-width:1024px)" type="text/css"/>
<link href="laptop.css" rel="stylesheet" media="screen and (min-width:1025px)"
type= "text/css"/>
・Colors
rgba () や hsla () でのアルファ指定が可能です。また Opacity Property による透明度のコントロールが可能です。
・ 背景とボーダー
Border-radius プロパティによる角丸指定が可能です。またエレメント毎に複数背景指定が可能です。
まずこちらはこのリンクにあるTestDriveのデモをご覧ください。
従来このような処理をするには、四角形の上に、Gif等で○を作って重ねたりして作っていたわけです。このデモのような複雑な形にするには本当に多くの加工を必要としていました。それを、Border-Radiusのプロパティを利用することで、これだけ柔軟に対応ができるようになったこと、注目です。Web開発における生産性がさらに上がってくることでしょう。
・ECMAScript 5th Edition
続いて、ECMAScript 5th Editionのご紹介をしました。特徴としては、下記のようなもので、これを新しいIE9のJavaScriptエンジンであるChakraにより、高速に実行することが可能となりました。
IE9は、最新の ECMAScript (ECMA-262) Standard をサポートしています。
また、新しい配列メソッド（indexOf, lastIndexOf, forEach, every等)が追加され、拡張されたオブジェクトモデル(defineProperty,create, getPrototypeOf等) が追加されました。
これらに加えて、Computation メソッドの追加(string.Trim, toISOString, data.parse, date.now, bind
等)がなされています。その他にも、addEventListener, GetElementByClassName 等が追加になっています。
セッションでご紹介したサンプルは、このうちの配列メソッド（forEach) を使った簡単なものです。
ES5サンプルソース
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>EcmaScript 5th Edition Demo</title>
</head>
<body>
<h1>
<script lang="javascript" type="text/javascript">
var myArray = ["LesPaul Standard", "LesPaul Custom", "Gibson SG"];
var myFunc = function (value, index, myArray) {
document.write("Hello " + value + "<br/>");
}
var result = myArray.forEach(myFunc);
</script>
</h1>
</body>
</html>
実行結果は下記の通りです。
ただこれだけの処理ですので、forEachメソッドを使うのと、普通にfor文を使ってWriteするのとどこが違うのか、ということになりますが、for文を宣言するとカウンタなどの変数を含めそれだけでメモリを確保します。このサンプル程度のものならあまり影響はありませんが、大きな画像の取り扱いや計算処理になると、その積み重ねが効いてきます。その意味で、セッションでご紹介したこのデモサイト（BeautyOfTheWebにある 中国国立博物館 )は、Canvas、Video、Audio、等を駆使しつつ、これら新しい配列メソッドやComputation メソッドをフルに活用し、非常に高速かつスムースに実行されるものです。
・フォーム要素
ここからは、またHTML5の方に戻って、フォーム要素の解説です。
HTML5におけるフォーム要素とは、入力フォームのように良くWeb上で使われるフォーマットについてのAPIです。但し、このフォーム要素は、現時点では、ブラウザーの実装に依存しており、未だこれが動かないブラウザーもいくつかあります。Internet Explorer 9 も、現時点のBeta では、未実装となっています。製品版には大変期待したいところです。
一応どのようなものかというと、下記の通りです。
・input 要素に新たに追加されたタイプ
search, tel, url, email, datetime, date, month, week, time, datetime-local, numer, range, 等（従来からのフォーム要素では checkbox, file, submit 等も改修）
・output 要素、keygen 要素、progress 要素、等の追加
・入力された値のバリデーション (妥当性検査)が可能
設定可能な属性は、requied, maxLength, min, max, step 等が設定可能
・オートコンプリート機能
下記のように定義しておくと、最初の2-3文字をテキストボックスに入力すると、リストにある候補が補完される
ソースコード例
マイギターリスト : <input type=“text” name=“guitars” required list=“guitars”>
<datalist id=“guitars”>
<option value=“Les Paul Standard 59” label=“レスポールスタンダード59年製”＞
<option value=“Les Paul Custom 57” label=“レスポールスタンダード57年製”＞
<option value=“Les Paul Standard 60” label=“レスポールスタンダード60年製”＞
</datalist>
・リッチテキストAPI
続いて、リッチテキスト編集用 API です。
これは、通常、編集不能な要素 (div等) を編集可能にするAPIで、古くから IE に実装されていたものが、他社のブラウザーにも採用され、HTML5 で標準化されるに至ったものです。
contentEditable 属性と designMode プロパティがあり、前者は要素に、後者は文書全体に適用させることができます。
execCommand() APIを使って、文字列を選択し呼び出し、編集内容をリッチテキストとして 取り扱ったりすることが可能です。多くの利用可能なコマンドあり、太字や斜体(文字のスタイル変更)、ハイパーリンク挿入も可能です。
また編集結果の取得には、innerHTML / textContet プロパティ等 を利用できます。
実際にデモでご紹介したシンプルなソースはこちらになります。contentEditable=”true”がないと編集不能なDiv要素が、編集可能になっていることが分かります。このDivは次のドラッグ&ドロップAPIのところでもドロップ可能エリアとして使います。
サンプルのソース
…
<h2>RichText 編集可能ドロップ対象エリア</h2>
<div id="target" contentEditable="true"
style="width:1000px;
height:400px;
border:2px solid blue;">
</div>
…
・ ドラッグ&ドロップAPI
さて続いてドラッグ&ドロップAPIです。この解説や実装方法をご紹介する前に、Drag & Drop API の実装例として、ショーケースとして、もう一度 eBay Deals をご覧ください。
このような処理をするには、 ドラッグ&ドロップAPIを利用する必要があります。
このAPIの特長と注意点は下記の通りです。
他のアプリケーションとの連携が可能 テキスト エディター、Windows Explorer 他と連携が可能
です。このとき、ドロップ対象要素はデフォルトではドラッグ & ドロップ不可であることにご注意ください。ドロップを受け付ける場合にはデフォルト操作をキャンセルする必要があります (event. PreventDefault () )。
ドロップ対象要素で発生するイベントの適切な処理
また、データのやり取りには DataTransfer オブジェクトを利用します。
・drag 処理、データの格納 (setData () メソッド)
・drop 処理の後、データの取出 (getData () メソッド)
また、イベントが親要素に伝播しないよう stopPropagation () メソッド呼び出しをする必要がある場合があります。
属性・イベント
これが一番重要なのですが、ドラッグされるドラッグ元に draggable の指定をしてやる必要があります。
<li id = "lp59std" draggable="true"> Les Paul Standard 59 </li>
このようになります。
デモでご紹介したサンプルソースコード
下記にご紹介する通りです。これは非常にシンプルなものですので、これをもとに皆様の方で、色々とお試しください。なお画像はWindows 7のThemeからFerrariを選んで使っています。
<!DOCTYPE html>
<html>
<head>
<title>Drag and Drop APIのサンプル</title>
<script type="text/javascript">
onload = function () {
init();
};
function init() {
var image = document.getElementById("image");
var target = document.getElementById("target");
target.addEventListener('dragenter', doDragEnter, false);
target.addEventListener('dragover', doDragOver, false);
}
// 画像のドラッグ開始
function doDragStart(event) {
event.dataTransfer.setData("text/plain", "Image to drag");
event.dataTransfer.effectAllowed = "copy";
}
// 画像のドラッグ終了
function doDragEnd(event) {
}
// RichText編集可能ドロップ対象エリアにオブジェクトが進入
function doDragEnter(event) {
event.dataTransfer.dropEffect = "copy";
}
// RichText編集可能ドロップ対象エリアをオブジェクトが通過
function doDragOver(event) {
event.dataTransfer.dropEffect = "copy";
}
</script>
</head>
<body>
<h1>ドラッグ & ドロップのサンプル</h1>
<section>
<h2>ドラッグ対象の画像</h2>
<ul id="drag">
<li><img draggable="true" width="200" height="100" src="430scuderia.jpg" title="430scuderia" id="Img1" /></li>
<li><img draggable="true" width="200" height="100" src="f430.jpg" title="f430" id="Img2" /></li>
<li><img draggable="true" width="200" height="100" src="ferrari_california1.jpg" title="ferrari_california1" id="Img3" /></li>
</ul>
</section>
<h2>RichText 編集可能ドロップ対象エリア</h2>
<div id="target" contentEditable="true"
style="width:1000px;
height:400px;
border:2px solid blue;">
</div>
</body>
</html>
実行結果はこのようになります。
PDC10 JapanのHTML5 with IE9のセッション解説は以上です。いかがでしたしょうか？
この機会に、ぜひ皆様の方でも、HTML5＋JavaScriptをIE9上で試してみてください。その際には上記でご紹介した通り、Visual StudioとExpression Web、そして両者のAdd Inが役に立つはずです。
それではまた(^^)！
鈴木 章太郎