2020年7月6日月曜日

DiscordとVSCodeを使ってリモートワークで快適にペアプロをする話。A story about comfortable pairing with remote work using Discord and VS Code.

https://techblog.zozo.com/entry/remote-pairprogramming
シェアしました。

ogp
こんにちは、WEAR部運用改善チームの三谷です。
僕たちのチームのミッションは、WEARの運用においてエンジニアが行なっている作業内容を見直し、本来注力すべきサービス開発に取り組める時間を増やせるよう、運用を改善することです。時にはシステムを開発して自動化をしたり、時にはその業務自体が本当に必要なのかを考えて業務フローを整えたりしています。
そんな僕たちが、昨今の新型コロナウィルスの流行によってリモートワークがメインとなった状態で、メンバー間でペアプロをしたいと思った時に採用した方法がとても良かったので紹介したいと思います。

はじめに

新型コロナウィルスの世界的な流行を受け、弊社では2月半ばからリモートワークが推奨となり、3月末には全員が強制的に在宅勤務となりました。WEARプロダクトのエンジニアも2月より、各自自宅で業務を行なっています。
リモートワークになって懸念されたのが、メンバー間で十分なコミュニケーションが取れなくなることでした。特に、オフィスで自然と行われていた雑談レベルの会話が、リモートワークではできなくなってしまうことが問題と思われました。というのも、これまでは何気ない雑談から問題に気づいたり、問題が発生したタイミングで担当者に直接話しかけて素早く対処できたということが多々ありました。
また、業務の合間にメンバーと世間話をして、お互いの性格や価値観を知るということもできました。Slackなどのテキストチャットでコミュニケーションをとることもできますが、いくらタイピングが速くてもこういった雑談レベルのコミュニケーションを全てSlackで行うのは不可能と思われます。
個人的には、リモートワークでのテキストチャットによって、以下の点でコミュニケーションが低下することを懸念していました。
  • テキストを打つのが面倒で必要以上に発言しなくなる点
  • 相手の状況がわからず、質問するタイミングが難しくなる点
  • 急ぎの用であっても、相手が見てくれないと返事が来ない点
  • 周りの状況がわからず、雑談を投げかけにくい点(雑談を投げかけても反応がないとソワソワしますよね)
この他にも、リモートワークによる懸念はたくさんあると思います。
以降は、これらの懸念を解消するために行った対策を紹介します。

Discordでオフィスにいるかのように話しかける場を作る

上記の背景があり、弊社ではリモートワークで気軽にメンバーに話しかけることができるようにDiscordを導入しました。

Discordとは

Discordは、もともとゲーマー同士が音声で会話をしながらゲームを進めるためのボイスコミュニケーションツールでした。サーバー(コミュニティ)を作成してチャンネルを用意することで、チャンネルにいるユーザーでボイスチャットができます。その他にも、テキストチャット機能やビデオ通話、画面共有もでき、とても便利なツールです。
弊社では、サーバーをプライベート設定することで使用を社内のメンバーに限定し、チームや個人のチャンネルを作成して様々な会話が行えるプラットフォームとして活用しています。
Discordについての詳細は、HPをご覧ください。

どこが便利?

前述しましたが、Discordではチャンネルに入ることにより、チャンネル内のユーザーとボイスチャットができます。チャンネルはいくつも作成できるので、自分のチャンネルを作成している人もいます。
僕のチームでは、基本的に始業後はDiscordにログインしてチームもしくは自分のチャンネルに入り、マイクのみミュートの状態にしています。そうしておくと、僕に話しかけたい人は同じチャンネルに入ってきて「みっきー!」と話しかけることで、僕には相手の呼びかけが聞こえます。そして、マイクのミュートを解除するだけで会話を開始できます。
discord
上図では、マイクをミュートにして自分のチャンネルにいる状態です。その他にも、数名が集まってミーティングをしていたり、僕と同じように個人のチャンネルで待機している人がいるのも一目でわかります。個人のチャンネルに一人でいる人は誰とも話していないことがわかるので、気軽に話しかけられます。また、誰かと話しているきに、チャンネルにふらっと他の人が入ってきて雑談が盛り上がるということもよくあります。
このように、Discordを利用すると雑談レベルの会話がリモートワークでも気軽に実現できます。これはとても画期的なことだと僕は思います!
最近では、WEARプロダクトのみんなが一日中Discordにログインしているので、オフィスで働いているときと同じ感覚で効率よく会話ができています。
しかし、いくつか課題も残っています。Discordに常駐することは強制ではないので、ログインしていない人に話かけたい場合はSlackなどで呼びかけて返答を待つ必要があります。
また、どこかのチャンネルで複数人が会話している様子を伺えても、雑談をしているのか込み入った話をしているのか判断ができないのでチャンネルに入りづらい時もあります。
例えばDiscord常駐を強制にしたり、雑談は「雑談チャンネル」で行うなどルールを決めると、もっと気軽に話しかけられる環境が作れて快適になりそうです。

