在宅勤務でも雑談がしたい!在宅勤務の課題解決の取り組み

こんにちは、@morishin127 です。クックパッドの在宅勤務環境 - クックパッド開発者ブログ でも書かれていた通り、クックパッドは2月18日から現在に至るまで全従業員が原則在宅勤務となっています。突然の在宅勤務体制の中でも社員がなるべくいつも通りの生産性を発揮できるように様々な取り組みを行っています。このような状況になる以前から Slack や Zoom、GitHub Issue などのコミュニケーションツールが職種を問わず日常的に利用されていたため、比較的物理的な制約を受けないコミュニケーションができていたと感じていますが、それでもやはり全員が在宅勤務になると色々な課題が生じました。従業員に向けたアンケートでは次のような課題が挙がっていました。

  • 仕事とプライベートの切り替えが難しい
  • 同僚や上司との気軽なコミュニケーションがしにくい
    • いちいち Zoom をつなぐのはハードルが高い
  • チームの雰囲気を感じ取るのが難しい
  • 家に籠もっていて運動不足になる
  • デスク、イスなどの環境が悪く、体の負担が大きい
    • ソファやローテーブル、座椅子などで作業している
  • Zoom が連続してリフレッシュが難しい
  • ネット速度が遅い
  • 休み時間にも仕事の Slack の流量が増え、気が休まらない
  • 共有のホワイトボードやカンバンがないので、情報共有が難しい
  • 気分転換がしにくい
  • 人に会いたい、さみしい
  • 子供の泣き声等で集中しにくい
  • オフィスの Zoom Rooms だと画面が大きく、細かい字の資料も共有しやすいが、ラップトップだと字が小さく見にくい
  • モチベーションを維持するのが難しい
  • 日本語の会話は得意だが、読み書きは得意でないため、テキストコミュニケーションが増えたのはストレス(英語話者)
  • 同僚の機嫌や感情を感じ取りづらい
  • 紙の書類を扱う仕事があり、在宅では難しい
  • 孤独感を感じる

課題解決のための社内ハッカソン

そんな中、CTO から社内ハッカソン開催のアナウンスがありました。テーマは「私の Work From Home の課題解決」で、最大8時間の業務時間を使って課題を解決する何かを作ろうという催しです。もちろん在宅での参加で、作品はデモ動画の形で提出という形式でした。

ハッカソン自体については CTO がこちらの記事を書いてくれたので合わせてご覧ください 💁

techlife.cookpad.com

f:id:morishin127:20200416155553p:plain
社内アナウンスの記事

雑談可能な Zoom 部屋「さぎょイプ」

ハッカソンには多くの社員が参加し色々な作品が生まれました。この記事では私が作ったアプリケーションを紹介したいと思います。

「同僚や上司との気軽なコミュニケーションがしにくい」「チームの雰囲気を感じ取るのが難しい」「孤独感を感じる」といった課題に着目し、雑談可能な Zoom 部屋を用意して外から今誰が入っているかがわかる「さぎょイプ」というアプリケーションを作りました。

f:id:morishin127:20200415234905p:plain
アプリのスクリーンショット(ハンゲームの麻雀ロビーって言われた...)

さぎょイプ」って死語な気もしますが、要するに同僚と Zoom を繋ぎっぱなしで業務をすることです。シングルページの Web アプリケーションで、「どこに入ってもok、何も言わずに出入りok、いる人に突然話しかけてもok、何も喋らずもくもく作業しててok」というルールだけを掲げて複数の Zoom ミーティングを並べています。このアプリを作る前から社内で「さぎょイプ」活動はあったのですが、Zoom のミーティングにはホストという概念があり、ホストが別のミーティングのホストになると前のミーティングは閉じられてしまうという問題や、今誰が入っているか外から見ることができないという問題があったのでアプリケーションを作りました。

利用シーン

朝起きて業務を開始すると誰かしらが入っているのでそこに入って、大抵は互いに何も喋らず黙々と作業をしていたりします。喋ってないのに意味あるのかと思うかもしれませんが、やっぱり同僚の顔が見えていると漠然とした不安のような孤独感のような気持ちを抱きづらくなるのを感じます。

f:id:morishin127:20200421172856j:plain
Zoom の様子

ちょっとした質問や雑談も気軽にできるので、業務の効率化にも繋がります。サービス開発のようなアイデアをゼロから生み出すような作業は意外と雑談の中から生まれたりするものです。「雑」の有用性についてはこちらの記事をご覧ください。

techlife.cookpad.com

技術的な話

Zoom の管理者権限を持って Zoom アプリを作成したり、Firebase プロジェクトを作成したりする必要があるのでそのまま簡単に動かせるわけではありませんが、アプリケーションのソースコードを GitHub に置きました。興味のある方はご参考にどうぞ。

github.com

Zoom のミーティングにはホストという概念があり、ホストが別のミーティングのホストになると前のミーティングは閉じられてしまうという問題や、今誰が入っているか外から見ることができないという問題があった

