Visual Studio Live Shareはそれを行うことができますか？

公開: 2022-03-10
簡単な要約↬オフィスドキュメントでの共同作業は解決された問題です。 コードでのコラボレーションは、まだかなり難しいことです。 これは、コードだけを共有するだけでは不十分だからです。 実際にコラボレーションするには、開発者が環境全体を共有できる必要があります。 VS Live Shareは、まさにそれを可能にする新しいサービスであり、実際にどれだけの共有ができるかに驚くかもしれません。

数か月前、Microsoftは無料のVisual Studio（VS）LiveShareサービスをリリースしました。 VS Live Shareは、コードのGoogleドキュメントレベルのコラボレーションです。 複数の開発者は、独自のエディターを離れることなく、同じファイルで同時に共同作業を行うことができます。

Live Shareのリリース後、私たちの多くがコード内で孤立することを辞任し、VS LiveShareのようなサービスを使用するためのより良い方法があることに気づいていません。 これは、私たちが古い習慣にとらわれていることと、すべてのVS LiveShareで何ができるかを認識していないことが原因の1つです。 私が手伝うことができるその最後の部分！

この記事では、開発者のコ​​ラボレーションを「匿名のカバ」と同じくらい簡単にするVS LiveShareの機能とベストプラクティスについて説明します。

Googleドキュメントの匿名の動物のリスト
Google Docsには、匿名の参加者を処理する興味深い方法があります（大規模なプレビュー）

コードを共有する

Live Shareは、VisualStudioとVisualStudio Code（VS Code）の両方の拡張機能として提供されます。 この記事では、VSCodeに焦点を当てます。

vsコードライブ共有拡張readmeページ
（大プレビュー）

VS Live Share Extension Packを介してインストールすることもできます。これには、次の拡張機能が含まれています。これらはすべて、この記事で説明します…

  • VSライブシェア
  • VSライブシェアオーディオ
  • Slackチャット拡張機能
ジャンプした後もっと！ 以下を読み続けてください↓

拡張機能をインストールしたら、VS LiveShareサービスにログインする必要があります。 これを行うには、コマンドパレットCtrl / Cmd + Shift + Pを開き、[ブラウザでサインイン]を選択します。 ログインせずに新しい共有セッションを開始しようとすると、その時点でログインするように求められます。

対ブラウザでサインインするオプションを示すコードコマンドパレット
VS Codeコマンドパレットを使用して、新しいLive Shareセッションを開始します（大プレビュー）

VSライブシェアセッションを開始する方法はいくつかあります。 コマンドパレットから実行するか、下部のツールバーにある[共有]ボタンをクリックするか、サイドバーのVSライブ共有エクスプローラービューを使用できます。

vsライブ共有セッションを開始するために使用できるUIのさまざまな部分の周りにボックスが描かれたコード
新しいVSライブシェアセッションを開始する方法は無数にあります（大プレビュー）

リンクがクリップボードにコピーされます。 その後、そのリンクを他の人に送信し、他の人がVSCodeを使用している場合はLiveShareセッションに参加できます。 どっち、みんなじゃないの？

これで、通常の古いWord文書で作業していたのと同じように共同作業を行うことができます。

他の人はあなたのコードを見るだけでなく、それを編集、保存、実行、さらにはデバッグすることもできます。 あなたにとって、それらは名前の付いたカーソルとして表示されます。 あなたは彼らのエディタに同じように現れます。

VSライブシェアエクスプローラー

VS Live Shareエクスプローラーは、アクションバーに新しいアイコンとして表示されます。これは、画面の右端（デフォルトのアクションバーの配置ではアイコンの左端）にあるアイコンのバーです。 これは、VS LiveShareのすべてにとって一種の「グラウンドゼロ」です。 ここから、セッションを開始、終了、端末、サーバーを共有し、接続しているユーザーを確認できます。

vsライブシェアビューレット
VS Live Share Explorerは、Live Shareのすべてのヘッドアップビューです（大プレビュー）

キーボードショートカットをこのVSLive共有エクスプローラービューにバインドして、ファイルとファイルをすばやく切り替えることができるようにすることをお勧めします。 これを行うには、 Ctrl / Cmd + K （またはCtrl / Cmd + S ）を押してから、「ライブ共有を表示」を検索します。 Ctrl / Cmd + Lにバインドしましたが、他にはバインドされていないようです。 このショートカットは直感的で（Live Shareの場合はL ）、キーボードで簡単に押すことができます。

