チャットに既読機能を追加したので、新旧デザインを比較してみた！

マナリンクでCTOを務めている名人です。

オンライン家庭教師サービスを運営しているマナリンクでは、指導開始後に先生と生徒がチャットでやり取りできる機能をWeb / アプリで提供しています。

先生は売上の管理等を含めてWeb版マナリンクを活用頂き、ご家庭はReact Native製のクロスプラットフォームアプリを活用いただいています。Firebaseを活用することで、相互にリアルタイムにメッセージのやり取りができます。

今週はチャット機能に既読を追加するという大きな変更を加えました！すでに走っているアプリケーションに後から既読機能を追加するのは相応に大変でした。合わせて全体的にデザインも今風に改善しましたので、スクリーンショットで比較しながら説明していきたいと思います。

新旧デザイン@Web

まずはWeb版チャットの新旧比較です。

新デザイン

旧デザイン

どちらも僕がデザインをしているのに言うのも変な話ですが、旧デザインはグレーを使いすぎて全体的に地味な見た目になっていますね。また、画像送信時にわざわざ画像を吹き出しで囲っているせいで、貴重なスマホ画面のスペースが消費されています。

新デザインでは、既読と送信時刻を吹き出しの外に出すことで各発言の縦幅を節約しつつ、全体の色味をマナリンクのメインカラーである青に寄せて調整しました。吹き出しの枠の色を薄くしたり、角丸の大きさを大胆に大きくして今風にしています。また、細かな工夫ですが自分の発言と相手の発言の間には若干大きめに縦の余白を入れています。

ちなみにPCではこんな感じの画面です。

新旧デザイン@React Nativeアプリ

続いてアプリの新旧比較です。

新デザイン

旧デザイン

旧デザインの時点できれいなデザインでしたが、新デザインではWeb同様、送信時刻が吹き出しの外に出たことで見やすくなりました。

実際触ってみるとよく分かるのですが、画像が大きめに表示され、外枠もなくなっただけで一覧の見栄えが全然違いますね。実際のユースケースとして、何枚もプリントの写真を生徒さんが先生へ送ると言ったことがよくあるので、ここのデザイン改善は大きいと思います。

React Nativeアプリ開発の体制や利用技術については、先日私が登壇させていただいた資料がありますので、よろしければこちらもご覧ください。

https://speakerdeck.com/texmeijin/react-nativexfirebasede-onrainzhi-dao-yong-false-tiyatutoapuriwokai-fa-siteiruhua

既読機能は結構難しい

既読機能は作る前から難しい実装になるだろうなと思っていたのですが、やってみるとやはりそれなりに難しかったです。

もともと、ユーザーごとに未読のメッセージは管理していたので、それを裏返しにして判定条件にすれば、既読かどうかの判定もできるのではという仮説でスタートしました。未読の逆は既読なので、未読かどうかさえ取れていれば既読だって実装可能ということですね。

しかし着手してみるとそんな簡単な問題ではなく、意外と苦しみました。
Webの実装においては、メッセージ一覧をFirebaseから取得、未読状態のデータも別途取得してそれぞれを対比しながら既読フラグを立てるための変換層を実装することになりました。このため、既存の設計を見直すこととなり、チャット画面全体の状態管理に影響する変更量になりました。
アプリの実装においては、画像送信時に圧縮などの変換処理を入れていたり、画像を拡大表示するためのコンポーネントを入れていたりといった部分で、特に画像送信後に既読がしっかり付かないまたは逆に既読じゃないのに既読になるといった問題が連発して、時間が掛かりました。

Firebaseからのリアルタイムでのデータの送受信と、UI側での表示の都合で適宜データを変換する処理を同時に動かす場合の設計指針は本当に奥が深いなと実感しました。

とはいえ、既読機能を実装したことによって、週に1時間の指導の機会しか無いことが多いオンライン家庭教師の先生方が、より日々のコミュニケーションを円滑に行える助けになるのは間違いないですし、無事に完遂できてよかったです。

こんな感じでTwitterで反応を頂いたりもします。

オンライン家庭教師マナリンクでは、オンライン指導を改善していくエンジニアを随時募集中です！Wantedlyをご覧いただいて少しでも興味をお持ちいただいた方はお気軽にご連絡くださいませ！