1. Silverlightアプリを
HTML5で表示してみたよ！
～放課後Devタイム～
@fullvirtue
@y_kimisaki
2010/10/09（土）13:00～18:00
Microsoft 新宿OST 5F セミナールーム

2. SilverlightアプリをHTML5で表示するには
• 標準の環境ではHTML5が使えない！

3. SilverlightアプリをHTML5で表示するには
• 標準の環境ではHTML5が使えない！
• というわけで、まずは環境設定から
始めました！
• 時間大丈夫か！？

4. 環境設定（1/11）
• Visual Studio 2010 の事前準備
• 「html_5.xsd」のダウンロード
• http://blogs.msdn.com/b/webdevtools/archive/20
09/11/18/html-5-intellisense-and-validation-
schema-for-visual-studio-2008-and-visual-web-
developer.aspx
• 「html_5.xsd」を以下のフォルダへ配置
• C:¥Program Files (x86)¥Microsoft Visual Studio
10.0¥Common7¥Packages¥schemas¥html

5. 環境設定（2/11）
• Visual Studio 2010 Web Developer
Express Edition の場合
• レジストリを設定
Windows Registry Editor Version 5.00
[HKEY_LOCAL_MACHINE¥SOFTWARE¥Wow6432Node¥Microsoft¥Visual
Studio¥10.0¥Packages¥{1B437D20-F8FE-11D2-A6AE-
00104BCC7269}¥Schemas¥Schema 23]
"File"="html¥¥html_5.xsd"
"Friendly Name"="HTML 5"
"URI"="http://schemas.microsoft.com/intellisense/html-5"

6. 環境設定（3/11）
• Visual Studio 2010 Professional の場合
• レジストリを設定
Windows Registry Editor Version 5.00
[HKEY_LOCAL_MACHINE¥SOFTWARE¥Wow6432Node¥Microsoft¥VWD
Express¥10.0¥Packages¥{1B437D20-F8FE-11D2-A6AE-
00104BCC7269}¥Schemas¥Schema 23]
"File"="html¥¥html_5.xsd"
"Friendly Name"="HTML 5"
"URI"="http://schemas.microsoft.com/intellisense/html-5"

7. 環境設定（4/11）
• Expression Web 4
• 「HTML5Schema.xadd」のダウンロード
• http://gallery.expression.microsoft.com/en-
us/Web4HTML5SchemaAddIn

8. 環境設定（5/11）
• Expression Web 4
• Expression Web 4を起動、[ツール]メニューの
[アドイン] を選択し、”アドインの管理”ダイアログ
ボックスを表示

9. 環境設定（6/11）
• Expression Web 4
• インストールボタンから、インストールを選び、
「HTML5Schema.xadd」を選んで、「開く」を押下

10. 環境設定（7/11）
• Expression Web 4
• 下記のダイアログボックスが出てたら、
「Yes」を押下

11. 環境設定（8/11）
• Expression Web 4
• 内容を確認して「インストール」を押下

12. 環境設定（9/11）
• Expression Web 4
• Expression Web 4を管理者モードで再起動し、
表運ツールバーにある「HTML5」ボタンを押下

13. 環境設定（10/11）
• Expression Web 4
• Configure HTML 5 Schemas ダイアログボックスが
出てきたら、「Enable HTML 5」ボタン押下

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

15. HTML5のサンプルを見てみよう
• THE SHODO
• http://www.theshodo.com/Write
• ここで作った作品
• http://www.theshodo.com/Gallery/Entry/4988
• http://www.theshodo.com/Gallery/Entry/4999

16. HTML5にSilverlightを埋め込んでみる
•ここからデモ
1. THE SHODOで作成した作品を、
Expression Blend 4でSilverlight化し
xxx.xapを作成
2. Expression Web 4でHTML5のhtmlを作成し、
htmlの一部でSilverlight（xxx.xap）を表示

17. おしまい
ご清聴ありがとう
ございました！