PhpStormを使ってリモートでペアプロを実現する（Code With Me）

ペアプロといえば１つのキーボードをペアで共有してコーディングを進めていったりしますが、リモートワークが加速している昨今では、メンバーが離れていて同じ場所にいない事も多々あると思います。

リモートでもペアプロを実現するために何か手はないかと探していたところ、JetBrains の IDE で実現できるとのことで試してみました。

今回は、PhpStorm を使ってリモートでペアプロを実現してみたいと思います。

Contents

1. Code With Me
2. Code With Me の導入
3. 招待リンクの作成
4. ゲストからプロジェクトへ接続する
5. 動作確認

Code With Me

PhpStorm を使ってリモートでペアプロを開始するためには、2020 年 9 月にリリースされた Code With Me というツールを使用します。

https://plugins.jetbrains.com/plugin/14896-code-with-me
（執筆している 2020/10/20 時点では「早期アクセスバージョン」という取り扱いになっているようです）

今回の目的はペアプロですが、モブプロ含め、共同編集を可能にするためのツールという位置づけになっています。

• IDE のバージョンは 2020.2.x（2020.2.1以降）から使用可能
• 早期アクセスバージョンだからうまく動作しないところもあるかもしれないので自己責任で利用する
• 早期アクセスバージョンは無料で使えるが将来的には有料になるかもしれない

導入手順については、以下のリリース記事を参考にして、こちらの手順で行っています。
https://blog.jetbrains.com/ja/idea/2020/09/code-with-me-eap-ja/

ペアプロなので、２台の PC があるとして、それぞれ、ペアプロを行うためのソースコードを持っている PC をホスト、そのソースコードについてペアプロで参加する PC をゲストと呼んでいます。

IntelliJ Client を使ってホストのプロジェクトへゲストが接続することで共同編集が可能になるようです。（ホストがゲストを招待する）

Code With Me の導入

まずは、ホスト側 IDE に Code With Me プラグインをインストールします。ゲスト側は、IDE が入っていればプラグインがなくても大丈夫なようです。

phpStorm の設定画面（ Preferences > plugins ）にて MarketPlace から Code With Me をインストールします。

インストールが完了すると、IDE の再起動を促されるので PhpStorm を再起動します。

再起動が完了し画面が開くと、右上に Code With Me のプルダウンが表示されるようになっているので、これで Code With Me のインストールは完了です。

招待リンクの作成

次に、ホスト PC から、ゲスト PC をペアプロに招待するための招待リンクを作成します。

Code With Me のプルダウンから、Enable Access and Copy Invitation Link を選択します。

確認画面が表示されるので、Continue ボタンを押下するとリンクが生成され、クリップボードにコピーが行われます。

コピーされた通知が若干わかりにくいのですが、再度、コピーしたい場合は、Code With Me のプルダウンから Copy Invitation Link を押下すれば再度 URL をコピーできます

招待 URL を確認すると、以下のような感じになっています。
https://code-with-me.jetbrains.com/XXXXXXXXXXXXXXXXXXX

これで招待リンクを作成できました。これをゲストへ共有して、ペアプロのための接続を進めていきます。

ゲストからプロジェクトへ接続する

ホストが生成した招待リンクをゲストで受け取ったら、ホストのプロジェクトに接続するためのリクエストを送ります。

ゲストにて、ブラウザから招待リンクにアクセスします。

ホスト側のプロジェクトに接続するために、ターミナルでコマンドを実行するように促されるので、表示されているコマンドをコピーし、ターミナルで実行します。

コマンドを実行すると、IntelliJ Client のダウンロードや接続のリクエストが行われます。このタイミングで、ホストの IDE に接続を許可するかを確認するダイアログが表示されます。

OK の場合は Accept ボタンを押下すると、ゲスト側の IntelliJ Client が起動して、ホストのプロジェクトに接続されます。

これでホストとゲストが繋がりました。

動作確認

つながったホストとゲストで動作確認をしてみます。

画像なのでちょっとわかりづらいですが、自分のカーソルとは別に相手のカーソルも出てきていて、共同でファイルを編集できるようになっています。

これで、リモートでペアプロを実現する事ができるようになりました。

まとめ

リモートでもペアプロができるなんて素敵な世の中になりました。しかも PhpStorm で簡単に実現できるのはうれしいですね。

JetBrains の IDE ならできるのだと思うので、WebStorm とかでもおそらく同じ手順でいけるんじゃないかと思います。

いくつかの詳細な操作や設定は以下に記載があったので併せて確認すると良いと思います。
https://www.jetbrains.com/help/idea/code-with-me.html

2020 年の 12 月に Code With Me が JetBrains IDE v2020.3 に含まれる的な事も書いてありました。
https://youtrack.jetbrains.com/issue/IDEABKL-708#focus=Comments-27-4365766.0-0

まだこの環境を使って共同作業をがしがし行ってはいないので、実際に使いながら不便に感じる点も出てくるのかなとは思いつつ、有料化される頃には色々改善されたりしていそうだし、これだけ便利なら課金もありだなと思いました。