Visual Studio Live Shareのススメ

# はじめに

これは[NJC Advent Calendar 2018](https://qiita.com/advent-calendar/2018/njc-tech) 12月21日分です。

まずBotのこと書くって言っていましたが嘘です。
いまいちネタが纏まらなかったのと、より知ってもらいたいのがこれかなーと思ったので変更しました。

という訳でVisual Studio Live Shareについてです。

# Visual Studio Live Shareってなに？

リモートでソースコードを複数人で編集したり、デバッグ出来る便利な機能です。(今のところパブリックプレビュー)
言語サポートなどは[Language and platform support](https://docs.microsoft.com/en-us/visualstudio/liveshare/reference/platform-support)を参照。
なんだそりゃって人は↓の動画を。(QiitaってYoutubeのインライン再生できないのね…。
[![Introducing Visual Studio Live Share](http://img.youtube.com/vi/ui_rzsDWLqs/0.jpg)](http://www.youtube.com/watch?v=ui_rzsDWLqs)

# 導入

## 必要なもの

- Visual Studio 2017 15.6以降 ※エディションは何でもいいです。
- Visual Studio 2019 Preview ※VS2019からは標準で搭載されます。
- Visual Studio Code 1.22.0以降 ※VSCodeが動作するならOSは問いません。
- Microsoftアカウント または GitHubアカウント

Microsoft Connect(); 2018で発表されたVisual Studio 2019には標準で搭載されるようです。

## インストール

### Visual Studio 2017の場合

VS2017のツールメニューから拡張機能と更新プログラムをクリック。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/1817e4ed-93fb-10e2-80ee-f6f0a524214b.png)

Visual Studio Live Shareで検索、検索結果の中から**VS Live Share - Preview**をダウンロード。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/a79e334c-23a3-9508-4f55-bf7fa3bd695b.png)

VS2017を終了すると、インストーラーが動き出すのでダイアログの指示に従いインストール。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/c0b78565-5d2c-ccea-9fa4-6f2a45c5c550.png)

インストール後、VS2017を起動するとLive Shareのアイコンが追加されています。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/c9d991e2-93f2-a95a-c9af-5de19a56bad0.png)

### Visual Studio Codeの場合

VSCodeの拡張機能タブからVisual Studio Live Shareで検索、**VS Live Share**をインストール。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/3efa4b83-8bca-7446-55bb-cc873d3f635e.png)

インストールするとLive Shareのアイコンが追加されています。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/3ebcfc75-9ee5-54e0-e9ab-d73a14d7cc31.png)

## 設定

使用するためにはアカウントの設定が必要になります。
必要なもので記載していますが、MSアカウントまたはGitHubアカウントが使用できます。

### Visual Studio 2017の場合

VS2017にはMSアカウントへのサインイン機能があるので、GitHubアカウントを使用したいなどで無ければこれを使用するといいです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/c9d991e2-93f2-a95a-c9af-5de19a56bad0.png)

GitHubアカウントを使用する場合は、VS2017にサインインしていない状態でLive Shareアイコンをクリックします。
アカウントの追加画面が表示されるので**External Account(GitHub, Microsoft)**を選択してSelectボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/6527cb59-4396-c59f-a4be-3548556d3325.png)

クリックするとブラウザが起動してアカウントへのサインイン画面が表示されるのでサインインします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/b1a2280e-e178-0cc5-5fb8-4d80a343719b.png)

### Visual Stuiod Codeの場合

Live Shareアイコンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/3ebcfc75-9ee5-54e0-e9ab-d73a14d7cc31.png)

クリックするとブラウザが起動してアカウントへのサインイン画面が表示されるのでサインインします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/b1a2280e-e178-0cc5-5fb8-4d80a343719b.png)

# 使用方法

VS2017を共有する場合を記載します。
VSCodeを共有する場合もほぼ一緒です。

サインインした状態でLive Shareアイコンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/c9d991e2-93f2-a95a-c9af-5de19a56bad0.png)

クリックするとSharing状態になります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/a0d96c02-1e28-78f4-189a-f2f821ea1442.png)

Sharingの横の▼から**Copy Link**をクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/f53defe8-42be-a7df-3600-6c2cab336eef.png)

コピーしたリンクを共有した人に送ります。
リンクを送られた人はブラウザでリンクを開くと、ダイアログが出るので**Live Share for VS Codeで開く**をクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/8296cff9-bf92-fcff-1e26-263287ebfc23.png)

共有する側には、承認要求が来るので問題無ければ承認してください。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/961a6efb-b06f-8534-cc89-5c409bbff5c7.png)

共有する側のVS2017の画面
![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/f977483b-a96a-f329-048d-4578125f130f.png)

共有されたソースコードを表示しているVSCodeの画面
![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/d95c3005-17a2-56b4-856c-01f5e69ad466.png)

接続してしまえば後は、編集もデバッグもリアルタイムで出来ます。
遠隔地とのコードレビューやペアプログラミングなどに活用出来ます。

# その他の機能

ソースコードの共同編集やデバッグ以外にも使えそうな機能がいくつかあります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/dda78da5-ec46-de69-c0b2-6b5db62bd819.png)

## Manage Shared Servers

共有ホストのローカルで公開しているサービスなどを共有する機能です。
下の画像のように8080番のポートを共有すると、共有された側は**http://localhost:8080!**のURLで
自分自身のローカル環境のようにアクセス出来ます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/199859/f386fc01-3349-3c77-9653-4487a7edeaf7.png)

## Focus Participants

使ったことないですが、これを使用すると**俺のやることに注目して！**みたいなことが出来るようです。
リモートで勉強会とかするときに使えそうです。

## Share a terminal

名前の通りターミナルを共有する機能です。
**Read-Only**と**Read/Write**があります。
Read-Onlyはターミナルでの操作とかの共有に使えます。
Read/Writeは操作方法が分からないなど、共有された人に操作をしてもらうなどが出来ますが、
基本的にターミナルで出来ることは何でも出来るので**絶対に**信用できる人以外には共有しないでください。

# 終わりに

簡単ですがVisual Studio Live Shareの紹介でした。
コードの共同編集だけではなく、
MarkDownで記載しているドキュメントとかであればレビューしながら共同編集で修正までしてしまうとか、
会議とかで議事録を共同編集していくみたいな使い方もありかなーと思っています。