yotiky Tech Blog

とあるエンジニアの備忘録

HoloLensでVuforiaを使う ~応用編~ (Unity&MRTK 2017世代)

前回、Vuforiaを導入する基本的な手順をまとめました。今回は応用編として、基本から少しだけ踏み出したTipsを紹介しておきます。
前回の続きになりますのでご覧になられていにいない方は以下を参照ください。

yotiky.hatenablog.com

また、Vuforiaに関してはこちらにもまとまってますのでぜひご一読ください。 github.com

目次

TL;DR

Vuforiaは位置合わせでよく使いますが、Vuforia自体が重かったり、(RS4の場合)画像キャプチャや動画撮影などが行えないなどの不都合が生じるため、不要になったタイミングで機能をOFFにします。しかし、このまま機能をOFFにするとImageTarget配下にあるコンテンツ自体が表示されなくなってしまうため、コンテンツ自体は外に逃した上で、ImageTargetのPositionとRotaitonを同期するようにしなければなりません。また、ImageTarget配下に何もないとトラッキングができているのかどうかわからなくなってしまうので、代わりの3Dオブジェクトをおいてあげます。

f:id:yotiky:20180816032331p:plain

サンプルで使用したソースコードは下記を参照ください。

github.com

内容

白い皿

まず、コンテンツ自体をVuforiaの有効/無効に関係なく表示するため外に逃がします。
新たにModelsという空のGameObjectを作成し、ImageTarget配下にあった3Dオブジェクトをドラッグアンドドロップします。
ModelsのTransformが初期位置になっているか確認した上で行ってください。子に含めた後に親の位置やサイズを変えると、子の値も相対的に変化してしまいます。

image.png (2.7 kB)

さてこのままでは、Vuforiaがトラッキングできているのかどうかわからなくなってしまうため、代わりの3Dオブジェクトを置きます。 よく使っているのは、マーカーと同じサイズの薄い皿(板)を少しだけ浮かせて表示させる方法です。

ImageTarget配下にマーカーと同じサイズの薄い皿を作成します。

image.png (2.4 kB) image.png (7.4 kB)

image.png (82.6 kB)

青い皿

HoloLensでUnityを触り始めた人がすぐ直面するのが、3Dオブジェクトに色を付けたいだけなのにDefault-Materialが何一つ変更できなくて途方にくれることではないでしょうか。 最初の一歩として白以外の色を使ってみましょう。

Project上で新たにMaterialを作成します。

image.png (3.9 kB)

Rendering ModeをTransparentにし、Albedoで適当な色を選択します。

image.png (56.3 kB)

前項で作った薄い皿のInspectorを開いて、Materialsを展開し、作ったばかりのMaterialをドラッグ・アンド・ドロップします。

image.png (10.6 kB)

image.png (92.1 kB)

これでVuforiaがマーカーを認識すると、青い皿がオーバラップされて表示されるようになりました。 Unity のレンダリングには マテリアル、シェーダー、テクスチャ が使用されますが、ここではこれ以上踏み込まないので各自調べてみてください。

皿はマーカーと同じサイズを指定しているので現実のマーカーにピタッと重なって欲しいところですが、実際は多少ズレます。これはVuforiaを使った位置合わせで全体のズレを意味します。ただ、HoloLensは現状ではこの手法が一番現実的な実装で誤差の少ない手法になるかと思いますので、そのへんも頭の片隅においておくと良いかもしれません。

VuforiaをOFFにする

次にVufoiraがマーカーを認識したらコンテンツの位置を同期します。 今回は同期のトリガーとして青い皿をタップすることにします。

Project上で、MarkerTrackerと言う名前のスクリプトを追加します。
ほかのオブジェクトにマーカーの位置を通知する方法は、ReactiveProperty、Event(delegete)、直接受け渡しするなどなど色々ありますが、ここでは簡略化してActionを使います。
ソースコードは以下の通りです。