Discord × Visual Studio CodeのLive Shareプラグインを用いたリモートワークでのペアプロの試み

ここで本題のリーモートワークでのペアプロについて紹介します。ペアプロには、先ほど紹介したDiscordとVisual Studio Code(以下、VSCodeと表記します)のLive Shareプラグインを組み合わせて使うのがオススメです!

Live Shareプラグインとは

Live Shareプラグインは、簡単に言うとVSCode上で複数人が同じファイルをリアルタイム編集できるVSCodeの拡張機能です。ホスト側が招待リンクをゲスト側に渡すことで、ゲスト側がVSCode上でホスト側のファイルを編集できます。ファイルの他にも、ターミナルやローカルサーバーも共有できます。
細かい使い方は公式情報をご覧ください。
Live Shareの機能を使ってみて個人的に驚いたのは、ゲスト側がホスト側のローカルファイルを触ることができることです。ホスト側のVSCodeのセッションにゲスト側がログインすることで、ホスト側のVSCodeで開かれているフォルダのファイルにアクセスできるので、ローカルファイルであっても共同編集できます。ソースコードを一旦GitHubへ上げ、プルリクを作成してレビューしてもらうなどの作業に比べると、ソースコードの共有と確認が格段にスムーズです。

Discordで話しかけて、Live Shareでペアプロをするととても効率的!

ここまでの結論として、リモートワークでは常にDiscordにログインした状態でいるのがオススメです。そして、ペアプロをしたいときは相手のいるチャンネルに行って「今ペアプロできますか?」と話しかけて、Live Shareを始める。こうすることでオフィスにいる時と比べても遜色ないほど、スムーズにペアプロを行うことができます。
さらに、Discordの画面共有機能も組み合わせると、ホスト側のローカル環境のプログラムの動作を一緒に確認しながら進められてとても便利です。僕たちのチームではこの方法を取り入れることで、リモートペアプロをしながらでも効率よくソースコードだけでなく表示の確認もできるようになりました。

DiscordとLive Shareプラグインのテキストチャット/ボイスチャットの比較

実は、Live Shareにもテキストチャットとボイスチャット機能があります。それぞれ、Live Share ChatとLive Share Audioという拡張機能をインストールすることで利用できます。尚、近日中にこれらの機能を統合したLive Shareがプレビュー公開される予定です。
詳しくは以下の記事をご覧ください。こちらの記事では、VSCodeでのテキストチャットとボイスチャットを使ったデモも確認できます。

実際に使ってみた感想

実際に使ってみた感想としては、テキストチャットについてはVSCodeアプリケーションから離れなくてもテキストが送れるので便利に感じました。しかし、現状ではテキストしか送れず、スクリーンショットやテキスト以外のファイルを送って説明するなどができないので少し歯がゆく感じました。その点では、他のテキストチャットアプリの方が快適です。
また、ボイスチャットも試したのですが音声が聞こえない状態になってしまい、その不具合は解消できませんでした。
何れにしても、Discordで相手に呼びかけてペアプロを始めるというフローが快適だと思うので、今の業務利用の仕方では、あえてLive Shareのボイスチャットは使わないかなと思いました。テキストチャットに関しては、ペアプロ中にURLなどちょっとしたテキストを送りたいときに便利なので使えそうです。

まとめ

