From 668a8ac5bd842053685c01e818ed0e5237676266 Mon Sep 17 00:00:00 2001
From: Rikuoh <mail@riq0h.jp>
Date: Sun, 16 Feb 2025 10:46:34 +0900
Subject: [PATCH] =?UTF-8?q?=E6=96=87=E8=84=88=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
README.md | 9 +++--
frontend/src/components/ChatRoom.vue | 51 ++++++++++++++++++++-------
frontend/src/components/ChatRooms.vue | 44 +++++++++++++++++------
3 files changed, 79 insertions(+), 25 deletions(-)
diff --git a/README.md b/README.md
index f33b7f1..b132d31 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,8 @@
# chat-app
-RailsとVueで作成された簡素なチャットアプリ
+Rails、Action cable、Vueで構成された簡素なリアルタイムチャット。
-ぶえぶえ体操いくぶえよ～！ （∩ ๑•﹏•๑｀)ぶえ〜っwwwぶえぶえぶえええ〜っwww (∩ ๑•﹏•๑｀⊃)ぷぇっ～///ぷぇっ～/// (⊂ ๑•﹏•๑｀∩) ぶえええええーーーっ！！
-(∩ ๑•﹏•๑｀∩)ぶえぶえーっ！！
+# 文脈
+[Entering](https://riq0h.jp/2023/04/30/232125/)で主人公が作っていたチャットサービスをモダンな技術で再現した。
+
+# LICENSE
+MIT
diff --git a/frontend/src/components/ChatRoom.vue b/frontend/src/components/ChatRoom.vue
index 6b94f09..a92a33f 100644
--- a/frontend/src/components/ChatRoom.vue
+++ b/frontend/src/components/ChatRoom.vue
@@ -1,23 +1,50 @@
<template>
- <div>
- <h1>チャットルーム {{ this.roomId }}</h1>
+ <div style="background-color: lightcyan; padding: 20px">
+ <h1 style="color: navy; font-family: Arial, sans-serif">チャットルーム {{ this.roomId }}</h1>
- <ul>
- <li v-for="message in messages" :key="message.id">
- <strong>{{ message.sender_name }}:</strong> {{ message.content }}
+ <ul style="list-style-type: none; padding: 0">
+ <li
+ v-for="message in messages"
+ :key="message.id"
+ style="background-color: lightgray; padding: 10px; margin-bottom: 10px"
+ >
+ <strong style="color: navy">{{ message.sender_name }}:</strong> {{ message.content }}
</li>
</ul>
- <form @submit.prevent="sendMessage">
+ <form @submit.prevent="sendMessage" style="background-color: lightgray; padding: 20px">
<div>
- <h3>名前</h3>
- <input type="text" v-model="senderName" placeholder="名前を入力" required />
+ <h3 style="color: navy">名前</h3>
+ <input
+ type="text"
+ v-model="senderName"
+ placeholder="名前を入力"
+ required
+ style="width: 100%; padding: 5px; border: 1px solid gray"
+ />
</div>
<div>
- <h3>メッセージ</h3>
- <input type="text" v-model="newMessageContent" placeholder="メッセージを入力" required />
+ <h3 style="color: navy">メッセージ</h3>
+ <input
+ type="text"
+ v-model="newMessageContent"
+ placeholder="メッセージを入力"
+ required
+ style="width: 100%; padding: 5px; border: 1px solid gray"
+ />
</div>
- <div>
- <button type="submit">送信</button>
+ <div style="text-align: center; margin-top: 10px">
+ <button
+ type="submit"
+ style="
+ background-color: lightgray;
+ color: navy;
+ padding: 5px 10px;
+ border: 1px solid navy;
+ font-family: 'Courier New', monospace;
+ "
+ >
+ 送信
+ </button>
</div>
</form>
</div>
diff --git a/frontend/src/components/ChatRooms.vue b/frontend/src/components/ChatRooms.vue
index 932ec58..e2cfacd 100644
--- a/frontend/src/components/ChatRooms.vue
+++ b/frontend/src/components/ChatRooms.vue
@@ -1,19 +1,43 @@
<template>
- <div>
- <h1>VueChat - チャットルーム一覧</h1>
- <ul>
- <li v-for="room in chatRooms" :key="room.id">
- <router-link :to="`/rooms/${room.id}`">{{ room.name }}</router-link>
+ <div style="background-color: lightcyan; padding: 20px">
+ <h1 style="color: navy; font-family: Arial, sans-serif">VueChat - チャットルーム一覧</h1>
+ <ul style="list-style-type: none; padding: 0">
+ <li v-for="room in chatRooms" :key="room.id" style="margin-bottom: 10px">
+ <router-link
+ :to="`/rooms/${room.id}`"
+ style="
+ text-decoration: none;
+ color: navy;
+ background-color: lightgray;
+ padding: 5px 10px;
+ font-family: 'Courier New', monospace;
+ "
+ >{{ room.name }}</router-link
+ >
</li>
</ul>
- <h3>チャットルーム作成</h3>
- <input type="text" v-model="newRoomName" />
- <div>
- <button @click="createRoom">作成</button>
+ <h3 style="color: navy; font-family: Arial, sans-serif">チャットルーム作成</h3>
+ <input
+ type="text"
+ v-model="newRoomName"
+ style="padding: 5px; font-family: 'Courier New', monospace"
+ />
+ <div style="margin-top: 10px">
+ <button
+ @click="createRoom"
+ style="
+ background-color: lightgray;
+ color: navy;
+ padding: 5px 10px;
+ border: 1px solid navy;
+ font-family: 'Courier New', monospace;
+ "
+ >
+ 作成
+ </button>
</div>
</div>
</template>
-
<script>
import axios from 'axios'