public class MarkerTracker : MonoBehaviour, IInputClickHandler
{
    public Action<Transform> Click { get; set; }

    public void OnInputClicked(InputClickedEventData eventData)
    {
        if(Click != null)
        {
            Click(transform);
        }
    }
}

このクラスはアタッチしたGameObjectをクリック(AirTap)すると、プロパティのCilckアクションに自分のTransformを渡して呼ぶだけのクラスです。 利用したい側でCilckアクションに処理を紐づけてあげます。

続いて、PositionAdjustmentと言う名前のスクリプトを追加します。 こちらは利用したい側になります。

public class PositionAdjustment : MonoBehaviour
{
    public MarkerTracker marker;
    public GameObject contents;

    void Start()
    {
        marker.Click = m =>
        {
            contents.transform.position = m.position;
            contents.transform.rotation = m.rotation;
            contents.SetActive(true);
            VuforiaBehaviour.Instance.enabled = false;
        };

        contents.SetActive(false);
    }
}

UnityのInspectorでMrakerTrackerと位置合わせしたいコンテンツ(3Dオブジェクト)を設定し、それぞれをひもづけて処理します。
起動時にコンテンツは非表示にし、クリックした際に位置を合わせて表示します。 また位置合わせが完了するので、このタイミングでVuforiaをOFFにします。

ハマることがあるとすると、GameObjectやVuforiaを無効化した際にアタッチされてるコードが無効化されて上手く機能しないケースでしょうか。 GameObjectの関係やコードの寄生先には注意をはらいましょう。

最後にUnity上でスクリプトをアタッチしましょう。

青い皿にMarkerTrackerを。

image.png (2.3 kB) image.png (12.8 kB)

ModelsにPositionAdjustmentを。

image.png (2.5 kB) image.png (22.0 kB)

PositionAdjutsment > Markerには青い皿、Contnetsにはコンテンツ(3Dオブジェクト)を設定します。

image.png (96.4 kB)

以上になります。
実機で動作を確認してみてください。

HoloLensでVuforiaを使う (Unity&MRTK 2017世代)

サンプルやデモ用のアプリを作るに当たり、Unityプロジェクトを作成し、Vuforiaの設定まで終わらせる一連の流れがよくでてきます。参考にさせて頂いているサイトはいくつかありますが、情報が古くなって所々違いが見られるため、手順の覚書として書き記しておきます。(主に私用)

Vuforiaに関してはこちらにもまとまってますのでぜひご一読ください。 github.com

目次

TL;DR

Vuforiaのポータルでマーカー画像を登録します。
そのデータをもとにHoloLensでマーカーを認識し、マーカーの上に3Dオブジェクトを表示します。

サンプルで使用したソースコードは下記を参照ください。

github.com

開発環境

  • Unity:2017.4.5f1
  • MRTK:2017.4.1
  • VisualStudio:2017
  • OS:HoloLens RS4

内容

マーカーの準備

適当な画像を用意してください。
もしくは、QRコード生成サイトなどでQRコードの画像をマーカーとして入手しましょう。

image.png (22.2 kB)

上記はサイト「QRのススメ」さんで作成した例です。 小さいとHoloLensが認識しづらいのでなるべく大きなサイズで作ります。 また、VuforiaのターゲットにPNGが使えないためJPGで保存します。

VuforiaポータルでDatabaseを取得

ライセンスの発行

Vuforiaのポータルサイトに行ってログインします。 アカウントを作っていない人は作りましょう。

ログインしたら、Develop > License Manager > Get Development Keyをクリック。
ライセンスについては各自調べてください。開発用には無料のDevelopmentで大丈夫(なはず)。

image.png (20.5 kB)

App NameをつけてチェックボックスにチェックしてConfirmをクリック。

image.png (42.8 kB)

作成したアプリケーションのページを開いてライセンスキーをコピーしておきましょう。あとでUnityで使います。

