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

日本マイクロソフト株式会社
デベロッパー & プラットフォーム統括本部
Web プラットフォーム推進部
物江 修
Blog: http://blogs.msdn.com/osamum/
Twitter : osamum_MS
3 倍早い?! MS 製開発者専用ツールによる HTML5 + JavaScript を使ったWeb 作成
3 倍早い?! MS 製開発者専用ツールによる HTML5 + JavaScript を使ったWeb 作成
Web の進化とともに
増える続けるコーディング量
コーディング作業を軽減するツール
F12 開発者ツール
3 倍早い?! MS 製開発者専用ツールによる HTML5 + JavaScript を使ったWeb 作成
• 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 デザインツール
 の描画比較




             複数のブラウザーエンジンでの
                プレビュー機能

アクセシビリティ
互換性、SEO 等の
  レポート
~ Super Preview ~
F12 開発者ツール
• [F12] キーで起動
• Internet Explorer 9 標準搭載
• オンライン上のコンテンツも
  デバッグ可能
Internet Explorer 9
F12 開発者ツールの機能
エレメント情報
  の表示

                      HTTP キャプチャ



 HTML、CSS
   の編集




JavaScript の
  デバッグ
                      互換性のチェック
F12 開発者ツール
~ 基本機能紹介 ~
まとめ




      開発者ツール
参考情報 #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
参考情報 #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
参考情報 #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/
© 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 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.

More Related Content

What's hot (20)

PDF
Windowsストアアプリ開発 オープンセミナー広島
Akira Onishi
 
PPTX
Blendの便利機能振り返り
一希 大田
 
PDF
Windows ストアアプリから使かえるセンサーAPIとデバイスAPI
Osamu Monoe
 
PPTX
20121215
小野 修司
 
PDF
jQuery と MVC で実践する標準志向 Web 開発
Akira Inoue
 
PDF
マイクロソフトの新しい Web 開発ツールと新しい Web ブラウザー、そして、それらの新しい機能についての話
Osamu Monoe
 
KEY
Web App Framework at SwapSkills vol28
光一 原田
 
PDF
後期05
Takenori Nakagawa
 
PDF
20121215 ono
vsug_jim
 
PDF
MTでのプレビューサイト制作
Kei Yoshida
 
PDF
Salesforce Lightning をやってみてあれこれ
寛 吉田
 
PDF
Force.com Canvas アプリケーション
Salesforce Developers Japan
 
PPTX
20140322
小野 修司
 
PDF
CLT-004_Windows 10 におけるアプリの互換性と移行
decode2016
 
PPTX
Windows ストアアプリを HTMLで作成する
Narami Kiyokura
 
PDF
Attractive HTML5
Sho Ito
 
PDF
Ignite UI 2012 最新情報 jQuery Mobile 編
インフラジスティックス・ジャパン株式会社
 
PPTX
Windows アプリケーション開発 はじめに ~ Windows アプリケーション開発初学者の方向け Visual Studio を使ったアプリケーショ...
Fujio Kojima
 
PDF
[2001/05/30] .NET Developer Conference 2001 May / Visual Studio.NET による.NET対応...
Tatsuhiko Tanaka
 
PDF
C#で作成するfacebookアプリ mvp community camp
Shinichi Hirauchi
 
Windowsストアアプリ開発 オープンセミナー広島
Akira Onishi
 
Blendの便利機能振り返り
一希 大田
 
Windows ストアアプリから使かえるセンサーAPIとデバイスAPI
Osamu Monoe
 
20121215
小野 修司
 
jQuery と MVC で実践する標準志向 Web 開発
Akira Inoue
 
マイクロソフトの新しい Web 開発ツールと新しい Web ブラウザー、そして、それらの新しい機能についての話
Osamu Monoe
 
Web App Framework at SwapSkills vol28
光一 原田
 
20121215 ono
vsug_jim
 
MTでのプレビューサイト制作
Kei Yoshida
 
Salesforce Lightning をやってみてあれこれ
寛 吉田
 
