riq0h/chat-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

文脈を追加

Browse source
This commit is contained in:
Rikuoh Tsujitani 2025-02-16 10:46:34 +09:00
parent 4bc181a924
commit 668a8ac5bd
Signed by: riq0h
GPG key ID: 010F09DEA298C717
3 changed files with 79 additions and 25 deletions
README.md
frontend/src/components
ChatRoom.vueChatRooms.vue

9
README.md
View file

@ -1,5 +1,8 @@
# chat-app
RailsとVueで作成された簡素なチャットアプリ
Rails、Action cable、Vueで構成された簡素なリアルタイムチャット。
ぶえぶえ体操いくぶえよ～！ （∩ ๑•﹏•๑｀)ぶえ〜っwwwぶえぶえぶえええ〜っwww (∩ ๑•﹏•๑｀⊃)ぷぇっ～///ぷぇっ～/// (⊂ ๑•﹏•๑｀∩) ぶえええええーーーっ！！
(∩ ๑•﹏•๑｀∩)ぶえぶえーっ！！
# 文脈
[Entering](https://riq0h.jp/2023/04/30/232125/)で主人公が作っていたチャットサービスをモダンな技術で再現した。
# LICENSE
MIT

51
frontend/src/components/ChatRoom.vue
View file

@ -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>

44
frontend/src/components/ChatRooms.vue
View file

@ -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'