はじめよう！ Visual Studio 2010でHTML 5プログラミング ～Internet Explorer 9 の リリースに向けて～

Visual Studio User Group Staff 関 満徳

Blog: http://fullvirtue.com/ Twitter: ・・ ・・・・・・

本セッションの紹介（1/2）

本セッションの想定対象者

HTML 5 は、名前しか聞いたことがない。

HTML 5 では何ができるのかがわからない。

Visual Studio 2010 で HTML 5 を使うには どうすればいいのかわからない。

Expression Web で HTML 5 を使うには どうすればいいのかわからない。

今までの HTML や XHTML と HTML 5 は 何が違うのかがわからない。

HTML 5 になって新しく登場したタグが何か、 どうやって使うのかがわからない。

VSUG Day 2010 Winter 1 2010/12/11（土）

本セッションの紹介（2/2）

本セッションの資料の注意事項

HTML 5 の活用に関しては、資料作成者の主観が 含まれています。

本セッションの資料は、以下の情報源および Web上で公開されている情報の影響を強く受けて 構成しています。あらかじめご了承下さい。

• 2010/10/22（金）デジタルハリウッド主催HTML 5 勉強会

• 2010/10/29（金）デジタルハリウッド主催HTML 5 勉強会

• 2010/11/25（木）～26（金） PDC 10 Japan HTML5セッション

本セッションの資料の中には、まだ仕様が確定して いない情報も含まれています。よって、現時点での 情報でしかない点も含まれていることをご容赦下さい。

VSUG Day 2010 Winter 2 2010/12/11（土）

スピーカーの自己紹介

まずは簡単に自己紹介

id: @fullvirtue

http://fullvirtue.com/

http://twitter.com/fullvirtue/

大事にしていること

簡単にすること

二度手間を掛けさせないこと

情報がわかりやすいこと

情報源が明確になっていること

3

本題に入る前に・・・

いきなり本題に入ると疲れますよね

2010/12/11（土） VSUG Day 2010 Winter 4

本題に入る前に・・・（1/6）

HTML 5 で作成しているサイトが知りたい！

The Shodo

• http://www.theshodo.com/

VSUG Day 2010 Winter 5 2010/12/11（土）

本題に入る前に・・・（2/6）

HTML 5 で作成しているサイトが知りたい！

The Internet Movie Database

• http://www.imdb.com/features/hdgallery

VSUG Day 2010 Winter 6 2010/12/11（土）

本題に入る前に・・・（3/6）

HTML 5 で作成しているサイトが知りたい！

ebay

• http://anywhere.ebay.com/apps/deals/

VSUG Day 2010 Winter 7 2010/12/11（土）

本題に入る前に・・・（4/6）

HTML 5 で作成しているサイトが知りたい！

ITpro eMagazine

• http://itpro.nikkeibp.co.jp/members/emagazine/pc/

VSUG Day 2010 Winter 8 2010/12/11（土）

本題に入る前に・・・（5/6）

HTML 5 で作成しているサイトが知りたい！

unleash a more beatiful web

• http://www.beautyoftheweb.com/

VSUG Day 2010 Winter 9 2010/12/11（土）

本題に入る前に・・・（6/6）

HTML 5 で作成しているサイトが知りたい！

Internet Explorer Test Drive

• http://ie.microsoft.com/testdrive/

VSUG Day 2010 Winter 10 2010/12/11（土）

ここから本題です

おまたせしました！

2010/12/11（土） VSUG Day 2010 Winter 11

今日お話すること

Visual Studio 2010 で HTML 5 を使うには

Expression Web 4 で HTML 5 を使うには

HTML / XHTML の歴史

HTML 5の考え方と代表的な文法

HTML 5のタグの紹介（一部）

まとめ

VSUG Day 2010 Winter 12 2010/12/11（土）

Visual Studio 2010 で HTML 5 を 使うには

まず最初に、HTML 5 を使える環境を作ってみます

2010/12/11（土） VSUG Day 2010 Winter 13

HTML 5 の環境設定（1/1）

HTML 5 IntelliSense / SVG IntelliSense の導入

「HTML 5 IntelliSense for Visual Studio 2010 and 2008」

• http://visualstudiogallery.msdn.microsoft.com/en-us/d771cbc8-d60a-40b0-a1d8-f19fc393127d

「SVG IntelliSense schema for Visual Studio 2010 and 2008」

• http://visualstudiogallery.msdn.microsoft.com/en-us/22479d6b-42d5-499f-b501-18e90e579540

どちらも、ダウンロードしてインストールするだけ！

VSUG Day 2010 Winter 14 2010/12/11（土）

Visual Studio 2010 で HTML 5 デモ

デモの内容

1. The Shodo で作品を作成

