Visual Studio CodeでGoogleドキュメントのように複数人同時編集する

ここ数年、Cloud9Codeanywhereなどの、いわゆるクラウドIDE(統合開発環境)が盛況です。クラウドIDEはWeb IDEとも呼ばれ、クラウド上の実行環境にWebブラウザでアクセスしてプログラミングできることが特徴ですが、何と言っても最大の特徴はリアルタイムコラボレーションでペアプログラミングできることでしょう。カタカナが多すぎるのでわかりやすく言い換えると、Googleドキュメントのように複数人で同時にコーディングできる、ということです。

リアルタイムコラボレーションの機能は非常に便利なのですが、一方で、できればローカルで使い慣れたエディタでコーディングしたいという気持ちもありますよね。

そこで今回は、その欲張りな想いを実現するVisual Studio Codeの拡張機能「rt-code-collab」をご紹介します!

※最初にお伝えしておくと、この拡張機能はまだまだ動作が不安定です。今後のアップデートを期待しつつ、ちょっと触ってみたいという方は続きをご覧ください。

スポンサーリンク

rt-code-collabの始め方

まずrt-code-collabの読み方ですが、おそらくリアルタイム・コード・コラボと読めば良いと思います。拡張機能の詳細はVisual Studioのマーケットプレイスに記載がありますので、ここではその記述を元にインストール方法を紹介します。

コラボレーションチームの作成

最初にコラボレーションするチームを作ります。チームを作るにはWebインターフェースのソースコードをGitHubからクローンしてきて、ローカルで立ち上げる必要があります。

$ git clone https://github.com/THE-WIRE/web-rt.git
$ cd web-rt
$ npm install
$ ng serve

ブラウザでhttp://localhost:4200/にアクセスすると下記の画面が立ち上がります。ここから”Create a new team”をクリックしチームを作成します。

すでにチームが存在する場合は”Join an existing team”をクリックしてチームに参加しましょう。

コラボレーション開始!

チームが作れたらいよいよリアルタイムコラボレーションを始めましょう。でもその前に少し準備が必要です。

依存プログラムのインストール

NodeJS

公式サイトからバイナリをダウンロードしてインストールしておきます。

Typescript

$ npm install -g typescript

Firebase

$ npm install firebase

rt-code-collabエクステンション

また、VS Codeにてrt-code-collabエクステンションをインストールしておきます。

VS Codeからrt-code-collabプロジェクトを実行

$ git clone https://github.com/THE-WIRE/RT-Code-Collab.git

プロジェクトをクローン(またはダウンロード)したら、Visual Studio Codeでプロジェクトディレクトリを開きます。

srcディレクトリ配下にあるextension.tsファイルを開いた状態でCTRL + F5を押下しextension.tsを実行します。

するとVS Codeの新しいウィンドウが開くので、コラボレーションしたいディレクトリを開きます。

コラボ対象のディレクトリを表示した状態でCTRL + SHIFT + P押下。上部に現れる入力エリアにstart wireと入力します。

さらに入力エリアが表示されるので、そこに作成したユーザのメールアドレスとパスワードを順番に入力しましょう。ちなみにお試しで下記のサンプルユーザでログインすることもできます。

1. Username - test1@test.com    Password - rootuser
2. Username - test2@test.com    Password - rootuser

正しくログインできると”You have logged in as XXX@XXX.com”というダイアログが表れ、リアルタイムコラボレーションの準備が整いました!複数名でログインすれば共同編集が可能です。

ただし、お互いに同じ名前のファイルを開いていないとコラボレーションできないので注意です。とはいえ、同じ名前のファイルをいちいち用意するのは手間なので、Dropboxなどの共有フォルダ上にプロジェクトを用意し、お互いにそのフォルダをVS Codeで開くというのが上手いやり方ではないでしょうか。

この記事が気に入ったら
カリノバにいいね ! しよう

by

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です