トークテーマのルーレットを作成できるサービス「RouletteTalk」をリリースしました

RouletteTalk

はじめに

オンライン飲み会で使える、トークテーマのルーレットを作れるサービス「RouletteTalk」をリリースしました。

  • RouletteTalkのURL

roulette-talk.com

github.com

自己紹介

オンラインスクール「フィヨルドブートキャンプ」で学習をしているsiso255と申します。現在はSIerでプログラマーとして働いています。

RouletteTalkとは

概要

トークテーマと話す人を設定したルーレットを作れるWebサービスです。作成したルーレットは自動的に保存されます。

使い方

  1. 「ルーレットを作る」をクリックします。

  2. 画面右側のトークテーマと話す人を設定します。「＋トークテーマを追加する」をクリックすることでトークテーマを追加、既存のトークテーマをクリックすることで編集ができます。トークテーマにカーソルを合わせた際に表示される「×」ボタンをクリックすることでトークテーマを削除できます。話す人についてもトークテーマと同様の手順で設定します。

    トークテーマ、話す人の一覧
    「＋トークテーマを追加する」をクリック時
    トークテーマ編集時
    トークテーマ削除ボタン

  3. 画面左側の「スタート」ボタンをクリックしてルーレットを開始します。ルーレットを最初からやり直す場合は「リセット」ボタンをクリックします。

  4. 「コピー」ボタンでコピーしたURLを保存していただくか、ブックマークをしていただき、再度同じURLにアクセスすることで事前に作成したルーレットを使うことができます。 ※URLを忘れた場合、作成済みのルーレットにアクセスできなくなりますのでご注意ください。

解決したい問題

一時期ほどではないですが最近はオンラインのイベントが増え、オンライン飲み会も一般的になりました。どこにいても交流できるオンライン飲み会ですが、初対面の人が多くて話題に困ってしまったり、話すタイミングを逃してしまい特定の人が話し続けてしまったりすることがあると思います。RouletteTalkでは話題と話す人の両方をルーレットで決められるので、全員に話す機会が回ってきます。 また、オンライン飲み会当日に話題をいくつも考えるのは大変ですが、RouletteTalkは作成したルーレットを保存できるので、事前にルーレットを作成して当日すぐに使い始めることができます。

技術スタック

言語、フレームワーク等

DB

インフラ

  • Fly.io

テスト

CI

工夫したところ

ルーレット編集時のストレスを少なくする

RouletteTalkでユーザーが操作をするのは主に「ルーレットを作る」、「ルーレットを開始する」の2つだけなのですが、このうち特にユーザーが離脱する要因になりそうと思ったのは「ルーレットを作る」の部分でした。ルーレット編集時のストレスを軽減できるように、トークテーマと話す人の追加・編集・削除機能の実装にはHotwireのTurbo Streamsを使用しています。開発の途中までは、一か所の更新（フォームの表示など）はTurbo Frames、複数か所に更新が必要な場合はTurbo Driveを使うようにしていました。PC上でローカルで動かす分には特に問題なかったのですが、本番環境にデプロイして確認してみたところ登録・編集・削除時のレスポンスに課題がありました。そのため、複数か所の更新にはTurbo DriveではなくTurbo Streamsを使用して必要なところ以外は更新しないようにしたことでレスポンスも許容できるレベルとなり、操作感も良くなったと思います。

ログイン機能を付けない

ログイン機能によって提供できる機能が増えるメリットはあるのですが、一方でユーザー登録が使い始める一つの心理的なハードルになってしまうのではとも思っていました。利用シーンを考えても手軽に使えるサービスである方が良いと思ったので、RouletteTalkではログイン機能を付けないことにしました。ユーザーが作ったルーレットに誤って別のユーザーがアクセスしてしまう問題については、UUIDを使用して十分に長いURLを発行することにより対応しています。

苦労したところ

Hotwireの使い方、Stimulusの設計

今回のサービスを作るにあたって初めてHotwireを使いました。TurboもStimulusも非常に便利なライブラリなのですが、最初のうちは全く使い方が分からなかったので、公式のハンドブックやブログ記事などを読みながら徐々に使い方に慣れていきました。Hotwireの中で特に苦労したのはStimulusの設計です。どのようにコントローラを分割すれば良いのか、コントローラの命名（何を主語にすれば良いのか）など、あまり情報が多くないこともあり、かなり苦戦しました。Stimulusを使っている箇所の設計については今後も勉強しながら適宜見直したいと思っています。

ルーレットのテスト

ルーレットの開始についてはStimulusを使って実装しているのですが、こちらのシステムテストにかなり苦労しました。ルーレットが想定した角度で止まっているのかを検証するためにルーレットが停止したときの角度を取得する必要があったのですが、単純に何度に回転しているという角度が取得できるわけではなく、matrixの値から角度を計算する必要がありました。matrixのドキュメントに加え、易しめの数学の記事なども読みながらなんとか実装することができました。ただ、このテストのおかげでMathモジュールにこんなメソッドがあったんだという発見もあり、貴重な経験になりました（Math.#atan2も初めて使いました）。

今後追加したい機能

今後追加したい機能は、以下の2つです。

  • 作ったルーレットを配布できる機能
  • 直近でアクセスしたルーレットの一覧を表示する機能

一つ目のルーレットを配布できる機能については、複数テーブルに分かれるイベントで主催者が事前にトークテーマを設定したルーレットを各テーブルで使うシーンを想定したものです。二つ目の閲覧ルーレット一覧については、作成したルーレットが増えてきたときに管理を楽にするためです。どちらの機能もまだ考慮が必要なためファーストリリースには含めませんでした。今後使っていく中で、やっぱりあった方が良いとなれば追加したいと思っています。

さいごに

時間はかかってしまいましたが無事にサービスをリリースすることができました。開発に際してご協力いただきましたフィヨルドブートキャンプのメンターの皆さん、関わってくださった受講生の皆さん、本当にありがとうございました。今後も使いやすいサービスにしていけるよう頑張っていきたいと思います。