Force.com Canvas アプリケーション
Salesforce Developers Japan
 
20140322
小野 修司
 
CLT-004_Windows 10 におけるアプリの互換性と移行
decode2016
 
Windows ストアアプリを HTMLで作成する
Narami Kiyokura
 
Attractive HTML5
Sho Ito
 
Ignite UI 2012 最新情報 jQuery Mobile 編
インフラジスティックス・ジャパン株式会社
 
Windows アプリケーション開発 はじめに ~ Windows アプリケーション開発初学者の方向け Visual Studio を使ったアプリケーショ...
Fujio Kojima
 
[2001/05/30] .NET Developer Conference 2001 May / Visual Studio.NET による.NET対応...
Tatsuhiko Tanaka
 
C#で作成するfacebookアプリ mvp community camp
Shinichi Hirauchi
 

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

PDF
Internet Explorer 10 概要と変更点
Microsoft
 
PDF
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
shigeya
 
PPTX
Ie10正式リリース版のhtml5 css3
Yoshihisa Ozaki
 
PDF
マイクロソフトWeb開発の今と今後
Akira Inoue
 
PDF
Visual Studio 2012 と ASP.NET に見る、最新 Web 開発の魅力
Akira Inoue
 
PDF
Dotnetlab 20110827
hirookun
 
PDF
マイクロソフトにとってのWebって?
Microsoft
 
PPTX
Web matrix2とvisual studio
Tadahiro Ishisaka
 
PDF
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
Akira Inoue
 
PDF
TF Seminar 20110218
hirookun
 
PDF
無償版Visual StudioでいろいろWeb開発
Narami Kiyokura
 
PDF
知って得する (かもしれない)、Internet Explorer での Canvas と SVG の描画
Osamu Monoe
 
PDF
Mvc conf session_5_isami
Hiroshi Okunushi
 
PDF
WebとIE10とWindows 8
Microsoft
 
PDF
Firefox DevTools
dynamis
 
PDF
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
Osamu Shimoda
 
PDF
Php conference 2010 final
hirookun
 
PDF
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
david9142
 
PDF
SilverlightとSharePoint2010の紹介
Tadahiro Higuchi
 
PDF
IE10とWindows 8とHTML5
Microsoft
 
Internet Explorer 10 概要と変更点
Microsoft
 
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
shigeya
 
Ie10正式リリース版のhtml5 css3
Yoshihisa Ozaki
 
マイクロソフトWeb開発の今と今後
Akira Inoue
 
Visual Studio 2012 と ASP.NET に見る、最新 Web 開発の魅力
Akira Inoue
 
Dotnetlab 20110827
hirookun
 
マイクロソフトにとってのWebって?
Microsoft
 
Web matrix2とvisual studio
Tadahiro Ishisaka
 
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
Akira Inoue
 
TF Seminar 20110218
hirookun
 
無償版Visual StudioでいろいろWeb開発
Narami Kiyokura
 
知って得する (かもしれない)、Internet Explorer での Canvas と SVG の描画
Osamu Monoe
 
Mvc conf session_5_isami
Hiroshi Okunushi
 
WebとIE10とWindows 8
Microsoft
 
Firefox DevTools
dynamis
 
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
Osamu Shimoda
 
Php conference 2010 final
hirookun
 
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
david9142
 
SilverlightとSharePoint2010の紹介
Tadahiro Higuchi
 
IE10とWindows 8とHTML5
Microsoft
 
Ad

More from Osamu Monoe (20)

PDF
高品質な Teams アプリを開発するためのポイント
Osamu Monoe
 
PDF
PWA on Windows
Osamu Monoe
 
PDF
これでできる! Microsoft Teams アプリ開発のポイント徹底解説
Osamu Monoe
 
PDF
Web プラットフォーム再考 ~PWA のもたらす未来の光と影~
Osamu Monoe
 
PDF
Microsoft Edge のFIDO サポート状況
Osamu Monoe
 
PDF
JavaScript と Bot Service を使った Bot 開発
Osamu Monoe
 