リモートワークにおけるペアプロの方法を紹介してきました。これまでの内容をまとめると、僕たちのベストプラクティスはDiscordでマイクをミュートにして常駐しておき、気軽に話しかけてLive Shareでペアプロをするという方法です。
この方法で、お互いに離れたところでリモートワークをしていても、話しかけてから10秒ほどでペアプロを開始することが可能になります。オフィスにいる時と同じくらいスムーズですよね!
リモートワークでのコミュニケーションやペアプロの方法に困っている方は、是非、この記事の内容を参考にしていただけると幸いです。また、この他にもリモートワークを快適に行う方法があれば教えていただけると嬉しいです。

さいごに

業務以外でも僕たちのチームでは、リモート環境でもチーム内コミュニケーション促進を狙えるゲームとして人狼ゲームをやってたりします。人狼ゲームはコミュニケーションがとれるだけでなく、その人の人間性や意外な一面を垣間見ることができるので、発足して間もない僕のチームにとってはとても実りがありました。
今回のリモートワークのように突然業務をする環境が変わった時、それまでとは違って不便になることは当然出てきます。そんな中で、新しい仕組みを作って快適にしていくということは、エンジニアが得意にしていることだと思います。環境の変化に負けず、新しい楽しみを見つけていきましょう!
ZOZOテクノロジーズでは、一緒に楽しく働いてくれる方を募集しています。ご興味のある方は、以下のリンクからぜひご応募ください。

A story about comfortable pairing with remote work using Discord and VS Code.

We
shared https://techblog.zozo.com/entry/remote-pair programming.

ogp
Hi, I'm Mitani from the Wear Department Operations Improvement Team.
Our team's mission is to review the work engineers are doing in the operation of Wear and improve the operation so that they can spend more time developing services that should be focused on. Sometimes I develop a system and automate it, and sometimes I arrange the work flow considering whether the work itself is really necessary.
I would like to introduce the method we used when remote work became the mainstream due to the recent epidemic of the new coronavirus, and when we wanted to do a pair professional among the members, we adopted it.

Introduction

