どうも、みおです。
一度は作ってみたいチャットアプリについて、
簡易版をHTML/CSS/JavaScriptで作成してみました。
簡易版チャットアプリの完成イメージ
画面の中心にコメントの表示領域と、
入力領域が存在します。
入力領域に何かしらメッセージを入力し、
「送信」をクリックします。
表示領域となる上位枠に入力領域で入力したメッセージが、表示されるようになります。
簡易版チャットアプリの機能紹介
簡易版にあり、機能は2つ抑えています。
- メッセージ送信（自分の画面に表示）
- 入力欄と送信ボタンがあるUI
簡易版チャットアプリのコード
実装のための具体的なコードは下記のとおりです。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>チャットアプリ</title>
<style>
/* CSSは後述 */
</style>
</head>
<body>
<div id="chat-container">
<div id="message-area"></div>
<input type="text" id="message-input" placeholder="メッセージを入力">
<button id="send-button">送信</button>
</div>
</body>
</html>CSS
body { font-family: Arial, sans-serif; background-color: #f2f2f2; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #chat-container { background-color: #fff; border: 1px solid #ddd; width: 300px; height: 400px; display: flex; flex-direction: column; } #message-area { flex: 1; padding: 10px; overflow-y: auto; border-bottom: 1px solid #ddd; } #message-input { border: none; padding: 10px; flex: 0; } button { background-color: #4caf50; color: white; border: none; padding: 10px; cursor: pointer; }JavaScript
document.addEventListener('DOMContentLoaded', () => {
const messageArea = document.getElementById('message-area');
const messageInput = document.getElementById('message-input');
const sendButton = document.getElementById('send-button');
sendButton.addEventListener('click', () => {
const message = messageInput.value.trim();
if (message) {
const messageElement = document.createElement('div');
messageElement.textContent = message;
messageElement.style.marginBottom = '10px';
messageArea.appendChild(messageElement);
messageInput.value = ''; // 入力欄をクリア
messageArea.scrollTop = messageArea.scrollHeight; // スクロールを最下部に
}
});
});簡易版チャットアプリの追加実装例
簡易的なので、もっと具体的にチャットアプリとして落とし込むならば、
- 送信ボタンだけでなくEnterキーでも送信できるようにする
- CSSでメッセージを左右に分ける（自分と相手風）
- ローカルストレージに保存して、リロードしてもメッセージを残す
こういった機能を実装するとより、精度を高められると思います。
このチャットアプリを発展させたい方は、WebSocketやNode.jsを使えばリアルタイムチャットも実現できます！
コメント