PDF
Web サーバー管理者のための Azure App Service 再入門
Osamu Monoe
 
PDF
NativeScript 環境のインストールとはじめてのプロジェクト実行
Osamu Monoe
 
PDF
Microsoft Bot Framework と Cognitive Services を活用した 業務サポートBOT 構築
Osamu Monoe
 
PDF
JS で Bot つくろうぜ! ~刮目せよ!、これがMSのBot Framewok だ!!~
Osamu Monoe
 
PDF
For every people achieve more : マイクロソフトの Inclusive Design について
Osamu Monoe
 
PDF
Visual Studio 2015 を使用した Cordova アプリの開発
Osamu Monoe
 
PDF
html5j Webプラットフォームの紹介
Osamu Monoe
 
PDF
Microsoft edge deep dive
Osamu Monoe
 
PDF
Edge と IE、来年からの Web 制作
Osamu Monoe
 
PDF
マイクロソフトにおけるエバンジェリズム活動
Osamu Monoe
 
PDF
Windows 10 のあたらしい Web ブラウザーの F12 開発者ツール
Osamu Monoe
 
PDF
Microsoft Edgeで サポートされる 新しい API について
Osamu Monoe
 
PDF
Windows 10 の あたらしい Web ブラウザー について
Osamu Monoe
 
PDF
酒と泪と Edge と IE
Osamu Monoe
 
高品質な Teams アプリを開発するためのポイント
Osamu Monoe
 
PWA on Windows
Osamu Monoe
 
これでできる! Microsoft Teams アプリ開発のポイント徹底解説
Osamu Monoe
 
Web プラットフォーム再考 ~PWA のもたらす未来の光と影~
Osamu Monoe
 
Microsoft Edge のFIDO サポート状況
Osamu Monoe
 
JavaScript と Bot Service を使った Bot 開発
Osamu Monoe
 
Web サーバー管理者のための Azure App Service 再入門
Osamu Monoe
 
NativeScript 環境のインストールとはじめてのプロジェクト実行
Osamu Monoe
 
Microsoft Bot Framework と Cognitive Services を活用した 業務サポートBOT 構築
Osamu Monoe
 
JS で Bot つくろうぜ! ~刮目せよ!、これがMSのBot Framewok だ!!~
Osamu Monoe
 
For every people achieve more : マイクロソフトの Inclusive Design について
Osamu Monoe
 
Visual Studio 2015 を使用した Cordova アプリの開発
Osamu Monoe
 
html5j Webプラットフォームの紹介
Osamu Monoe
 
Microsoft edge deep dive
Osamu Monoe
 
Edge と IE、来年からの Web 制作
Osamu Monoe
 
マイクロソフトにおけるエバンジェリズム活動
Osamu Monoe
 
Windows 10 のあたらしい Web ブラウザーの F12 開発者ツール
Osamu Monoe
 
Microsoft Edgeで サポートされる 新しい API について
Osamu Monoe
 
Windows 10 の あたらしい Web ブラウザー について
Osamu Monoe
 
酒と泪と Edge と IE
Osamu Monoe
 
Ad

Recently uploaded (10)

PDF
人気ブロックチェーン基盤「Hyperledger Fabric」最新版を動かしてみた!
LFDT Tokyo Meetup
 
PDF
Hyperledger Fabric最新v3.x系での機能強化、変更点にキャッチアップ!
LFDT Tokyo Meetup
 
PDF
[Hardening Designers Confernece 2025]ランサムウェアでの見えざるログ・見えるログ
kataware
 
PDF
プライバシ保護のためのインターネットアーキテクチャの進化 (2025-07-11)
Jun Kurihara
 
PDF
20250710_Devinで切り拓くDB革命_〜価値創出に集中せよ〜.pdf
Masaki Yamakawa
 
PDF
SIG-AUDIO 2025 Vol.02 オンラインセミナー SIG-Audioプレゼン資料_オーディオプラグイン開発_塩澤達矢.pdf
IGDA Japan SIG-Audio
 
