SlideShare une entreprise Scribd logo
1  sur  15
Télécharger pour lire hors ligne
Visual Web Developer 2010 と
Expression Web 4 で構築する
HTML5 と JavaScript
日本マイクロソフト株式会社
デベロッパー & プラットフォーム統括本部
Web プラットフォーム推進部
物江 修
Blog: http://blogs.msdn.com/osamum/
Twitter : osamum_MS
Web の進化とともに
増える続けるコーディング量
コーディング作業を軽減するツール




                   4
5
Visual Web Developer と
Expression Web の入力支援機能
∙インテリセンス
• 入力中のタグやコードを自動で入力補完
∙ターゲットスキーマ
• HTML のバージョンに則した記述をチェック
∙コード スニペット
• コード ブロックのひな形を簡単に挿入
• カスタム スニペットを作成して拡張可能
Visual Web Developer の
JavaScript デバッグ機能
ブレーク                     スクリプト
ポイント                     ドキュメント




  ツールヒント
  による変数の
   ウォッチ                  イミディエイト
                          ウィンドウ




 ウォッチ       ブレーク
ウィンドウ      ポイント一覧
Expression Web のさまざまな
検証、レポーティングツール
複数ブラウザー
                HTML デザインツール
 の描画比較




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

アクセシビリティ
互換性、SEO 等の
  レポート
HTML 5 への対応状況
Visual Web Developer と
Expression Web を使用した
Web コンテンツの作成
まとめ
参考情報 #1
∙Visual Studio Express
 ◉ http://www.microsoft.com/japan/msdn/vstudio/expr
   ess/
∙Web Platform Installer
 ◉ http://www.microsoft.com/web/downloads/platform.
   aspx
∙monoe's blog『Visual Web Developer 2010
 Express (無償) のインストール方法』
 ◉ http://blogs.msdn.com/b/osamum/archive/2011/02/
   18/visual-web-developer-2010-express.aspx
∙Expression Web
 ◉ http://www.microsoft.com/japan/products/expressio
   n/products/web_overview.aspx
                                                   14
参考情報 #2
∙Visual Studio 2010 Code Snippets for use
 with jQuery
 ◉ http://jquerysnippets.codeplex.com/
∙HTML 5 Intellisense for Visual Studio 2010
 and 2008
 ◉ http://visualstudiogallery.msdn.microsoft.com/ja-JP/d771cbc8-
   d60a-40b0-a1d8-f19fc393127d
∙SVG Intellisense schema for Visual Studio
 2010 and 2008
 ◉ http://visualstudiogallery.msdn.microsoft.com/ja-jp/22479d6b-
   42d5-499f-b501-18e90e579540
∙CSS 3 Intellisense Schema
 ◉ http://visualstudiogallery.msdn.microsoft.com/7211bcac-091b-
   4a32-be2d-e797be0db210/                                      15
参考情報 #3
∙WebMatrix
◉ http://www.microsoft.com/web/webmatrix/
∙Web ホスティングギャラリー
◉ http://www.microsoft.com/web/hosting/home
∙WebSiteSpark (Web 制作会社支援プログ
 ラム)
◉ http://www.winserver.ne.jp/websitespark/




                                              16
© 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.

Contenu connexe

Tendances

これからはじめるConcrete5
 これからはじめるConcrete5  これからはじめるConcrete5
これからはじめるConcrete5
武彦 大山
 
Webエンジニアによるスマートフォンアプリ開発
Webエンジニアによるスマートフォンアプリ開発Webエンジニアによるスマートフォンアプリ開発
Webエンジニアによるスマートフォンアプリ開発
takeuchi-tk
 
20121215 ono
20121215 ono20121215 ono
20121215 ono
vsug_jim
 

Tendances (20)

第4回concrete5初心者勉強会-基礎編-
第4回concrete5初心者勉強会-基礎編-第4回concrete5初心者勉強会-基礎編-
第4回concrete5初心者勉強会-基礎編-
 
