こんにちは。YOUTRUSTでWebエンジニアをしている井上（YOUTRUST）です。
新緑がまぶしい季節になりましたね。窓を開けると気持ちいい風が花粉と共に入ってきて、コードを書く手も軽やかです。
この記事では、私がこの1年間主に取り組んできたチャットルームの改善について振り返ります。
はじめに
YOUTRUSTは仕事専用SNSとして、ユーザー同士がやりとりできるチャットルームを提供しています。
「テキストが送れる。画像も1枚添付できる。」
1年前のチャットは、最低限の機能こそあったものの、LINEやSlackと比べると足りないものだらけでした。
- 画像を複数枚まとめて送れない
- 相手がオンラインかわからない
- 相手が入力中かわからない
- 送信に失敗するとメッセージが消える
- リアクションがリアルタイムで反映されない
- 既読もリアルタイムで反映されない
- URLを貼ってもプレビューを削除できない
- 画像読み込みでレイアウトがガタつく
こうして並べてみると、どれも「ないと困る」というより「あって当然」のものばかりです。普段チャットツールを使っていて意識することはないけれど、ないと地味にストレスになるやつですね。
この記事では、約1年間かけてこれらの「当たり前」をひとつずつ埋めていった過程を振り返ります。
まず「複数枚送れない」をなんとかする（2025年7月〜10月）
複数ファイル送信
最初に手をつけたのは、添付ファイルまわりです。当時は1メッセージに画像が1枚しか添付できませんでした。
「1枚しか送れない」という制約はデータの持ち方に起因していて、メッセージと添付ファイルが1対1の関係になっていました。これを1対多に変更するところからスタート。データの持ち方を変えるだけと思いきや、影響範囲が広く一筋縄ではいきませんでした。
さらに厄介だったのが横展開です。YOUTRUST・TALENT Solution・SALES Solution等、チャットを使うアプリが複数あり、それぞれ微妙にUIが違います。まず1つのアプリで完成させ、共通部品を切り出してから残り3つに移植する、という流れで進めました。
リアルタイムの体験を作る（2025年11月〜12月）
この時期はリアルタイム通信をフル活用した機能が集中しています。
既読のリアルタイム反映
地味だけど効果が大きかった改善です。
それまでは、相手がメッセージを読んでも、こちらの画面では「既読」にならず、リロードして初めて反映される状態でした。相手が読んだタイミングでこちらの画面にも即反映されるようにしただけですが、これだけで体感品質がぐっと上がりました。
リアクションのリアルタイム同期
絵文字リアクションの機能自体はすでにあったのですが、つけたリアクションが相手の画面にリアルタイムで反映されない、という問題がありました。
操作した瞬間にまず自分の画面に即反映しつつ、裏側で相手の画面にも反映される仕組みにしています。
メッセージ送信失敗時の再送・削除
送信に失敗した時、メッセージがそのまま消えてしまうのはストレスです。送信ボタンを押した瞬間にメッセージを画面に表示し、失敗した場合は再送・削除を選べるようにしました。
※ 以下の赤枠内が「再送・削除」ボタン
オンラインステータス
「相手がオンラインかどうか」を表示する機能です。
画面を開いた時点のステータスを取得しつつ、その後の変化はリアルタイムに反映される仕組みです。
作ってみて大変だったのは、こういう細かい部分です。
- 複数タブ: ブラウザで複数タブを開いている時、1つ閉じただけでオフラインにならないようにする。「最初に開いたタブ」と「最後に閉じたタブ」だけを検知する仕組みが必要
- 通知対象の絞り込み: 全ユーザーに通知すると負荷が大きいので、直近アクティブなユーザーだけに絞る
- 同時操作への対策: 複数タブを高速に開閉すると状態が矛盾することがあるので、同時に処理が走らないよう制御
※ 以下画像の緑ドットがオンラインの状態
OGPプレビューの削除とレイアウトシフト防止
URLを貼った時にOGPプレビューを削除できる機能と、画像読み込み時のレイアウトシフトを防ぐ改善も、この時期に入れています。
実はどちらも「チャットルームを開いた時にスクロールが最下部に行かない」という同じ問題から生まれました。画像やOGPの高さが後から確定することで、最下部にいたはずのスクロール位置がズレてしまうんですね。表示前にサイズを確定させることで、このズレを解消しました。
ファイル事前アップロード
添付ファイルの送信体験をさらに良くするために、「メッセージ送信前にファイルを先にアップロードしておく」仕組みを導入しました。
それまではメッセージ送信時にファイルも一緒に送っていたので、大きいファイルを添付すると送信完了まで時間がかかっていました。事前アップロードにすることで、ファイルを選んだ時点でアップロードが始まり、送信ボタンを押す頃にはもう完了している、という体験になります。
細部を磨く（2026年1月〜4月）
リアルタイムの基盤ができた後は、細かい部分の品質を上げていきました。
タイピングインジケーター
相手が入力中のときに表示されるアレです。チャット画面の中だけでなく、一覧画面でも「このルームで誰かが入力中」とわかるようにしました。
※ 相手が入力中の場合にアニメーションで「･･･」が表示される
スクロールボタン
過去のメッセージを読むために上にスクロールした後、ワンタップで最新メッセージに戻れるボタンです。アニメーション付きで出現・消失するようにしました。
おわりに
こうして振り返ると、この1年で取り組んだことは全部「他のチャットツールなら当たり前にできること」ばかりです。複数ファイル送信、オンラインステータス、タイピングインジケーター、送信失敗時の再送、OGPプレビュー。ユーザーにとっては「あって当然」の機能ばかりで、実装しても「やっとできるようになったのか！」くらいの反応かもしれません。
でもその裏側では、複数タブでの状態競合とか、通信プロトコルの制約とか、4つのアプリへの横展開とか、ひとつひとつ向き合うべき課題がたくさんありました。
「当たり前の体験」は、当たり前には作れない！ それでも、小さく分割してリリースして、出てきた問題をまた潰して…を繰り返すことで、少しずつ「当たり前」に近づけてきた実感はあります。
チャットルームにはまだ足りない「当たり前」が残っています。引き続き、当たり前の体験を当たり前に提供できるよう、アップデートを続けていきます！
最後までお読みいただき、ありがとうございました！
YOUTRUSTではエンジニアを積極採用中です！ 興味のある方はぜひご応募ください。 https://herp.careers/v1/youtrustinc
