Zenn
Open1

Visual Studio Live Shareの始め方

SugarpersonSugarperson

Visual Studio Live Shareの始め方

はじめに

勉強会のツールを探していたところ、Visual Studio Code (VSCode)のLive Shareという拡張機能があることを知り、「これは勉強会だけでなく現場のコードレビューとかでも使えそう！」と思ったので、その使い方をまとめてみました。

この記事が自分と同じように勉強会や現場のレビューツールなどを探している方の参考になれば幸いです。

＜Visual Studio Live Share 紹介ページ＞
https://visualstudio.microsoft.com/ja/services/live-share/

概要

Live ShareはVisual StudioやVisual Studio Codeで利用できる共同開発ツールです。

Live Shareはソースコードを複数人でリアルタイムに閲覧・編集・実行・デバッグできるので、ペアプログラミングやコードレビューには非常に便利なツールだと思います。また、Live ShareはMicrosoftが無料で発行している拡張機能なので比較的安心して利用できるのもメリットだと思います。

拡張機能の紹介画面

事前準備

Live Shareを使うには事前に次のものを用意しておきましょう。

  • Visual Studio または Visual Studio Code
  • GitHubアカウント または Microsoftアカウント

※ 以降は簡単のためVisual Studio Code(VSCode)とGitHubアカウントを使った利用方法を書いていきます

インストール

Live ShareはVSCodeの拡張機能管理画面からインストールできます。

  1. VSCodeの拡張機能管理画面を開いたら上部の検索欄で「Live Share」を検索

  2. 検索結果からVisual Studio Live Shareを探して「インストール」ボタンをクリック

インストールの様子

共有機能を使ってみる

1. アカウント接続

Live Shareを初回起動した時はアカウントへの接続を求められます。

  1. Live Shareのインストールが完了したらVSCodeの左下に表示される「Live Share」をクリック

左下のUI

  1. VSCode上部にアカウントの種類を選択するUIが表示されるので「GitHub」を選択

アカウント選択

  1. GitHubへの接続の許可を求める画面が表示されたら許可して進む

  2. VSCodeの画面右下に「Invitation link copied ...」という文字が表示されたらとりあえず×で閉じて接続完了

2. ワークスペース共有

VSCodeの画面右下に「Invitation link copied ...」と表示されたらLive Shareのワークスペース共有はすでに有効になっています。クリップボードに保存されたリンクをWebブラウザで開いてプロジェクトが共有されていることを確認しましょう。

  1. クリップボードに保存されたリンクをWebブラウザで開く

  2. ブラウザ版のVSCodeが開いたら更に処理が進むのを待つ

  3. ブラウザ版VSCodeの画面右下に匿名かサインインの選択を求めるUIが表示されたら「サインイン」を選択

  4. アカウントの種類を聞かれたら「GitHub」を選択してGitHubへの接続許可を与える

  5. ワークスペースを開く方法を選択する画面が表示されたらWebブラウザを選択

  6. ワークスペース共有が完了したらファイルの編集状況などがリアルタイムに反映されることを確認

    【Live Shareの機能について】
    Live Shareにはチャットやターミナル共有など様々な機能が用意されています。詳しく説明すると長くなってしまうので、詳細は公式の製品紹介などを参考にしていただき、ぜひ色々な使い方を試してみてください

3. 共有停止

共有を停止する方法は色々ありますが、私は次の手順で共有を停止しています。

  1. VSCodeの端にあるLive Shareのアイコンをクリック

  2. サイドバーにマウスカーソルを合わせ、右上に表示される停止ボタンをクリック

停止する様子

セキュリティ設定

Live Shareの共有リンクは起動する度に予測困難なランダムなURLが設定されるようになっています。しかし、インストール直後はURLさえ知っていれば誰でも参加できる状態に設定されているため、安全に利用するにはいくつかの設定を変更する必要があります。

Live Shareのセキュリティ機能の詳細については以下を参照してください。

＜Live Shareのセキュリティ機能＞
https://learn.microsoft.com/ja-jp/visualstudio/liveshare/reference/security

匿名ユーザのブロック

  1. VSCodeの設定画面を開く

  2. Extensions → Visual Studio Live Shareの順に設定画面を開く

  3. 「Anonymous Guest Approval」という項目を探し「reject」を選択

匿名ユーザのブロック

承認を必須にする

  1. VSCodeの設定画面を開く

  2. Extensions → Visual Studio Live Shareの順に設定画面を開く

  3. 「Guest Approval Required」という項目にチェックを入れる

承認を必須にする

共有アイテムを制御する

クレデンシャルなどのほかのユーザに見せたくないファイルやディレクトリを非表示にするにはLive Shareを起動する前に次の設定をしておく必要があります。

  1. プロジェクトのルートディレクトリに.vsls.jsonという名前のファイルを作成

  2. .vsls.jsonを次のように編集

    {
   "$schema": "http://json.schemastore.org/vsls",
   "gitignore": "none",
   "excludeFiles": [
      ".gitignore",
      "service.credential",
      "001_HelloWorld/answers",
      "!node_modules"
   ],
   "hideFiles": [
      "node_modules"
   ]
}

    ※ excludeFilesにはゲストに読み込ませたくないファイルやディレクトリを指定
    ※ excludeFilesでは「!」を付けることで反対に特定のファイルやディレクトリを明示的に含ませることもできる
    ※ hideFilesはゲストの環境に読み込まれるが視覚的には表示されないファイルやフォルダを作るのに使う