めとべや東京10 Universal Windows Platform appの新しいバインディング
めとべや東京10 Universal Windows Platform appの新しいバインディングめとべや東京10 Universal Windows Platform appの新しいバインディング
めとべや東京10 Universal Windows Platform appの新しいバインディング
 
concrete5で制作・運用する多言語ウェブサイト
concrete5で制作・運用する多言語ウェブサイトconcrete5で制作・運用する多言語ウェブサイト
concrete5で制作・運用する多言語ウェブサイト
 
concrete5って何?〜Web制作者対象〜2014年版
concrete5って何?〜Web制作者対象〜2014年版concrete5って何?〜Web制作者対象〜2014年版
concrete5って何?〜Web制作者対象〜2014年版
 
Windows ストアアプリのつくりかた (JS + HTML + CSS)
Windows ストアアプリのつくりかた (JS + HTML + CSS)Windows ストアアプリのつくりかた (JS + HTML + CSS)
Windows ストアアプリのつくりかた (JS + HTML + CSS)
 
第1回concrete5初心者向け勉強会
第1回concrete5初心者向け勉強会第1回concrete5初心者向け勉強会
第1回concrete5初心者向け勉強会
 
後期05
後期05後期05
後期05
 
これからはじめるConcrete5
 これからはじめるConcrete5  これからはじめるConcrete5
これからはじめるConcrete5
 
Windows 10 対応のデスクトップアプリを作る技術(事前公開版v2)
Windows 10 対応のデスクトップアプリを作る技術(事前公開版v2)Windows 10 対応のデスクトップアプリを作る技術(事前公開版v2)
Windows 10 対応のデスクトップアプリを作る技術(事前公開版v2)
 
Webエンジニアによるスマートフォンアプリ開発
Webエンジニアによるスマートフォンアプリ開発Webエンジニアによるスマートフォンアプリ開発
Webエンジニアによるスマートフォンアプリ開発
 
CMS の今後と IoT 〜 concrete5 などの CMS が進む道
CMS の今後と IoT 〜 concrete5 などの CMS が進む道CMS の今後と IoT 〜 concrete5 などの CMS が進む道
CMS の今後と IoT 〜 concrete5 などの CMS が進む道
 
Chrome Extensionsから見るWebExtensions
Chrome Extensionsから見るWebExtensionsChrome Extensionsから見るWebExtensions
Chrome Extensionsから見るWebExtensions
 
20121215 ono
20121215 ono20121215 ono
20121215 ono
 
Blend for visual studio 2013の新機能
Blend for visual studio 2013の新機能Blend for visual studio 2013の新機能
Blend for visual studio 2013の新機能
 
concrete5で社内システムのお話し
concrete5で社内システムのお話しconcrete5で社内システムのお話し
concrete5で社内システムのお話し
 
Learn vue.js
Learn vue.jsLearn vue.js
Learn vue.js
 
その後のBash on windows
その後のBash on windowsその後のBash on windows
その後のBash on windows
 
20150530 めとべや東京8 universal windows platform appの画面開発
20150530 めとべや東京8 universal windows platform appの画面開発20150530 めとべや東京8 universal windows platform appの画面開発
20150530 めとべや東京8 universal windows platform appの画面開発
 
Chrome Apps 概要
Chrome Apps 概要Chrome Apps 概要
Chrome Apps 概要
 
Visual Studio 2015 リリース記念 勉強会 universal windows platform app
Visual Studio 2015 リリース記念 勉強会 universal windows platform appVisual Studio 2015 リリース記念 勉強会 universal windows platform app
Visual Studio 2015 リリース記念 勉強会 universal windows platform app
 

Similaire à Visual Web Developer 2010 とExpression Web 4 で構築する HTML5 と JavaScript

マイクロソフトWeb開発の今と今後
マイクロソフトWeb開発の今と今後マイクロソフトWeb開発の今と今後
マイクロソフトWeb開発の今と今後
Akira Inoue
 
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
Akira Inoue
 
