自宅で集中できない人のためのオンライン・コワーキングスペースを作った話

リモートワーク捗ってますか？

自宅で仕事をしてると、気が乗るまで仕事が手に付かない、つい他のことに気が散ってしまうなどの問題はありませんか？

僕はありました。自宅からのリモートワーク歴9年ですが、やっとその問題にうまく対処できるようになってきました。

その経緯については、noteに書いたので、そちらを参照ください！

https://note.com/sushiwork/n/nd992dc1d4e98

オンライン・コワーキングスペースで何ができるの？

https://sushiwork.com/

一言で言うと、みんなで一緒にポモドーロ・テクニックができます。

ポモドーロ・テクニックは簡単に言うと、25分集中して仕事した後、5分休憩するというサイクルを繰り返す仕組みのことです。これをやると何が良いかは先程のnoteに詳しく書いてあります。

こちらがオンライン・コワーキングスペースです。

他人に見られている感覚をゆるく再現

Youtubeで仕事や勉強の様子を垂れ流して配信してる人、zoomで同僚同士で接続して無言で仕事をする、最近だとClubhouseの無音部屋に入って仕事をするなどの事例を聞いたことはないでしょうか。これは誰かに見られているという感覚を持つことで、自分を律して集中することができるようにしている事例です。

でも、自分が集中するためにYoutube配信とかほとんどの人はやりたくないですよね。少なくとも僕はやりたくないです。

そこで、オンライン・コワーキングスペースの出番です！他人に見られている感覚を緩めに再現します。

オンライン・コワーキングスペースには、最大5人までのユーザが自動でマッチングされます。その5人のユーザが、今どういうステータスなのか「作業中」「休憩中」「退席中」「終了」なのかがリアルタイムに把握できます。また、誰がいつ、25分のセッションを完了したのかを知らせるタイムラインを表示します。

このリアルタイム性のおかげで、誰かに見られている感覚を持つことができ、仕事への集中と、他の人がちゃんとやってるから、俺もちゃんとやらなきゃというやる気アップに繋がります。

なんで寿司職人がいるの？

オンライン・コワーキングスペースのスクショを見て、ほとんどの人が疑問に思ったことでしょう。何で寿司なの？何でいらすとやの寿司職人がいるの？と(笑)

それはオンライン・コワーキングスペースに入る前に寿司を何貫食べるかを注文する必要があるからです！！

1日の目標設定が超重要

ポモドーロ・テクニックにおいて、1日の目標設定をすることは、超重要事項です(ということもnoteに書いています)。

寿司を何貫食べるかという注文が、そのまま1日25分のセッションを何回こなすかという目標設定になります。

そして、25分のセッションを完了させると、寿司職人が寿司を握ってくれます。タイムラインで「いいね」をもらった時にもここで一緒に知らせてくれます。

メンバー全員が目標を達成すると、大将から素敵なプレゼントがあるかも！？

というわけで、サービス名を、寿司を前面に出した「Sushi Work」にしました！

Vue.jsとFirebaseで作りました

お待たせしました。ここでやっとzennっぽい話です。

このサービスの肝はリアルタイム性です。ユーザAのステータスが作業中に切り替わったことを、リアルタイムで他のユーザに表示する必要があります。

実はこのサービスのアイデアは3年前くらいからありました。ただ、このリアルタイム性を実現するための技術選定でずっと迷っていました。

websocketを使うのかぁ、ちょっと面倒そうだな、Socket.IOを使えばもっと簡単にできるかな、それでも面倒そうだな、RailsのActionCableというのが出てきたぞ、でももうちょっと枯れてくるまで待ちたいな、とか考えている内に時間が過ぎていきました。

Firestoreのリアルタイムリスナーはとても扱いやすい

そんな時に見つけたのが、Firebaseのデータベース、Firestoreのリアルタイムリスナー機能です。

リアルタイムリスナーのサンプルコード

firestore
  .collection("users")
  .doc("taro")
  .onSnapshot(doc => {
    const userStatus = doc.data().status;
  });

usersコレクションのtaroドキュメントが更新された時、onSnapshot内のfunctionが、更新されたデータが引数に渡され、実行されます。userStatus を何らかの方法で画面に表示させるようにしておけば、リアルタイムにユーザーステータスが切り替わってくれます。

何これ、超簡単！！

というのを爆速でサンプルのチャットアプリを実装してみた時に感じ、「これで勝つる！」と確信しました。

その後、Firestoreのセキュリティールールに苦戦したり、初めて本格的に使うVue.jsに悩まされたりしましたが(普段はPHP、Rubyでサーバーサイドエンジニアをやってます)、やっとサービスとしてリリースすることができました。

その時ハマったポイントなどは、現在、別記事を執筆中です。開発しながら、コツコツメモしてきたものを一気に書き出すので、大作になりそうです。。もう少しで公開できる予定です。

公開したらTwitterで呟くので、もしよければ、Twitterでフォロー頂ければと思います。

https://twitter.com/imaginelab

世界中の人が一緒に仕事をできる場所にしたい

Sushi Workでは、あえてテキストコミュニケーションをできなくしています。仕事に集中して欲しいというのも理由の1つですが、テキストコミュニケーションをなくすことで言語に依存せず使えるサービスにできるというのが大きな理由です。

色々な国の人とコワーキングすることを想像すると、ちょっと世界が身近になる気がしませんか？日本の夜型の人と、アメリカの朝型の人が一緒に仕事をするとか、オンラインだからこそできる体験です。

オンライン・コワーキングスペースのフォーマットをもう少し試行錯誤してみたいので、今は日本語、日本のタイムゾーンだけに対応してますが、いずれは世界の人に使ってもらえるサービスにしていきたいと考えています。

その意味で日本初で世界的な知名度を誇る「Sushi」をサービス名に入れていたりもします。正しい寿司の形を世界に広められるサービスにもなれればいいかなとも思っています。

切実なお願い

でかいことを言っておいて、急に小さい話になりますが。。

自分としては最高なサービスを作ったつもりですが、全然ユーザが集まりません(泣)。

自分はいいものを作っているのだと暗示にかけ、何とかモチベーションを保っている状況です。。サービスを使ってもらうことが励みになります。ぜひ一度使ってみてください！

そして、ここのコメントでもTwitterでもいいのでフィードバックをいただけると嬉しいです。記事のシェアも大歓迎です。

現状では、スマホのブラウザではタイマー終了時の通知が機能しないので、PCのブラウザで使うことを推奨しています。

まだまだやりたいことがたくさんで道半ばのサービスですが、少しづつ改善していくつもりなので、これからよろしくお願いします！

https://sushiwork.com/