PhpStorm を使ってリモートでペアプロを開始するために Code With Me というツールを使用します。

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

<p>ペアプロといえば１つのキーボードをペアで共有してコーディングを進めていったりしますが、リモートワークが加速している昨今では、メンバーが離れていて同じ場所にいない事も多々あると思います。</p>
<p>リモートでもペアプロを実現するために何か手はないかと探していたところ、JetBrains の IDE で実現できるとのことで試してみました。</p>
<p>今回は、PhpStorm を使ってリモートでペアプロを実現してみたいと思います。</p>
<h2 id="contents">Contents</h2>
<ol>
<li><a href="#code-with-me">Code With Me</a></li>
<li><a href="#code-with-me-%E3%81%AE%E5%B0%8E%E5%85%A5">Code With Me の導入</a></li>
<li><a href="#%E6%8B%9B%E5%BE%85%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%AE%E4%BD%9C%E6%88%90">招待リンクの作成</a></li>
<li><a href="#%E3%82%B2%E3%82%B9%E3%83%88%E3%81%8B%E3%82%89%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%B8%E6%8E%A5%E7%B6%9A%E3%81%99%E3%82%8B">ゲストからプロジェクトへ接続する</a></li>
<li><a href="#%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D">動作確認</a></li>
</ol>
<h2 id="code-with-me">Code With Me</h2>
<p>PhpStorm を使ってリモートでペアプロを開始するためには、2020 年 9 月にリリースされた Code With Me というツールを使用します。</p>
<p><a href="https://plugins.jetbrains.com/plugin/14896-code-with-me" rel="noopener noreferrer" target="_blank">https://plugins.jetbrains.com/plugin/14896-code-with-me</a><br>
（執筆している 2020/10/20 時点では「早期アクセスバージョン」という取り扱いになっているようです）</p>
<p>今回の目的はペアプロですが、モブプロ含め、共同編集を可能にするためのツールという位置づけになっています。</p>
<ul>
<li>IDE のバージョンは 2020.2.x（2020.2.1以降）から使用可能</li>
<li>早期アクセスバージョンだからうまく動作しないところもあるかもしれないので自己責任で利用する</li>
<li>早期アクセスバージョンは無料で使えるが将来的には有料になるかもしれない</li>
</ul>
<p>導入手順については、以下のリリース記事を参考にして、こちらの手順で行っています。<br>
<a href="https://blog.jetbrains.com/ja/idea/2020/09/code-with-me-eap-ja/" rel="noopener noreferrer" target="_blank">https://blog.jetbrains.com/ja/idea/2020/09/code-with-me-eap-ja/</a></p>
<p>ペアプロなので、２台の PC があるとして、それぞれ、ペアプロを行うためのソースコードを持っている PC をホスト、そのソースコードについてペアプロで参加する PC をゲストと呼んでいます。</p>
<p>IntelliJ Client を使ってホストのプロジェクトへゲストが接続することで共同編集が可能になるようです。（ホストがゲストを招待する）</p>
<h2 id="code-with-me-の導入">Code With Me の導入</h2>
<p>まずは、ホスト側 IDE に Code With Me プラグインをインストールします。ゲスト側は、IDE が入っていればプラグインがなくても大丈夫なようです。</p>
<p>phpStorm の設定画面（ Preferences > plugins ）にて MarketPlace から Code With Me をインストールします。</p>
<div class="img_wrap"><amp-img layout="responsive" src="/images/posts/214/821i5dEyHOawsocmA9xB.png" width="800" height="352" alt="Code With Me プラグインをインストール"></div>
<p>インストールが完了すると、IDE の再起動を促されるので PhpStorm を再起動します。</p>
<div class="img_wrap"><amp-img layout="responsive" src="/images/posts/214/eW0Ntd8p7LZSEtppvWuY.png" width="800" height="288" alt="PhpStorm を再起動"></div>
<p>再起動が完了し画面が開くと、右上に Code With Me のプルダウンが表示されるようになっているので、これで Code With Me のインストールは完了です。</p>
<h2 id="招待リンクの作成">招待リンクの作成</h2>
<p>次に、ホスト PC から、ゲスト PC をペアプロに招待するための招待リンクを作成します。</p>
<p>Code With Me のプルダウンから、Enable Access and Copy Invitation Link を選択します。</p>
<div class="img_wrap"><amp-img layout="responsive" src="/images/posts/214/u6WnHTWpWCLpuvhZSD8O.png" width="800" height="212" alt="ペアプロ招待リンクの作成"></div>
<p>確認画面が表示されるので、Continue ボタンを押下するとリンクが生成され、クリップボードにコピーが行われます。</p>
<div class="img_wrap"><amp-img layout="responsive" src="/images/posts/214/6FJiwy5OrdKs54d904Im.png" width="800" height="368" alt="ペアプロ招待リンクの作成前の確認画面"></div>
<p>コピーされた通知が若干わかりにくいのですが、再度、コピーしたい場合は、Code With Me のプルダウンから Copy Invitation Link を押下すれば再度 URL をコピーできます</p>
<div class="img_wrap"><amp-img layout="responsive" src="/images/posts/214/7o8M4ytQONiEFJ7LB0kV.png" width="800" height="268" alt="招待リンクのコピー"></div>
<p>招待 URL を確認すると、以下のような感じになっています。<br>
https<a href=""></a>://code-with-me.jetbrains.com/XXXXXXXXXXXXXXXXXXX</p>
<p>これで招待リンクを作成できました。これをゲストへ共有して、ペアプロのための接続を進めていきます。</p>
<h2 id="ゲストからプロジェクトへ接続する">ゲストからプロジェクトへ接続する</h2>
<p>ホストが生成した招待リンクをゲストで受け取ったら、ホストのプロジェクトに接続するためのリクエストを送ります。</p>
<p>ゲストにて、ブラウザから招待リンクにアクセスします。</p>
<div class="img_wrap"><amp-img layout="responsive" src="/images/posts/214/58RkNWJ0wzEFryYeXJAW.png" width="800" height="443" alt="招待URLへアクセスした際の画面"></div>
<p>ホスト側のプロジェクトに接続するために、ターミナルでコマンドを実行するように促されるので、表示されているコマンドをコピーし、ターミナルで実行します。</p>
<p>コマンドを実行すると、IntelliJ Client のダウンロードや接続のリクエストが行われます。このタイミングで、ホストの IDE に接続を許可するかを確認するダイアログが表示されます。</p>
<div class="img_wrap"><amp-img layout="responsive" src="/images/posts/214/vV9zW0C19YxLQYi9bE4H.png" width="800" height="233" alt="ゲスト接続許可確認ダイアログ"></div>
<p>OK の場合は Accept ボタンを押下すると、ゲスト側の IntelliJ Client が起動して、ホストのプロジェクトに接続されます。</p>
<p>これでホストとゲストが繋がりました。</p>
<h2 id="動作確認">動作確認</h2>
<p>つながったホストとゲストで動作確認をしてみます。</p>
<div class="img_wrap"><amp-img layout="responsive" src="/images/posts/214/9buJfvkCBzFuFJ2BX0bD.png" width="800" height="406" alt="ペアプロ画面"></div>
<p>画像なのでちょっとわかりづらいですが、自分のカーソルとは別に相手のカーソルも出てきていて、共同でファイルを編集できるようになっています。</p>
<p>これで、リモートでペアプロを実現する事ができるようになりました。</p>
<h2 id="まとめ">まとめ</h2>
<p>リモートでもペアプロができるなんて素敵な世の中になりました。しかも PhpStorm で簡単に実現できるのはうれしいですね。</p>
<p>JetBrains の IDE ならできるのだと思うので、WebStorm とかでもおそらく同じ手順でいけるんじゃないかと思います。</p>
<p>いくつかの詳細な操作や設定は以下に記載があったので併せて確認すると良いと思います。<br>
<a href="https://www.jetbrains.com/help/idea/code-with-me.html" rel="noopener noreferrer" target="_blank">https://www.jetbrains.com/help/idea/code-with-me.html</a></p>
<p>2020 年の 12 月に Code With Me が JetBrains IDE v2020.3 に含まれる的な事も書いてありました。<br>
<a href="https://youtrack.jetbrains.com/issue/IDEABKL-708#focus=Comments-27-4365766.0-0" rel="noopener noreferrer" target="_blank">https://youtrack.jetbrains.com/issue/IDEABKL-708#focus=Comments-27-4365766.0-0</a></p>
<p>まだこの環境を使って共同作業をがしがし行ってはいないので、実際に使いながら不便に感じる点も出てくるのかなとは思いつつ、有料化される頃には色々改善されたりしていそうだし、これだけ便利なら課金もありだなと思いました。</p>

