大学内で、「あるお題に対して、参加者がワードを投稿し、それに対して投票できる」アプリを探している方がいたため、ないなら作ろう、ということで作ってみました。
公開
GitHub Pagesでホスティングしています：https://nonotchi.github.io/WordVote
ソースコードは、AWS Lambda関数も含めてGithubで公開しています。ただし、冗長でリファクタリングする必要があり、可読性は悪いです。
API Gatewayで苦労
API GatewayでWebSocket APIを構築したのですが、仕様が変わったのかネット上のサンプルはどれも動作しませんでした。いろいろ調べて、何とか動くようになりました。
また、異なった投票間での混信を防ぐために、connection_idと投票のIDを紐づける必要があります。そこで、WebSocketのURLにクエリパラメータを付加し、 event.get(‘queryStringParameters’) で取得しています。こんなことができることは知らなかったので、簡単なアプリではありますが多くの勉強ができました。
使い方
CSSによるダイナミックなアニメーションが気持ち良いです？
STARTボタンを押して、お題を決めると、投票ページに遷移します。左下のボタンでURLをコピーし、共有します。参加者はこのURLから参加して、右下のボタンで回答を追加できます。追加された回答には投票ができ、票数を集計します。
TTL（Time to Live）により、１週間で削除されます。
【2026/01/06】アップデート
勉強用に作ったものであまり力を入れていなかったのですが、久しぶりにアクセスしてみたら問題を見つけたため修正しました。
まず、投票IDにスラッシュなどが含まれ、不正なURLになってしまうことがありました。
また、投票済み判定にLocalStorageを使用し、再読み込みして何度も投票ができないようにしました。投票部屋および各単語にはIDが割り振られています。投票済みの単語IDをブラウザ側に保存しておき、当該IDの単語に投票ができない機能を実装しました。
投票済みの単語は、再読み込みしてもグレーアウトするようになりました。
