1. はじめよう！
Visual Studio 2010でHTML 5プログラミング
～Internet Explorer 9 の リリースに向けて～
Visual Studio User Group Staff
関 満徳
Blog: http://fullvirtue.com/
Twitter: ・・ ・・・・・・

2. 本セッションの紹介（1/2）
本セッションの想定対象者
HTML 5 は、名前しか聞いたことがない。
HTML 5 では何ができるのかがわからない。
Visual Studio 2010 で HTML 5 を使うには
どうすればいいのかわからない。
Expression Web で HTML 5 を使うには
どうすればいいのかわからない。
今までの HTML や XHTML と HTML 5 は
何が違うのかがわからない。
HTML 5 になって新しく登場したタグが何か、
どうやって使うのかがわからない。
2010/12/11（土） VSUG Day 2010 Winter 1

3. 本セッションの紹介（2/2）
本セッションの資料の注意事項
HTML 5 の活用に関しては、資料作成者の主観が
含まれています。
本セッションの資料は、以下の情報源および
Web上で公開されている情報の影響を強く受けて
構成しています。あらかじめご了承下さい。
• 2010/10/22（金）デジタルハリウッド主催HTML 5 勉強会
• 2010/10/29（金）デジタルハリウッド主催HTML 5 勉強会
• 2010/11/25（木）～26（金） PDC 10 Japan HTML5セッション
本セッションの資料の中には、まだ仕様が確定して
いない情報も含まれています。よって、現時点での
情報でしかない点も含まれていることをご容赦下さい。
2010/12/11（土） VSUG Day 2010 Winter 2

4. スピーカーの自己紹介
まずは簡単に自己紹介
id: @fullvirtue
http://fullvirtue.com/
http://twitter.com/fullvirtue/
大事にしていること
簡単にすること
二度手間を掛けさせないこと
情報がわかりやすいこと
情報源が明確になっていること
3

5. いきなり本題に入ると疲れますよね
本題に入る前に・・・
2010/12/11（土） VSUG Day 2010 Winter 4

6. 本題に入る前に・・・（1/6）
HTML 5 で作成しているサイトが知りたい！
The Shodo
• http://www.theshodo.com/
2010/12/11（土） VSUG Day 2010 Winter 5

7. 本題に入る前に・・・（2/6）
HTML 5 で作成しているサイトが知りたい！
The Internet Movie Database
• http://www.imdb.com/features/hdgallery
2010/12/11（土） VSUG Day 2010 Winter 6

8. 本題に入る前に・・・（3/6）
HTML 5 で作成しているサイトが知りたい！
ebay
• http://anywhere.ebay.com/apps/deals/
2010/12/11（土） VSUG Day 2010 Winter 7

9. 本題に入る前に・・・（4/6）
HTML 5 で作成しているサイトが知りたい！
ITpro eMagazine
• http://itpro.nikkeibp.co.jp/members/emagazine/pc/
2010/12/11（土） VSUG Day 2010 Winter 8

10. 本題に入る前に・・・（5/6）
HTML 5 で作成しているサイトが知りたい！
unleash a more beatiful web
• http://www.beautyoftheweb.com/
2010/12/11（土） VSUG Day 2010 Winter 9

11. 本題に入る前に・・・（6/6）
HTML 5 で作成しているサイトが知りたい！
Internet Explorer Test Drive
• http://ie.microsoft.com/testdrive/
2010/12/11（土） VSUG Day 2010 Winter 10

12. おまたせしました！
ここから本題です
2010/12/11（土） VSUG Day 2010 Winter 11

13. 今日お話すること
Visual Studio 2010 で HTML 5 を使うには
Expression Web 4 で HTML 5 を使うには
HTML / XHTML の歴史
HTML 5の考え方と代表的な文法
HTML 5のタグの紹介（一部）
まとめ
2010/12/11（土） VSUG Day 2010 Winter 12

14. まず最初に、HTML 5 を使える環境を作ってみます
Visual Studio 2010 で HTML 5 を
使うには
2010/12/11（土） VSUG Day 2010 Winter 13

15. 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
どちらも、ダウンロードしてインストールするだけ！
2010/12/11（土） VSUG Day 2010 Winter 14

16. 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 を表示
デモの開始
2010/12/11（土） VSUG Day 2010 Winter 15

17. 続いて、Expression Web 4 でも、同様に環境を作ってみます
Expression Web 4 で HTML 5 を
使うには
2010/12/11（土） VSUG Day 2010 Winter 16

18. 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
2010/12/11（土） VSUG Day 2010 Winter 17

