Skip to content
This repository was archived by the owner on May 31, 2019. It is now read-only.
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions Procfile
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
web: bundle exec puma -C config/puma.rb
33 changes: 20 additions & 13 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,17 +1,24 @@
# README
これは、LINEを模して製作された簡易チャットアプリです
LINEを模して製作された簡易チャットアプリです。 ProgateでRuby on Railsを学んだ直後に作られました。

製作者:Taishi Murakami
製作時間:1週間
製作者:Taishi Murakami
製作時間:1週間

主な機能:
メール認証によるユーザー登録機能
ログイン/ログアウト機能
登録情報の変更機能
1対1でのチャット機能(メイン)
-使用言語・バージョン
-Ruby 2.5.1
-Rails 5.2.0

参考にしたサイト:
Deviseの導入:https://qiita.com/cigalecigales/items/f4274088f20832252374
ActionCableの導入:https://qiita.com/jnchito/items/aec75fab42804287d71b
1対1チャット機能の実装:https://qiita.com/YN6127yn/items/7ddd966141cca195b4da
DB設計:https://railsguides.jp/association_basics.html
-主な機能:
-メール認証によるユーザー登録機能
-ログイン/ログアウト機能
-登録情報の変更機能
-1対1でのチャット機能(メイン)

-備考
-ローカル環境での一作目なのでかろうじて動くだけのダメアプリです。テストもリファクタリングもしていません。悪しからず。