2. Expression Studio 4 で Silverlight化

3. Visual Studio 2010 で HTML 5 を作成

4. HTML 5 に Silverlight オブジェクトを貼り付け

5. HTML 5 で Silverlight を表示

VSUG Day 2010 Winter 15 2010/12/11（土）

デモの開始

Expression Web 4 で HTML 5 を 使うには

続いて、Expression Web 4 でも、同様に環境を作ってみます

2010/12/11（土） VSUG Day 2010 Winter 16

Expression Web 4 の設定（1/8）

HTML 5 Schema Configuration の導入

「HTML 5 Schema Configuration Add-In for Expression Web」より「HTML5Schema.xadd」を取得

• http://gallery.expression.microsoft.com/en-us/Web4HTML5SchemaAddIn

VSUG Day 2010 Winter 17 2010/12/11（土）

Expression Web 4 の設定（2/8）

HTML 5 Schema Configuration の導入

Expression Web 4を起動、[ツール]メニューの [アドイン] を選択し、”アドインの管理”ダイアログ ボックスを表示

Expression Web 4 の設定（3/8）

HTML 5 Schema Configuration の導入

インストールボタンから、インストールを選び、 「HTML5Schema.xadd」を選んで、「開く」を押下

Expression Web 4 の設定（4/8）

HTML 5 Schema Configuration の導入

下記のダイアログボックスが出てたら、 「Yes」を押下

Expression Web 4 の設定（5/8）

HTML 5 Schema Configuration の導入

内容を確認して「インストール」を押下

Expression Web 4 の設定（6/8）

HTML 5 Schema Configuration の導入

Expression Web 4を管理者モードで再起動し、 表運ツールバーにある「HTML5」ボタンを押下

Expression Web 4 の設定（7/8）

HTML 5 Schema Configuration の導入

Configure HTML 5 Schemas ダイアログボックスが出てきたら、「Enable HTML 5」ボタン押下

Expression Web 4 の設定（8/8）

HTML 5 Schema Configuration の導入

「ツール」→「ページ編集オプション」を選択、「作成」

タブを開き、「ドキュメントの型宣言」と「セカンダリスキーマ」の両方を「HTML5」へ変更

Expression Web で HTML 5 デモ

HTML 5 Schema Configuration の導入

1. HTML 5 Schema Configuration アドオンを 実際にExpression Web 4 に適用

2. HTML 5 を開く

VSUG Day 2010 Winter 25 2010/12/11（土）

デモの開始

HTML / XHTML の歴史

HTML 4 から XHTML 1.0 そして HTML 5 へ

2010/12/11（土） VSUG Day 2010 Winter 26

HTML の これまでの経緯

2010/12/11（土） VSUG Day 2010 Winter 27

HTML 4.0

W3C (The World Wide Web Consortium)

1997年 12月18日 仕様発表

XML 1.0

1998年 2月10日 勧告

XHTML 1.0

2000年 1月26日 勧告

策定 打切り

2009年 8月25日 ドラフト版

HTML 5

2002年 4月25日 勧告

XML 1.1

2001年 5月31日 勧告

XHTML 1.1

2008年 10月17日 ドラフト版

XHTML 1.2

XHTML 2.0

2003年 5月6日 ドラフト版

HTML 4.01

1999年 12月24日 勧告

いい加減な文法の HTMLが乱立

XMLに準拠 させよう

セマンティック ウェブを広めよう

使いづらい

XMLなんて どうでもいい

わかりにくい

規格乱立やめよう

Webの進化は諦めよう

HTML 5 の 誕生 (1/2)

HTML 5 より前の HTML や XHTML

W3C（研究者が中心）が規格策定

ベンダー側がXHTMLや進化の止まったHTMLに対して 現状にあっていないと提言、HTML 4 の進化を要求

W3C 側の同意を得ることが出来なかった

W3C とは別の団体がHTML 5 を規格策定開始

2004年W3Cワークショップ後、WHATWGを設立

• Web Hypertext Application Technology Working Group

• この時Microsoftは参加要請に対して拒否

W3C とは別に、ベンダー側が中心に規格策定

VSUG Day 2010 Winter 28 2010/12/11（土）

HTML 5 の 誕生 (2/2)

2007年3月 W3C 側で新 HTML WG 発足

XMLベースのWebの情報の整理を諦めた

• 既存のHTML文書との互換性やXMLを文書として扱う問題

• Webブラウザ側の対応の遅れ（対応しない？）の問題

2007年5月 WHATWG と W3G が協力へ

WHATWGが策定していた仕様をベースとした 新HTMLの提案を W3C が受託

• HTML5 として W3C が策定開始

2009年7月 HTML 5 の進化に注力することの表明

計画されていたXHTML 2.0 の策定作業中止を 正式に発表

