Web Essentials の Visual Studio 2013 ブラウザー リンク拡張機能

  • Article

いよいよ ASP.NET Advent Calendar 2013 も最終日の 12/25 となりました。昨日の nnasaki さんからタスキを受け取ったものの、何を書こうかとても迷いまして・・・。という訳で、ここのところ連続でブログ記事を書いていたブラウザー リンクと、昨年の Advent Calendar でも書いていた Web Essentials ネタで締めたいと思います。（ASP.NET ガッツリなネタじゃなくてごめんなさい・・・）

◆◆◆

ASP.NET Web 開発にとても便利な Visual Studio 拡張機能のひとつ、Web Essentials を活用されている方も多いかと思います。

※ Web Essentials については下記の昨年の ASP.NET Advent Calendar 記事もご参照ください。Visual Studio 2012 ベースの内容ですが、Visual Studio 2013 でもほぼ同じとなっています。

この Web Essentials の最新版では、Visual Studio 2013 ブラウザー リンク の API を使った拡張機能が実装されています。

■ Web Essentials ブラウザー リンク拡張機能メニュー

Visual Studio 2013 でブラウザー リンクが有効の状態で実行した ブラウザー上で Ctrl キーを押す と、ウィンドウ下部にポップアップ メニューが表示されます。

image

※ マウス ホバー時以外は半透明で表示されます↓

image

また、Visual Studio 2013 のブラウザー リンクメニューにも Web Essentials の拡張機能コマンドが追加されます。

image

image

■ Design / Inspect モード

Design / Inspect モードでは、ブラウザー上でマウス ホバーすることで、対応したコードを Visual Studio 2013 のエディター上でハイライトすることができます。また、要素内テキストをブラウザー上で直接編集して、その変更をコード側にも即座に反映させることができます。

※ 現バージョンでは Design モードと Inspect モードの違いがあまりないように思うのは私だけでしょうか？

image

■ Save F12 changes / F12 auto-sync

ここでいう F12 は、IE でいうところの「F12 開発者ツール」のことを指しています。つまり、F12 開発者ツールを使って変更した HTML 要素や属性、CSS プロパティなどを Visual Studio 側のプロジェクト コードに反映させる機能が “Save F12 changes” で、これを自動でおこなうのが “F12 auto-sync” となります。

プレゼンテーション1

■ Unused CSS / Start Recording / Clear CSS Usage Data

これは Web ページに適用されている CSS スタイル シートで使われていないルールを探して、Visual Studio のエラー一覧ウィンドウに警告としてレポート表示する機能です。

プレゼンテーション2

■ ブラウザー リンク拡張について

ここでは、ブラウザー リンク拡張を使った Web Essentials の機能についてご紹介しましたが、このブラウザー リンク拡張を使って独自の機能を実装することもできます。詳細はまた次の機会にご紹介できればと思いますので、今回は関連リンクを下記に挙げておきますのでご参照いただければと思います。

■ 参考情報

■ まとめ

2013 年は、本格的に One ASP.NET のビジョンが実現された年となりました。それでは、来年 2014 年は ASP.NET においてどのような年になるのでしょうか？

私にもわからないところも多々ありますし、また、ここでは言えないことももちろんあります。ただ、一つ言えるのは、ASP.NET ベースの Web 開発も今以上に進化して変わってくる、ということです（その片鱗が垣間見れるのが、OWIN であったり Roslyn であったり ...）。この変化は、アプリケーション開発におけるトレンドやニーズに対して後れを取らずに、みなさまが望むアプリケーションを ASP.NET と Visual Studio、そして Windows Azure で迅速にサービス展開できるようにするための当然の流れであり、またマイクロソフトの使命でもあります。来年も引き続き ASP.NET とその関連テクノロジーに注目していただけると幸いです。

◆◆◆

ということで、今年の ASP.NET Advent Calendar 2013 もゴールです！

みなさん、本当に内容の濃い素晴らしい記事ですごいですね。このような形で各テーマに沿った形でまとまった情報が揃うのは本当にいいものです。来年も楽しみにしています～！

MP900448550_M