🍣

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

3 min read 31

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

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

僕はありました。自宅からのリモートワーク歴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/

この記事に贈られたバッジ

Discussion

勉強をする時に使わせていただきます👍🏻

ありがとうございます!

仕事向けに作ったのですが、勉強用途にも使ってもらえて嬉しいです。

ログイン画面にはのれんがあって、入ると寿司屋っぽいデザインだと雰囲気出てよさそう
誰かログインしたら🍵出してほしい(もしくは時々🍵でてきてほしい
何貫か選ぶのは回転すしっぽいので、メニューあるといいかも
(カウンター+ショウケース感)
25分以外が選べてもいいなぁ・・・(10分とか15分なら巻物シリーズかな

見た目の話ばかりですが、基本的に目を離して使うサービスなので
あまり凝っても仕方ないかもですが、せっかくなので使って楽しい雰囲気あるとうれしいですね
通知で気が散るか通知で時々励ますか(マウスが止まってたら声をかけるとか)
大将のがんばりがほしい感あります

コメントありがとうございます!

おっしゃる通り、デザインはもっと楽しい雰囲気になるといいですよね。
毎日使うサービス(にしたい!)なので、楽しさは重要だと思ってます。

ですが、僕がデザインに弱いこともあり、簡素なデザインになってしまっています。
デザイン面に課題があることは認識しているので、今後アップデートしていきたいと思います。

来店時にお茶🍵を出すのは、いいアイデアですね。
そのアイデアいただきました!
タイムラインのいいねボタンを、来店時だけ🍵に変更しようと思います。

25分以外を選べるのはあってもいいかなと思いつつ、全員同じ時間にしておいた方が一貫の重要性が同じになる面もあるので、要検討かなと考えています。

時間がなくてできていませんが、大将ももっと活躍させたいところです。

色々とフィードバックありがとうございました!
お茶の実装まで少々お待ちください。

こんにちは。

先ほど、タイムラインのいいねボタンを、来店時だけ🍵に変更するように修正ました。
ついでに、退店時は👋の手を振るボタンに変更しました。

寿司屋っぽい楽しくなるデザイン修正も引き続き行っていく予定です!
今後ともよろしくお願いします。

ポモドーロ開始したのを忘れて放置してしまったのですが、これってブラウザ通知とか実装する予定はありますでしょうか?

ご利用ありがとうございます!

ブラウザ通知は既に実装済みです。

すみませんが、現状では、スマホ版のブラウザだと通知が機能しない状況なので、PC版のブラウザをご利用ください。

最初のタイマーを開始する時に、ブラウザ通知を送って良いかダイアログが出るので、そこで許可していただければ通知が機能します。

実装はされているのですね。ということは不具合?
もう一度やってみたのですが、やはり通知は来ないようです。PC版Chrome。通知は許可になっています。
コンソールに何らかのエラーらしきもの net::ERR_NETWORK_CHANGED 200 が出ていました。

ご報告ありがとうございます。

僕はMacのChromeで動作確認してますが、正常に動作しています。おそらく何かしらの設定の問題ではないかと推測してます。

https://help.chatwork.com/hc/ja/articles/203127314

上記はChatworkのヘルプページですが、このURLを開いていただき、これの下記番号を確認してみてもらえないでしょうか。

1
4
5 URLは、「https://sushiwork.com:443」に読み替えてください
8
9
10

僕は9のOS側の設定が怪しいかなと思っています。
お手数ですが、ご確認よろしくお願いいたします。

素晴らしいアプリを開発していただきありがとうございます。

提案なのですがTwitterへの共有機能が欲しいです!部屋に入っても一人の場合があるのでTwitterに共有しフォロワーを部屋に招待できるとより良いサービスになるかと思います!

ありがとうございます!

部屋に入っても一人だと寂しいというのは、この記事を出す前に、自分で嫌というほど味わっているので、課題としては認識しています。

解決する手段として、Twitterからの招待になるかはまだ分かりませんが、その課題への対応はしたいと考えています。

知り合いとグループを作成し、そのメンバーで部屋に入れるという機能も考えているのですが、まだベストな仕組みを設計できていません。その機能を使って、一人で寂しい問題を解決できればと考えています。

もしくは、大将にもっと活躍してもらう方向性での解決のどちらかになると思います。

少し時間がかかるかもですが、対応する予定なので、しばらくお待ちいただければと思います。

知り合いとグループ作成できるのはとてもいいアイデアですね。
応援しています!

今日から使い始めました!

タイムラインの表示順は逆が良いかなと思いました。(新しいのが上)

ありがとうございます!

僕はスクロールしながら追っていたのですが、確かに新しいのが上の方が、楽かもしれないですね。
開発環境で試してみて、見やすそうだったら、仕様変更します。

皆さんからたくさんフィードバックをいただけて、github issueの課題が増えまくってますよ 笑。
早く改善できるように頑張ります。

タイムラインの表示順を新しいものが上に来るよう変更しました!

確かにこちらの方がスクロールしなくていいので楽ですね。
ご提案ありがとうございました!

使いました〜簡易的でよき〜
大将からの寿司がリアル寿司で笑いました!
ポモドーロ・テクニックが25分+5分がセットなので時間変更は個人的には要らないかなと思いました〜
時間変更版を別で作る方がポモドーロのコンセプト的にはいいんじゃないですかね
でも分散されて微妙か!!!
なんにせよ、よきでした〜

使っていただき、ありがとうございます!
喜んでもらえて良かったです。

時間の設定は悩みどころですね。
ご意見ありがとうございました!
もう少し検討してみますー。

本当に求めていたものです!昨日今日かなり集中できました。

個人的にはGitHubのヒートマップみたいなものがあると嬉しいです!

ありがとうございます!そう言っていただけて嬉しいです。

これ僕も欲しいです(笑)。
時間はかかるかもですが、統計機能も実装する予定です。

なるべく早く実装できるように頑張ります!

自分も同じように同期型のオンライン作業サービス作ってみたかったので、めちゃくちゃ参考になります!
1人でモチベーション保つの難しいですもんね、、!

ありがとうございます!

一緒に作業できる仲間がいるとモチベーションアップになりますね。

世界ではこういうサービスも流行ってるらしいですよ。

https://wired.jp/2021/02/03/productivity-nanny-work-smarter/

自作サービス作りは大変ですが、楽しいし、技術的な勉強にもなるのでおすすめですよ。

先日の友人との勉強会でこちらの記事を拝見して、本日から使わせて頂いています!
ポモドーロ25分のあいだに、どうしてもお手洗いに行きたくなった時用に、トイレ離席でカウントを止められる機能があると嬉しいなと思いました...!

ご使用ありがとうございます!

フィードバックいただいてから、ずっと考えていましたが、一時停止ボタンの追加は見送ろうと思います。

ポモドーロテクニックの正式な方法に従うと、25分の間に差し込みが入って中断した場合は、そのポモドーロはリセットされ、最初からやり直しになります。一時停止という概念はありません。

しかし、一時停止をしたいという気持ちはよく分かります。せっかく何分も進めたポモドーロをリセットするのは、もったいない気がして、嫌ですよね。

Sushi Workで、正式なポモドーロテクニックのやり方を踏襲しなければならないという決まりはないので、どうすべきか検討しました。

その結果、25分間は中断せずに、一気に作業して欲しい(そうする努力をして欲しい)、その方が結果的にユーザさんのメリットになると判断しました。

一時停止ボタンがあると、25分経過する前に、ちょっと休憩することが簡単にできてしまい、中断しがちになってしまうのと、差し込みを減らす努力をしなくなってしまうことは、ユーザーさんのメリットにならないと考えています。

ぜひ、25分間は、中断なく集中して作業できるように工夫をする方向で考えてもらいたいなと思います。

ご期待に添えず申し訳ありませんが、今後ともSushi Workをよろしくお願いいたします!

今日から使います!
よろしくお願いします!

ありがとうございます!
ぜひぜひ、よろしくお願いいたします!

こういうの欲しかったので、使ってみます!

ありがとうございます!
何かのお役に立てれば幸いです。

最近はボチボチ人いるみたいですね

以前出てて一人だと寂しい問題の対策を検討してるみたいですね

Twitterで招待する案もあるみたいですが、リアルな人じゃなくてbotみたいなのが居てもいいんじゃないですかね。どれがbotか等は明かさず、複数居て名前も変えてみたいな!
知ってたら居てもやる気にはならないので!

おかげさまで、毎日使ってくれるユーザーさんが増えてきました。

アイデアありがとうございます!

どれがbotか明かさなくてもbotがいると分かった時点で、本当の人もbotに見えてくるという問題もありますね。あと、密かにbotを仕込んでおくのは倫理的にもどうかなと(笑)。

botの実装を頑張るのであれば、大将をもっと活躍させる方向で頑張りたいなと考えています。

フィードバックをいただけると考えるきっかけになるので、また何か思いついたら、気軽にコメントください!

ログインするとコメントできます