ライブラリ開発者のためのVisual Studio活用ガイド（1）
コードスニペットをVisual Studio拡張機能として広く配布しよう
コーディングを補助する便利なコードスニペットを作成したら、Visual Studioギャラリーで配布してみよう。その配布方法を解説する。
今や、ほとんどのVisual Studioの拡張機能は、「Visual Studio ギャラリー」もしくは「サンプル ギャラリー」から入手できるようになった。これらのサイト上の拡張機能やサンプルは、Visual StudioのIDEの［機能拡張と更新プログラム］ダイアログから検索して、ダウンロード、インストールできるので、Visual Studioユーザーの視点で見て、導入も本当に簡単で便利だ。
そのため、「コーディングを補助する何らかのコードスニペットを作成したので、より多くの人に活用してほしい」という場合には、このVisual Studioギャラリーから配布した方がよい（同様の形式のものには、例えば「jQuery Code Snippets 拡張機能」などがある）。本稿では実際にその配布方法を、次の3つのセクションに分けて解説する（※本稿ではVisual Studio 2013を使用）。
コードスニペットとは？
Visual Studioユーザーでコードスニペットを知らない、もしくは使ったことがない人はほとんどいないと思うが、Visual Studioにあまり詳しくない人向けに簡単に紹介しておこう。知っている場合は、後半の「コードスニペットのVisual Studio拡張を作成する方法」までスキップしてほしい。
Visual Studio内のコードエディター上で、例えば「prop」と入力すると、次の画面のようにIntelliSense（＝入力補完用のダイアログ）が表示される。
この状態で、Tabキーを連続して2回押すと、次の画面のように、コードの断片（＝コードスニペット）が挿入される。「int」の部分が選択状態になっているので、文字を入力されるとそこに上書きされる。選択部分の編集が終わったら、Tabキーを押すと、次の変更対象箇所（＝フィールド。次の画面では「MyProperty」）が選択される。このように変更が必要な箇所が自動選択され、Tabキーで移動できるようになっている。
このように、コードスニペットを使えば、コード記述を省力化できる。コードスニペットは手軽に作成できるので、定型のコードがある場合には、独自のコードスニペットを作ると便利だ。
コードスニペットの追加方法
コードスニペットの実体は「.snippet」という拡張子のXMLファイルで、そのファイルの所在はフォルダー単位で管理されている。その管理ツールが「コードスニペットマネージャー」だ（次の画面）。これを使って、フォルダー単位でコードスニペットを一括登録したり（＝［追加］ボタン）、既存の分類フォルダーに対して.snippetファイルを個別にインポートしたりできる。
メニューバーから［ツール］－［コード スニペット マネージャー］で表示できる。
また、自作の.snippetファイルを作成したら、単に「ドキュメント\Visual Studio 2013\Code Snippets」（※「ドキュメント」は筆者の場合は「C:\Users\masa-i\Documents」）フォルダー内に配置するだけで即座に使えるようになる。そのため、わざわざコードスニペットマネージャーを使わなくてもよい。
独自のコードスニペットの作成方法
本題からの脱線が続いているが、肝心のコードスニペットの作り方についても簡単に触れておこう。
コードスニペットは前述の通り、XMLファイルになっているので、手書きで簡単に作成できる。作り方の参考にしたいコードスニペットを決めて、前述のコードスニペットマネージャーでそのファイルの所在地を調べて、Visual Studioのコードエディターで開けばよい（次の画面は「C:\Program Files (x86)\Microsoft Visual Studio 12.0\VC#\Snippets\1041\Visual C#\class.snippet」を開いた例である）。あとはそのファイルを複製して、必要な箇所を修正すれば自作のスニペットが完成する。
XMLタグの意味は次のリンク先を参照してほしい（※例えばLanguage属性には、「VB」「CSharp」「CPP」「XML」「JavaScript」「SQL」「HTML」という値を指定できる）。
コードスニペット作成用のツールについても、筆者が使用しているものを名前だけ簡単に紹介しておこう。
SideWaffleの「Code Snippet」項目テンプレート
Visual Studio向けのテンプレートパックである「SideWaffle」をインストールすると使えるようになる.snippetファイル作成用テンプレート。
Visual Studio拡張機能の「Snippetizer」
マイクロソフト社純正の「Snippetizer拡張機能」をインストールした後、スニペット化したいコードを選択して、右クリックメニューから［Create Snippet］を実行すると、その選択行がスニペットプレビューとして編集できるようになる。そこで、例えば変更対象箇所としたい部分を選択して［Set selection as a field］をクリックする操作だけで、そこをフィールドにしたりできる。GUI操作で作りたい方にお勧め。
コードスニペットのVisual Studio拡張を作成する方法
いよいよ本題に入ろう。すでに.snippetファイルを作成済みのものとして話を進める。
VSIX／Code Snippetプロジェクトを作成するための環境準備
Visual Studioギャラリーでコードスニペットを配布するには、「.vsix」という拡張子のファイルである「Visual Studio拡張インストーラー（Extension Installer）」を作成しなければならい。.vsixファイルを作成するには、Visual Studio SDKが必要になるので、次のリンク先からインストールしよう。
- 最新のVisual Studio SDKのダウンロード
- バージョン別のダウンロード： 2012／2013
インストールしたら、［新しいプロジェクト］ダイアログで、左側のツリーから［テンプレート］－［Visual C#］－［拡張機能］を選択すると、中央に「VSIX Project」テンプレートが表示されるようになる。このテンプレートを使えばよいが、より手軽にコードスニペット用のVSIXプロジェクトを作成するためのテンプレートが、前述のSideWaffleで提供されているので、これも下記のリンク先からダウンロードしてインストールしよう。
インストールが完了すると、次の画面のように、［新しいプロジェクト］ダイアログで「Code Snippet Extension」テンプレートが表示されるようになるので、これを使って新規プロジェクトを作成しよう。
全.snippetファイルをVSIXコンテンツに含める
プロジェクトを作成したら、［ソリューション エクスプローラー］上にひな型ファイルが生成される（次の画面）。
.snippetファイルは「Snippets」フォルダーの配下に配置するが、その「Snippets」フォルダー内の階層は、以下のルールで作成する。
- 「Snippets」フォルダー（※Visual Studio拡張のインストール先フォルダー内に作成されることになる）
- 言語ごとのフォルダー（「C++」「CSharp」「CSS」「HTML」「JavaScript」「XAML」など）
- 分類用のフォルダー（例えば「WPF」「jQuery」「＜スニペットプロジェクト名＞」など。※前掲の「コードスニペットマネージャー」の図にある、左側の「ASP.NET MVC 4」などのフォルダーとして表示されることになる）
- 言語ごとのフォルダー（「C++」「CSharp」「CSS」「HTML」「JavaScript」「XAML」など）
最後の分類用のフォルダー内に.snippetファイルを配置する（＝［ソリューション エクスプローラー］上にドラッグ＆ドロップすればよい）。ただし、プロジェクトに追加しただけでは、コンテンツとして.vsixファイルに含まれない。そのため、［ソリューション エクスプローラー］で追加したファイル群を全て選択して、次の画面のように［プロパティ］ウィンドウで、
- ［ビルド アクション］プロパティの値を「コンテンツ」に
- ［Include in VSIX］プロパティの値を「True」に
設定変更する。
「registry.pkgdef」ファイルの編集
次に、［ソリューション エクスプローラー］上にある「registry.pkgdef」ファイル項目を開く。すると、例えば次のようなコードが記載されている。
|
// C#
[$RootKey$\Languages\CodeExpansions\CSharp\Paths]
"MyCodeSnippets"="$PackageFolder$\Snippets\CSharp\MyCodeSnippets"
|
ちなみに、下記のように、「$～$」の部分は置換文字列に展開される（※「$RootKey$」などの置換文字列について詳しくは、英語になるがこちらを参照されたい）。
- 「$RootKey$」： → Visual Studio 2013環境では「HKEY_CURRENT_USER\Software\Microsoft\VisualStudio\12.0_Config」というレジストリキー。
- 「$PackageFolder$」： → コードスニペットのパッケージがインストールされたディレクトリへのフルパス。
registry.pkgdefファイルは、名前の通り、インストール時にレジストリに情報を設定するためのものだ（※逆にアンインストール時に削除されて元に戻る）。構文や記述方法は、レジストリエディター（regedit.exe）で使われている.regファイルと同じようである（※構文や、定義済みの設定値については英語になるがこちらを参照されたい）。
上記の例では、「Expansion」（＝カーソル位置にコードスニペットを挿入する）型の「CSharp」言語用のコードスニペットのパスとして、「MyCodeSnippets」という名前のレジストリ値に、「$PackageFolder$\Snippets\CSharp\MyCodeSnippets」というデータが設定される内容になっている。ちなみに、キー名で指定できるプログラミング名は実際にレジストリを見て調べられるが、既存ではない言語名のコードスニペットを登録することも、手間は掛かるが可能なようである。詳しくは「こちら（英語）」が参考になる。
「source.extension.vsixmanifest」ファイルの編集
最後にsource.extension.vsixmanifestファイルの内容を編集すれば完了だ。このファイルは、VSIXパッケージの構成内容を記述した「VSIX配布マニフェストファイル」である。
Visual Studioでこのファイルを開くと、以下のようなデザイナー画面が表示されるので、必要な項目を上から順番に入力していく。
［Metadata］タブを開く：
［Install Targets］タブを開く：
［Assets］タブを開く：
［Dependencies］タブを開く：
［Icon］は32×32ピクセルで、［Preview Image］は200×200ピクセルで作るとちょうどよいようだ。
［Install Targets］タグで追加する各対象製品の［Version Range］欄には12.0（＝Visual Studio 2013）など個別のものを設定し、Visual Studio 2012もサポートするなら11.0を新規追加する。上記の例では、[12.0,13.0)と記載しているが、[～]は「指定バージョン内の全てのUpdate版を含める」という意味で、[～)は「指定バージョンの最新アップデートは含めない」という意味になるが、基本的にはあまり使わないだろう。
各項目の説明は割愛する。英語になるが、下記のドキュメントを参考にしてほしい。
.vsixファイルの完成と、テスト
あとはソリューションをビルドするだけだ。［標準］ツールバーで［ソリューション構成］を「Release」に変更し、メニューバーから［ビルド］－［ソリューションのビルド］を実行する。ビルドが完了したら、［ソリューション エクスプローラー］でプロジェクト項目の右クリックメニューから［エクスプローラーでフォルダーを開く］を実行し、開かれたフォルダーの中の「bin\Release」を見ると、.vsixファイルが作成されているはずだ（次の画面）。
それでは、.vsixファイルをダブルクリックして実行してみよう。以下のようにVSIXインストーラーが立ち上がり、正しくインストールできた。
Visual Studioギャラリーに登録する方法
完成したコードスニペットを世界中の人に使ってもらおう。これには冒頭で説明したようにVisual Studioギャラリーで配布するのがベストだ。
まずは次のリンク先を開き、［アップロード］ボタンをクリックしよう。それ以降は、指示に従って公開内容を指定していく（以下の画面）。
以上の手順で、Visual Studio拡張機能として作成したコードスニペットのページが、Visual Studioギャラリー上に作成できる。最後に［公開］というリンクをクリックすることで、全世界に向けて自作のコードスニペットを公開できる。
■
ここまで説明したように、コードスニペットの作成から公開まではそれほど難しくない。自作の便利スニペットがあるなら、ぜひ世界に公開してみてほしい。