PDF
ABC2025S LT講演「世界の窓から Androidこんにちは2025」アプリ自動生成の将来?ロボティクスの夢再び?
嶋 是一 (Yoshikazu SHIMA)
 
PDF
生成AIパネルトーク(Interop25Tokyo APPS JAPAN M1-07,M2-07 嶋ポジショントーク)
嶋 是一 (Yoshikazu SHIMA)
 
PDF
Hyperledger Fabric公式サンプル fabric-samples徹底解説
LFDT Tokyo Meetup
 
PDF
20250630_aws_reinforce_2025_aws_sheild_network_security_director
uedayuki
 
人気ブロックチェーン基盤「Hyperledger Fabric」最新版を動かしてみた!
LFDT Tokyo Meetup
 
Hyperledger Fabric最新v3.x系での機能強化、変更点にキャッチアップ!
LFDT Tokyo Meetup
 
[Hardening Designers Confernece 2025]ランサムウェアでの見えざるログ・見えるログ
kataware
 
プライバシ保護のためのインターネットアーキテクチャの進化 (2025-07-11)
Jun Kurihara
 
20250710_Devinで切り拓くDB革命_〜価値創出に集中せよ〜.pdf
Masaki Yamakawa
 
SIG-AUDIO 2025 Vol.02 オンラインセミナー SIG-Audioプレゼン資料_オーディオプラグイン開発_塩澤達矢.pdf
IGDA Japan SIG-Audio
 
ABC2025S LT講演「世界の窓から Androidこんにちは2025」アプリ自動生成の将来?ロボティクスの夢再び?
嶋 是一 (Yoshikazu SHIMA)
 
生成AIパネルトーク(Interop25Tokyo APPS JAPAN M1-07,M2-07 嶋ポジショントーク)
嶋 是一 (Yoshikazu SHIMA)
 
Hyperledger Fabric公式サンプル fabric-samples徹底解説
LFDT Tokyo Meetup
 
20250630_aws_reinforce_2025_aws_sheild_network_security_director
uedayuki
 

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

  • 1. 3 倍早い?! MS 製開発者専用ツールによる HTML5 + JavaScript を使った Web 作成 日本マイクロソフト株式会社 デベロッパー & プラットフォーム統括本部 Web プラットフォーム推進部 物江 修 Blog: http://blogs.msdn.com/osamum/ Twitter : osamum_MS
  • 8. • Web サーバー上で動作する Web アプリケーション • 開発環境の HTML デザイナに強力な 入力支援機能
  • 9. Visual Studio 2010 の入力支援機能 • インテリセンス • コード スニペット Tab キー 押下
  • 10. Visual Studio 2010 の検証機能 • ターゲットスキーマ • アクセシビリティ検証 ※ Premium Edition 以上
  • 11. Visual Studio 2010 の JavaScript デバッグ機能 ブレーク スクリプト ポイント ドキュメント ツールヒント による変数の ウォッチ イミディエイト ウィンドウ ウォッチ ブレーク ウィンドウ ポイント一覧
  • 14. Web オーサリングツール • Web 作成者に使いやすい UI • Web 作成のプロフェッショナル向けの機能 • HTML5 には SP1 で対応
  • 15. さまざまな 検証、レポーティングツールと 強力なプレビュー機能 複数ブラウザー HTML デザインツール の描画比較 複数のブラウザーエンジンでの プレビュー機能 アクセシビリティ 互換性、SEO 等の レポート
  • 17. F12 開発者ツール • [F12] キーで起動 • Internet Explorer 9 標準搭載 • オンライン上のコンテンツも デバッグ可能
  • 18. Internet Explorer 9 F12 開発者ツールの機能 エレメント情報 の表示 HTTP キャプチャ HTML、CSS の編集 JavaScript の デバッグ 互換性のチェック
  • 20. まとめ 開発者ツール
  • 21. 参考情報 #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
  • 22. 参考情報 #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
  • 23. 参考情報 #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/
  • 24. © 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 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.