vsライブ共有ビューレット用に作成されたバインディングを使用したvsコードのキーボードバインディング画面
VS Live Share Explorerビューレットのバインディングを作成できます（大プレビュー）

共有コード読み取り専用

新しい共有セッションを開始すると、このように通知され、ワー​​クスペースを読み取り専用で共有するかどうかを尋ねられます。 読み取り専用を選択すると、他のユーザーはあなたのコードを表示してあなたの動きを追跡できますが、対話することはできません。

vsコード通知は、読み取り専用共有を選択するようにユーザーに促します
共有セッションはデフォルトで読み取り/書き込みですが、読み取り専用にすることができます（大プレビュー）

このモードは、必ずしも信頼できない人（ベンダー、パートナー、疎遠な元など）と共有する場合に便利です。

また、インストラクターにとっても特に便利です。 この記事の執筆時点では、VS LiveShareは5人の同時ユーザーにロックされていることに注意してください。 特にグループを教えている場合は、読み取り専用モードでそれ以上のものが必要になる可能性があるため、ユーザー設定ファイルに次の行を追加することで、制限を30に増やすことができます： Ctrl / Cmd + 、 。

 "liveshare.features": "experimental"

デフォルトの結合動作を変更する

リンクを知っている人は誰でもライブシェアセッションに参加できます。 彼らが参加すると、あなたに知らせるポップアップが表示されます。 同様に、それらが切断されると、通知が届きます。 これは、VS LiveShareのデフォルトの動作です。

vsライブ共有セッションに参加した人の名前によるコード通知
VS Codeは、誰かがあなたのセッションに参加するたびに警告します（大プレビュー）

これを変更して、誰かがセッションに参加する前に手動で承認する必要があるようにすることをお勧めします。 これは、昼食に行ってセッションを切断するのを忘れた場合に備えて、あなたを保護するためです。 同僚はログインし直して、データベース接続文字列の1文字を変更してから、次の4時間、自分の人生がいかにひどく間違っているかを理解しようとして笑うことはできません。

これを有効にするには、ユーザー設定ファイルCtrl / Cmd + 、に次の行を追加します。

 "liveshare.guestApprovalRequired": true

これで、誰かが参加したいときにプロンプ​​トが表示されます。 誰かをブロックすると、セッション中はブロックされます。 彼らが再び参加しようとしても、あなたは通知されず、VSLiveShareによって不用意に拒否されます。

ランチを楽しんでください。 お使いのコンピュータは安全です。

フォーカスフォロワー

デフォルトでは、ライブシェアセッションに参加する人は誰でもあなたを「フォロー」しています。 つまり、エディターは、現在のファイルをすべてロードし、スクロールするたびにスクロールします。 ファイルを切り替えても、参加者はあなたが見ているものを正確に見ることができます。

人がファイルに変更を加えると、その人はあなたをフォローしなくなります。 したがって、両方が一緒にファイルを操作していて、別のファイルに移動した場合、それらは自動的に移動しません。 これは、他の人がまったく異なるものを見ているときに、自分がいるファイルのコードについて話しているときに多くの混乱を招く可能性があります。

コマンドパレットCtrl / Cmd + Shift + Pにある「FocusParticipants」と呼ばれる便利なコマンドがあります（これは機能します）。

vsライブ共有フォーカスコマンドを表示するコードコマンドパレット
VS Codeコマンドパレットから「focus」コマンドにアクセスします（大きなプレビュー）

VS Live ShareExplorerビューのアイコンとしてアクセスすることもできます。

vsコードライブシェアエクスプローラーフォーカスアイコン
VS Live Share Explorerビューレットのフォローアイコンをクリックしてフォローリクエストを送信します（大きなプレビュー）

これにより、参加者は次にクリックまたはスクロールすることに集中できます。 デフォルトでは、VS LiveShareフォーカス要求は暗黙的に受け入れられます。 他の人があなたに集中できないようにする場合は、ユーザー設定ファイルに次の行を追加できます。

 "liveshare.focusBehavior": "prompt"

