読者の皆様こんにちは。VS Codeでコーディング中に、”ちょっと詰まったからボス(あるいは同期)にコードをみてもらいたい”なんてことはありませんか?デスクトップのコンピュータを使用していると当然、他人に来てもらわなければなりませんし、ラップトップでもケーブル類(場合によってはモニターなども)引っこ抜いて移動する必要がありますよね。まぁどちらにせよめんどくさい。”ちょちょっと画面が相手のパソコンから見れればいいのに…”なんて思ったことのある人も多いでしょう。そんな方に向けて今日はLive ShareというVS Codeの拡張機能をご紹介します。
ホスト(画面を見て欲しい側)は設定とサインインを行う必要があります。
まずはVS Codeに拡張機能”Live Share“をインストールしましょう。
拡張機能の発行元はMicrosoftなので安全性は問題ないでしょう。
インストールが完了すると画面左下に”Live Share”というボタンが現れます。
ボタンをクリックするとサインインが求められるのでGithub id, もしくはMicrosoft accountを選択します。選択後は自動的にブラウザに遷移するため適宜ログインを行います。
ログインが完了すると自動的にVS Codeに画面が遷移し画面右下に上図のようなウィンドウが表示されます。自動的に共同編集セッション参加用のリンクがコピーされた状態になるので、コードを見て欲しい相手にメールやチャットなどで送信しましょう。
参加者側(VS Codeがインストールされているところまで前提)はホストから送られてきたリンクを開きましょう。一旦Web版のVS Codeが開かれたのち、デスクトップアプリで開くことを許可するか聞かれるので許可します。
許可後は上記画像のようなウィンドウが表示されるので”開く”を選択します。セッション参加前に、参加者がアカウントにログインするか聞かれますが、ログインなしで大丈夫です。この場合セッション上での表示名を入力することになるので入力します。もちろんデフォルトのままでもOK.
参加者がセッションに入ろうとすると、ホストに”~~(参加者名)の参加を許可しますか”というウィンドウが表示されるので許可します。続いて編集を許可するか、あるいは読み取り専用にするかを選択します。以後はホスト側が開いているソースコードおよびファイルに参加者がアクセスできるようになります。先ほどのステップで編集可にしている場合は参加者もソースコードを編集できるようになります。
今回のケースでは”コーディング中に詰まったところを見てもらう”という想定のため、当然詰まっている箇所を相手にも伝える必要があります。もちろん〇〇ファイルのn行目と指示をしてもいいのですが、自信が編集中の場所に相手に来てもらう便利な機能があります。
それは画面右上にあるピン留めボタンです。これをクリックすると参加者がホストが編集している箇所を自動的に追従できるようになります。この機能をうまく使うと、今回の事例のような場合に即コード上での移動ができたり、コード上での相手の居場所を確認しながら共同編集を行うことができます。
ラップトップ一台を片手に誰かの場所までフッ軽に移動できる方にはあまり必要のない機能かもしれませんが、遠方との同時編集や今回のような想定だとなかなか便利な機能になります。また、この機能で修正、加筆を行なったプログラムは原則ホスト側のコンピュータにしか残りません。参加者側でも記録が必要な場合は、必ず別途保存を行う必要があります。
それでは快適な開発ライフを!!