準備
1 どんなビューにしたいか紙に書く
2 Railsで新規アプリケーションを作成
console
$ cd projects
# 該当のディレクトリまで行く
$ rails _5.2.2.1_ new pictweet -d mysql
# rails new コマンド実行
3 Gemの追加
programmingtime/Gemfile
gem 'mysql2', '0.5.2'
gem 'sass-rails', '5.0.7'
# 該当の箇所に書く。mysql2とsass-railsのバージョン指定
gem 'pry-rails'
gem 'compass-rails', '3.1.0'
gem 'sprockets', '3.7.2'
# 初めからインストールされているGemに加えて3つのGemを追加
console
$ bundle update
# Gemfileを更新する
4 データベースの作成
console
$ rake db:create
# データベースの作成
悩んだポイント：アクションはどれを作成すればいいのか？
ルーティング・コントローラー作成とか
5 ルーティングの設定
routes.rb
Rails.application.routes.draw do
get 'study' => 'study#index'
end
6 コントローラー作成
console
$ rails g controller study
# studyコントローラーの作成
7 コントローラー編集
study_controller.rb
class StudyController < ApplicationController
def index
@study = '20h'
end
end
ビュー作成
8 ビューファイルの作成
テキストエディタでindex.html.erbファイルを作成する。
app>views>study(個人によって違う)>index.html.erb
※ビューファイルは「コントローラと同じ名前のフォルダ」内にある「アクション名と同じファイル名」のものが適用されるというrailsの決まりがあり
今回はstudy_controllerの中にある、indexアクションのためこの流れ。
9 ビューファイルの編集
index.html.erb
<div class="contents">
<div class="input_time">
<p>今日の学習時間を入力してください</p>
</div>
<div class="output_time">
<p>これまでトータルで<%=@study%>勉強したよ！</p>
</div>
</div>
▼その時のビューファイル
▼その時のビューファイル（ズームアップ）
10 レイアウトファイルの確認
以下のようになっていればOK
applictation.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Programmingtime</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
DB設計
11 モデルとテーブルの作成
rails g model コマンドでモデルを作る。
console
$ rails g model study
# モデルを作成
rails g modelコマンドでモデルのファイルを作成した際、同時にそのモデルと結びつくテーブルの設計図も生成されている。
これをマイグレーションファイルと呼ぶ。
この段階ではまだ、DBには該当するテーブルは存在しない。
このマイグレーションファイルを実行することで、初めてテーブルが作られる。
12 マイグレーションファイルの編集
マイグレーションファイルを以下のように編集
2019xxxxxx_create_time.rb
class CreateStudies < ActiveRecord::Migration[5.2]
def change
create_table :studies do |t|
t.float :time
t.date :date
t.timestamps
end
end
end
13 マイグレーションファイルの実行
console
$ rake db:migrate
# マイグレーションファイルの実行
14 seeds.rb ファイルの編集
実際にデータをいれて表示したいのでseeds.rbファイルに仮のデータをいれてみる。
seeds.rb
Study.create([
{time: 2.5, date: '2019-12-02'},
{time: 2.0, date: '2019-12-03'},
{time: 3.0, date: '2019-12-04'},
{time: 2.0, date: '2019-12-05'},
{time: 1.5, date: '2019-12-06'},
{time: 5.5, date: '2019-12-07'},
])
14 seedsファイルの実行
console
$ rake db:seed
# seedに書かれた内容をデータベースに反映
controllerとroutingの設定
15 コントローラー編集
study_controller.rb
class StudyController < ApplicationController
def index
@study = Study.new
@study = Study.all.sum(:time)
end
end
16 create ルーティングの設定
routes.rb
Rails.application.routes.draw do
get 'study' => 'study#index'
post 'study' => 'study#create'
end
17 create コントローラーの設定
study_controller.rb
class StudyController < ApplicationController
def index
@study = Study.new
@study = Study.all.sum(:time)
end
def create
Study.create(study_params)
redirect_to action: 'index'
end
private
def study_params
params.permit(:time, :date)
end
end
ビューの編集
18 formビューファイルの編集
index.html.erb
<div class="contents">
<div class="input_time">
<p>今日の学習時間を入力してください</p>
</div>
<%= form_tag('/study', method: :post) do %>
<h3>
今日の学習時間を入力してね！
</h3>
<input placeholder="Date" type="date" name="date">
<input placeholder="StudyTime" type="float" name="time">
<input type="submit" value="SENT">
<% end %>
<div class="output_time">
<p>これまでトータルで<%= @study%> hの勉強したよ！</p>
</div>
</div>
▼この時点でのビュー
19 form tagから form forへの変更
悩んだポイント： form forの書き方。
@study でモデルを受け渡すつもりだったが、コントローラーを単数で作ってしまったのでうまくいかなかった。
study_controller.rb
class StudyController < ApplicationController
def index
@study = Study.new
@studies = Study.all.sum(:time) #studiesに変更
end
def create
Study.create(study_params)
redirect_to action: 'index'
end
private
def study_params
params.permit(:time, :date)
end
end
index.html.erb
<div class="contents">
<%= form_for study_path do |f| %>
<h3>
今日の学習時間を入力してね！
</h3>
<%= f.date_select :date, placeholder: "今日の日付" %>
<%= f.number_field :time, placeholder: "プログラミング勉強時間" %>
<%= f.submit "送信" %>
<% end %>
<div class="output_time">
<p>これまでトータルで <span class="study_time"> <%= @studies%> h </span> の勉強したよ！</p>
</div>
</div>
20 pryの導入
フォームがうまく通過しなくなったのでpryの導入を行なった。
Rails で Pry を使う - Qiita
21 form withへの変更
pryで見てみると
form_forのパスがおかしかったので書き直した。
ストロングパラメーターもきちんとかけていなかった。
index.html.erb
<div class="contents">
<div class="input_time">
<%= form_with model: @study, url: study_path do |f| %>
<h3>
今日の日付を入力してね！
</h3>
<%= f.date_select :date %>
<h3>
今日のプログラミング学習時間を入力してね！
</h3>
<%= f.text_area :time, placeholder: "小数点第一位まで可！", size: "40x5" %>
<%= f.submit "送信",class: 'submit_btn' %>
<% end %>
</div>
<div class="output_time">
<div class="balloon">
<p>これまでトータルで <span class="study_time"> <%= @studies %> h </span> の勉強したよ！</p>
<p>がんばったね！</p>
</div>
<%= image_tag "pompom.png",:size =>'150x150',class: 'pomuo' %>
</div>
</div>
22 ストロングパラメーターの実装
study_controller.rb
class StudyController < ApplicationController
def index
@study = Study.new
@studies = Study.all.sum(:time)
end
def create
Study.create(study_params)
# @study = Study.new(study_params)
# @study.save
redirect_to action: 'index'
end
private
def study_params
params.require(:study).permit(:time, :date)
end
end
23 ビューをリッチに
study.scss
.contents{
text-align: center;
height: 800px;
background-color:#f8f8ff;
padding: 50px 50px;
font-weight: bold;
color: #191970;
.input_time{
background-color: #ffffff;
padding: 30px 30px;
border-radius: 10px;
}
.submit_btn{
padding: 15px 40px;
font-size: 1.2em;
background-color:#191970;
color: #fff;
border-style: none;
}
.output_time{
padding: 20px 20px;
font-size: 25px;
.balloon {
position: relative;
display: inline-block;
margin: 1.5em 0;
padding: 20px 10px;
min-width: 120px;
max-width: 100%;
color: #191970;
font-size: 16px;
background: #fff9b1;
border-radius: 10px;
}
.balloon:before {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -15px;
border: 15px solid transparent;
border-left: 15px solid #fff9b1;
}
.study_time{
color: #b22222;
font-size: 30px;
font-weight: bold;
}
.pomuo{
padding: 20px 10px;
}
}
}
完成！
かわいい
