SlideShare a Scribd company logo
Visual Web Developer 2010 と
Expression Web 4 で構築する
HTML5 と JavaScript
日本マイクロソフト株式会社
デベロッパー & プラットフォーム統括本部
Web プラットフォーム推進部
物江 修
Blog: http://blogs.msdn.com/osamum/
Twitter : osamum_MS
 Visual Web Developer 2010 とExpression Web 4 で構築する HTML5 と JavaScript
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.

More Related Content

What's hot (20)

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

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

PDF
マイクロソフトWeb開発の今と今後
Akira Inoue
 
PDF
マイクロソフトの新しい Web 開発ツールと新しい Web ブラウザー、そして、それらの新しい機能についての話
Osamu Monoe
 
PDF
Visual Studio 2012 と ASP.NET に見る、最新 Web 開発の魅力
Akira Inoue
 
PDF
マイクロソフトにとってのWebって?
Microsoft
 
PDF
Php conference 2010 final
hirookun
 
PDF
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
Osamu Shimoda
 
PDF
jQuery と MVC で実践する標準志向 Web 開発
Akira Inoue
 
PDF
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
shigeya
 
PPTX
Web matrix2とvisual studio
Tadahiro Ishisaka
 
PDF
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
Akira Inoue
 
PDF
TF Seminar 20110218
hirookun
 
PDF
Dotnetlab 20110827
hirookun
 
PDF
Mvc conf session_3_takehara
Hiroshi Okunushi
 
PDF
知って得する (かもしれない)、Internet Explorer での Canvas と SVG の描画
Osamu Monoe
 
PDF
無償版Visual StudioでいろいろWeb開発
Narami Kiyokura
 
PDF
はじめよう!Visual Studio 2010 で HTML5 プログラミング ~ Internet Explorer 9 のリリースに向けて~
満徳 関
 
PDF
Introduction to web development 1
hideaki honda
 
PDF
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
david9142
 
PDF
Mvc conf session_5_isami
Hiroshi Okunushi
 
PDF
Silverlight to Next オンライン セミナー
インフラジスティックス・ジャパン株式会社
 
マイクロソフトWeb開発の今と今後
Akira Inoue
 
マイクロソフトの新しい Web 開発ツールと新しい Web ブラウザー、そして、それらの新しい機能についての話
Osamu Monoe
 
Visual Studio 2012 と ASP.NET に見る、最新 Web 開発の魅力
Akira Inoue
 
マイクロソフトにとってのWebって?
Microsoft
 
Php conference 2010 final
hirookun
 
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
Osamu Shimoda
 
jQuery と MVC で実践する標準志向 Web 開発
Akira Inoue
 
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
shigeya
 
Web matrix2とvisual studio
Tadahiro Ishisaka
 
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
Akira Inoue
 
TF Seminar 20110218
hirookun
 
Dotnetlab 20110827
hirookun
 
Mvc conf session_3_takehara
Hiroshi Okunushi
 
知って得する (かもしれない)、Internet Explorer での Canvas と SVG の描画
Osamu Monoe
 
無償版Visual StudioでいろいろWeb開発
Narami Kiyokura
 
はじめよう!Visual Studio 2010 で HTML5 プログラミング ~ Internet Explorer 9 のリリースに向けて~
満徳 関
 
Introduction to web development 1
hideaki honda
 
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
david9142
 
Mvc conf session_5_isami
Hiroshi Okunushi
 
Silverlight to Next オンライン セミナー
インフラジスティックス・ジャパン株式会社
 
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
Movable Type から BOT を作ろう! ~ Data API と Microsoft BOT Framework ~
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
 
高品質な 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
 
Movable Type から BOT を作ろう! ~ Data API と Microsoft BOT Framework ~
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
 
Ad

Recently uploaded (13)

PDF
安尾 萌, 藤代 裕之, 松下 光範. 協調的情報トリアージにおけるコミュニケーションの影響についての検討, 第11回データ工学と情報マネジメントに関する...
Matsushita Laboratory
 
PDF
API認可を支えるKeycloakの基本と設計の考え方 ~ OAuth/OIDCによるAPI保護のベストプラクティス ~
Hitachi, Ltd. OSS Solution Center.
 