screenshot.206.png (14.2 kB)

Databaseの作成と取得

Develop > Target Manager > Add Databaseをクリック。

image.png (18.8 kB)

名前をつけて、Deviceを選択してCreateをクリック。

image.png (21.9 kB)

作成したデータベースを開いて、Add Targetをクリック。

Single Imageを選んで、用意した画像またはQRコードを選択します。 WidthはUnity上でも変更できるので1(単位はm)、NameをつけてAddをクリック。

image.png (53.0 kB)

これでターゲットに登録されます。
Ratingは特徴点で、星が多いと画像が認識されやすくなります。 対象のターゲットを開いて、画像下のShow Featuresを押すと特徴点を確認できます。

image.png (36.4 kB)

Databaseに含めるマーカーを選択してDownload Database、もしくはDownload Database(All)をクリックでもOK。
Unity Editorを選んでDownloadをクリック。

image.png (26.6 kB)

[Database名].unitypackage が保存されます。後ほどUnityにインポートします。

プロジェクトの初期設定

Unity を起動して、新しいプロジェクトを作成します。
まずはMRTKのunitypackageをインポート。

続いてメニューから、Mixed Reality Toolkit > Configure の項目を上から順に実行します。

  • Apply Mixed Reality Project Settings > そのままApplyをクリック。

    上記Applyで変更される箇所を補足しておくとつぎの通りです。 撮り忘れましたがQuality SettingsもHoloLens用にVery Lowで設定されているかと思います。

    Build Settings

    変更前 変更後
    -PlatformをUWPに変更
    -Target DeviceをHoloLensに変更

    Player Settings

    変更前 変更後
    -Scripitng Backendを.NETに変更
    -Virtual Reality Supported をHoloLens用に設定

    Tag & Layers

    変更前 変更後
    -Layer31にSpatial Mappingを設定
  • Apply Mixed Reality Sceen Settngis > そのままApplyをクリック。

    開いているシーンをHoloLens用にカスタマイズされるので、Ctrl + S でシーンに名前をつけて保存します。

    image.png (15.8 kB)

    ついでに Ctrl + Shift + B でBuild Settingsを開き、忘れがちなビルドにシーンの追加をしておきましょう!

  • Apply UWP Capability Settings > 以下のように設定してApplyをクリック。

    これでPlayer Settings > Publishing Settings > Capabilities に設定が反映されます。

    image.png (18.4 kB)

ここまでがHoloLensの実装を始める前の一般的なプロジェクトの準備でした。 使いたい機能に応じて設定の内容は適宜変更してください。

実装

続いて、Vuforiaの機能を使ったアプリのコンテンツを実装していきます。
予めダウンロードしておいたVuforiaのDatabaseをインポート。

image.png (56.1 kB)

Player Settings > XR Settings を開いて、Vuforia Augmented Reality Supported にチェック。

image.png (11.5 kB)

HierarchyにVuforia > Image を追加します。
Vuforiaのアセットをインポートするか聞かれるので、Importをクリック。

image.png (39.1 kB)

Assets > Resources > VuforiaConfiguration を開いて次のように設定します。

  • 予めコピーしておいたライセンスキーを入力します。

    image.png (10.4 kB)

  • Digital Eyewear と Databaseを設定します。

    image.png (17.9 kB)

    Databaseを設定した後にVuforiaのImageオブジェクトを追加するとDatabaseが更新されるので注意してください。
    また、Vuforiaの設定周りをいじくってるときにも、たまにDatabaseの設定が初期化されてることがあるので要注意です。

先程追加したImageオブジェクトの設定に戻ります。
Inspectorを開いて、DatabaseとImage Targetをインポートした画像のものに変更します。
Advancedの項目を開いて、実際にHoloLensのCameraで取り込む際のマーカーの実寸サイズを入力します。(単位はmなので10cmなら0.1など)

image.png (22.5 kB)