<p>ペアプロといえば１つのキーボードをペアで共有してコーディングを進めていったりしますが、リモートワークが加速している昨今では、メンバーが離れていて同じ場所にいない事も多々あると思います。</p>
<p>リモートでもペアプロを実現するために何か手はないかと探していたところ、JetBrains の IDE で実現できるとのことで試してみました。</p>
<p>今回は、PhpStorm を使ってリモートでペアプロを実現してみたいと思います。</p>
<h2 id="contents">Contents</h2>
<ol>
<li><a href="#code-with-me">Code With Me</a></li>
<li><a href="#code-with-me-%E3%81%AE%E5%B0%8E%E5%85%A5">Code With Me の導入</a></li>
<li><a href="#%E6%8B%9B%E5%BE%85%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%AE%E4%BD%9C%E6%88%90">招待リンクの作成</a></li>
<li><a href="#%E3%82%B2%E3%82%B9%E3%83%88%E3%81%8B%E3%82%89%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%B8%E6%8E%A5%E7%B6%9A%E3%81%99%E3%82%8B">ゲストからプロジェクトへ接続する</a></li>
<li><a href="#%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D">動作確認</a></li>
</ol>
<h2 id="code-with-me">Code With Me</h2>
<p>PhpStorm を使ってリモートでペアプロを開始するためには、2020 年 9 月にリリースされた Code With Me というツールを使用します。</p>
<p><a href="https://plugins.jetbrains.com/plugin/14896-code-with-me" rel="noopener noreferrer" target="_blank">https://plugins.jetbrains.com/plugin/14896-code-with-me</a><br>
（執筆している 2020/10/20 時点では「早期アクセスバージョン」という取り扱いになっているようです）</p>
<p>今回の目的はペアプロですが、モブプロ含め、共同編集を可能にするためのツールという位置づけになっています。</p>
<ul>
<li>IDE のバージョンは 2020.2.x（2020.2.1以降）から使用可能</li>
<li>早期アクセスバージョンだからうまく動作しないところもあるかもしれないので自己責任で利用する</li>
<li>早期アクセスバージョンは無料で使えるが将来的には有料になるかもしれない</li>
</ul>
<p>導入手順については、以下のリリース記事を参考にして、こちらの手順で行っています。<br>
<a href="https://blog.jetbrains.com/ja/idea/2020/09/code-with-me-eap-ja/" rel="noopener noreferrer" target="_blank">https://blog.jetbrains.com/ja/idea/2020/09/code-with-me-eap-ja/</a></p>
<p>ペアプロなので、２台の PC があるとして、それぞれ、ペアプロを行うためのソースコードを持っている PC をホスト、そのソースコードについてペアプロで参加する PC をゲストと呼んでいます。</p>
<p>IntelliJ Client を使ってホストのプロジェクトへゲストが接続することで共同編集が可能になるようです。（ホストがゲストを招待する）</p>
<h2 id="code-with-me-の導入">Code With Me の導入</h2>
<p>まずは、ホスト側 IDE に Code With Me プラグインをインストールします。ゲスト側は、IDE が入っていればプラグインがなくても大丈夫なようです。</p>
<p>phpStorm の設定画面（ Preferences > plugins ）にて MarketPlace から Code With Me をインストールします。</p>
<div class="img_wrap"><img src="/images/posts/214/821i5dEyHOawsocmA9xB.png" width="800" height="352" alt="Code With Me プラグインをインストール"></div>
<p>インストールが完了すると、IDE の再起動を促されるので PhpStorm を再起動します。</p>
<div class="img_wrap"><img src="/images/posts/214/eW0Ntd8p7LZSEtppvWuY.png" width="800" height="288" alt="PhpStorm を再起動"></div>
<p>再起動が完了し画面が開くと、右上に Code With Me のプルダウンが表示されるようになっているので、これで Code With Me のインストールは完了です。</p>
<h2 id="招待リンクの作成">招待リンクの作成</h2>
<p>次に、ホスト PC から、ゲスト PC をペアプロに招待するための招待リンクを作成します。</p>
<p>Code With Me のプルダウンから、Enable Access and Copy Invitation Link を選択します。</p>
<div class="img_wrap"><img src="/images/posts/214/u6WnHTWpWCLpuvhZSD8O.png" width="800" height="212" alt="ペアプロ招待リンクの作成"></div>
<p>確認画面が表示されるので、Continue ボタンを押下するとリンクが生成され、クリップボードにコピーが行われます。</p>
<div class="img_wrap"><img src="/images/posts/214/6FJiwy5OrdKs54d904Im.png" width="800" height="368" alt="ペアプロ招待リンクの作成前の確認画面"></div>
<p>コピーされた通知が若干わかりにくいのですが、再度、コピーしたい場合は、Code With Me のプルダウンから Copy Invitation Link を押下すれば再度 URL をコピーできます</p>
<div class="img_wrap"><img src="/images/posts/214/7o8M4ytQONiEFJ7LB0kV.png" width="800" height="268" alt="招待リンクのコピー"></div>
<p>招待 URL を確認すると、以下のような感じになっています。<br>
https<a href=""></a>://code-with-me.jetbrains.com/XXXXXXXXXXXXXXXXXXX</p>
<p>これで招待リンクを作成できました。これをゲストへ共有して、ペアプロのための接続を進めていきます。</p>
<h2 id="ゲストからプロジェクトへ接続する">ゲストからプロジェクトへ接続する</h2>
<p>ホストが生成した招待リンクをゲストで受け取ったら、ホストのプロジェクトに接続するためのリクエストを送ります。</p>
<p>ゲストにて、ブラウザから招待リンクにアクセスします。</p>
<div class="img_wrap"><img src="/images/posts/214/58RkNWJ0wzEFryYeXJAW.png" width="800" height="443" alt="招待URLへアクセスした際の画面"></div>
<p>ホスト側のプロジェクトに接続するために、ターミナルでコマンドを実行するように促されるので、表示されているコマンドをコピーし、ターミナルで実行します。</p>
<p>コマンドを実行すると、IntelliJ Client のダウンロードや接続のリクエストが行われます。このタイミングで、ホストの IDE に接続を許可するかを確認するダイアログが表示されます。</p>
<div class="img_wrap"><img src="/images/posts/214/vV9zW0C19YxLQYi9bE4H.png" width="800" height="233" alt="ゲスト接続許可確認ダイアログ"></div>
<p>OK の場合は Accept ボタンを押下すると、ゲスト側の IntelliJ Client が起動して、ホストのプロジェクトに接続されます。</p>
<p>これでホストとゲストが繋がりました。</p>
<h2 id="動作確認">動作確認</h2>
<p>つながったホストとゲストで動作確認をしてみます。</p>
<div class="img_wrap"><img src="/images/posts/214/9buJfvkCBzFuFJ2BX0bD.png" width="800" height="406" alt="ペアプロ画面"></div>
<p>画像なのでちょっとわかりづらいですが、自分のカーソルとは別に相手のカーソルも出てきていて、共同でファイルを編集できるようになっています。</p>
<p>これで、リモートでペアプロを実現する事ができるようになりました。</p>
<h2 id="まとめ">まとめ</h2>
<p>リモートでもペアプロができるなんて素敵な世の中になりました。しかも PhpStorm で簡単に実現できるのはうれしいですね。</p>
<p>JetBrains の IDE ならできるのだと思うので、WebStorm とかでもおそらく同じ手順でいけるんじゃないかと思います。</p>
<p>いくつかの詳細な操作や設定は以下に記載があったので併せて確認すると良いと思います。<br>
<a href="https://www.jetbrains.com/help/idea/code-with-me.html" rel="noopener noreferrer" target="_blank">https://www.jetbrains.com/help/idea/code-with-me.html</a></p>
<p>2020 年の 12 月に Code With Me が JetBrains IDE v2020.3 に含まれる的な事も書いてありました。<br>
<a href="https://youtrack.jetbrains.com/issue/IDEABKL-708#focus=Comments-27-4365766.0-0" rel="noopener noreferrer" target="_blank">https://youtrack.jetbrains.com/issue/IDEABKL-708#focus=Comments-27-4365766.0-0</a></p>
<p>まだこの環境を使って共同作業をがしがし行ってはいないので、実際に使いながら不便に感じる点も出てくるのかなとは思いつつ、有料化される頃には色々改善されたりしていそうだし、これだけ便利なら課金もありだなと思いました。</p>

Author