CodeZine(コードジン)

特集ページ一覧

拡張機能を利用してVisual Studioをより便利にしよう

さらに使いやすく便利になった「Visual Studio」を始めよう! 第2回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2014/12/26 14:00

 Visual Studioはインストール直後の状態でも数多くの機能が搭載されており、非常に便利に使えます。しかし、使っていると「あれができれば」「これがもっと簡単にできないのか」といった不満が段々と出てくるものです。あなたのそういった不満は、もしかしたら「拡張機能」を利用すれば解決できるかもしれません。本記事では「Visual Studio Gallery」で公開されている拡張機能のいくつかについて、その機能、活用法を紹介します。

Visual Studioの拡張機能とは

 Visual Studioはバージョンが上がるごとに進化し、より便利になっています。特にVisual Studio 2012以降では四半期に一度「Update」という形でバージョンアップを繰り返すようになり、その傾向がより顕著になってきています。

 しかし、実際にアプリケーションの開発を継続的に行っていると、「あれができたらな」「もっと簡単にやりたい」といった欲が出てくるものです。そんな希望への答えの一つが、Visual Studio 2010より登場した「拡張機能」です。

拡張機能でできること

 「拡張機能」はその名のとおりVisual Studioの機能を「拡張」し、強化してくれます。どういったことができるのかは多種多様なため、一言で表すことはできませんが、主に次のようないくつかの方向性を持っています。

Visual Studio自体を強化する

 作成するプログラムの言語やプラットフォームを問わずに、Visual Studioがもともと持っているものを、さらに使いやすくするなどして強化します。例えば、「前回Visual Studioを終了した時のタブの状態を記憶して再現する」「複数のVisual Studioを判別しやすいよう、タスクバーに表示される縮小ウィンドウにソリューション名を表示する」といった機能を持つ拡張機能があります。

 例:

  • Productivity Power Tools
  • VSCommands
  • ReSharper
  • CodeRush
    など
特定の言語/プラットフォームのサポート強化

 使用するプログラミング言語ごとに、その編集を容易にするための機能を追加します。例えば、「LINQ形式への自動変換といった、より高度なリファクタリングを行う」「CSSの色指定時にプレビューして選択する」「OSSのテスティングフレームワークを用いたテストコードを実行する」といった機能を持つ拡張機能があります。

 例:

  • Web Essentials
  • Visual F# Power Tools
  • NUnite Test Adapter
    など
ライブラリ/テンプレート/インフラ/フレームワークの導入

 Visual Studioには標準で搭載されていないプラットフォームなどの開発を行える機能を追加します。例えば、「ゲームエンジンの一つであるUnityでの開発を行えるようにする」「ビヘイビア駆動設計をサポートするSpecFlowを組み込む」「WPFでのMVVMパターンを用いたアプリケーション開発用のインフラを導入する」といった機能を持つ拡張機能があります。

 例:

  • Visual Studio Tools for Unity
  • SpecFlow
  • Livet
    など
外部プロセスとの連携

 Visual Studioの外のプロセスと連携する機能を追加します。例えば、「GitやSubversionといったVCS(バージョン管理システム)の操作をVisual Studioから行う」「コード共有サイトのGistに編集中のファイルをアップロードする」「CI(継続的インテグレーション)ツールのJenkinsの操作をVisual Studioから行う」といった機能を持つ拡張機能があります。

 例:

  • Git Extnsions
  • AnkhSVN
  • GistSharpExtension
  • Jenkins Manager
    など

拡張機能の価格

 拡張機能の大半は無償で入手し、導入できます。しかし、中には有償で提供されているものもあります。

 例えば、C#/VBのプログラミングを強力にサポートするReSharperCodeRushといった拡張機能は、数万円という決して安くはない価格で販売されています。しかしその効果は絶大です。使いこなしていけば、標準のVisual Studioでは考えられないほど快適なプログラミングが行えるようになるでしょう。

