概要
RealTime Chatとは？
「RealTime Chat」は、誰でもすぐに参加できるチャットアプリです。
難しいことは何ひとつありません。参加者は、ルーム番号を入力するだけで、同じルーム番号の人とすぐにチャットを楽しむことができます。
会話を弾ませることを目的に、可愛らしいポップなデザインを採用しました。
基本情報
| 名前 | RealTime Chat |
| リリース日 | 2022年9月17日 |
| 作成期間 | 5日間 |
| 役割 | Webデザイン / 開発 |
| URL | https://realtime-chat-client-mauve.vercel.app/ |
技術スタック
| デザイン | Figma |
| フロントエンド | HTML / CSS / JavaScript / React |
| バックエンド | Node.js |
| ライブラリ | Socket.io |
RealTime Chatの特徴
超簡単！名前とルーム番号を入力するだけ！
会話が弾むポップなデザイン
実際の使用イメージ
参加者はメッシさんとロナウドさんです。それぞれのタブで操作をしています。
背景
このアイデアは、リアルタイムチャットアプリを作ってみたいという私の願望から生まれました。LINEのような複雑な関係性を持つアプリではなく、2人だけの関係性を持てるチャットアプリを使ってみたかったのです。
どうやって作ろうかと考えていたときに、Web クライアントとサーバー間のリアルタイムの双方向通信を可能にするライブラリ「Socket.io」を見つけました。
公式ドキュメントを見ると、初心者でもかなり使いやすいことが分かったため、このライブラリを使ってチャットアプリを作ることにしました。
フロントエンドにはReact、バックエンドにはNode.jsを採用しました。Reactは、高速レンダリングを可能にするという特徴を持ち、Node.jsは大量アクセスに強く、リアルタイムでの処理を可能にするという特徴を持っています。
これらを掛け合わせれば、サクサク動くチャットアプリが作れると確信しました。
ゴール
サクサク動くチャットアプリで、2人だけのチャットを楽しむこと。
総括
頑張ったこと
アプリの立案からデプロイまで、スムーズに進められた点は良かったです。技術選定では、ReactとNode.jsを採用することで、それぞれの特性を活かしたチャットアプリを作ることができたと思います。
今回のプロジェクトを通して、Webアプリはモバイルアプリに比べると、リリースが簡単であることを再認識しました。Webの場合は、HerokuやVercelなどのサービスを使えばサクッと出来てしまいますが、モバイルの場合は、iOSならAppleの審査、AndroidならGoogleの審査があり、それぞれ細かい規約を守る必要があります。
そういった点を踏まえると、新規開発においては、はじめにWeb版を出し、次にモバイル版を出すという手順がいいのかなと思いました。
今後に活かすこと
今回は開発メインということで、デザインを背景画像に頼っている部分があります。そのため、次に何かを作るときは、デザインも含めて設計してみようと思いました。