と述べましたが、この問題の解決のために API 経由でライセンスユーザーを複数作成し、1ユーザーにつき1ミーティングをホストする形でさぎょイプ用のミーティングを用意することで解決しています。ライセンスユーザーなのでお金はかかります😇 詳細な手順はリポジトリの README に記載しました。

アプリケーションはブラウザで動くクライアントアプリと Cloud Functions の2つでできています。データストアは Firebase の Cloud Firestore を利用しています。Zoom ミーティングの参加・退出イベントを受け取ってリアルタイムで状態を画面に反映させたかったため、その辺りを簡単に実現できる Cloud Firestore と Firebase を選択しました。

Zoom API には特定のミーティングに参加中のユーザーのリストを取得するエンドポイントが存在せず(ナンテコッタ)、ミーティングの状態を知るにはユーザーのミーティングへの参加・退出時に飛ばせる Webhook イベントを受け取るしかありません。この Webhook イベントを Cloud Functions で受け取り、さぎょイプ用に用意した Zoom ミーティングへの参加・退出イベントであれば Firestore にそのミーティングの状態を書き込むということをしています。

クライアントアプリは Firestore の変更を購読し、参加者のリストを表示しているだけです。デプロイは Firebase Hosting でも良かったんですが社内アクセスに制限したかったので GitHub Enterprise の GitHub Pages として公開しました。静的なページなので S3 でもなんでも大丈夫です。

クライアントアプリは React で実装されたシンプルなアプリで、同僚である KOBA789 お手製の KOBA789/frontend-template を使用しました。クローンするだけで TypeScript で React アプリが書け、スタイルが Emotion で書け、 Parcel がバンドルしてくれます。今回はハッカソンということで8時間のタイムアタックだったので、こういうボイラープレートが大変ありがたかったです。

おわりに

この記事では自分の作ったアプリの紹介だけに止まりましたが、ハッカソンでは他にも色々な課題解決が生まれました。他の作品についてはこちらの記事をご覧ください。

昨今の状況から多くの職場で働き方が変わり、皆さまの環境でもこれまでに無かった課題が生まれていると思います。皆さまの身の周りで行われている課題解決もよければ発信して教えていただけたらなと思います。みんなでこの状況を乗り切っていきましょう。

/* */ @import "/css/theme/report/report.css"; /* */ /* */ body{ background-image: url('https://cdn-ak.f.st-hatena.com/images/fotolife/c/cookpadtech/20140527/20140527163350.png'); background-repeat: repeat-x; background-color:transparent; background-attachment: scroll; background-position: left top;} /* */ body{ border-top: 3px solid orange; color: #3c3c3c; font-family: 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, Osaka, 'MS Pゴシック', sans-serif; line-height: 1.8; font-size: 16px; } a { text-decoration: underline; color: #693e1c; } a:hover { color: #80400e; text-decoration: underline; } .entry-title a{ color: rgb(176, 108, 28); cursor: auto; display: inline; font-family: 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, Osaka, 'MS Pゴシック', sans-serif; font-size: 30px; font-weight: bold; height: auto; line-height: 40.5px; text-decoration: underline solid rgb(176, 108, 28); width: auto; line-height: 1.35; } .date a { color: #9b8b6c; font-size: 14px; text-decoration: none; font-weight: normal; } .urllist-title-link { font-size: 14px; } /* Recent Entries */ .recent-entries a{ color: #693e1c; } .recent-entries a:visited { color: #4d2200; text-decoration: none; } .hatena-module-recent-entries li { padding-bottom: 8px; border-bottom-width: 0px; } /*Widget*/ .hatena-module-body li { list-style-type: circle; } .hatena-module-body a{ text-decoration: none; } .hatena-module-body a:hover{ text-decoration: underline; } /* Widget name */ .hatena-module-title, .hatena-module-title a{ color: #b06c1c; margin-top: 20px; margin-bottom: 7px; } /* work frame*/ #container { width: 970px; text-align: center; margin: 0 auto; background: transparent; padding: 0 30px; } #wrapper { float: left; overflow: hidden; width: 660px; } #box2 { width: 240px; float: right; font-size: 14px; word-wrap: break-word; } /*#blog-title-inner{*/ /*margin-top: 3px;*/ /*height: 125px;*/ /*background-position: left 0px;*/ /*}*/ /*.header-image-only #blog-title-inner {*/ /*background-repeat: no-repeat;*/ /*position: relative;*/ /*height: 200px;*/ /*display: none;*/ /*}*/ /*#blog-title {*/ /*margin-top: 3px;*/ /*height: 125px;*/ /*background-image: url('https://cdn-ak.f.st-hatena.com/images/fotolife/c/cookpadtech/20140527/20140527172848.png');*/ /*background-repeat: no-repeat;*/ /*background-position: left 0px;*/ /*}*/