Windowsストアアプリ開発 オープンセミナー広島
Windowsストアアプリ開発 オープンセミナー広島Windowsストアアプリ開発 オープンセミナー広島
Windowsストアアプリ開発 オープンセミナー広島
Akira Onishi
 
Web リソースを活用した簡単アプリケーション開発(Windows Phone)
Web リソースを活用した簡単アプリケーション開発(Windows Phone)Web リソースを活用した簡単アプリケーション開発(Windows Phone)
Web リソースを活用した簡単アプリケーション開発(Windows Phone)
Akira Onishi
 

Similaire à Visual Web Developer 2010 とExpression Web 4 で構築する HTML5 と JavaScript (20)

Php conference 2010 final
Php conference 2010 finalPhp conference 2010 final
Php conference 2010 final
 
マイクロソフトWeb開発の今と今後
マイクロソフトWeb開発の今と今後マイクロソフトWeb開発の今と今後
マイクロソフトWeb開発の今と今後
 
jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発
 
Web Camp 2 - マイクロソフト
Web Camp 2 - マイクロソフトWeb Camp 2 - マイクロソフト
Web Camp 2 - マイクロソフト
 
Web Camp 2 - マイクロソフト
Web Camp 2 - マイクロソフトWeb Camp 2 - マイクロソフト
Web Camp 2 - マイクロソフト
 
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
 
about modern.IE
about modern.IEabout modern.IE
about modern.IE
 
Windowsストアアプリ開発 オープンセミナー広島
Windowsストアアプリ開発 オープンセミナー広島Windowsストアアプリ開発 オープンセミナー広島
Windowsストアアプリ開発 オープンセミナー広島
 
Web リソースを活用した簡単アプリケーション開発(Windows Phone)
Web リソースを活用した簡単アプリケーション開発(Windows Phone)Web リソースを活用した簡単アプリケーション開発(Windows Phone)
Web リソースを活用した簡単アプリケーション開発(Windows Phone)
 
マイクロソフトの新しい Web 開発ツールと新しい Web ブラウザー、そして、それらの新しい機能についての話
マイクロソフトの新しい Web 開発ツールと新しい Web ブラウザー、そして、それらの新しい機能についての話マイクロソフトの新しい Web 開発ツールと新しい Web ブラウザー、そして、それらの新しい機能についての話
マイクロソフトの新しい Web 開発ツールと新しい Web ブラウザー、そして、それらの新しい機能についての話
 
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
 
Force.com開発基礎
Force.com開発基礎Force.com開発基礎
Force.com開発基礎
 
Solution semniar vs2013_multi_device-1209-new
Solution semniar vs2013_multi_device-1209-newSolution semniar vs2013_multi_device-1209-new
Solution semniar vs2013_multi_device-1209-new
 
MAF2013 Enterprise Windows 8 – Architecture for rapid development of WinRT apps
MAF2013 Enterprise Windows 8 – Architecture for rapid development of WinRT appsMAF2013 Enterprise Windows 8 – Architecture for rapid development of WinRT apps
MAF2013 Enterprise Windows 8 – Architecture for rapid development of WinRT apps
 
Microsoft Edge概要 物江氏
Microsoft Edge概要 物江氏Microsoft Edge概要 物江氏
Microsoft Edge概要 物江氏
 
Internet Explorer 10 概要と変更点
Internet Explorer 10 概要と変更点Internet Explorer 10 概要と変更点
Internet Explorer 10 概要と変更点
 
SharePoint Framework による Viva Connections アプリの開発
SharePoint Framework による Viva Connections アプリの開発SharePoint Framework による Viva Connections アプリの開発
SharePoint Framework による Viva Connections アプリの開発
 