Hierarchy上で、Imageオブジェクトの配下に任意の3Dオブジェクトを追加します。配下に追加することで、VuforiaがImageを捉えた時だけマーカーの上に表示されるようになります。 サンプルでは豆腐をマーカーの少し上に浮かせています。

image.png (6.9 kB)

MixedRealityCameraにVuforiaBehaviourコンポーネントを追加します。

image.png (5.9 kB)image.png (28.5 kB)

また、その上にあるMixed Reality Camera ManagerのTransparent Display Setitngs > Near Clip は、3Dモデルが表示される一番短い距離です。 デフォルトの0.85(m)が推奨ではありますが、デスクで作業していると0.85がとても遠いので任意で近くまで表示しましょう。(もちろん非推奨)

ここまででVuforiaに登録したマーカーを使って、マーカーを認識するとその上にオブジェクトが表示されるようになりました。

ビルドして実行

Build Settingsを開き、Unity C# Projectsにチェックを入れてBuildをクリック。
UWPフォルダを作成し、そのフォルダを選択して実行します。Appフォルダを指定するサンプルもありますが、後述のMRTKのBuild WindowのデフォルトはUWPなので、揃えておけば余計なフォルダが増えなくてよいかと思います。
ビルドが成功するとエクスプローラでUWPフォルダが開きますので、Visual Studioでソリューションを開きます。

または、Mixed Reality Toolkit > Build Windowをクリックし、ウィンドウを表示します。
Unity Build Optionsタブで、Unity C# Projectsにチェックを入れてBuild Unity Projectをクリック。
ビルドが成功するとダイアログで教えてくれるので、Open in Visual Studioをクリックすれば直接ソリューションを開けます。

ソリューションを開いたら、プラットフォームをx86にし、実行環境をDeviceに変更して実行します。

以上。

注意事項

執筆時の開発環境であるRS4では、VuforiaをONにしているとCameraを専有するらしく、写真、動画の撮影ができません。 Vuforiaは位置合わせに使われることが多く、不要になったら機能をOFFにすることをおすすめします。

動作の確認は取れていませんが、以下の挙動をするとの情報があります。
バージョンによって挙動が異なるので、VuforiaでCameraを使う場合はそのあたり気にして調べてみてください。

  • RS1:録画のみいける
  • RS4:全部ダメ
  • RS5:録画もPreviewもいけるらしい?

※詳細分かれば更新かけます。ご存知の方ご一報を。

esaのチートシート

編集履歴

  • 2018/11/16 注釈の項を追加
  • 2018/11/22 タイトルに#と/を含める書き方を追加

公式よりMarkdown記法

Markdown以外

Markdown Tips

  • ページ内リンク
  • 改行
    • 行末に半角スペース2つ
    • <br/>
  • 画像(サイズ指定)
    • <img src="URL" width="数値" alt="代替テキスト">
  • Tableの配置
左揃え 中央揃え 右揃え
aaa bbb ccc

  1. hogehogehogehoge

  2. fugafugafugafuga

  3. piyopiyopiyopiyo

  4. hauhau

Visual Studio で Azure Functions に HttpTrigger のAPIを作成する

TL;DR

Visual Studio でAzure Functions のAPIを実装します。その後、Visual StudioからAzure App Serviceを新規作成し発行します。 また、PostmanおよびPowershellを使ってローカルでの確認とAzureで動作確認します。 APIはHttpTrigger(GET/POST)で、リクエストとレスポンスにJSONを使います。 開発環境の準備は含まれないため、Visual Studio を使用する Azure Functions の開発 などを参考にしてください。

目次