また、参加者をフォローできることにも注意してください。 VS Live Share Explorerビューで名前をクリックすると、フォローを開始します。

他の人がコードの編集を開始するとすぐにフォローがオフになるため、他の人がいつあなたをフォローしているのか、いつフォローしていないのかを正確に知るのは難しい場合があります。 表示できる場所の1つは、VS Live ShareExplorerビューです。 それはあなたに人がいるファイルを教えてくれますが、彼らがあなたをフォローしているかどうかは教えてくれません。

焦点は常に変化していることを覚えておくことをお勧めします。そうすれば、いつでもあなたが見ているものが人々に見える場合と見えない場合があります。

チームとしてデバッグする

参加者は、実行するデバッグセッションを共有できます。 デバッグセッションを開始すると、ユーザーはあなたとまったく同じエクスペリエンスを得ることができます。 それがあなたの側で壊れた場合、それは彼らの側で壊れ、彼らはあなたのすべてのコードの完全なデバッグビューを取得します。

彼らは、ステップイン、アウト、オーバー、ウォッチの追加、デバッグコンソールでの評価を行うことができます。 あなたができるどんなデバッグでも、彼らもできるし、彼らはそれを制御することができます。

参加者はデバッグを開始することもできます。 ただし、デフォルトでは、VSCodeではデバッガーをリモートで起動できません。 これを有効にするには、ユーザー設定ファイルに次の行を追加しますCtrl / Cmd + 、 ：

 "liveshare.allowGuestDebugControl": true

ターミナルを共有する

開発者として私たちが行う作業の多くは、私たちのコードには含まれていません。 ターミナルにあります。 ある日、私は自分の端末でエディターと同じくらい多くの時間を費やしているように見えます。 つまり、端末でエラーが発生した場合、またはコマンドを入力する必要がある場合は、VS LiveShareの参加者がコードに加えて端末を表示できると便利です。

VS Codeには端末が統合されており、VS LiveShareと共有できます。

vs共有端末が選択されたコードコマンドパレット
VS Codeコマンドパレットから「ShareTerminal」コマンドにアクセスします（大きなプレビュー）

これを行うと、端末を読み取り専用または読み取り/書き込みとして共有する機会があります。

vs端末を読み取り専用または読み取り/書き込みとして共有するように求めるコード
書き込みアクセスで絶対に共有する必要がない限り、常に読み取り専用で端末を共有してください（大プレビュー）

デフォルトでは、端末を読み取り専用として共有する必要があります。 端末の読み取り/書き込みを共有すると、ユーザーは端末上で直接任意のコマンドを実行できます。 それを少しの間沈めましょう。 それは重いです。

言うまでもなく、誰かの端末へのリモート書き込みアクセスには、多くの信頼と責任が伴います。 端末の読み取り/書き込みは、暗黙的に信頼できる人とのみ共有する必要があります。 疎遠になった元はおそらくテーブルから外れています。

端末を読み取り専用で安全に共有すると、回線の反対側の人が入力内容と端末出力をリアルタイムで確認できますが、その端末に何も入力できないように制限されます。

たくさんのフラグを使って奇抜なコマンドを実行しようとするよりも、他の人が自分の端末にたどり着くほうが早いシナリオに自分自身を見つけた場合は、端末の読み取り/書き込みを共有できます。 このモードでは、他の人があなたの端末に完全にリモートアクセスできます。 賢く友達を選んでください。

ローカルホストを共有する

上のビデオでは、terminalコマンドはhttps：// localhost：8080で実行されているサイトへのリンクで終了します。 VS Live Shareを使用すると、そのローカルホストを共有して、他の人が自分のローカルホストと同じようにアクセスできるようにすることができます。

共有デバッグセッションを実行している場合、参加者がそのローカルホストURLを最後にヒットすると、ブレークポイントがヒットすると両方のURLが中断されます。 さらに良いことに、任意のTCPプロセスを共有できます。 つまり、データベースやRedisキャッシュのようなものを共有できるということです。 たとえば、ローカルのMongoDBサーバーを共有できます。 真剣に！ これは、構成ファイルを変更したり、共有データベースを起動しようとしたりする必要がないことを意味します。 ローカルのMongoDBインスタンスのポートを共有するだけです。

適切なファイルを適切な方法で共有する

