D2-301 現時点の本資料は 完成版のスライドではありません。 開催当日までに内容に変更がありますので、印刷を 行われる方は後日更新される版をご利用になり、会場にお持ちください。会場には印刷資料はございません。

HTML5 でも安心！ Visual Studioでの Web 開発 日本マイクロソフト株式会社 デベロッパー & プラットフォーム統括本部 エバンジェリスト 物江 修 (ものえおさむ) D2-301

セッションの目的とゴール Session Objectives and Takeaways HTML5 がアプリケーションにもたらす価値を ご理解いただく Visual Studio 2010、ASP.NET を使った HTML5 アプリケーションの作成方法の紹介 セッションのゴール ASP.NET アプリケーションに効果的に HTML5 の機能を組み込めるようになる Visual Studio 2010 を使用してHTML5 コンテンツを効率よく記述できるようになる

アジェンダ HTML5 とは? ASP.NET における HTML5 の利用 Visual Studio 2010 の HTML5 サポート Internet Explorer 9 : F12 開発者ツール

HTML5 とは?

HTML5 とは? ～ 新しいバージョンの HTML です ～ Same Markup, Same Code アプリケーションの プラットフォーム セマンティック

「HTML5」と呼ばれるもの SVG MathML WebGL Etc.. キーワードとしての HTML5 CSS3 JavaScript (マークアップ) JavaScript API CSS3 SVG MathML WebGL Etc.. キーワードとしての HTML5

ASP.NET における HTML5 の利用

ASP.NET MVC3 Tools Update セマンティック タグ Modernizr JavaScript ライブラリ

セマンティック タグ とは? ～ ページ内の文に意味付けを行うもの ～ 見出し ロジカルな 文書構造 マシン リーダブル SEO 案内 時間 レコード(*) 記事

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

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

Demo ASP.NET MVC3 Tools Update MVC HTML5 Toolkit

におけるHTML5 サポート

HTML5 への対応状況 Service Pack 1 CSS3 Intellisense Schema HTML5 Intellisense for Visual Studio 2010 and 2008 2010.June 2011.February CSS3 Intellisense Schema Service Pack 1 2011.April 2011.June Web Standards Update for Microsoft Visual Studio 2010 SP1

Web Standards Update for Microsoft Visual Studio 2010 SP1 ターゲット スキーマと インテリセンス HTML5 タグ ブラウザー API CSS3 ＋

Demo Web Standards Update for SP1

F12 開発者ツール

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

F12 開発者ツールの機能 エレメント情報 の表示 HTTP キャプチャ HTML、CSS の編集 JavaScript の デバッグ 互換性のチェック

Demo F12 開発者ツール ～ 基本機能紹介 ～

セッションのまとめ Session Wrap Up ASP.NET は HTML5 を意識した機能追加が行われており、 それを使用することで新しい時代に対応した アプリケーションを作成することができます。 Visual Studio 2010 を使用すると、HTML5 を使用した コンテンツを効率よく記述することができます。

関連セッション D2-201：さらっと眺めてみよう! Web 関連テクノロジ "超" 概要 D2-202：Internet Explorer 9 と HTML5。そして、IE10

リファレンス #1 Microsoft 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 SP1 http://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 Toolkit http://mvchtml5.codeplex.com/

リファレンス #2 Microsoft Web Platform http://www.microsoft.com/web Internet Explorer デベロッパー センター http://msdn.microsoft.com/ja-jp/ie/default.aspx monoe’s blog http://blogs.msdn.com/b/osamum/ Internet Explorer 9 ダウンロード http://www.microsoft.com/japan/virtualization/default.mspx

ご清聴ありがとうございました アンケート にご協力 ください D2-301

© 2011 Microsoft Corporation. All rights reserved © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista ,Windows 7 and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.