IceClasher
オンラインでのアイスブレイクを手助けするタイマーアプリ
https://iceclasher.onrender.com/
- メールアドレス：test@test
- パスワード：123456
- トップページ(一覧ページ)のヘッダーからユーザー新規登録を行う
- ラウンジを作成するボタンから、ラウンジ新規作成ページに遷移する
- ラウンジの設定(ラウンジ名・一人当たりの発言時間・あいことば)を入力しラウンジの作成をする
- ログイン状態であれば、トップページ(一覧ページ)に作成したラウンジの一覧が表示される
- ラウンジ名が書かれているボックスをクリックすれば、個別のラウンジのページに遷移できる
- メンバーフォームで、参加するメンバーの名前を入力していく(複数入力奨励)
- トピックフォームで、アイスブレイクで話題にしたいトピックを入力する(複数入力奨励)
- メンバーディスプレイにはメンバーが、トピックディスプレイにはトピックがランダムで表示される
- 再生ボタンをクリックすることでタイマーが再生され、残り時間のカウントが減っていく
- 残り時間が0になったら(もしくはスキップボタンを押されたら)、残り人数のカウントが1つ減り、残り時間のカウントはリセットされ、次の人のメンバーとトピックが表示される
- 残り人数が0になったら、アイスブレイクは終了し、タイマーの色が変わる
- トップページ(一覧ページ)で"copy url"ボタンを押すと個別のラウンジページのurlがクリップボードにコピーされる
- ラウンジページのurlと あいことば の情報を誰かに共有することで、共有された人はユーザーはユーザー登録不要でラウンジの機能を使うことができる
- 共有されたラウンジページのurlに入ることで、あいことば確認ページへ遷移する
- 正しい あいことば を入力することで、ラウンジページに遷移する
- 通常と同じようにメンバー・トピックの追加やタイマーの実行ができる
コロナ禍によりオンラインで話し合う機会が増えたが、オフラインでの会話に比べてオンラインでは「大人数になるほど通話がしにくくなってしまう」という課題を感じていた。
課題を分析した結果、以下が真因であると仮説を立てた。
- 音声の遅延によりタイミングの見極めが難しい
- ボディランゲージを使えないため誰かに明確に質問を投げかけないと誰が話すべきかわからない
- 一度に話せる人が限られているため全員が会話に加わることが難しい
同様の問題を抱えている方も多いと推測し、真因の解決を図るために、オンライン上でのアイスブレイクの助けとなるタイマーアプリの開発をすることの決意をした。
- メンバーの出欠データを利用し、出席者のみ話す人に選ばれるようにする
- 残り時間が視覚的にわかるようにする(時計の秒針のような演出)
- 再生するサウンドの選択ができるようにする
- アイスブレイク終了時の演出を強化する(紙吹雪を散らす 等)
- HTML
- CSS
- JavaScript
- MySQL
- Render
- Visual Studio Code
- Git Hub
- Google スプレッドシート
- Notion
以下のコマンドを順に実行
% git clone https://github.com/sabanonitsuke/IceClasher
% cd IceClasher
% bundle install
% yarn install
- セキュリティのため、あいことばを暗号化して保存するようにした
- 配列でセッションの管理をすることで、部屋ごとに入室許可を設けた
- 自分が作成したラウンジにはあいことばを入力不要になる設定
- リンク共有を楽にするため、URL取得・クリップボードに保存機能を実装
- ユーザーにストレスを与えないため、残り人数を表示するようにした
- ユーザーに被りが出ないように、一度表示したユーザー記録用の配列を使用
- タイマー進行中は再生ボタンの色が変わるようにした
- 時間が余った場合に、すぐに次の人が話せるようにスキップ機能を用意した
- リセットボタンを押したら非同期で進行状況がリセットされ、そのままタイマーを再度使えるようにした