Visual Studio 2013 Update 4 - Web 機能 について
※ 2014/11/12 RC 版からリリース版に内容を修正しました。Update 4 の Web 機能（Web ツールというべきか） の内容は、同日に公開された Visual Studio 2015 Preview でも有効です。
2014/11/12 に Visual Studio 2013 Update 4 が公開されました。その内の Web 関連の機能について調べました。Web 関連の機能は "Web Tools 2013.4" といったように呼称されます。
主な内容としては、エディターの改善、Azure Web ジョブのツールがあります。
※ 一部、RC 版の画像を使用しています。
参考
目次
- 1.JSON エディターの改善
- Json スキーマによる検証機能の追加
- コンテキストメニューから Un-minify
- JSONスキーマの再読込
- 2.HTML エディターの改善
- Better client template formatting
- カスタム要素、Polymer要素、カスタム属性 への対応
- Web Components のためのインテリセンス
- HTML 要素のツールチップ
- #region のサポート
- タスク一覧におけるTODO, Hack 等 のコメントの対応
- 3.CSS/LESS/Sass エディターの改善
- タスク一覧におけるTODO, Hack 等 のコメントの対応
- LESS エディターにおける @viewport 対応
- スニペットをたくさん追加
- 4.Browser Link
- CSSの自動同期
- 5.Azure の Web ジョブのツール/SDK
- Azure の Web ジョブ SDK
- Web ジョブのプロジェクトテンプレートの追加
- 6.ASP.NET MVC/Web API/SignalR/Katana 各種の最新のバージョンに対応
- 7.今までの Update について
1.JSON エディターの改善
JSONスキーマの非同期読み込み、子スキーマのキャッシュ、インテリセンスの改善等といった、JSON エディターの改善が行われます。
その他、以下のような新機能が追加されます。
（※JSONエディターは 2013.2 で追加された機能です。2013.3 でも改善が行われました。）
JSON スキーマによる検証機能の追加
JSON スキーマによる検証機能が追加されました。JSON スキーマは上部のドロップダウンリストにて選択できます。
↑のサンプルでは、ドロップダウンリストに JSON スキーマのサンプル「http://json-schema.org/address」を選択しました。この内容は次のようになっています。
{
"description": "An Address following the convention of http://microformats.org/wiki/hcard",
"type": "object",
"properties": {
"post-office-box": { "type": "string" },
"extended-address": { "type": "string" },
"street-address": { "type": "string" },
"locality":{ "type": "string" },
"region": { "type": "string" },
"postal-code": { "type": "string" },
"country-name": { "type": "string"}
},
"required": ["locality", "region", "country-name"],
"dependencies": {
"post-office-box": "street-address",
"extended-address": "street-address"
}
}JSONスキーマの検証は、この内容の{ "type": "string"}や、"required": ["locality", "region", "country-name"]という情報から検証を行っているようです。
コンテキストメニューから 「アンミニファイ」
右クリックメニューから「アンミニファイ」を行えるようになりました。これにより配列を展開して表示できます。
逆に元に戻す―フォーマットするには、「Ctrl-K, Ctrl-D」または、右クリックメニューの「ドキュメントのフォーマット」をクリックします。
JSONスキーマの再読み込み
Visual Studio はネットからダウンロードしてきた JSON スキーマをキャッシュし、Visual Studio 再起動後もそのキャッシュを利用します。
もし、そのキャッシュをクリアにしたい場合は、右クリックメニューから「スキーマの再読み込み Ctrl+Shift+J」を選択することで、最新の JSON スキーマを読み込みます。
2.HTML エディターの改善
HTML エディターのバグ修正、改善が行われました。また、Web 標準に合わせたインテリセンスも更新さました。以下、新機能を紹介します。
クライアントテンプレートに対するフォーマットの改善
HTML エディターは二重括弧{{…}}のフォーマットや解析を行わなくなりました。
これにより、 AngularJS, Handlebars, Mustache といった二重括弧を扱うテンプレート構文を扱いやすくなります。
カスタム要素、Polymer での要素、カスタム属性 への対応
ここからは、Web Components に関わる内容が２つ続きます。
今までは、カスタム要素があると不明な要素として波線がついていましたが、もうカスタム要素や属性を検証することはなくなりました。余計な波線付きの警告もなくなります。
Web Components とは
Web Components のためのインテリセンス
Web Components の一部である HTML Imports <link rel="import" />インテリセンスに対応…？
これに関してはどういうインテリセンスかわからず。
HTML 要素のツールチップ
HTML 要素について、ツールチップにて説明が表示されるようになりました。
#region のサポート
HTML ページにおいても、<!-- #region hogehoge --><!-- #endregion -->で囲って記述をまとめられるようになりました。
また、選択した部分を region で囲むスニペットも追加されています。
コードを囲む方法についてはこちら：方法 : surround-with コード スニペットを使用する
タスク一覧におけるTODO, Hack 等 のコメントの対応
HTML ページにおいても、”TODO” や “HACK” といった、タスク一覧へ追加するためのコメントを記述できるようになりました。
コメントについては、方法 : タスク一覧のコメントを作成するをご参照ください。
3.CSS/LESS/Sass エディターの改善
CSS/LESS/Sass エディターのバグ修正、Web 標準のためのインテリセンスの更新、Selectors Level 4 のインテリセンス等の改善が行われました。
以下、新機能を紹介します。
タスク一覧におけるTODO, Hack 等 のコメントの対応
これは先ほどの HTML エディターでの追加と同じです。CSS/LESS/Sass ページにおいても TODO, Hack コメントに対応できるようになりました。
LESS エディターにおける @viewport 対応
LESS エディターにおいて、下のように記述すると警告がでていましたが修正されました。
スニペットをたくさん追加
スニペットがたくさん追加されました。
（Web Essentials でも media query に関するスニペットが用意されています。）
スニペットは、右クリックメニューの「スニペットの挿入(I)...Ctrl+K,X」から選択できます。
4.Browser Link
CSSの自動同期
CSS ファイルを保存した時、または外部により変更された時（LESS/Sass コンパイラにより生成された時など）、CSS ファイル全体が自動的にブラウザに反映されるようになりました。つまりブラウザをF5等で更新しなくても、自動的にCSSの変更が反映されます。
この機能は ツールバーから無効にすることもできます。
（CSS の自動同期は Web Essentials にもあったような？）
5.Azure の Web ジョブのツール
サーバーエクスプローラーから Azure Web サイト に含まれる Web ジョブの操作が追加されました。
「View Dashboard」から Azure WebJobs Dashboard へ飛ぶことができます。
Azure Web ジョブの SDK は 10 月に 1.0.0 がリリースされています。
Microsoft Azure WebJobs SDK の 1.0.0 RTM を発表 - Microsoft Azure Japan Team Blog (ブログ)
これまででも Azure SDK version 2.4 により Azure Web ジョブの操作が可能でした。
Web ジョブのプロジェクトテンプレートの追加
Web ジョブを作成するためのプロジェクトテンプレートが追加されました。このプロジェクトテンプレートではあらかじめ Web ジョブ SDK が含まれています。（＝NuGet の Microsoft.Azure.WebJobs パッケージがインストールされています。）
これも Azure SDK version 2.4 により以前から可能です。
6.ASP.NET MVC/Web API/SignalR/Katana 各種の最新のバージョンに対応
ASP.NET のプロジェクトテンプレートにて、以下のフレームワークの最新のバージョンに対応しています。
- ASP.NET MVC 5.2.2
- ASP.NET Web API 5.2.2
- ASP.NET Web API OData 5.3.1
- SignalR 2.1.2
- Katana 3.0
- NuGet 2.8.3
- ASP.NET Identity 2.1.0
- Entity Framework 6.1.1
7.今までの Update について
今までの Visual Studio 2013 の Web 関連の Update についてはこちら：
- 2013.3 Announcing new Web Features in Visual Studio 2013 Update 3 RTM
- 2013.2 ASP.NET and Web Tools 2013.2 for Visual Studio 2013 Release Notes
- 2013.1 Release Notes for ASP.NET and Web Tools 2013.1 for Visual Studio 2012
以下の項目は Visual Studio 2015 Preview のみの対応？ 2013 で試してもできませんでした。
- JSON エディターの検証機能に、プロパティの重複検出が追加。
- JSON エディターのインテリセンスが package.json/bower.json に対応。
- AngularJS, Bootstrap のインテリセンス候補にロゴ。