VSUG Day 2010 Winter 29 2010/12/11（土）

参考：HTML 5 のカバー範囲

WHATWG – HTML 5

Semantic Elements

Multimedia Elements

HTML 5 Forms

Event model & APIs

Offline Events

Drag & Drop API

HTML 5 Parser

Canvas 2D Graphics Context

Microdata Microdata Vocabularies

Cross-document messaging Channel messaging

W3C – HTML 5

Semantic Elements

Multimedia Elements

HTML 5 Forms

Event model & APIs

Offline Events

Drag & Drop API

HTML 5 Parser

HTML Canvas 2D Context

HTML 5 Microdata

HTML 5 Web Messaging

2010/12/11（土） VSUG Day 2010 Winter 30

そして HTML 6 へ（1/1）

HTML 5 から HTML 6 へ

HTML 5、CSS 3、SVG 1.1は最終草案へ向かっている

HTML 6では、SVG、HTML、CSSのよりシームレスな 連携の実現を目指す

HTML 6 の策定を進めるにあたり、Microsoft IE シニアプログラムマネージャー Partrick Dengler 氏が指摘している課題

• 組織構造的に違うグループとの連携体制の実現が困難

• 技術的な不一致による連携の段階での不整合問題

• スケジュールの不一致による策定技術の相互連携の阻害

• 一貫したガイドラインの不在による担当範囲境界の曖昧さ

VSUG Day 2010 Winter 31 2010/12/11（土）

HTML 5 の考え方と代表的な文法

HTML 5 のコンセプトや記述の仕方を確認していきます

2010/12/11（土） VSUG Day 2010 Winter 32

HTML 5 の考え方（1/1）

HTML または XML で記述するひとつの言語仕様 HTML または XML のどちらの文法でも記述可能

詳細な処理モデルを定義 Webブラウザの差異に対する対応方法の提示

表示の互換性の向上

文書のマークアップを改善 仕様が曖昧な記述方法と要素の持つ意味の再定義

文章の意味を明確化

Webアプリケーションのような新しい表現に対し マークアップとAPIを提供

Webアプリケーションに便利な機能を提供

VSUG Day 2010 Winter 33 2010/12/11（土）

HTML 5 の代表的な文法（1/4）

HTML または XML で記述するひとつの言語仕様

HTML または XML のどちらの文法でも記述可能

<a href=http://fullvirtue.com/> ← OK

<a href=“http://fullvirtue.com/”> ← OK

HTML 5 では、既存のWebサイトや これまでの製作方法との互換を取れるようにしている

VSUG Day 2010 Winter 34 2010/12/11（土）

HTML 5 の代表的な文法（2/4）

詳細な処理モデルを定義

表示の互換性の向上

<video id=“video1” autobuffer controls>

<source src=“xxx.mp4”> ← IE9β, Safari, Chrome

<source src=“xxx.ogv”> ← Firefox, Opera

<p>HTML5対応ブラウザのみ表示されます。</p>

</video>

Webブラウザ毎に対応が異なる為、 対応していないブラウザへの対応も考慮されている

VSUG Day 2010 Winter 35 2010/12/11（土）

HTML 5 の代表的な文法（3/4）

文書のマークアップを改善

文章の意味を明確化

<div id=“header”> <header>

<div id=“side-bar”> <nav>

<div id=“content”> → <div id=“content”>

<div class=“post”> <article>

<div id=“footer”> <footer>

ID名の指定で整理していた情報を、コンピュータが理解しやすい独立した要素として定義し、構造を明確化

VSUG Day 2010 Winter 36 2010/12/11（土）

HTML 5 の代表的な文法（4/4）

Webアプリケーションのような新しい表現に対し マークアップとAPIを提供

Webアプリケーションに便利な機能を提供

Element: <video>, <audio>, <canvas>, <svg> …

Attribute: <video controlls autoplay>

API: canvas.getContext(‘2d’);

プラグインには頼らずに、ビデオ配信、音楽配信、 ビットマップ画像描画、ベクター画像描画が可能

VSUG Day 2010 Winter 37 2010/12/11（土）

HTML 5 のタグの紹介（一部）

今までは全体的な話をしました。これからは個別の要素について

説明していきます。

2010/12/11（土） VSUG Day 2010 Winter 38

HTML 5 のタグの紹介（1/7）

HTML 5 構文要素

HTML 5 の新しいマークアップ <body>

<h1>body 要素の見出し</h1> ←<h1>！？

<section>

<h1>section 要素の見出し</h1> ←<h1>！？

<blockquote>

<h1>blockquote の見出し</h1> ←<h1>！？

<section>

<h1>引用された内容が持つセクション</h1> ←<h1>！？

</section>

</blockquote>

</section>

</body>

