現時点の本資料は完成版のスライドではありません。

D2-301

開催当日までに内容に変更がありますので、印刷を行われる方は後日更新される版をご利用になり、会場にお持ちください。会場には印刷資料はございません。

HTML5 でも安心！Visual Studio での Web 開発

日本マイクロソフト株式会社デベロッパー & プラットフォーム統括本部

エバンジェリスト

物江 修 ( ものえおさむ )

D2-301

セッションの目的HTML5 がアプリケーションにもたらす価値をご理解いただくVisual Studio 2010 、 ASP.NET を使った HTML5 アプリケーションの作成方法の紹介

セッションのゴールASP.NET アプリケーションに効果的に HTML5 の機能を組み込めるようになるVisual Studio 2010 を使用して HTML5 コンテンツを効率よく記述できるようになる

セッションの目的とゴールSession Objectives and Takeaways

HTML5 とは ?

ASP.NET における HTML5 の利用

Visual Studio 2010 の HTML5 サポー

ト

Internet Explorer 9 : F12 開発者ツー

ル

アジェンダ

HTML5 とは ?

Same Markup, Same Codeアプリケーションのプラットフォームセマンティック

HTML5 とは ?～ 新しいバージョンの HTML です ～

「 HTML5 」と呼ばれるもの

HTML5( マークアップ )

JavaScript API

CSS3

SVG

MathML WebGL Etc..

HTML5

キーワードとしての HTML5

ASP.NET における HTML5 の利用

ASP.NET MVC3 Tools Update

• セマンティック タグ• Modernizr

JavaScript ライブラリ

ロジカルな文書構造マシン

リーダブルSEO

セマンティック タグ とは ?～ ページ内の文に意味付けを行うもの ～

見出し

案内

時間

レコード (*)

記事

古い Web ブラウザー対応本来は Web ブラウザーが HTML5/CSS3 のどの機能に対応しているかをチェックmodernizr.com で配布OSS JavaScript ライブラリMVC3 Tools Update に含まれているのは v1.7

Modernizr

Modernizr-*.*.js

HTML5 タグのヘルパーCodePlex で配布NuGet からインストールｗ eb.config に名前空間 の追加が必要Razor でも使用可

MVC HTML5 Toolkit

System.Web.Mvc.Html5.dll

DemoASP.NET MVC3 Tools Update

MVC HTML5 Toolkit

における HTML5 サポート

HTML5 への対応状況

2011.April

HTML5 Intellisense for Visual Studio 2010 and 2008

Web Standards Update for Microsoft Visual Studio 2010 SP1

Service Pack 1

CSS3 Intellisense Schema

2010.June

2011.February

2011.June

ターゲット スキーマとインテリセンス

HTML5 タグブラウザー APICSS3

Web Standards Update for Microsoft Visual Studio 2010 SP1

＋

Demo

Web Standards Update for

SP1

F12 開発者ツール

F12 開発者ツール

• [F12] キーで起動• Internet Explorer 9 標準搭載• オンライン上のコンテンツも　デバッグ可能

F12 開発者ツールの機能エレメント情報

の表示

HTML 、 CSS　の編集

JavaScript の

デバッグ

HTTP キャプチャ

互換性のチェック

Demo

～ 基本機能紹介 ～

F12 開発者ツール

セッションのまとめSession Wrap Up

ASP.NET は HTML5 を意識した機能追加が行われて

おり、それを使用することで新しい時代に対応した

アプリケーションを作成することができます。

Visual Studio 2010 を使用すると、 HTML5 を使用

したコンテンツを効率よく記述することができます。

関連セッション

D2-201 ：さらっと眺めてみよう ! Web 関連テクノロジ " 超 " 概要

D2-202 ： Internet Explorer 9 と HTML5 。そして、 IE10

リファレンス #1Microsoft Visual Studio ホームページhttp://www.microsoft.com/japan/msdn/vstudio/

Visual Studio 2010 Service Pack 1 について ( 技術情報 )http://www.microsoft.com/downloads/ja-jp/details.aspx?FamilyID=75568aa6-8107-475d-948a-ef22627e57a5&displayLang=ja

Web Standards Update for Microsoft Visual Studio 2010 SP1http://visualstudiogallery.msdn.microsoft.com/a15c3ce9-f58f-42b7-8668-53f6cdc2cd83

ASP.NET MVC3 Tools Update http://www.microsoft.com/downloads/ja-jp/details.aspx?FamilyID=82cbd599-d29a-43e3-b78b-0f863d22811a

MVC HTML5 Toolkithttp://mvchtml5.codeplex.com/

リファレンス #2

Microsoft Web Platformhttp://www.microsoft.com/web

Internet Explorer デベロッパー センターhttp://msdn.microsoft.com/ja-jp/ie/default.aspx

monoe’s bloghttp://blogs.msdn.com/b/osamum/

Internet Explorer 9 ダウンロード http://www.microsoft.com/japan/virtualization/default.mspx

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

アンケートにご協力くださいD2-301