3 倍早い?!MS 製開発者専用ツールによるHTML5 + JavaScript を使ったWeb 作成日本マイクロソフト株式会社デベロッパー & プラットフォーム統括本部Web プラットフォーム推進部物江 修Blog: http://blogs...
Web の進化とともに増える続けるコーディング量
コーディング作業を軽減するツール
F12 開発者ツール
• Web サーバー上で動作する   Web アプリケーション• 開発環境の HTML デザイナに強力な   入力支援機能
Visual Studio 2010 の入力支援機能• インテリセンス• コード スニペット  Tab キー    押下
Visual Studio 2010 の検証機能 • ターゲットスキーマ • アクセシビリティ検証      ※ Premium Edition 以上
Visual Studio 2010 の       JavaScript デバッグ機能ブレーク                      スクリプトポイント                      ドキュメント  ツールヒント  による変数...
HTML 5 への対応状況     +     +     =
~ 入力支援機能 ~
•   Web オーサリングツール•   Web 作成者に使いやすい UI•   Web 作成のプロフェッショナル向けの機能•   HTML5 には SP1 で対応
さまざまな  検証、レポーティングツールと  強力なプレビュー機能複数ブラウザー                HTML デザインツール の描画比較             複数のブラウザーエンジンでの                プレビュー...
~ Super Preview ~
F12 開発者ツール• [F12] キーで起動• Internet Explorer 9 標準搭載• オンライン上のコンテンツも  デバッグ可能
Internet Explorer 9F12 開発者ツールの機能エレメント情報  の表示                      HTTP キャプチャ HTML、CSS   の編集JavaScript の  デバッグ             ...
F12 開発者ツール~ 基本機能紹介 ~
まとめ      開発者ツール
参考情報 #1• Microsoft Visual Studio ホームページ  – http://www.microsoft.com/japan/msdn/vstudio/• Visual Studio 2010 Service Pack 1...
参考情報 #2• Microsoft Expression Web 4 http://www.microsoft.com/japan/products/expressio n/products/web_overview.aspx/• Micro...
参考情報 #3• Internet Explorer 9 ダウンロード http://windows.microsoft.com/ja-JP/internet- explorer/downloads/ie-9/worldwide-languag...
© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows 7 and other product names are or may be reg...
3 倍早い?! MS 製開発者専用ツールによる HTML5 + JavaScript を使ったWeb 作成
3 倍早い?! MS 製開発者専用ツールによる HTML5 + JavaScript を使ったWeb 作成
3 倍早い?! MS 製開発者専用ツールによる HTML5 + JavaScript を使ったWeb 作成
Upcoming SlideShare
Loading in …5
×

3 倍早い?! MS 製開発者専用ツールによる HTML5 + JavaScript を使ったWeb 作成

2,205 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,205
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

3 倍早い?! MS 製開発者専用ツールによる HTML5 + JavaScript を使ったWeb 作成

  1. 1. 3 倍早い?!MS 製開発者専用ツールによるHTML5 + JavaScript を使ったWeb 作成日本マイクロソフト株式会社デベロッパー & プラットフォーム統括本部Web プラットフォーム推進部物江 修Blog: http://blogs.msdn.com/osamum/Twitter : osamum_MS
  2. 2. Web の進化とともに増える続けるコーディング量
  3. 3. コーディング作業を軽減するツール
  4. 4. F12 開発者ツール
  5. 5. • Web サーバー上で動作する Web アプリケーション• 開発環境の HTML デザイナに強力な 入力支援機能
  6. 6. Visual Studio 2010 の入力支援機能• インテリセンス• コード スニペット Tab キー 押下
  7. 7. Visual Studio 2010 の検証機能 • ターゲットスキーマ • アクセシビリティ検証 ※ Premium Edition 以上
  8. 8. Visual Studio 2010 の JavaScript デバッグ機能ブレーク スクリプトポイント ドキュメント ツールヒント による変数の ウォッチ イミディエイト ウィンドウ ウォッチ ブレークウィンドウ ポイント一覧
  9. 9. HTML 5 への対応状況 + + =
  10. 10. ~ 入力支援機能 ~
  11. 11. • Web オーサリングツール• Web 作成者に使いやすい UI• Web 作成のプロフェッショナル向けの機能• HTML5 には SP1 で対応
  12. 12. さまざまな 検証、レポーティングツールと 強力なプレビュー機能複数ブラウザー HTML デザインツール の描画比較 複数のブラウザーエンジンでの プレビュー機能アクセシビリティ互換性、SEO 等の レポート
  13. 13. ~ Super Preview ~
  14. 14. F12 開発者ツール• [F12] キーで起動• Internet Explorer 9 標準搭載• オンライン上のコンテンツも デバッグ可能
  15. 15. Internet Explorer 9F12 開発者ツールの機能エレメント情報 の表示 HTTP キャプチャ HTML、CSS の編集JavaScript の デバッグ 互換性のチェック
  16. 16. F12 開発者ツール~ 基本機能紹介 ~
  17. 17. まとめ 開発者ツール
  18. 18. 参考情報 #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/a1 5c3ce9-f58f-42b7-8668-53f6cdc2cd83
  19. 19. 参考情報 #2• Microsoft Expression Web 4 http://www.microsoft.com/japan/products/expressio n/products/web_overview.aspx/• Microsoft Expression Web 4 Service Pack 1 (SP1) http://www.microsoft.com/downloads/ja- jp/details.aspx?FamilyID=f6e1bbd9-2b1b-40e8- 948b-1276e3b5daa3&displayLang=ja
  20. 20. 参考情報 #3• Internet Explorer 9 ダウンロード http://windows.microsoft.com/ja-JP/internet- explorer/downloads/ie-9/worldwide-languages• Internet Explorer デベロッパーセンター http://msdn.microsoft.com/ja-jp/ie/• monoe’s blog -「使ってみよう [F21] 開発者ツール」 http://blogs.msdn.com/b/osamum/archive/tags/_8 b957a760580c430fc30eb30_/• Microsoft /Web http://www.microsoft.com/web/
  21. 21. © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, 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 marketconditions, 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.

×