PDF
AIツールを使った研究の効率化 Improving Research Efficiency with AI Tools
Tohoku University
 
PDF
SIG-AUDIO 2025 Vol.02 オンラインセミナー 「GDC2025 オーディオ報告会」SIG-Audio_GDC2024_報告会資料_増野さ...
IGDA Japan SIG-Audio
 
PDF
論文紹介:Unbiasing through Textual Descriptions: Mitigating Representation Bias i...
Toru Tamaki
 
PDF
漁船に搭載されている電子装備と漁法について_VRC海洋学研究会_海のLT会発表資料
Yuuitirou528 default
 
PDF
マルチAIエージェントの産業界での実践に向けたオープンソース活動の展望 - Japan Regional User Group (RUG) Meet-Up
Kosaku Kimura
 
PDF
第3回デジタル理学療法研究会学術大会シンポジウム「デジタル理学療法の組織活用:教育・管理・研究を繋ぐ新たな地平」の講演資料.
Matsushita Laboratory
 
PDF
SIG-AUDIO 2025 Vol.02 オンラインセミナー 「GDC2025 オーディオ報告会」SIG-Audio_GDC2025_報告会資料_渡辺さ...
IGDA Japan SIG-Audio
 
PDF
安尾 萌, 北村 茂生, 松下 光範. 災害発生時における被害状況把握を目的とした情報共有システムの基礎検討, 電子情報通信学会HCGシンポジウム2018...
Matsushita Laboratory
 
PDF
論文紹介:AutoPrompt: Eliciting Knowledge from Language Models with Automatically ...
Toru Tamaki
 
PDF
第3回デジタル理学療法学会のシンポジウム「デジタル理学療法の組織活用:教育・管理・研究を繋ぐ新たな地平」での話題提供
Matsushita Laboratory
 
PDF
安尾 萌, 松下 光範. 環境馴致を計量可能にするための試み,人工知能学会第4回仕掛学研究会, 2018.
Matsushita Laboratory
 
安尾 萌, 藤代 裕之, 松下 光範. 協調的情報トリアージにおけるコミュニケーションの影響についての検討, 第11回データ工学と情報マネジメントに関する...
Matsushita Laboratory
 
API認可を支えるKeycloakの基本と設計の考え方 ~ OAuth/OIDCによるAPI保護のベストプラクティス ~
Hitachi, Ltd. OSS Solution Center.
 
AIツールを使った研究の効率化 Improving Research Efficiency with AI Tools
Tohoku University
 
SIG-AUDIO 2025 Vol.02 オンラインセミナー 「GDC2025 オーディオ報告会」SIG-Audio_GDC2024_報告会資料_増野さ...
IGDA Japan SIG-Audio
 
論文紹介:Unbiasing through Textual Descriptions: Mitigating Representation Bias i...
Toru Tamaki
 
漁船に搭載されている電子装備と漁法について_VRC海洋学研究会_海のLT会発表資料
Yuuitirou528 default
 
マルチAIエージェントの産業界での実践に向けたオープンソース活動の展望 - Japan Regional User Group (RUG) Meet-Up
Kosaku Kimura
 
第3回デジタル理学療法研究会学術大会シンポジウム「デジタル理学療法の組織活用:教育・管理・研究を繋ぐ新たな地平」の講演資料.
Matsushita Laboratory
 
SIG-AUDIO 2025 Vol.02 オンラインセミナー 「GDC2025 オーディオ報告会」SIG-Audio_GDC2025_報告会資料_渡辺さ...
IGDA Japan SIG-Audio
 
安尾 萌, 北村 茂生, 松下 光範. 災害発生時における被害状況把握を目的とした情報共有システムの基礎検討, 電子情報通信学会HCGシンポジウム2018...
Matsushita Laboratory
 
論文紹介:AutoPrompt: Eliciting Knowledge from Language Models with Automatically ...
Toru Tamaki
 
第3回デジタル理学療法学会のシンポジウム「デジタル理学療法の組織活用:教育・管理・研究を繋ぐ新たな地平」での話題提供
Matsushita Laboratory
 
安尾 萌, 松下 光範. 環境馴致を計量可能にするための試み,人工知能学会第4回仕掛学研究会, 2018.
Matsushita Laboratory
 

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
  • 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.