VSUG Day 2010 Winter 39 2010/12/11（土）

HTML 5 のタグの紹介（2/7）

Video タグ

Videoタグの特徴

• MPEG-4 / H.264 video をサポート

• 60 fps までのフレームレートに対応

• Windows 7 では、ハードウェア Video デコーダーに対応

• 再生コントロールをデフォルトで実装

• スクリプトを使って DOM 経由で操作可能

VSUG Day 2010 Winter 40 2010/12/11（土）

HTML 5 のタグの紹介（3/7）

Video タグ

Videoタグの属性

• src - 再生するファイルの指定

• Autoplay - 準備出来次第再生する

• controls - コントロールを表示する

• preload - ページ読み込み時に再生ファイルを読み出す

• loop - 繰り返し再生

• height & width - 再生するプレーヤーの高さと幅

<video id=“myVideo” src=“video.mp4” autoplay controls>

</video>

VSUG Day 2010 Winter 41 2010/12/11（土）

HTML 5 のタグの紹介（4/7）

Audio タグ

Audioタグの特徴

• MP3 と Advanced Audio Coding ( AAC )

• 再生コントロールをデフォルトで実装

• スクリプトを使って DOM 経由で操作可能

VSUG Day 2010 Winter 42 2010/12/11（土）

HTML 5 のタグの紹介（5/7）

Audio タグ

Audioタグの属性

• src – 再生するファイルの指定

• autoplay – 準備出来次第、再生する

• controls – コントロールを表示する

• preload – ページ ロード時に再生ファイルを読み出す

<audio src="audio.mp3" id="audioTag" autoplay controls>

</audio>

VSUG Day 2010 Winter 43 2010/12/11（土）

HTML 5 のタグの紹介（6/7）

Canvas タグ

Canvasタグとは

• Javascript で 2D の図形を描くことができるブロック要素

• グラフィックスを描画する領域を示す指定した範囲内で、 図形などの線画、画像などの 2D Graphics を自由に描画

VSUG Day 2010 Winter 44 2010/12/11（土）

デモの開始

HTML 5 のタグの紹介（7/7）

SVG タグ

SVGタグとは

• Javascript で 2D の図形を描くことができるブロック要素

• グラフィックスを描画する領域を示す指定した範囲内で、 図形などの線画、画像などの 2D Graphics を自由に描画

VSUG Day 2010 Winter 45 2010/12/11（土）

デモの開始

まとめ

今日お話した内容をまとめて振り返ります

46

今日お話すること

Visual Studio 2010 で HTML 5 を使うには

Expression Web 4 で HTML 5 を使うには

HTML / XHTML の歴史

HTML 5の考え方と代表的な文法

HTML 5のタグの紹介（一部）

まとめ

VSUG Day 2010 Winter 47 2010/12/11（土）

参考情報

今回の資料で参考にした情報をまとめました

2010/12/11（土） VSUG Day 2010 Winter 48

参考情報（1/3）

PDC Japan 2010 – HTML 5 with Internet Explorer 9

• http://blogs.msdn.com/b/shosuz/archive/2010/11/30/pdc-japan-2010-html5-with-internet-explorer-9.aspx

HTML6 – MicorosftのIE担当マネージャーによる 現状報告

• http://journal.mycom.co.jp/articles/2010/12/06/html6-next-step/index.html

HTML5 differences from HTML4 – http://www.w3.org/TR/html5-diff/

HTML5の範囲 – http://www.slideshare.net/dynamis/keypoints-html5-4920336

VSUG Day 2010 Winter 49 2010/12/11（土）

参考情報（2/3）

やっとHTML5へ一本化か – http://www.lepracaun.info/blog/2009/07/html5.html

HTML 5 が持つ本当の意味 – http://www.atmarkit.co.jp/news/200801/25/html.html

HTML 4.01仕様書 私的 日本語訳 – http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html

XML 1.0 – http://www.doraneko.org/xml/xml10/19980210/Overview.html

XML 1.1 – http://www.w3.org/TR/2002/WD-xml11-20020425/

VSUG Day 2010 Winter 50 2010/12/11（土）

参考情報（3/3）

XHTML 1.0 – http://www.doraneko.org/webauth/xhtml10/20000126/Overview.ht

ml

XHTML 1.1 – http://www.doraneko.org/webauth/xhtml11/20010531/Overview.ht

ml

XHTML 1.2 – http://www.w3.org/MarkUp/2008/ED-xhtml12-20081017/

XHTML 2.0 – http://www.w3.org/TR/2003/WD-xhtml2-20030506/

XMLへの移行はいっせいには進まなかった – http://dig.csail.mit.edu/breadcrumbs/node/166

VSUG Day 2010 Winter 51 2010/12/11（土）

52

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

@fullvirtue