home / works / 回答箱

回答箱

質問を作成し、匿名の回答を募集できるwebアプリを開発しました。

サービスリンク : https://answer-box.kanaru.jp

githubリンク : https://github.com/kanaru-ssk/answer-box

使い方

  1. 質問を入力して作成ボタンを押下
  2. URLをコピーまたはTweetボタンで質問を共有
  3. リンクから回答画面にアクセスしてもらい、回答してもらう

こだわりポイント

回答の入力UI

よくあるチャットの入力UIを模して作成。テキストボックスの高さが自動で調整されるようにするのが地味に手間がかかっている。

テキストボックスの裏に入力された文字をインナーに持つdiv要素を配置し、その高さにテキストボックスが合わせるようにすることで実装している。

回答がリアルタイムに反映

回答一覧はソケット通信を行なっており、他の人が登録した回答がリアルタイムに反映される。試しに回答画面を開きながら別の端末から回答を追加してみて欲しい。ブラウザのリロードなど必要なく回答が追加される。

今回のユースケースではリアルタイム性自体にほとんど恩恵はない。しかし、Firebaseの特性上、リアルタイム取得にすることにより、回線が

回答一覧が無限スクロール読み込み

回答が大量にあった場合、最初に最新20件の回答のみを取得します。スクロールし、一番下が近づいたタイミングで自動的に次の20件を取得します。これにより、大量の回答が存在する場合でも、初回の表示速度を落とすこともなく、ページ移動などのストレスもなく回答を閲覧することができます。

詳細情報

制作情報

  • 作業担当箇所 : 企画、設計、デザイン、開発、運用 (個人開発なので全行程)
  • 制作時間 : 8時間程度
  • ランニングコスト : 0円〜 (Firebaseが従量課金。ほぼ0円)

使用技術

デザインツール : Illustrator, Figma
言語など : NextJS, TypeScript, TailwindCSS
インフラ : Firebase, Vercel
バージョン管理 : Git, GitHub