Visual Studio 2017 用の Xamarin.Forms プロジェクトテンプレートの VSIX を作った話

## はじめに

この記事は、田淵義人さんが作成した Xamarin 用のプロジェクトテンプレートの VSIX を作成した時の手順メモです。
以下のプロジェクトテンプレートの VSIX を作成しました。

- [XamarinFormsPCLTemplate](https://github.com/ytabuchi/XamarinFormsPCLTemplate)
    - PCL 版の Xamarin.Forms プロジェクトテンプレート
- [XamarinNativePCLTemplate](https://github.com/ytabuchi/XamarinNativePCLTemplate)
    - プロジェクトのコア部分が PCL のクラスライブラリで構成された Xamarin ネイティブのプロジェクトテンプレート

## プロジェクトテンプレート用の VSIX の作り方

ここでは、プロジェクトテンプレートを作った時の流れを記載しておきます。

### 事前準備

VSIX を作成するには、Visual Studio に拡張機能開発用のツールが必要です。インストールされていない場合は、Visual Studio のインストーラーから、拡張機能開発用のツールをインストールしておいてください。

![VSInstaller](https://gist.githubusercontent.com/tafuji/b04ce2271baa2a471bab08dae73efc0e/raw/b85af67d6e7570aabf90a07ff222d5302b184c03/01-InstallVSExtensionDevelopment.png)

### VSIX プロジェクトを作成する

Visual Studio のプロジェクトの新規作成で、[Extensibility] のツリー内の [VSIX Project] を選択してプロジェクトを作成します。

![CreateVSIXProject](https://gist.githubusercontent.com/tafuji/b04ce2271baa2a471bab08dae73efc0e/raw/b85af67d6e7570aabf90a07ff222d5302b184c03/02-CreateVSIXProject.png)

### プロジェクトテンプレート用のプロジェクトを作成する

Visual Studio のプロジェクトの追加ウィンドウで、[Extensibility] ツリー内の [C# Project Template] を選択します。

![CreateProjectTemplateProject](https://gist.githubusercontent.com/tafuji/b04ce2271baa2a471bab08dae73efc0e/raw/358cf9eebb515dda84f08b4054ea10d4b1e097ea/03-CreateProjectTemplateProject.png)

### プロジェクト構造

二つのプロジェクトが作成されます。

![ProjectStructure](https://gist.githubusercontent.com/tafuji/b04ce2271baa2a471bab08dae73efc0e/raw/b79120096c7830df3e3d5a8305a8197b02e5cf99/04-EditVSIXManifestFile.png)


- VsixProject
    - Visual Studio の拡張機能のインストーラーを作成するためのプロジェクト
- Template
    - プロジェクトテンプレートのコンテンツを管理するプロジェクト

ビルド時にパスが長すぎてビルドエラーが出る場合があるので、プロジェクト名は短い方がよいです。

### テンプレートのコンテンツをプロジェクトに追加する

プロジェクトテンプレートプロジェクトにテンプレートのコンテンツを追加します。

![project-structure](https://gist.githubusercontent.com/tafuji/b04ce2271baa2a471bab08dae73efc0e/raw/c3a6d7add4dca0a86979ea2d8621483b9ccff87e/06-ItemContents.png)

せっかくなので、Visual Studio の新規プロジェクト作成ウィンドウで、[Closs-platform] の中にプロジェクトテンプレートが表示されるようにします。
この設定は、ルートとなる ```vstemplate``` ファイルのプロパティの設定で行います。プロパティウィンドウの ```VSTemplate``` で ```Category``` の値に ```Cross-Platform``` を設定します。

![Category](https://gist.githubusercontent.com/tafuji/b04ce2271baa2a471bab08dae73efc0e/raw/97f8f165e5d181bb8a03d7eba79059a091b49d01/07-project-category.png)

### VSIX プロジェクトのアセットにプロジェクトテンプレート用のプロジェクトを追加する

VSIX プロジェクトの ```source.extension.vsixmanifest``` ファイルを開いて、```Asset``` を選択しアセットを新規追加します。

![Asset](https://gist.githubusercontent.com/tafuji/b04ce2271baa2a471bab08dae73efc0e/raw/80cf78aa58742b1901cf25c8707c18312e993b94/08-Asset.png)

新規作成ウィンドウで、```Type``` で、```Microsoft.VisualStudio.ItemTemplate``` を選択、```Source``` で ```A project in current solution``` を選択、 ```Project``` でプロジェクトテンプレートのプロジェクトを選択します。

![ProjectTemplate](https://gist.githubusercontent.com/tafuji/b04ce2271baa2a471bab08dae73efc0e/raw/979fa19ae520343c185fe31ea9feb13046c4d2ca/09-ItemTemplateProject.png)

### テンプレートのデバッグ

VSIX プロジェクトをデバッグすると、Visual Studio の拡張機能をデバッグするための Visual Studio が起動します。この環境を利用して作成したテンプレートが正しく動作するかをデバッグすることができます。

### ビルドして VSIX ファイルを作成する

VSIX のプロジェクトをビルドするとインストーラーが作成されます。

![vsixinstaller](https://gist.githubusercontent.com/tafuji/b04ce2271baa2a471bab08dae73efc0e/raw/3d62b3708e8c298bdc714f27ab5c63de4c8814b1/10-VSIXInstaller.PNG)

## まとめ

Visual Studio の拡張機能を利用すると、プロジェクトテンプレートの作成、デバッグ、インストーラーの作成が比較的簡単にできますので、ぜひトライしてみてください。

## 謝辞

田淵義人さんが作成した Xamarin 用のプロジェクトテンプレートのおかげで、テンプレートのインストーラーの作成と記事の執筆ができました。
本当にありがとうございます。

## 参考

今回作成した VSIX は、GitHub に公開しています。

- [XamarinFormsPCLTemplate](https://github.com/tafuji/XamarinNativePCLTemplate)
    - PCL 版 Xamarin.Forms プロジェクトテンプレート
- [XamarinNativePCLTemplate](https://github.com/tafuji/XamarinNativePCLTemplate)
    - プロジェクトのコア部分が PCL のクラスライブラリで構成された Xamarin ネイティブのプロジェクトテンプレート