19. Expression Web 4 の設定（2/8）
HTML 5 Schema Configuration の導入
Expression Web 4を起動、[ツール]メニューの
[アドイン] を選択し、”アドインの管理”ダイアログ
ボックスを表示

20. Expression Web 4 の設定（3/8）
HTML 5 Schema Configuration の導入
インストールボタンから、インストールを選び、
「HTML5Schema.xadd」を選んで、「開く」を押下

21. Expression Web 4 の設定（4/8）
HTML 5 Schema Configuration の導入
下記のダイアログボックスが出てたら、
「Yes」を押下

22. Expression Web 4 の設定（5/8）
HTML 5 Schema Configuration の導入
内容を確認して「インストール」を押下

23. Expression Web 4 の設定（6/8）
HTML 5 Schema Configuration の導入
Expression Web 4を管理者モードで再起動し、
表運ツールバーにある「HTML5」ボタンを押下

24. Expression Web 4 の設定（7/8）
HTML 5 Schema Configuration の導入
Configure HTML 5 Schemas ダイアログボックスが出て
きたら、「Enable HTML 5」ボタン押下

25. Expression Web 4 の設定（8/8）
HTML 5 Schema Configuration の導入
「ツール」→「ページ編集オプション」を選択、「作成」
タブを開き、「ドキュメントの型宣言」と「セカンダリス
キーマ」の両方を「HTML5」へ変更

26. Expression Web で HTML 5 デモ
HTML 5 Schema Configuration の導入
1. HTML 5 Schema Configuration アドオンを
実際にExpression Web 4 に適用
2. HTML 5 を開く
デモの開始
2010/12/11（土） VSUG Day 2010 Winter 25

27. HTML 4 から XHTML 1.0 そして HTML 5 へ
HTML / XHTML の歴史
2010/12/11（土） VSUG Day 2010 Winter 26

28. HTML の これまでの経緯
Webの進化
は諦めよう 規格乱立
W3C (The World Wide Web Consortium)
やめよう
いい加減な文法の セマンティック XHTML 策定
HTMLが乱立 ウェブを広めよう 2.0 打切り
XMLに準拠 XHTML XHTML XHTML
させよう 1.0 1.1 1.2
使いづらい
XML XML
1.0 1.1
わかりにくい
HTML HTML XMLなんて HTML
4.0 4.01 どうでもいい 5
1997年 1998年 1999年 2000年 2001年 2002年 2003年 2008年 2009年
12月18日 2月10日 12月24日 1月26日 5月31日 4月25日 5月6日 10月17日 8月25日
仕様発表 勧告 勧告 勧告 勧告 勧告 ドラフト版 ドラフト版 ドラフト版
2010/12/11（土） VSUG Day 2010 Winter 27

29. 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 とは別に、ベンダー側が中心に規格策定
2010/12/11（土） VSUG Day 2010 Winter 28

30. 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 の策定作業中止を
正式に発表
2010/12/11（土） VSUG Day 2010 Winter 29

31. 参考：HTML 5 のカバー範囲
WHATWG – HTML 5 W3C – HTML 5
Semantic Elements Semantic Elements
Multimedia Elements Multimedia Elements
HTML 5 Forms HTML 5 Forms
Event model & APIs Event model & APIs
Offline Events Offline Events
Drag & Drop API Drag & Drop API
HTML 5 Parser HTML 5 Parser
Canvas 2D Graphics Context HTML Canvas 2D Context
Microdata
Microdata Vocabularies HTML 5 Microdata
Cross-document messaging
Channel messaging HTML 5 Web Messaging
2010/12/11（土） VSUG Day 2010 Winter 30

32. そして 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 氏が
指摘している課題
• 組織構造的に違うグループとの連携体制の実現が困難
• 技術的な不一致による連携の段階での不整合問題
• スケジュールの不一致による策定技術の相互連携の阻害
• 一貫したガイドラインの不在による担当範囲境界の曖昧さ
2010/12/11（土） VSUG Day 2010 Winter 31

33. HTML 5 のコンセプトや記述の仕方を確認していきます
HTML 5 の考え方と代表的な文法
2010/12/11（土） VSUG Day 2010 Winter 32

34. HTML 5 の考え方（1/1）
HTML または XML で記述するひとつの言語仕様
HTML または XML のどちらの文法でも記述可能
詳細な処理モデルを定義
Webブラウザの差異に対する対応方法の提示
表示の互換性の向上
文書のマークアップを改善
仕様が曖昧な記述方法と要素の持つ意味の再定義
文章の意味を明確化
Webアプリケーションのような新しい表現に対し
マークアップとAPIを提供
Webアプリケーションに便利な機能を提供
2010/12/11（土） VSUG Day 2010 Winter 33

