序章

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

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

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

前提条件

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

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

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

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

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

Visual Studio Code extension tab displaying VS Live Share

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

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

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

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

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

Command Pallete open with Start Collaboration Session selected

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

Notification of link being copied to clipboard

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

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

Command Pallete open with Join Collaboration Session selected

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

Notification that someone has joined the session

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

An example of cursors indicating the position of the invitee and inviter in the document

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

An example of highlighted lines of code visible to the other user

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

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

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

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

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

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

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

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

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

Command Pallete open with Share Server selected

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

An example of a project running on localhost available to the invitees

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

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

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

Command Pallete open with Share Terminal selected

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

An example of an invitee terminal displaying a message from the inviter

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

結論

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