プロジェクトを作成する

  1. Visual Studioで[ファイル > 新規作成 > プロジェクト]を選択し、[Visual C# > Cloud > Azure Functions]を選択して、任意の場所に設定してOKをクリック。 f:id:yotiky:20180809002055p:plain
  2. Http Trigger を選択してOKをクリック。 f:id:yotiky:20180809002059p:plain
  3. Function1という名前のサンプルが生成される。

Functionを実装する

  1. クラス名とファイル名、FunctionNameを「Echo」に変更。
    public static class Echo
    {
        // Invoke-RestMethod -Uri "http://localhost:7071/api/Echo" -Method Post -ContentType "application/json" -Body '{"message":"Hello Azure Functions" }'
        // Invoke-RestMethod -Uri "https://YourFunctionURL" -Method Post -ContentType "application/json" -Body '{"message":"Hello Azure Functions" }'  
        [FunctionName("Echo")]
        public static async Task<HttpResponseMessage> Run([HttpTrigger(AuthorizationLevel.Function, "get", "post", Route = null)]HttpRequestMessage req, TraceWriter log)
        {
  1. リクエストクラスを作成。
class EchoRequest
{
    public string message { get; set; }
}
  1. 変数名をnameからmsgに。
  2. クエリパラメータを取得するところをnameからmessageに修正。
  3. bodyからパラメータを取得するところを修正。
            if (msg == null)
            {
                // Get request body
                var data = await req.Content.ReadAsAsync<EchoRequest>();
                msg = data?.message;
            }
  1. Jsonを扱う名前空間を追加。
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
  1. レスポンスを作成する部分を実装する。
    1. IdとしてGuidのハイフンなしを発行。
        var jObject = new JObject();
        jObject["Id"] = Guid.NewGuid().ToString("N");
        jObject["Message"] = msg;

        var res = req.CreateResponse(HttpStatusCode.OK);
        res.Content = new StringContent(jObject.ToString(Formatting.None));

        return res;

ローカルで実行する

  1. F5でデバッグ実行。
  2. Postman で試す方法。
    1. GET
      1. GETを選択、URL欄右のParamsをクリックで展開してパラメータ入力 f:id:yotiky:20180809002102p:plain
    2. POST
      1. POSTを選択、BodyタブでrawとJSON(application/json)を選んでJSONで入力(GETのパラメータが残ってたらチェック外す) f:id:yotiky:20180809002105p:plain
  3. PowerShellで試す方法。
Invoke-RestMethod -Uri "http://localhost:7071/api/Echo" -Method Post -ContentType "application/json" -Body '{"message":"Hello Azure Functions" }'

Azureに発行する

  1. プロジェクト右クリックから発行を押すか、ビルド > [プロジェクト名] を発行する を選択する
  2. 今回は新規作成
    f:id:yotiky:20180809002109p:plain
  3. 必要な情報を入力または選択して作成
    f:id:yotiky:20180809002112p:plain

Azure Functionsの動作確認

  1. Azure Portal で関数のURLを取得する
    f:id:yotiky:20180809002116p:plain f:id:yotiky:20180809002120p:plain
  2. PostmanまたはPowerShellで実行。ローカルで実行するを参照。

de:code 2018 で個別に公開されたセッション資料等

参加者向けに de:code 2018 の資料が公開され始めたようですが、私はブースに少し顔を出しただけなのでまだ見れないようです。。
de:code 2017 で検索するとおよそ3週間後とかに公開されたようで、ちょっと熱冷めそうなので、現在(5/30時点で)拾えたものをメモっておきます。
今回は参加レポ等は省略、登壇者が公開されたサイトをベースに集めています。登壇者がご自身で補足されているものもあるので気になる内容がある方は必読。

※動画と資料が公開されたようですので、以降補足としてご利用ください。(2018/6/3更新)
※リンクが切れていたので差し替えました。動画は見当たりませんが。。(2020/6/2更新)

www.microsoft.com

目次

AI:AI

AI61 C#ニューラルネットワークをスクラッチで書いて機械学習の原理を理解しよう

AC:App Client

AC02 最新 Windows10 に最適なデスクトップアプリ開発手法ご紹介

AC16 HoloLens×AI×IoTアプリが開発できるまでの挫折と成功

AC62 簡単!!HoloLensで始めるCognitive Services~de:code 2018 特別バージョン~

AD:App Development

AD05 ハードコア デバッギング :サポート直伝! Azure Webアプリケーション バグバスター!!

AD08 Visual Studio App Center でモバイルアプリ開発/運用サイクルを高速化させよう!

AD09 進化する Web ~ Progressive Web Apps の実装と応用 ~

AD13 DevOps エンジニアに送るガチ Kubernetes 講座with Azure Kubernetes Service (AKS)

AD15 NoOps へ舵を切れ ~ Azure で実現するサーバレス自律運用システム

AD16 3大フレームワーク(Angular, React, Vue.js)比較によるエンタープライズ Web アプリケーション開発の最適化

AD19 .NET Core 2.x 時代の C

AD21 開発者におくる Power BI を使う時に考えるべきアーキテクチャ ~ データを溜めるのは誰だ? ~

AD25 Angular でもっと API ファースト・もっとモダンデザインなWebアプリケーションを作ろう!

AD28 ワタシハ Azure Functions チョットデキル

AD35 オープンソースのマイクロサービス/コンテナー プラットフォーム「Azure Service Fabric」の使いどころ

AD45 今からはじめる Xamarin.Forms 開発~Build 2018 で発表された最新情報も添えて~

AD62 App Center Analytics を使い倒そう~静的コード生成を活用した Xamarinにおける AOP 活用~

CI:Cloud Infrastructure

CI01 帰ってきた インフラ野郎 Azureチーム ~Azure データセンターテクノロジー解体新書2018春~

CI14 こわくない! Azure 運用管理 DA21 今年もまかせて!SQL Database〜その進化はまだまだ止まらない!編〜

DA:Data

DA06 SQL Server 管理者におくる SQL Server on Linux Tips

DA19 次世代データベース サービス「Azure Cosmos DB」を使いこなそう ~ Azure Cosmos DB Deep Dive ~

DA20 Azure データ サービスを使ったアーキテクチャ設計 ~ 「Azure データ アーキテクチャ ガイド」を中心に ~

etc

Microsoft MVP パーソナルスポンサー

HoloLens Emulator build 10.0.17134.80 のインストール

May 21, 2018 に最新の HoloLens Emulator がリリースされたようです。
HoloLens Emulator build 10.0.17134.80 で、Windows 10 April 2018 Update 対応です。
一つ前のバージョンが 10.0.14393.1358 で、Windows 10 のアップデート2つぶんくらいは更新されずにいたのでそこをターゲットにしてしまうとエミュレータは使えない状態でした。 半ば諦めてましたが漸くアップデートされました。

HoloLens Emulator のインストール

私の環境はすでに 10.0.14393.1358 がインストール済みのため、新規インストールの方で何か躓くようでしたらGoogleさんに前バージョンのインストール方法を聞くことをおすすめします。

インストーラーはこちらにありました。

docs.microsoft.com

ダウンロードしたインストーラーを起動したらぽちぽちするだけです。

インストール先を指定して、
f:id:yotiky:20180524042520p:plain
Next & Accept、
f:id:yotiky:20180524042144p:plain
f:id:yotiky:20180524042139p:plain

現時点ではオプションの詳細が皆無なので、フルインストールして情報が出てくるの暫く待ちましょう。(ポチッ f:id:yotiky:20180524042113p:plain

f:id:yotiky:20180524042118p:plain
想像以上に時間がかかるます...
f:id:yotiky:20180524042124p:plain
f:id:yotiky:20180524042128p:plain

完了です。

Windows SDK のインストール

Windows 10 バージョン 1803 用 Windows 10 SDKも入れときます。
またはVisual Studioの最新バージョンには含まれるとあるのでアップデートでもいけるかも?
インストーラーはこちらから。

Windows 10 SDK – Windows アプリ開発

Emulator とほぼ同じ。
f:id:yotiky:20180524043552p:plain
f:id:yotiky:20180524043558p:plain
f:id:yotiky:20180524043604p:plain
C++ 入れちゃったけど使わないなら入れなくてもよかったかもね。
f:id:yotiky:20180524043609p:plain
こっちも負けじと結構時間かかる。。 f:id:yotiky:20180524043614p:plain
f:id:yotiky:20180524043619p:plain

まとめ

これで使えるようになりました。
以前はビルド14393までしかEmulatorが表示されなかったんですが、しっかりビルド15063以降でもEmulatorが選べるように。
しかし以前にもまして起動時間おそっ。。
f:id:yotiky:20180524043920p:plainf:id:yotiky:20180524043923p:plain

疲れている人のためのコードスニペット in HoloLens

10年前の @zecl さんより(勝手に)バトンを受け取ってコードスニペットを作りました(これはひどい)。 元ネタはこちら

さて、HoloLensの実装してると #if UNITY_UWP が頻出するケースが稀によくあります。
手打ちもいいですがめんどくさいのでスニペット作って追加しちゃいましょう。
作業は簡単で、xmlファイルを「.snippet」の拡張子で保存し、Visual Studio からインポートしするだけです。
こんな感じで使えるようになります。 f:id:yotiky:20180523035639g:plain

目次

コードスニペットを作成する

下記のようなXMLを記述し、適当な名前つけて保存します。サンプルは「ifuwpsymbol.snippet」。

<?xml version="1.0" encoding="utf-8"?>
<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
    <CodeSnippet Format="1.0.0">
        <Header>
            <Title>IfUnityUwpSymbole</Title>
            <Shortcut>ifuwp</Shortcut>
            <Description>UNITY_UWP シンボルで #if ステートメントを作成する</Description>
            <Author>yotiky</Author>
            <SnippetTypes>
                <SnippetType>Expansion</SnippetType>
                <SnippetType>SurroundsWith</SnippetType>
            </SnippetTypes>
        </Header>
        <Snippet>
            <Code Language="csharp"><![CDATA[#if UNITY_UWP
$selected$
#endif$end$]]>
            </Code>
        </Snippet>
    </CodeSnippet>
</CodeSnippets>

簡単にポイントだけ紹介します。
Header 要素の下にある Title 要素はインテリセンスで表示される名前です。
Shortcut 要素に指定した文字は、入力し始めると即座にインテリセンスで候補として表示されます。
SnippetTypes 要素は、Visual Studioスニペットをどのように挿入するかを指定します。
SurroundsWith は選択しているコードを囲むように配置します。これを指定しなかった場合、コードを選択して実行するとスニペットで上書きされます。
Expansion はスニペット挿入後のカーソル位置を指定できるようになります。

続いて Snippet 要素の中ですが、CDATA セクションで実際に挿入するコードを定義します。
ここに$selected$$end$で、それぞれ「選択したコードの配置」と「挿入後のカーソル位置」を指定します。
ざっとリファレンス見た限り、このような$で囲まれた予約語はこの2つしかないようです。
挿入するコード自体は説明の必要がないほど簡単なものですね。

より詳しく知りたい方は以下のリンクを参照すると良いでしょう。

コードスニペットを追加する

Visual Studioで、[ツール]->[コードスニペットマネージャー]を開くか、[Ctrl+K, Ctrl+B]でも開きます。
f:id:yotiky:20180523032447p:plain

言語は C# を選択し、[インポート]をクリック、
f:id:yotiky:20180523032450p:plain

先程作成したsnippetファイルを選択し、コードスニペットを追加する場所を選んで完了。
f:id:yotiky:20180523032454p:plain

一度追加したスニペットは再度同じファイル名でインポートすれば上書きされます。
f:id:yotiky:20180523032458p:plain

まとめ

Let's Enjoy Programming! f:id:yotiky:20180523035555g:plain