拡張機能を使えるVisual Studioのエディション

 便利な拡張機能ですが、これまでは基本的にProfessional以上の有償のエディションでしか使用することができませんでした。無償のExpressエディションには、テンプレートとごく一部の拡張機能を除き、インストールすることはできないのです。

 しかし、この状況は2014年11月12日以降に一変しました。マイクロソフト社はProfessional相当の機能を持ち、もちろん拡張機能も使用できる「Visual Studio Community 2013」(以下、Visual Studio Community)をリリースしました。

 このVisual Studio Communityは個人の開発者はもちろん、OSS開発を行うなど一定の条件を満たしていれば企業内であっても無償で使用できます。したがって、拡張機能を誰でも活用できるようになったのです。本記事ではこのVisual Studio Communityを使って、説明を行っていきます。

 なお、企業内で使用する際の条件については、上記ページに簡単にまとめられていますので、ライセンス違反しないように内容を確認してからインストールしてください。

拡張機能のインストール方法

 拡張機能の概要が分かったところで、今度はどうやってインストールすればよいのかを説明していきます。

 拡張機能はVSIX(Visual Studio Extension)、Windowsインストーラー(MSI)、およびセットアップ用のexeファイルなどの形式で提供されています。これらをインストールする方法は大きく分けて以下の2つです。

1. Visual Studioの「拡張機能と更新プログラム」

 Visual Studioに統合された拡張機能の管理機能。

2. 「Visual Studio Gallery」からダウンロード

 拡張機能を配布している公式のWebサイト。

 順に見ていきましょう。

拡張機能と更新プログラム

 「拡張機能と更新プログラム」はその名のとおり、Visual Studioにインストールする拡張機能を管理する機能です。専用のダイアログから、拡張機能の検索、インストール、またすでにインストールされた拡張機能のアップデートを行うことができます。

 Visual Studioに統合されていることから、目的の拡張機能が決まっていれば簡単にインストールできるというメリットがあります。ただ、拡張機能がもつ機能の説明は最小限しか表示されないため、より詳しい説明を見たい時は2.の「Visual Studio Gallery」からダウンロードする方が向いているでしょう。

 「拡張機能と更新プログラム」を起動するには、Visual Studioのメニューより「ツール」→「拡張機能と更新プログラム」を選択します(図1)。

図1 「拡張機能と更新プログラム」起動メニュー
図1 「拡張機能と更新プログラム」起動メニュー

 すると「拡張機能と更新プログラム」ダイアログが表示されます(図2)。Visual Studioをインストールした直後でも、Visual Studioが標準で搭載している機能の多くが「拡張機能」として組み込まれているため、「インストール済み」の拡張機能が多数表示されます。

図2 「拡張機能と更新プログラム」ダイアログ
図2 「拡張機能と更新プログラム」ダイアログ

 新たな拡張機能をインストールするには、左のペインから「オンライン」を選択します(図3)。既定では「最も人気が高い」順に拡張機能が表示されますので、主要な拡張機能はここから探してもよいでしょう。

図3 「オンライン」から拡張機能を探す
図3 「オンライン」から拡張機能を探す

 しかし、実際は名前が分かっている拡張機能をインストールすることが多いと思います。そんなときは、右上にある検索ボックスにその拡張機能の名前の一部を入れることで、自動的に検索されます(図4)。

図4 "git"での検索結果
図4 

 目的の拡張機能が見つかったら、マウスでクリックして選択し、「ダウンロード」ボタンをクリックします(図5)。すると、拡張機能がダウンロードされた後ライセンス条項が表示されますので、ライセンスに同意するなら「インストール」ボタンをクリックすることで、拡張機能がインストールされます(図6)。

図5 拡張機能のダウンロード実行
図5 拡張機能のダウンロード実行
図6 ライセンス条項の確認
図6 ライセンス条項の確認

 インストールが終わると、拡張機能に丸いチェックマークのアイコンが表示されます。また、大半の拡張機能はインストール後にVisual Studioを再起動する必要があり、「拡張機能と更新プログラム」ダイアログでもそのように促されます。「今すぐ再起動」ボタンをクリックしてVisual Studioを再起動すると、インストールした拡張機能が有効になります(図7)。

図7 拡張機能インストール後
図7 拡張機能インストール後

Visual Studio Galleryからダウンロード

 「Visual Studio Gallery」はVisual Studioの拡張機能をまとめた公式サイトです。このサイトでは、拡張機能の入手と、「Visual Studio SDK」を用いて新たに作成した拡張機能のアップロードが行えます(図8)。「拡張機能と更新プログラム」も、内部的にはこちらのサイトの情報を使っています。

