0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【個人開発】時系列チャットで日付ごとの情報が把握しづらい問題を解決するWebアプリを作った

Posted at

はじめに

この記事では、チャットとカレンダーを組み合わせたWebアプリ「ChatCalendar」を個人開発した経緯と、どのような課題を解決しようとしたのかを紹介します。

ChatCalendarは、日付ごとにチャットを行えるカレンダー型のグループチャットアプリです。

家族やプロジェクトなど、複数人での連絡を日付ごとに整理しながら行うことを目的に作りました。

従来のチャットで感じていた課題

プロジェクトやグループでの連絡は、多くの場合グループチャットで行われます。

その中では、例えば次のようなメッセージが1つの時系列に流れていきます。

  • 来週月曜の打ち合わせ、15時開始に変更します
  • 今日のミーティング、資料このURLです
  • 10/30のリリース作業、担当Aさんでお願いします
  • 明日の朝会は中止です

このように、異なる日付の話題が混在するため、後から「特定の日の情報」だけを確認するのが難しくなります。

また、欠席や休みの連絡を早めに投稿すると、その時点では重要でも、時間が経つにつれて他の投稿に埋もれ、必要なタイミングで周知されにくいという問題もありました。

日付を軸にチャットできる仕組みにした

カレンダーの1日を1つのチャットとして扱う仕組みにしました。

これにより、各日付ごとに話題や連絡がまとまり、他の日のやり取りと混ざることがありません。「その日に関する情報」だけを、すぐに確認できるようになります。

例えば、10/30を開けば、その日の打ち合わせ内容や変更点、欠席連絡などが1つの画面にまとまって表示されます。

欠席や休みの連絡も、早めに投稿しておいて問題ありません。日付ごとに管理されるため、投稿のタイミングに関係なく、必要な日になったときに確実に目に入るようになります。

ChatCalendarではどのように使うのか

ChatCalendarは、クラスやプロジェクトごとに「ルーム」を作成して利用します。
各ルームにはカレンダーがあり、ユーザーは日付をクリックして、その日のチャットを開きます。メッセージはすべて、選択している日付に紐づいて投稿されます。

このように、「どのルームの」「どの日付の」話題なのかが常に明確な状態で、
チャットを行えるようにしています。

ChatCalendarの主な機能

カレンダーから日付を選んでチャットできる

スクリーンショット 2026-01-03 17.05.16.png

カレンダーの各日付が1つのチャットになっています。日付をクリックすると、その日の連絡やメモだけが表示されます。

カレンダーの日付ごとのチャット

スクリーンショット 2026-02-04 23.53.25.png

メッセージはすべて選択中の日付に紐づいて投稿されます。
欠席連絡や変更事項を早めに書いても、必要な日になったときに確実に確認できます。

会話の中の予定や連絡をGoogleカレンダーに保存できる

チャットで話した内容の中から、予定や重要な連絡を選んでGoogleカレンダーに保存できます。

会話と予定管理を行き来する必要がなく、決まった内容を自然な流れでカレンダーに残せます。

組織で使うことを想定した権限機能

ChatCalendarは、クラスやプロジェクトなど複数人での利用を想定しています。

そのため、ルームごとに「リーダー」「メンバー」といった権限を設定でき、
招待や管理操作を制御できるようにしています。

少人数から人数の多いグループまで、安心して運用できることを意識しました。

技術構成

本アプリは、フロントエンドからバックエンドまでJavaScriptで統一して開発しています。

  • フロントエンド:React

    日付ごとのチャットやカレンダー表示など、状態が多いUIを扱うためにReactを採用しました。

  • バックエンド:Node.js(Express)

    REST APIの構築がしやすく、Socket.IOによるリアルタイム通信との相性が良いためです。

  • リアルタイム通信:Socket.IO

    日付を開いているユーザーに対して、メッセージを即時に反映するために使用しています。

  • データベース:PostgreSQL

    チャットやメッセージを複数ユーザーで扱うため、データの整合性を重視して選択しました。

  • インフラ:Render / Neon / Cloudinary

  • Renderは個人開発でも扱いやすく、PostgreSQLはNeon、画像保存にはCloudinaryを利用しています。

苦労した点

日付を軸にしたチャットという仕組みを、ユーザーに直感的に理解してもらうことに苦労しました。

UIや操作の試行錯誤を重ねる必要があり、どの情報をどこに見せるかを何度も調整しました。

また、リアルタイム通信の実装では実際にエラーが発生することも多く、原因を特定して修正するのに時間がかかりました。

終わりに

ChatCalendarは、チャットで予定を決めると情報が流れてしまうという課題を少しでも解決したいという思いから開発しました。

まだ発展途中のサービスなので、実際に使っていただいた方の意見をもとに改善していきたいと考えています。

もともとはクラスやプロジェクトでの連絡を整理しやすくすることを想定して設計しましたが、まずは家族や友達同士など、身近なグループで気軽に使ってもらえたら嬉しいです。

実際に使っていただいた方の意見をとても重視しています。

利用状況や満足度、他サービスとの比較、改善してほしい点などを確認するため、少ししっかりめのアンケートを用意しました。

サービス改善や新機能の検討に活用させていただきます。

率直な感想やアイデアをいただけると本当に助かります。

▶ ChatCalendar:https://chatcalendar.onrender.com
▶ アンケート:https://docs.google.com/forms/d/e/1FAIpQLScIr6vwJxSRaRdAIL5MZAmWTv84CX1F_KQ998kTd1-7IZMg0w/viewform?usp=dialog

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?