-参考にしたサイト:
-Deviseの導入:[deviseの使い方(rails5版)](https://qiita.com/cigalecigales/items/f4274088f20832252374)
-ActionCableの導入:[Rails 5 + ActionCableで作る!シンプルなチャットアプリ(DHH氏のデモ動画より)](https://qiita.com/jnchito/items/aec75fab42804287d71b)
-1対1チャット機能の実装:[Ruby on Rails チュートリアル 機能拡張5(メッセージ機能)](https://qiita.com/YN6127yn/items/7ddd966141cca195b4da)
-DB設計:[Rails Guide](https://railsguides.jp/association_basics.html)
6 changes: 5 additions & 1 deletion app/assets/javascripts/channels/room.coffee
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
App.room = App.cable.subscriptions.create "RoomChannel",


connected: ->
# Called when the subscription is ready for use on the server

Expand All @@ -10,10 +12,12 @@ App.room = App.cable.subscriptions.create "RoomChannel",
# Called when there's incoming data on the websocket for this channel

speak:(message) ->
@perform 'speak', message: message
to_id =$('input:hidden[name="to_id"]').val()
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

= の後ろのスペースをあけるべきかと思います

@perform 'speak', {message: message,to_id:to_id}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

カンマとto_id:の後ろにスペースをあけるべきかと思います。


$(document).on 'keypress', '[data-behavior~=room_speaker]', (event) ->
if event.keyCode is 13 # return = send
# Roomチャンネルのspeakメソッドを実行
App.room.speak event.target.value
event.target.value = ''
event.preventDefault()
169 changes: 169 additions & 0 deletions app/assets/stylesheets/custom.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,169 @@
/* reset ================================ */
* {
box-sizing: border-box;
text-align: center;
}

html {
font: 100%/1.5 'Avenir Next', 'Hiragino Sans', sans-serif;
line-height: 1.7;
letter-spacing: 1px;
}

ul, li {
list-style-type: none;
padding: 0;
margin: 0;
}

a {
text-decoration: none;
color: #2d3133;
font-size: 14px;
font-weight: bold;
}

h1, h2, h3, h4, h5, h6, p {
margin: 0;
}

input {
background-color: transparent;
outline-width: 0;
}

form input[type="submit"] {
border: none;
cursor: pointer;
}

/* 共通レイアウト ================================ */
body {
color: #2d3133;
margin: 0;
min-height: 1vh;
}

.main {
position: absolute;
top: 64px;
width: 100%;
height: auto;
min-height: 100%;
background-color: #f5f8fa;
}

.container {
max-width: 600px;
margin: 30px auto;
padding-left: 15px;
padding-right: 15px;
clear: both;
}

/* ヘッダー ================================ */
header {
height: 64px;
z-index: 1;
width: 100%;
background-color: #5ae628;
}

.header-logo {
float: left;
padding-left: 20px;
color: white;
font-size: 22px;
line-height: 64px;
}

.header-logo a{
color: white;
font-size: 40px;
}

.header-menus {
float: right;
padding-right: 20px;
}

.header-menus li {
float: left;
line-height: 64px;
font-size: 13px;
color: white;
padding-left: 15px;
}

.header-menus a {
float: left;
font-size: 20px;
color: white;
}

.header-menus .fa {
padding-right: 5px;
}

.header-menus input[type="submit"] {
padding: 0 20px;
float: left;
line-height: 64px;
color: white;
margin: 0;
font-size: 13px;
}

.notice,.alert{
color:white;
background-color:orange;
}

.top-page{
margin-top:30px;
}

.top-page h1,h2{
padding:20px;
}

.top-page p{
padding:5px 10px;
background-color:#5ae628;
display:inline-block;
}

.top-page a{
color:white;
}

.my-page{
padding-top: 10px;
}

.user-right {
width: 50%;
text-align: left;
display: table-cell;
vertical-align: middle;
}

.user-right a{
font-size: 30px;
font-weight: normal;
}

.users-index-item {
font-size: 30px;
padding: 20px 30px;
background-color: white;
overflow: hidden;
box-shadow: 0 2px 6px #c1ced7;
display: table;
width: 100%;
}

#messages{
width: 100%;
border-top:1px solid gray;
}
16 changes: 15 additions & 1 deletion app/channels/room_channel.rb
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,20 @@ def unsubscribed
end

def speak(data)
Message.create! content: data['message'], user_id: current_user.id
user=User.find_by(id: data['to_id'])
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

=の前後はスペースをあけましょう

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

idで検索するならfind(data[‘to_id’])の方が良いかな、という気がします。
find_byだと、対象のレコードがない時にnilを返すので、この先でnull参照して落ちます。

findの場合、RecordNotFoundを発生します。

room_id = message_room_id(current_user, user)
Message.create! content: data['message'], user_id: current_user.id,
from_id: current_user.id, to_id: user.id,
room_id: room_id
end

def message_room_id(first_user, second_user)
first_id = first_user.id.to_i
second_id = second_user.id.to_i
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

19-20行で=位置を揃えると可読性が上がります。

first_id  = first_user.id.to_i
second_id = second_user.id.to_i

if first_id < second_id
"#{first_user.id}-#{second_user.id}"
else
"#{second_user.id}-#{first_user.id}"
end
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nits]
ワンライナーで書いた方がrubyっぽいです。

end
end
14 changes: 13 additions & 1 deletion app/controllers/rooms_controller.rb
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,18 @@ class RoomsController < ApplicationController
before_action :sign_in_required, only: [:show]

def show
@messages = Message.all
@user=User.find_by(id: params[:id])
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

上のfindと同じです。

@room_id = message_room_id(current_user, @user)
@messages = Message.where(room_id: @room_id)
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@user後の=前後にはスペースをあけましょう
また、ここの3行でも=位置を揃えましょう

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

view側の実装を見ていないのでなんとも言えないですが、
room_idをview側で使うことがないのではないかな? 🤔 と思ったので、ローカル変数でいい気がしてきました。

あと、
messageは時系列順に並んで欲しい気がするので、orderを明示的に指定してあげたほうがいいと思います!
多分よく使うと思うので、
継承元のApplicationRecordscopeを定義しておくと幸せなのかな、と思いました!

end

def message_room_id(first_user, second_user)
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

app/channels/room_channels.rbでも同じメソッドがあるので、dryにしましょう!

first_id = first_user.id.to_i
second_id = second_user.id.to_i
if first_id < second_id
"#{first_user.id}-#{second_user.id}"
else
"#{second_user.id}-#{first_user.id}"
end
end
end
1 change: 1 addition & 0 deletions app/mailers/application_mailer.rb
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@ class ApplicationMailer < ActionMailer::Base
default from: 'from@example.com'
layout 'mailer'
end

7 changes: 7 additions & 0 deletions app/models/message.rb
Original file line number Diff line number Diff line change
@@ -1,4 +1,11 @@
class Message < ApplicationRecord
after_create_commit { MessageBroadcastJob.perform_later self }
belongs_to :user

# Validations
validates :from_id, presence: true
validates :to_id, presence: true
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

この行だけ、presence: trueの位置がずれているのでスペースを挿入し位置を揃えましょう

validates :room_id, presence: true
validates :content, presence: true, length: {maximum: 50}

end
5 changes: 5 additions & 0 deletions app/models/user.rb
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,9 @@ class User < ApplicationRecord
:confirmable, :lockable, :timeoutable

has_many :messages,dependent: :destroy

# Validations
validates :email, presence: true
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

たぶんdeviseの認証かと思いますが、validationがザルなのでちゃんとしてあげた方が良いですね!

validates :username, presence: true
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

usersテーブルのプロパティなので、nameでいいかな、とおもいます!

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

あと、ここもlengthくらいは入れた方がいいと思います!
厳密には文字コードの問題もあるので、ハイフンとかチルダもいい感じにするカスタムバリデーションを定義すると良いです!

validates :encrypted_password, presence: true
end
7 changes: 6 additions & 1 deletion app/views/rooms/show.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,12 @@
<h1>Chat room</h1>

<form>
<label>Say something:</label><br>
<input type="hidden" name="to_id" value="<%= @user.id %>">
<% if current_user.id==@user.id %>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

比較演算子前後にスペースを入れましょう

<label>It's your space. Write down whatever you like here! :</label><br>
<% else%>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

おしりの%前にスペースを入れましょう

<label>Send messages to <%= @user.username%>:</label><br>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

おしりの%前にスペースを入れましょう

<% end %>
<input type="text" data-behavior="room_speaker">
</form>

Expand Down
2 changes: 1 addition & 1 deletion app/views/users/top.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<% @users.each do |user|%>
<div class="users-index-item">
<div class="user-right">
<p><%= link_to user.username,root_url%></p>
<p><%= link_to user.username,"/rooms/#{user.id}"%></p>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

カンマの後とおしりの%前にスペースを入れましょう

</div>
</div>
<% end %>
Expand Down
2 changes: 1 addition & 1 deletion config/environments/production.rb
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
config.action_cable.allowed_request_origins = [ /http:\/\/.*/ ]

# Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies.
# config.force_ssl = true
config.force_ssl = true

# Use the lowest log level to ensure availability of diagnostic information
# when problems arise.
Expand Down
4 changes: 2 additions & 2 deletions config/initializers/devise.rb
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
# confirmation, reset password and unlock tokens in the database.
# Devise will use the `secret_key_base` as its `secret_key`
# by default. You can change it below and use your own secret key.
# config.secret_key = '36225be56b61efa00ddd192276401308319f57986469c4f528653eda4f44aed253fc887a07711360b0b3da4e641427cf3e02bd71350b62c10b83407f6acd7d1d'

config.secret_key = '6ff05a2a5b47194687fe711bcec8a4dfed7f7350c2ab7842cb7cfe8ce0bf52b259b2b72f7635341c80f6437df9fe39b0e5f75a4bbce788bc249a5b6ce1de2f38'
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

このようにAuthに関連するキーなどはgitにコミットしないようにしましょう
環境変数にして、環境変数ファイルごとgitignoreすることをおすすめします

# ==> Controller configuration
# Configure the parent class to the devise controllers.
# config.parent_controller = 'DeviseController'
Expand Down
2 changes: 1 addition & 1 deletion config/routes.rb
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
Rails.application.routes.draw do

devise_for :user
get 'rooms/show'=> 'rooms#show'
get 'rooms/:id'=> 'rooms#show'
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

resource :room, only: %w(show)
の方がRails!って感じです。


get 'users/:id'=>'users#top'

Expand Down
5 changes: 0 additions & 5 deletions db/migrate/20180630084154_add_column_to_messages.rb

This file was deleted.

8 changes: 8 additions & 0 deletions db/migrate/20180703042018_add_column_to_messages.rb
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
class AddColumnToMessages < ActiveRecord::Migration[5.2]
def change
add_column :messages, :user_id, :integer
add_column :messages, :from_id, :integer
add_column :messages, :to_id, :integer
add_column :messages, :room_id, :string
end
end
5 changes: 4 additions & 1 deletion db/schema.rb
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,16 @@
#
# It's strongly recommended that you check this file into your version control system.

ActiveRecord::Schema.define(version: 2018_06_30_084154) do
ActiveRecord::Schema.define(version: 2018_07_03_042018) do

create_table "messages", force: :cascade do |t|
t.text "content"
t.datetime "created_at", null: false
t.datetime "updated_at", null: false
t.integer "user_id"
t.integer "from_id"
t.integer "to_id"
t.string "room_id"
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

カラム名の位置を揃えると可読性が上がります。

end

create_table "users", force: :cascade do |t|
Expand Down