Node.jsを短期学習してみる #7 「チャット (ver.2)」

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

前回、チャットツールを作ってみましたが、デザイン要素が全くなかったので、少しUIにこだわったバージョンにアップデートしてみました。

Node.jsを短期学習してみる #3「チャット」

変更点

1.チャットに入った場合と出た場合のユーザーの「入室」「退室」をアイコンにしてみた
2.メッセージを、テキスト改行の形式から、LINEチャットみたいな見栄えに変更
3.自分と、他の人を見分けられるように色を変えてみた。
4.自分と、他の人の見分けを位置で左右にワケてみた。
5.スマホで見た場合にviewportをセットして、操作しやすくする。

見た目で比べる

旧バージョン

スクリーンショット 2015-02-22 17.06.23

新バージョン

スクリーンショット 2015-02-22 17.07.15

見て分かっていただけると思うが、UIデザインを入れた場合と入れなかった場合は、印象も使い勝手も、格段に違ってくる。
最近は、「UI/UX」というジャンルで、デザイン性もシステムの重要な要素という分野になってきている。

ソースコード

「chat.js」

「index.html」

注意点

「%server-address%」の箇所はサーバーのIPアドレスかドメインで書き換えてください。

起動

実際に使ってみる

既にforeverで立ち上げっぱなしにしているので、興味のある人は試してもらいたい。

http://chat.ideacompo.com:1080/

ちなみに、このツールの為に、サブドメインと、リバースプロキシの設定を施して、自宅サーバーの裏に置いてあるraspberry-piで動かしている。

本当なら、同時に何人ぐらいでアクセスできるか試したいのだが、それは別の機会で行うことにしよう。

まだイケていないトコロ

入室した人を乱数でナンバリングして、それをそのまま名前にしているので、
ログインという機能で、名前を入力できる機能をつけなければいけない。
できれば、twitterなどのOAuth認証で、アイコンを取得してくると、ユーザーが画像になって非常にUI的に良くなるイメージがある。

だんだんサービスみたいになってきたな・・・

次回、そこを改修してFIXしたいと思う。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です