図8 Visual Studio Gallery
図8 Visual Studio Gallery

 サイトを開くと、「人気のある投稿」「評価の高い」投稿などの情報が表示されていますので、こちらに目的の拡張機能があれば直接ダウンロードページに行くこともできます。もちろん検索することも、右上の「Visual Studio ギャラリーで検索」とウォーターマークの付いたテキストボックスにキーワードを入力することで可能です。

 今回は「参照」ボタンをクリックして参照ページを表示してみましょう(図9)。このページでは検索するだけでなく、Visual Studioのバージョン、有償/無償/評価版、「タグ」により絞り込むこともできます。

図9 拡張機能の参照ページ
図9 拡張機能の参照ページ

 目的の拡張機能を見つけたら、その拡張機能のリンクをクリックしてみましょう。すると拡張機能の個別のページが表示され、より詳細な説明を見ることができます(図10)。また、その拡張機能を使っているユーザーによるレビューや、Q&Aもあるので、より深く拡張機能について知ることができるでしょう。

図10 拡張機能の個別ページ
図10 拡張機能の個別ページ

 拡張機能をダウンロードするには、個別ページの中の「ダウンロード」ボタンをクリックします。あとはダウンロードされたファイルを実行することで、拡張機能をインストールできます。

拡張機能の紹介:Web Essentials

 拡張機能の概要とインストール方法が分かったところで、ここからはいくつかの便利な拡張機能を紹介していきます。

 最初は「Web Essentials」です。

 Web Essentialsは、Web開発に向けた非常に多くのサポート機能を提供する拡張機能です。また、将来のVisual Studioに搭載されるWeb用機能(ASP.NET and Web Tools)の試験的な面もあるようで、過去にWeb Essentialsに搭載されていた機能が、Visual Studio側に吸収されたこともあります。

 Web Essentialsの機能は非常に多いため、すべてを紹介しきれませんが、いくつかのおすすめの機能を紹介します。すべての機能の紹介は、上記リンクのWeb Essentaials公式ページから確認してください。

CSSエディターのサポート

 CSSエディターの作業をサポートします。

色の補完

 色を指定する際、IntelliSense上にその色が四角で表示されるため、目的の色を選択しやすくなります(図11)。

図11 CSSの色の補完
図11 CSSの色の補完

 なお、色の視覚表示については、IntelliSenseだけでなく、その後もエディター上に表示されるようになるので便利です(図12)。

図12 CSSの色の視覚表示
図12 CSSの色の視覚表示
「!important」の補完

 強制的に反映させたいCSSプロパティに付ける「#!important」ルールの入力が補完されます(図13)。

図13 「#!important」の補完
図13 「#!important」の補完
フォント名の補完

 フォルト名も補完されます(図14)。

図14 フォント名の補完
図14 フォント名の補完
サポートブラウザー表示

 CSSプロパティにマウスカーソルを置くと、サポートしているブラウザーを確認できます(図15)。

図15 サポートブラウザー表示
図15 サポートブラウザー表示
CSSのMinify

 対象範囲を選択して右クリックし、コンテキストメニューより「Web Essentials」→「Minify selection」を選択することで、CSSをMinify(縮小化)できます(図16)。

図16 CSSのMinify
図16 CSSのMinify

JavaScriptエディターのサポート

 JavaScriptエディターの作業をサポートします。

JSHint、JSCSの結果表示

 JSHintおよびJSCSはJavaScriptの構文を静的解析するためのツールです。JavaScriptファイルの編集時、「エラー一覧」ウィンドウにJSHint、およびJSCSの実行結果が表示されます(図17)。

 JSHint、JSCSのチェックルールを変更したい時は、「WEB ESSENTIALS」メニュー→「Edit global JSHint settings (.jshintrc)...」もしくは「Edit global JSCS settings (.jscsrc)...」を選択すると、ホームフォルダにあたる%UserProfile%(C:\Users\ユーザー名)フォルダー配下の各ファイル(.jshintrc、.jscsrc)を編集できます(図18)。

