Visual Studio Live Share preview をつかってみる

# はじめに
Visual Studio Live Share とは 2017年11月の Connect(); という開発者イベントで発表された、Visual Studio および Visual Studio Code を使用してペアプログラミングを遠隔の人とできる機能です。One Note のファイルを同時に編集することができる、あのイメージでソースコードを同時に編集してつくりあげることができるというのが大きな特徴です。

<!---お恥ずかしながら、かれこれ数ヶ月前にプライベートベータの参加通知が来てはいたのですが、業務優先度が低かったため放置しておりました...満を期して、お仕事で使うタイミングが来たので--->

そのセットアップの情報を備忘録がてら残しておきます。
2018年5月7日（米国時間）に開催された開発者向けのイベント Build でパブリックプレビューが公開されました。
動作の詳細についてはプライベートプレビュー時点の情報となりますのでご承知おきください。 
__本情報の内容（添付文書、リンク先などを含む）は、作成日時点でのものであり、予告なく変更される場合があります__

# 実際につかってみる
## 確認をした環境
- Visual Studio 2017 Preview (Vestion 15.6.0 Preview 5.0 on Windows 10 Enterprise 1709)以下VSと略します。
- Visual Studio Code (Version 1.20.1 on macOS High Sierra 10.13.3)以下Codeと略します。

## 前提環境
GitHub のドキュメント[Welcome to the Visual Studio Live Share preview!](https://github.com/MicrosoftDocs/live-share/blob/master/welcome/welcome-owner.md)に記載のあるように、利用準備としてはVSであればプレビューを使用する必要があります。
さらに、VS、Code、それぞれエクステンションとして Live Share のプラグインをインストールする必要があります。

下記ドキュメント引用を参考までに貼っておきます。
>Visual Studio 2017 Preview
1. Install the latest [VS 2017 Preview](https://www.visualstudio.com/vs/preview/) (15.6 Preview 3+) on Windows (7, 8.1, or 10).
2. Install a supported workload. e.g. ASP.NET, .NET Core, and/or Node.js
3. Download and install the Visual Studio Live Share extension from the marketplace. 
[Download](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsls-vs)

>Visual Studio Code
1. Install [Visual Studio Code (1.20.0+)](https://code.visualstudio.com/) for Windows (7, 8.1, or 10) or macOS (Sierra & up).
2. Download and install the Visual Studio Live Share extension from the marketplace. 
3. Installation can take a moment, so wait for the install to complete and then reload.
[Download](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)

## VSでの手順（画面キャプチャ）
![無題.png](https://qiita-image-store.s3.amazonaws.com/0/135357/8b0be5da-dc31-451c-93ea-ccc7be570bae.png)
![無題2.png](https://qiita-image-store.s3.amazonaws.com/0/135357/c3e6fd87-e8d2-5440-7a24-dfa62e1dfd8d.png)
![無題3.png](https://qiita-image-store.s3.amazonaws.com/0/135357/e10d23e0-0ab2-a9da-79ab-ad5279f948eb.png)

インストールが終わったら、VSを起動します。
ツール→オプション→Live Shareを開きます。
![無題4.png](https://qiita-image-store.s3.amazonaws.com/0/135357/b5ec33f2-6293-6c45-ae8c-e3db1dc161ac.png)
__Authentication__ の Personalization Account をクリックすると、下記のようなLive Share Account を選択する画面が表示されます。
私の場合、VSを会社のメールアドレスでログインして使用しており、プライベートベータの案内もそちらに来ていたのでそのアカウントを選択しています。
![無題5.png](https://qiita-image-store.s3.amazonaws.com/0/135357/233f515e-f642-85c4-ebac-afca006886fc.png)

VS側の準備はこれで終わりです。
設定可能な項目を、参考がてら見ていくと、Share web app on debug とあり、ホストしている側のVSのIISを共有させることも可能です。
Connection mode も、Direct／Relay/Autoから選べるようになっているので、企業内で利用するときとかDirectのほうが便利なケースも考慮されています。

## Codeの準備（画面キャプチャ）
Code も同様に Extension を追加しておきます。
<img width="897" alt="Screen Shot 2018-02-21 at 13.38.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/135357/2130df92-09c4-be6e-f6ff-580baffff8f0.png">
インストール後にリロードしておき、画面の下にShareという文字が表示されるようになったことを確認しておきます。

## 共有方法（VSからCODE）
### VS
適当なファイルを開いて、右上のログインアカウントの隣の__Share__ をクリックします。
<img width="376" alt="Screen Shot 2018-02-22 at 16.32.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/135357/5ac4fa33-e43d-0c3a-fe67-baf38b8f5ee1.png">
共有用のリンクが表示されるので、共有相手にこのリンクを案内します。
<img width="1276" alt="Screen Shot 2018-02-22 at 16.32.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/135357/0c02a6ea-f15c-3cda-d68e-97e80ba938dc.png">

### CODE
リンクを受け取ったら、ブラウザでアクセスします。
アクセスすると共有アカウントが要求されるので、Microsoft アカウントやサードパーティアカウントでログインします。
私の場合、過去に MSDN 2011Ultimate で使っていた時のメールアカウントがあったのでそちらでログインしました。
<img width="865" alt="Screen Shot 2018-02-22 at 11.50.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/135357/308fa887-0b7f-4008-4fbc-e31b1f19fe97.png">
<img width="420" alt="Screen Shot 2018-02-22 at 11.52.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/135357/c56f499d-cee4-d00d-cd32-8dc4e9fa799f.png">
<img width="444" alt="Screen Shot 2018-02-22 at 11.53.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/135357/2ddd6e08-0518-0b9c-433b-fd5646ae3eff.png">
<img width="1024" alt="Screen Shot 2018-02-22 at 11.53.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/135357/7161515e-f882-6eb8-4ac7-057ce2077e64.png">
キャプチャではうまく表せませんが、ほぼリアルタイムにソースコードが変更され、変更箇所に誰が操作しているのか表示されます。

<!---## プライベートベータへの参加方法
1.すでにベータに参加している人にShareしてもらう(自分がホストになることはできません。）
2.[Visual Studio Live Share](https://landinghub.visualstudio.com/vsliveshare)のサイトからフォームに入力し、祈ります。（通知がきたら、ホストにもなれますよ！！！）--->

とっくにパブリックプレビューの機能です。
現在では、マイクロソフトアカウントやGitHubのログインアカウントでサインインした場合には編集可能、読み取りオンリーでサインイン無しでアクセスすることも可能です。
また、共有を開始したら音声チャットを開始することもできるようになっています。

GAがとっても待ち遠しい機能ですね。

要望をブログ等に書く方いらっしゃるのですが...できれば、要望は[ Git Hub の Issue ](https://github.com/MicrosoftDocs/live-share/issues)に書いてください。

<!---みなさんの言葉をすべてエゴサーチするほど開発チームも暇では無いと思いますので--->

## 参考リンク
[Welcome to the Visual Studio Live Share preview!](https://github.com/MicrosoftDocs/live-share/blob/master/welcome/welcome-owner.md)
[Connect();](https://www.microsoft.com/en-us/connectevent/)
[Visual Studio Live Share](https://landinghub.visualstudio.com/vsliveshare)
[https://github.com/MicrosoftDocs/live-share](https://github.com/MicrosoftDocs/live-share)