VisualStudioCodeでLiveShareを使用する方法

序章

Live Share は、開発者間のリアルタイムコラボレーションを可能にするVisualStudioCodeの拡張機能です。これにより、ユーザーはセッションを他の人と共有できるようになり、コードを編集したり、サーバーやデバッグセッションを共有したりできるようになります。

この記事を読み進めると、2台の異なるコンピューターのスクリーンショットが表示され、LiveShareがどのように機能するかを示す実例が示されます。

わかりやすくするために、このチュートリアルでは、セッションの招待状を送信する人を招待者と呼び、招待を受け入れる人を招待者と呼びます。

前提条件

このガイドを開始する前に、次のものが必要です。

MicrosoftまたはGitHubアカウント。
Visual StudioCodeの最新バージョンをダウンロードしてインストールします。

ステップ1—拡張機能をダウンロードする

注： Visual Studio Codeの最新バージョンには、デフォルトでLiveShareが含まれるようになりました。 LiveShareとLiveShareAudio拡張機能を組み合わせたLiveShare ExtensionPackもあります。このチュートリアルでは、LiveShare拡張機能に焦点を当てます。

Live Share を利用するための最初のステップは、拡張機能としてインストールすることです。 VS Codeでは、 extends タブを開き、Live Shareを検索し、[install]をクリックして、インストールが完了したらリロードすることができます。

その後、サインインする必要があります。現在のところ、MicrosoftまたはGitHubアカウントでログインすることを選択できます。

サインインするには、下部のステータスバーにあるサインインボタンと人物アイコンを使用します。

ステップ2—セッションの共有と参加

すべてのサインインが完了すると、他のユーザーと共有するセッションを作成する準備が整います。信頼できる人とのみライブセッションを共有するようにしてください。ご覧のとおり、誤って使用すると有害になる可能性のある特定のアクセスをユーザーに許可します。

下部のステータスバーでユーザー名をクリックして開始し、使用可能なオプションからコラボレーションセッションの開始を選択します。または、コマンドパレット（Macの場合はCMD+SHIFT+P、Windowsの場合はCTRL+SHIFT+P）を開いて、Start Collaboration Sessionと入力することもできます。

招待リンクがクリップボードにコピーされたことが通知されます。

このリンクを誰かと共有して、セッションに招待してください。

招待者の観点から、招待を受け入れるには、下部のステータスバーでユーザー名をクリックし、コラボレーションセッションに参加を選択します。または、コマンドパレットを開いて、Join Collabation Sessionと入力することもできます。

プロンプトが表示されたら、招待者から送信された共同セッションリンクを入力します。 招待者は、誰かがセッションに参加したときに通知されます。

デフォルトでは、セッションに参加すると、招待者がコードをナビゲートするときに招待者の後に自動的に続きます。これは、招待者が自分で移動するまで発生します。そこから、どちらの側も自由にナビゲートして編集できます。さらに、ここに示すように、両側にもう一方のエディターがどこにあるかを示すマーカーが表示されます。

他のユーザーのコンピューターで強調表示するコードを選択することもできます。これを使用して、たとえばコードのセクションに注意を引くことができます。

ステップ3—共同作業者を制限する

デフォルトでは、誰かとセッションを共有する場合、その人はワークスペース内のすべてのファイルを編集するためのアクセス権を持ちます。特定のファイルを編集する人を信頼することは1つのことですが、ワークスペース全体をその人に開放することは好ましくない場合があります。

ありがたいことに、Live Shareを使用すると、共同編集者が表示および編集できるファイルを制限できます。

.vsls.jsonファイルを作成して、共同編集者を制限します。基本的な構成は次のようになります。

.vsls.json

{
    "$schema": "http://json.schemastore.org/vsls",
    "gitignore": "none",
    "excludeFiles": [],
    "hideFiles": []
}

私たちが最も気にする2つのキーは、excludeFilesとhideFilesです。 excludeFilesは、ユーザーにアクセスさせたくないファイル名の配列です。 hideFilesも同様ですが、特定の状況下で共同編集者が非表示のファイルを表示できるようになる点が異なります。セキュリティの詳細については、ファイルアクセスと可視性の制御に関するドキュメントをお読みください。

ステップ4—サーバーを共有する

ローカルでアプリケーションを操作する場合、他のユーザーと共有するのは難しい場合があります。コードをGitHubにチェックインして、他の人にクローンを作成させることもできますが、それでも、依存関係をインストールしてサーバーを自分で起動する必要があります。 Live Shareを使用すると、サーバーをローカルで起動し、他のユーザーが同じ実行中のアプリケーションにアクセスできます。

招待者として、通常どおりサーバーを起動します。次に、下部のステータスバーでユーザー名をクリックし、共有サーバーを選択します。または、コマンドパレットを開いて、Share Serverと入力します。

招待者として、適切なポートのlocalhostに移動して、サーバーを確認できます。

ステップ5—端末を共有する

ファイルシステムの操作方法、npmの操作方法、開発サーバーの起動方法など、ターミナルで誰かにコマンドを教えたい場合があります。以前の機能と同様に、これはリモートで行うのが複雑になる可能性があります。 Live Shareには、この問題を解決するための端末共有機能も含まれています。

端末の共有は、サーバーの共有に似ています。他の機能と同様に、共有端末オプションを選択します。その後、共同編集者のread onlyまたはread/write権限から選択します。

端末が共有されると、共同編集者は端末を表示（および該当する場合は編集）できるようになります。このスクリーンショットは、招待者が画面にメッセージをエコーした後の端末の招待者ビューを示しています。

ここから、招待者に、開発サーバーの起動方法、システムのビルド方法、または関連する可能性のあるその他の方法を示すことができます。

結論

この拡張機能には、多くの便利な機能が含まれています。 Visual Studio CodeがすぐにWeb開発者のお気に入りのエディターになると、この拡張機能は、教育、メンタリング、コラボレーション、デバッグなどへのアプローチ方法を変える可能性があります。