テク技

【VSCode Live Share】一対多形式のハンズオンで重宝したVSCode拡張機能、LiveShare活用のためのポイント

教える立場として実際に使ってみて、導入する上で思わぬ罠があったりしたので共有。

詳しくはこちらに書いていますが、週一回ほどの頻度で高校の授業の教師としてプログラミングを教えるという機会をいただきました。生徒は共用のWindowsPCを使用するということで制約がある中、VSCodeのLiveShareがまさに大車輪の活躍をしてくれました。と言いたいところですが、実際のところは思う通りにはいかずグダってしまったところもありました。詳しくは「仕様上の注意」のところに書いています。

VScode Live Shareについて

VSCodeで利用できる拡張機能です。ググって貰えば解説している記事はたくさんあると思いますので詳しくは割愛します。一応できることを簡単にまとめておきます

VSCode Live Shareでできること

  • プロジェクトディレクトリのリアルタイム共有

    • 書き込み権限を付与された参加者はファイルの作成や書き込みが可能
    • 開発環境もホスト機をのものが共有されます
  • ローカルサーバーの共有

    • ホストがローカルサーバーを立てると参加者はアクセスできます。
機能

簡単に機能の紹介をば

・共有デバッグ

まだ本格的には使っていませんが、そう遠くないうちに必要となる場面が来ると思われます。追記します

・ターミナルの共有

ターミナルを共有することで参加者もターミナルにコマンドを打ち込むことができるようになります。例えばMacをホストとして共有した場合はwindows機でもlinuxコマンドが使用できる点が便利でした。

・コメント機能

全体へのメッセも個人DMも可

仕様上の注意や不具合

5、6人以上であってもエンジニア同士であれば問題ないと思いますが、そうでなければ意外とスムーズにはいかないと思います。自分が詰まったところを紹介しておきます。

Anonymous(匿名)の参加者は書き込み不可

共有されたプロジェクトの参加者が書き込みを行う場合、Github或いはMicrosoftアカウントでサインインしておく必要があります。割と罠です。

参加時のGithub認証がうまくいかない

VSCode上で発行されたurlを共有する方法ではGithubアカウントとVScodeの連携ができず、Joinできないというケースが発生しました。

  • 発行リンクはInternetExproerで開くとOAuthに失敗します。 Chrome等で開きましょう。デフォルトのブラウザをInternetExploerにしている人がいるなら注意
  • 事前にVisual Studio Live Share Sign inからサインインしてもらっておくと良いでしょう
ブラウザでのバグ

Liveshareプロジェクトを誰かがブラウザで開いている場合に発生しました。勝手に書き込みや大量の改行が起こり処理が重くなります。ちゃんとVSCodeの拡張機能で参加するのがおすすめです。

読んでいただきありがとうございます!!

記事として取り上げたトピックを体系化してまとめた内容を電子書籍として販売しています。購入していただくことで執筆の応援ができます。詳細はこちらから