最新のプラットフォーム技術と開発ツールを活用した Web の構築
最新のプラットフォーム技術と開発ツールを活用した Web の構築最新のプラットフォーム技術と開発ツールを活用した Web の構築
最新のプラットフォーム技術と開発ツールを活用した Web の構築
 
Windows アプリケーション開発 はじめに ~ Windows アプリケーション開発初学者の方向け Visual Studio を使ったアプリケーショ...
Windows アプリケーション開発はじめに ~ Windows アプリケーション開発初学者の方向けVisual Studio を使ったアプリケーショ...Windows アプリケーション開発はじめに ~ Windows アプリケーション開発初学者の方向けVisual Studio を使ったアプリケーショ...
Windows アプリケーション開発 はじめに ~ Windows アプリケーション開発初学者の方向け Visual Studio を使ったアプリケーショ...
 
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
 

Plus de Osamu Monoe

Plus de Osamu Monoe (20)

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

Visual Web Developer 2010 とExpression Web 4 で構築する HTML5 と JavaScript

  • 1. Visual Web Developer 2010 と Expression Web 4 で構築する HTML5 と JavaScript 日本マイクロソフト株式会社 デベロッパー & プラットフォーム統括本部 Web プラットフォーム推進部 物江 修 Blog: http://blogs.msdn.com/osamum/ Twitter : osamum_MS
  • 2.
  • 5. 5
  • 6. Visual Web Developer と Expression Web の入力支援機能 ∙インテリセンス • 入力中のタグやコードを自動で入力補完 ∙ターゲットスキーマ • HTML のバージョンに則した記述をチェック ∙コード スニペット • コード ブロックのひな形を簡単に挿入 • カスタム スニペットを作成して拡張可能
  • 7. Visual Web Developer の JavaScript デバッグ機能 ブレーク スクリプト ポイント ドキュメント ツールヒント による変数の ウォッチ イミディエイト ウィンドウ ウォッチ ブレーク ウィンドウ ポイント一覧
  • 8. Expression Web のさまざまな 検証、レポーティングツール 複数ブラウザー HTML デザインツール の描画比較 複数のブラウザーエンジンでの プレビュー機能 アクセシビリティ 互換性、SEO 等の レポート
  • 10. Visual Web Developer と Expression Web を使用した Web コンテンツの作成
  • 12. 参考情報 #1 ∙Visual Studio Express ◉ http://www.microsoft.com/japan/msdn/vstudio/expr ess/ ∙Web Platform Installer ◉ http://www.microsoft.com/web/downloads/platform. aspx ∙monoe's blog『Visual Web Developer 2010 Express (無償) のインストール方法』 ◉ http://blogs.msdn.com/b/osamum/archive/2011/02/ 18/visual-web-developer-2010-express.aspx ∙Expression Web ◉ http://www.microsoft.com/japan/products/expressio n/products/web_overview.aspx 14
  • 13. 参考情報 #2 ∙Visual Studio 2010 Code Snippets for use with jQuery ◉ http://jquerysnippets.codeplex.com/ ∙HTML 5 Intellisense for Visual Studio 2010 and 2008 ◉ http://visualstudiogallery.msdn.microsoft.com/ja-JP/d771cbc8- d60a-40b0-a1d8-f19fc393127d ∙SVG Intellisense schema for Visual Studio 2010 and 2008 ◉ http://visualstudiogallery.msdn.microsoft.com/ja-jp/22479d6b- 42d5-499f-b501-18e90e579540 ∙CSS 3 Intellisense Schema ◉ http://visualstudiogallery.msdn.microsoft.com/7211bcac-091b- 4a32-be2d-e797be0db210/ 15
  • 14. 参考情報 #3 ∙WebMatrix ◉ http://www.microsoft.com/web/webmatrix/ ∙Web ホスティングギャラリー ◉ http://www.microsoft.com/web/hosting/home ∙WebSiteSpark (Web 制作会社支援プログ ラム) ◉ http://www.winserver.ne.jp/websitespark/ 16
  • 15. © 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.