VSCode Live Shareの使い方をしっかり知る


いまいち使いこなせないLive Shareについて、ちょっと調べたことをまとめます。

公式から調べる！
https://docs.microsoft.com/en-us/visualstudio/liveshare/use/vscode#join-a-collaboration-session

##　インストール〜招待まで
https://qiita.com/mh4gf/items/8f072b2faabba90937d3
↑基本ここに書いて頂いている通りにやればOK！
ただ、バージョンの違いなのかなんなのか、一部表示が違います。

・違うところその１
>2回目以降はVSLiveShareタブの Start collaboration session... からセッションを始めることができます。

<img width="264" alt="スクリーンショット 2019-11-13 16.24.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/441432/2b97882a-e3a2-bd99-3a10-10eb8c44015e.png">

ここはParticipants>Invite participants...　をクリックしましょう。
`Invite link copied to clipboard! Send it to anyone you...`と右下に表示されたらコピーできているので、招待URLをチャットなりなんなりで共有したい人に送ります。


・違うところその２

>ホスト側の操作は、左上のアイコンの操作を覚えれば万事オーケーです。

左上にアイコンがなくなっています。
代わりに、ログイン後のボタンを押すと似たようなコマンド一覧が出てきます。

<img width="285" alt="スクリーンショット 2019-11-13 16.45.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/441432/62e1dea6-0fe5-8f3d-5228-46500ccdf38a.png">

この人から電波が漂っているようなマークです。
押すと下記のコマンドが紹介されます。

<img width="641" alt="スクリーンショット 2019-11-13 16.46.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/441432/2ef44185-f657-cf9e-818a-4919ebae0eaa.png">

| コマンド名 | 説明 |
|:-:|:-:|
|  Invite Others | 招待リンクコピー  |
| Share Terminal  | ターミナルの共有  |
| Share Server  | サーバーの共有  |
|  Show Shared Servers |  現在共有しているポートの一覧が見れます |
|  Stop Sharing Server | サーバーの共有をストップします  |
| Stop Collavoration Session  | セッションの終了  |


ちなみにですが、ここにもショートカットがあります。（マウスを乗せるとマークが出てくる）

<img width="296" alt="スクリーンショット 2019-11-13 17.06.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/441432/ff86b6b4-4025-a231-fc22-189b5947329c.png">

`+マーク`は好きなコマンドの登録,
`通行止めのようなマーク`はセッションの中止、
`ボードのマーク`は招待URLのコピーです。

##　サーバーの共有方法
<img width="264" alt="スクリーンショット 2019-11-13 16.27.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/441432/f595f745-8248-47fc-c860-a6e87a6be66c.png">


Shared Servers > Share servcer　をクリックすると、テキスト入力のUIが上からにゅっと出てきます。

<img width="670" alt="スクリーンショット 2019-11-13 16.31.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/441432/a0648edf-7279-7b2a-3325-61714f96348a.png">

共有したいポートを打ち込んでエンターを押すと、`Provide a display name for the shared server`
と出てくるので、サーバーにつけたい名前を打ち込みます。

<img width="670" alt="スクリーンショット 2019-11-13 16.31.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/441432/d2f08fe6-536b-f1ba-5ec2-727c56ece5da.png">

## ターミナルの共有方法

<img width="285" alt="スクリーンショット 2019-11-13 16.38.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/441432/56992461-d72b-5bee-0c07-65fda7c90bd0.png">

Shared Terminals　の横にあるアイコンをクリックします。
readOnly（読み込みのみ）かread/write(読み書き可か）を選べるので、
好きな方を選ぶと共有できます。

ターミナルの共有を削除するには、Shared Terminalsを開いて、
消したいターミナルの横にあるバツボタンを押しましょう。

## 共有中の便利機能

###共有した人の操作中ファイルに移動

左サイドメニューのliveshareアイコンをクリックし、
Participantsをクリック。作業中ファイルをみたい人の名前をクリックすれば見れる！

ファイルの右上のピンどめボタンを押せば、ファイルを固定することもできます。

###フォーカスさせる
説明するときなんかに、共有している全員に同じファイルを見せたいときなんかがありますね。
そんなときは左サイドメニューのsession details(日本語訳対応しているとセッションの詳細）にある
拡声器のアイコンをクリックします。

すると共有してる人々にFollowするか、ignoreするかを選ぶポップが表示されるので、
Followを押せば完了です。


##まとめ
ここで触れてない機能では`Co-debug`機能があるようです。
>Visual Studio Live Share's collaborative debugging feature is a powerful and unique way to debug an issue.

意訳）このデバック機能ってのはデバッグするのにすんごくて独自なもんだぜ！
とのことなので、後々調べていければと思います。

軽く調べただけなので間違ってるとこあればビシバシ指摘いただけると助かります。