35. HTML 5 の代表的な文法（1/4）
HTML または XML で記述するひとつの言語仕様
HTML または XML のどちらの文法でも記述可能
<a href=http://fullvirtue.com/> ← OK
<a href=“http://fullvirtue.com/”> ← OK
HTML 5 では、既存のWebサイトや
これまでの製作方法との互換を取れるようにしている
2010/12/11（土） VSUG Day 2010 Winter 34

36. 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ブラウザ毎に対応が異なる為、
対応していないブラウザへの対応も考慮されている
2010/12/11（土） VSUG Day 2010 Winter 35

37. 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名の指定で整理していた情報を、コンピュータが理
解しやすい独立した要素として定義し、構造を明確化
2010/12/11（土） VSUG Day 2010 Winter 36

38. HTML 5 の代表的な文法（4/4）
Webアプリケーションのような新しい表現に対し
マークアップとAPIを提供
Webアプリケーションに便利な機能を提供
Element: <video>, <audio>, <canvas>, <svg> …
Attribute: <video controlls autoplay>
API: canvas.getContext(‘2d’);
プラグインには頼らずに、ビデオ配信、音楽配信、
ビットマップ画像描画、ベクター画像描画が可能
2010/12/11（土） VSUG Day 2010 Winter 37

39. 今までは全体的な話をしました。これからは個別の要素について
説明していきます。
HTML 5 のタグの紹介（一部）
2010/12/11（土） VSUG Day 2010 Winter 38

40. 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>
2010/12/11（土） VSUG Day 2010 Winter 39

41. HTML 5 のタグの紹介（2/7）
Video タグ
Videoタグの特徴
• MPEG-4 / H.264 video をサポート
• 60 fps までのフレームレートに対応
• Windows 7 では、ハードウェア Video デコーダーに対応
• 再生コントロールをデフォルトで実装
• スクリプトを使って DOM 経由で操作可能
2010/12/11（土） VSUG Day 2010 Winter 40

42. HTML 5 のタグの紹介（3/7）
Video タグ
Videoタグの属性
• src - 再生するファイルの指定
• Autoplay - 準備出来次第再生する
• controls - コントロールを表示する
• preload - ページ読み込み時に再生ファイルを読み出す
• loop - 繰り返し再生
• height & width - 再生するプレーヤーの高さと幅
<video id=“myVideo” src=“video.mp4” autoplay controls>
</video>
2010/12/11（土） VSUG Day 2010 Winter 41

43. HTML 5 のタグの紹介（4/7）
Audio タグ
Audioタグの特徴
• MP3 と Advanced Audio Coding ( AAC )
• 再生コントロールをデフォルトで実装
• スクリプトを使って DOM 経由で操作可能
2010/12/11（土） VSUG Day 2010 Winter 42

44. HTML 5 のタグの紹介（5/7）
Audio タグ
Audioタグの属性
• src – 再生するファイルの指定
• autoplay – 準備出来次第、再生する
• controls – コントロールを表示する
• preload – ページ ロード時に再生ファイルを読み出す
<audio src="audio.mp3" id="audioTag" autoplay controls>
</audio>
2010/12/11（土） VSUG Day 2010 Winter 43

45. HTML 5 のタグの紹介（6/7）
Canvas タグ
Canvasタグとは
• Javascript で 2D の図形を描くことができるブロック要素
• グラフィックスを描画する領域を示す指定した範囲内で、
図形などの線画、画像などの 2D Graphics を自由に描画
デモの開始
2010/12/11（土） VSUG Day 2010 Winter 44

46. HTML 5 のタグの紹介（7/7）
SVG タグ
SVGタグとは
• Javascript で 2D の図形を描くことができるブロック要素
• グラフィックスを描画する領域を示す指定した範囲内で、
図形などの線画、画像などの 2D Graphics を自由に描画
デモの開始
2010/12/11（土） VSUG Day 2010 Winter 45

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

48. 今日お話すること
Visual Studio 2010 で HTML 5 を使うには
Expression Web 4 で HTML 5 を使うには
HTML / XHTML の歴史
HTML 5の考え方と代表的な文法
HTML 5のタグの紹介（一部）
まとめ
2010/12/11（土） VSUG Day 2010 Winter 47

49. 今回の資料で参考にした情報をまとめました
参考情報
2010/12/11（土） VSUG Day 2010 Winter 48

50. 参考情報（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
2010/12/11（土） VSUG Day 2010 Winter 49

51. 参考情報（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/
2010/12/11（土） VSUG Day 2010 Winter 50

52. 参考情報（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
2010/12/11（土） VSUG Day 2010 Winter 51

53. ご清聴ありがとうございました。
@fullvirtue
52