In response to the global epidemic of the new coronavirus, we recommended remote work from mid-February, and at the end of March, everyone was forced to work from home. Since February, wear product engineers have been working at their own homes.
One of the concerns I had with remote work was that I could not get enough communication between the members. In particular, it seemed to be a problem that chatting at the chat level, which was conducted naturally in the office, could not be done by remote work. In many cases, I was able to notice a problem from casual chat and talk to the person in charge directly when the problem occurred and I was able to deal with it quickly.
Also, I was able to talk to the members during my work and get to know each other's personality and values. You can communicate using text chat such as Slack, but it seems impossible to perform all such chat-level communication with Slack, no matter how fast you type.
Personally, I was concerned that text chat via remote work would reduce communication in the following ways:
  • The point where typing text is troublesome and does not speak more than necessary
  • Do not know the situation of the other party, it becomes difficult to ask questions
  • Even if you are in a hurry, you will not receive a reply unless the other person sees
  • I don't know the situation around me, and it's hard to throw a chat (I'm afraid that if I throw a chat, there is no reaction).
There are many other concerns about remote work.
Below, we will introduce the measures we have taken to resolve these concerns.

Create a place to talk to Discord as if you were in the office

With the above background, we have introduced Discord so that we can talk to members easily with remote work.

What is Discord

Discord was originally a voice communication tool for gamers to play games while talking with each other in voice. By creating a server (community) and preparing a channel, users on the channel can use voice chat. Besides, text chat function, video call, screen sharing are also very useful tools.
We use the server as a platform to limit the use to internal members by making the server private and create team and individual channels to conduct various conversations.
For more information about Discord, please visit our website.

Where is it convenient

As mentioned above, Discord allows you to have a voice chat with users on the channel by joining the channel. You can create as many channels as you like, so some people are creating their own.
My team basically logs in to Discord after starting work, enters the team or their own channel, and mutes only the microphone. That way, if someone who wants to talk to me comes into the same channel and says "Mickey!", I can hear the call from the other person. Then just unmute your microphone and start talking.
discord
In the above figure, the microphone is muted and you are on your channel. You can also see at a glance that a few people are gathering together for a meeting, or just like me, waiting on a private channel. You can feel free to talk to anyone who is alone on your personal channel because you know that you are not talking to anyone. Also, when I'm talking to someone, it's often the case that other people come into the channel and chat with each other.
In this way, by using Discord, conversations at the chat level can be easily realized even with remote work. I think this is a groundbreaking thing!
Nowadays, all Wear products have logged in to Discord all day long, so they can talk as efficiently and effectively as if they were working in the office.
However, some challenges remain. It is not mandatory to be resident in Discord, so if you want to talk to someone who is not logged in, you need to call Slack etc. and wait for a reply.
Also, even if you can see how many people are talking on some channel, it is difficult to enter the channel because it is not possible to determine whether they are chatting or complicated talk.
For example, if you decide the rules such as forcing Discord to be resident, or chatting on the "chat channel", it will be more comfortable to create an environment where you can talk more easily.

Discord × Visual Studio Code Live Share plug-in trial of remote pair work

Here, I would like to introduce PairPro in Remotwork, which is the main subject. For PairPro, we recommend using Discord and the Live Share plug-in of Visual Studio Code (hereafter referred to as VS Code) in combination!

What is Live Share Plugin

The Live Share plugin is simply an extension of VS Code that allows multiple people to edit the same file in real time on VS Code. By passing the invitation link to the guest side, the host side can edit the file on the host side on VS Code. Besides files, you can also share terminals and local servers.
Please see the official information for detailed usage.
One of the personal surprises when using the Live Share feature is that the guest can access local files on the host. By logging in to the VS Code session on the host side, the guest side can access the files in the folder opened by VS Code on the host side, so even local files can be co-edited. Sharing and checking the source code is much smoother than the task of uploading the source code to GitHub and creating a pull request for review.

Talking to Discord and doing Pair Pro with Live Share is very efficient!

In conclusion, it is recommended that you always log in to Discord for remote work. And when I want to do a pair pro, I go to the channel where the other party is and talk to me, "Can I do a pair pro now?" and start Live Share. By doing this, you will be able to perform Pair Pro smoothly as if you were in the office.
In addition, if you also use Discord's screen sharing function, it is very convenient to be able to proceed while checking the operation of programs in the local environment on the host side together. By adopting this method, our team can efficiently check not only the source code but also the display while performing remote pair pro.

Discord and Live Share plugin text/voice chat comparison

In fact, Live Share also has text and voice chat features. It is available by installing extensions called Live Share Chat and Live Share Audio respectively. A preview of Live Share that integrates these features will be released soon.
For details, see the following article. In this article you can also see a demo using text and voice chat in VS Code.

Impressions I actually tried

As a result of actually using it, I felt that text chat was convenient because you can send text without leaving the VS Code application. However, at the moment I can only send text, and I can not send screenshots and files other than text and explain it, so I felt a little bit toothy. In that respect, other text chat apps are more comfortable.
I also tried voice chat, but the problem was that I could not hear the voice, and that problem could not be resolved.
In any case, I think that the flow of calling out to the other party on Discord and starting a pair professional is comfortable, so I thought that I would dare not use the voice chat of Live Share in the way of using business now. Regarding text chat, it seems useful when you want to send a little text such as URL during Pair Pro.

Summary

We have introduced the pair professional method in remote work. To summarize what we've done so far, our best practice is to mute the mic on Discord, stay resident, talk to them and pair-pair on Live Share.
With this method, even if you are doing remote work away from each other, it is possible to start pair pro in about 10 seconds after talking. It's as smooth as when you're in the office!
If you are having trouble with remote work communication or pair professional methods, I would appreciate it if you can refer to the contents of this article. Also, I would be grateful if you could teach me how to perform remote work comfortably in addition to this.

at the end

In addition to work, our team plays the werewolf game as a game that aims to promote communication within the team even in a remote environment. The werewolf game was not only good for communication, but also a glimpse of the person's humanity and unexpected aspects, so it was very fruitful for my new team.
When the working environment suddenly changes like the remote work this time, it will naturally become inconvenient unlike before. Under such circumstances, I think engineers are good at creating new systems and making them comfortable. Let's find new fun without losing the environment!
ZOZO Technologies is looking for someone to work with. If you are interested, please apply from the link below.

0 コメント:

コメントを投稿