共同編集者に特定のファイルを見せたくない場合があります。 プロジェクトには、ソース管理にチェックインされておらず、公開表示に適していない秘密鍵とパスワードが含まれている可能性があります。 この場合、ライブ共有セッションに参加している人からこれらのファイルを非表示にする必要があります。

デフォルトでは、VS LiveShareは.gitignoreで指定されたすべてのファイルを非表示にします。 非表示にするファイルがある場合は、それを.gitignoreに追加するだけです。 ただし、これはプロジェクトビューでファイルを非表示にするだけであることに注意してください。 共有デバッグセッションに参加していて、 .gitignoreにあるファイルにステップインした場合でも、そのファイルはエディターにロードされており、共同編集者はそれを見ることができます。

.vsls.jsonファイルを作成することで、ファイルの共有方法をよりきめ細かく制御できます。

たとえば、デバッグ中であっても、 .gitignoreにあるファイルが表示されないようにする場合は、 gitignoreプロパティをexcludeに設定できます。

 { "$schema": "https://json.schemastore.org/vsls", "gitignore":"exclude" }

同様に、 .vsls.jsonファイルから直接.gitignoreおよび制御ファイルの可視性のすべてを表示できます。 これを行うには、 gitignoreをnoneに設定してから、 excludeFilesプロパティとhideFilesプロパティを使用します。 覚えておいてください—除外は決して表示されないことを意味し、非表示は「ファイルエクスプローラーに表示されない」ことを意味します。

 { "$schema": "https://json.schemastore.org/vsls", "gitignore":"none", "excludeFiles":[ "*.env" ], "hideFiles": [ "dist" ] }

共有と拡張機能

多くの開発者にとってのVSCodeの魅力の一部は、大規模な拡張機能市場です。 ほとんどの人は、少数以上がインストールされています。 VS Live Shareのコンテキストで、拡張機能がどのように機能するか、または機能しないかを理解することが重要です。

VS Live Shareは、共有しているプロジェクトのコンテキストに固有のすべてのものを同期します。 たとえば、Vueプロジェクトで作業しているためにVetur拡張機能をインストールしている場合、それがインストールされているかどうかに関係なく、すべての参加者に共有されます。 同じことが、リンター、フォーマッター、デバッガー、言語サービスなど、他のコンテキスト固有のものにも当てはまります。

VS Live Shareは、ユーザー固有の拡張機能を同期しません。 これらは、テーマ、アイコン、キーボードバインディングなどです。 一般的な経験則として、VS Live Shareは画面ではなく、コンテキストを共有します。 共有が期待できる拡張機能の詳細については、このテーマに関する公式ドキュメントの記事を参照してください。

コラボレーションしながらコミュニケーションをとる

VS Live Shareの最初のエクスペリエンスで人々が最初に行うことの1つは、コードコメントを入力してコミュニケーションを試みることです。 これは、書く（理解する？）ことのように見えますが、実際にはVS LiveShareがどのように使用されるように設計されているかではありません。

VS Live Shareは、選択したチャットクライアントを置き換えることを意図したものではありません。 すでに優先チャットメカニズムを使用している可能性があり、VS LiveShareは引き続きそれを使用することを前提としています。

すでにSlackを使用している場合は、SlackChatと呼ばれるVSCode拡張機能があります。 この拡張機能はまだ開発の初期段階では少しですが、非常に有望に見えます。 VS Codeを分割モードにし、右側にSlackを埋め込みます。 さらに良いことに、Slackチャットから直接ライブ共有セッションを開始できます。

vsコードスラックチャット拡張機能
Slackチャット拡張機能はSlackをエディター内に配置します（大プレビュー）

非常に面白そうなもう1つのツールは、CodeStreamと呼ばれます。

CodeStream

VS Live Shareはエディターからのコラボレーションを改善することを目指していますが、CodeStreamはチャットの観点から同じ問題を解決することを目指しています。

CodeStream拡張機能を使用すると、VS Code内で直接チャットでき、それらのチャットはコード履歴の一部になります。 話し合うコードのチャンクを強調表示すると、チャットに直接入るので、コメントのコンテキストがあります。 これらのコメントは、Gitリポジトリの一部として保存されます。 また、コードには小さなコメントアイコンとして表示され、これらのコメントは、どのブランチにいるかに関係なく表示されます。