図17 JSHint、JSCSの結果表示
図17 JSHint、JSCSの結果表示
図18 JSHint、JSCSのルールファイル編集
図18 JSHint、JSCSのルールファイル編集
すべての参照の検索

 対象のメソッド、関数にカーソルをあてて[Shift]+[F12]キーを押すと、そのメソッド、関数を参照している箇所が検索できます(図19)。

図19 すべての参照の検索
図19 すべての参照の検索
カッコの補完

 「(」や「{」といったカッコを入力すると、自動で閉じカッコが補完されます(図20)。

図20 カッコの補完
図20 カッコの補完

拡張機能の紹介:Productivity Power Tools

 Productivity Power Toolsは、Visual Studioでの作業の生産性を高めるための機能を多数追加する拡張機能で、Microsoftから提供されています。提供される機能は言語によらず有効なものが多いです。

 こちらの拡張機能も非常に機能が多いため、いくつかの機能を紹介します。すべての機能は上記リンクのページから確認してください。

Power Commands

 「ソリューション エクスプローラー」の右クリックメニューを拡張し、コマンドを追加します。

Remove and Sort Usings

 ソリューション、もしくはプロジェクトに含まれるコードファイルのusing(VBはImports)を整理し、使用されていないものを削除し、名前順に並び替えます(図21、22)。

図21 Remove and Sort Usingsコマンド
図21 Remove and Sort Usingsコマンド
図22 Remove and Sort Usingsコマンド実行結果
図22 Remove and Sort Usingsコマンド実行結果
Edit Project File

 Visual Studioのプロジェクトファイル(*.csproj、*.vbproj)を編集するには、Visual Studioとは別にテキストエディタなどで開く必要がありますが、この機能を使うとプロジェクトファイルをVisual Studio内で直接編集できます(図23、24)。

図23 Edit Project Fileコマンド
図23 Edit Project Fileコマンド
図24 Edit Project Fileコマンド実行結果
図24 Edit Project Fileコマンド実行結果

 プロジェクトファイルの編集が終わった後は、対象プロジェクトファイルを右クリックし、「プロジェクトの再読み込み」を選択することで再度読み込みます。

Copy As Project Reference/Paste Reference

 「プロジェクトの参照」としてコピーすることができます。コピーした参照は、追加したいファイルの「参照」で「Paste Reference」コマンドを実行します(図25)。

図25 Copy As Project Reference / Paste Reference
図25 Copy As Project Reference / Paste Reference

Solution Explorer Errors

 ソリューションエクスプローラー上で、警告/エラーのあるプロジェクト、フォルダー、ファイルを視覚化します(図26)。

図26 Solution Explorer Errors
図26 Solution Explorer Errors

Peek Definition

 対象のメソッドなどを[Ctrl]キーを押しながらクリックすると、その場にクリックしたメソッドなどの定義が表示され、直接編集することもできます(図27)。

図27 Peek Definition
図27 Peek Definition

Custom Document Well

 Visual Studioのタブ機能の使いやすさを向上させます(図28)。例えば次のような機能を提供します。

タブの復元

 前回ソリューションを閉じたときのタブの状態を復元します。

タブの色付け

 ソリューションごとにタブを色分けします。

タブの並び替え

 ソリューションごとに自動的にタブを並び替えます。

タブを閉じるボタンの追加

 タブの右端に閉じるための×ボタンを追加します。

図28 Custom Document Well
図28 Custom Document Well

拡張機能の紹介:VSCommands

 VSCommandsはProductivity Power Toosと同じように、Visual Studioにさまざまなコマンドなどを追加する拡張機能です。同じく多数の機能があるため、いくつか絞って紹介します。すべての機能は上記リンクのページより参照してください。

Solution Badge

 通常タスクバーでの縮小表示は、ウィンドウをただ縮小しただけのもので、複数のVisual Studioを起動していると、どのウィンドウがどのソリューションのものか分かりにくいです。VSCommandsのSolution Badge機能を有効にすると、この縮小表示が変更され、ソリューション名を判別しやすくなります(図29)。

図29 Solution Badge
図29 Solution Badge

Code Block End Tagger

 ある程度長いクラスやコードを書いていると、クラスやメソッド、foreachといったブロックの終わりが、どのブロックのものか分かりにくくなります。Code Block End Tagger機能はブロックの終わりにそのブロックの概要を表示し、クリックすることでジャンプもできます(図30)。

図30 Code Block End Tagger
図30 Code Block End Tagger

Solution Explorer拡張

 ソリューションエクスプローラー上で実行できる、以下のようなコマンドを追加します。

Compare Files

 2つのファイルを比較し差分表示します。

Copy/Paste Reference

 「参照」の中のdllファイルなどの参照情報を、プロジェクト間でコピー&ペーストします(Productivity Power Toolsにも同様の機能があります)。

Copy/Paste Link

 単一のファイルを複数のプロジェクトで共用したいとき、そのファイルへの「リンク」をコピーしてプロジェクトに追加します。Visual Studioの基本機能では「既存項目の追加」で行える「リンクとして追加」という機能に該当します。

Group Files

 複数のファイルをグループ化および解除できます。Visual Studioの基本機能では、例えば、Windows フォームアプリケーションでフォームのデザイナーが生成する「Form1.designer.csファイル」と分離コードの「Form1.csファイル」をグループ化するために使われている機能を簡単に使えるようにするための機能です。この機能を使うと、部分クラスなどを用いて複数のファイルに分けた同一クラスのファイルをまとめて管理することができます。

独自の拡張機能を作るには

 公開されている拡張機能だけでも十分便利にVisual Studioを使うことができますが、やはりより便利にしたり、ニッチな機能が欲しくなるときはあります。そんなときは、自分で拡張機能を作ってしまいましょう。

 拡張機能を作成するには、まず対象のVisual Studioの「Visual Studio SDK」をインストールします。

 Visual Studio SDKをインストールすると、「新しいプロジェクト」に「機能拡張」が増え、その中の「Visual Studio Package」プロジェクトを使うことで、独自の拡張機能を作成することができます(図31)。

図31 Visual Studio Packageプロジェクト
図31 Visual Studio Packageプロジェクト

 こういった方法で筆者が作成した拡張機能が「GistSharpExtension」です。Visual Studioのエディターで今開いているファイルを、GitHub社が管理しているソースコード共有サイトのGistにアップするだけの拡張機能です。

 このくらいの規模の拡張機能なら案外簡単に作成できますので、皆さんもぜひ挑戦してみてください。ただ、日本語での情報はかなり少ないので、MSDNライブラリやコード レシピのサンプル、GitHubなどに公開された既存の拡張機能のソースコードなどを参考にするとよいでしょう。

コード レシピのサンプル

 VSPackageのサンプルが、コード レシピ上でいくつか公開されています。例えば、以下のページでは、拡張機能で独自の「オプション」ページを作成する方法を紹介しています(サンプルはVisual Studio 2010 SDKが対象ですが、2013でも十分参考になります)。ぜひ、お試しください。
 

 なお、Visual Studio拡張に関するサンプルは、コードレシピのサイトで"VSPackage"をキーワードに「英語の検索結果を含む」にチェックを入れて検索すると、見つけやすいです。また、その後左下の「主要なテクノロジ」欄で「VSX」を選択すると、Visual Studio拡張に関するサンプルが一覧できます。

まとめ

 拡張機能は今やVisual Studioを用いた開発には欠かせないものとなっています。Visual Studio Communityの登場により、個人開発者をはじめとした多くの人が、その恩恵にあずかれるようになりました。多くの拡張機能を試していただき、自分に合ったものを探してみてください。

 また、便利な拡張機能があったら、ぜひブログやSNSなどで紹介してください。日本語での情報が増えることは、日本で開発を行うものにとって、非常にプラスになります。

 拡張機能を使って、より快適なVisual Studio開発ライフを送ってください。

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 高野 将(タカノ ショウ)

    <個人紹介> 新潟県長岡市在住の在宅リモートワークプログラマー。家事や育児、仕事の合間に長岡IT開発者勉強会(NDS)、Niigata.NET、TDDBCなどのコミュニティに関わったり、Web記事や書籍などの執筆を行ったりしている。著書に『アプリを作ろう! Visual C#入門 Visual C...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5