VS Live Shareに関しては、CodeStreamは無料の機能セットを提供します。 アバターをクリックするだけでなく、チャットペインから直接新しいセッションを開始できます。 新しいセッションでは、対応するチャットチャネルが自動的に作成され、コードを保持したり、終了時に破棄したりできます。

チャットだけでは仕事を終わらせることができず、1999年のように共同作業を行う必要がある場合は、電話でサポートを受けるだけです。

VSライブシェアオーディオ

VS Live Shareはチャットを再発明しようとはしていませんが、電話を再発明します。 すこし。

VS Live Share Audio拡張機能を使用すると、誰かに直接電話をかけたり、VSCode内からボイスチャットを行ったりすることができます。

vsコードコマンドパレットに音声通話の開始オプションが表示されます
VS Live Share Audio拡張機能を使用してVSCodeから音声通話を発信する（大プレビュー）

その後、他の人はあなたの通話に参加するためのプロンプトを受け取ります。

vs音声通話に参加するかどうかを尋ねるコード通知
VS Codeは、進行中の音声通話に参加するかどうかを尋ねます（大プレビュー）

通話に接続すると、下部のステータスバーにスピーカーアイコンが表示されます。 そのスピーカーをクリックして、オーディオデバイスを変更したり、自分をミュートしたり、通話を切断したりできます。

vsライブ共有オーディオ拡張のミュートや切断などのオプションを示すコードオプション
VS Live Share Audio通話中は、オーディオ設定を完全に制御できます（大プレビュー）

私があなたに与える最後の秘訣はおそらく最も重要であり、それはあなたが存在することを知らなかった派手な機能やあいまいな設定ではありません。

あなたの筋肉の記憶を変える

ヘルプの取得やコードの共有に関しては、何年にもわたって学習した動作があります。 開発者コラボレーションツールの状態は非常に悪いため、コードをSlackに貼り付けるか、「画面が表示されたら教えて」で構成される厄介なSkype通話を開始するか、モニターとポイントの周りに群がる必要があります。過度に、つまりストックフォトスタイル。

コンピューターの画面を指している人々のグループ
（大プレビュー）

VS Live Shareを最大限に活用するためにできる最も重要なことは、実際にVS LiveShareを使用することです。 そして、それは「意識的な」努力でなければなりません。

あなたの脳はパターンが得意です。 あなたは常にあなたが特定したパターンに基づいてあなたの周りの世界を認識し分類しています、そしてあなたはそれがとても上手で、あなたはそれをしていることにさえ気づいていません。 次に、これらのパターンに対するデフォルトの応答を作成します。 あなたは本能を形成します。 これが、自分が何をしているのかを考えずに、デフォルトで古いコラボレーション方法を使用する理由です。 それを知る前に、Live Shareがインストールされている場合でも、画面を共有している人とSkype通話をすることになります。

私はVSCodeについてたくさん書いてきましたが、エディターを使って生産性を上げる方法を時々聞かれます。 私はいつも同じことを言います。次にマウスが何かをするために手を伸ばすときは、やめてください。 代わりにキーボードでそれを行うことはできますか？ おそらくできます。 ショートカットを調べて、自分で使用してください。 最初は遅くなりますが、意図的に別の動作を採用することをいとわない場合は、脳がデフォルトでより生産的な方法で何かを行う速度に驚かれることでしょう。

同じことがライブシェアにも当てはまります。 ライブ共有を使用している可能性があることが発生すると、画面を共有する通話が始まります。 その瞬間、停止します。 VSCodeの下部にある「共有」ボタンをクリックします。

はい、相手側の人は拡張機能をインストールしていない可能性があります。 はい、設定には少し時間がかかる場合があります。 しかし、今この振る舞いを確立することに取り組んでいると、次にこれを行うときに、それは「うまくいく」でしょう、そしてあなたがそれについて考える必要さえない前にそう長くはかからないでしょう、そしてその時点であなたはついにその「匿名のカバ」レベルのコラボレーションを達成するでしょう。

その他のリソース

  • VSライブシェアエクステンションパック
  • VS Code Live Share Docs
  • 拡張機能とエコシステムサポート
  • VSライブシェア入門