Roadieの成長日記 03
どうもこんにちは、henithです。
現在稼働中のろでぃ坊の機能追加やらなにやらやってたら全然日記を書いてる余裕がなかったです。
ブロガーさん達マジ尊敬っす。
前回はとりあえずRailsアプリを立ち上げて、データの入力まででしたね。
今回は素っ気ない見た目を「Bootstrap4」という便利なものを用いて整えていくぜ！って回です。
Bootstrap4を導入する
はい、というわけで早速やっていきます。
僕はHP制作で触る機会があるので知っているのですが、知らない人はこの日記で雰囲気を見てもらった後ググってもらうとより理解できるかと思います。
では前回作成したRailsアプリのディレクトリ直下にある「Gemfile」なるものに写真の通り追記します。
#bootstrap4導入
gem 'bootstrap', '~> 4.3.1'
gem 'jquery-rails'bootstrapをバージョン指定してるって感じですね。その下のjquery-railsは、jqueryというなんというか…webページをカッコよく動作させたい時に使うと便利なものを入れます(全く知らない人向けにだいぶザックリ言ってます)。
追記が終わったらターミナルで下記の通り実行します。
$ bundle install先程Gemfileに追記した2つをこのコマンドで実際にインストールさせてます。
ターミナルの動作が終了したら、今度は下記を「application.js」に追記します。
場所はapp > javascript > packs の中にぽつんとあります。
//= require jquery3
//= require popper
//= require bootstrap
お次に app > assets > stylesheets の中にある「application.css」の名前を「application.scss」に変えて、下記のコードを追記します。
@import "bootstrap";これで準備は整いました。
Bootstrapで見た目を整える
とりあえず現状。
このWeb上での見た目を変更するためのファイルが所謂Viewになるわけですが、今回で言うとapp > views > employee の中にあるファイルになります。
それぞれ、新規登録画面ならnew.html.erb、編集ならedit.html.erb…とページごとに1ファイルが対応しています。
まずは http://localhost:3000/employees にアクセスした時に表示されるViewファイル(index.html.erb)を触ります。
<div class="container">
<div class="row">
<div class="col-12 py-5">
<h1 class="display-4 text-secondary">従業員一覧</h1>
<section class="mt-4">
<%= link_to '新規登録', new_employee_path %>
<table class="table table-bordered mt-3">
<thead>
<tr>
<th>氏</th>
<th>名</th>
<th>フリガナ(氏)</th>
<th>フリガナ(名)</th>
<th>メールアドレス</th>
<th>誕生日</th>
<th>年齢</th>
<th>パスワード</th>
<th colspan="3">メニュー</th>
</tr>
</thead>
<tbody>
<% @employees.each do |employee| %>
<tr>
<td><%= employee.lastname %></td>
<td><%= employee.firstname %></td>
<td><%= employee.lastrubi %></td>
<td><%= employee.firstrubi %></td>
<td><%= employee.mail %></td>
<td><%= employee.birthday %></td>
<td><%= employee.age %></td>
<td><%= employee.password %></td>
<td class="text-right">
<%= link_to 'Show', employee %>
<%= link_to 'Edit', edit_employee_path(employee), class:'ml-3' %>
<%= link_to 'Destroy', employee, method: :delete, data: { confirm: 'Are you sure?' }, class:'ml-3' %>
</td>
</tr>
<% end %>
</tbody>
</table>
</section>
</div>
</div>
</div>要所要所に class=”” でクラスを当ててますが、これがbootstrapの正体です(これまたザックリ言ってます)。
bootstrapには「このclassを当てたらこうなるよ〜」「こうしたかったらこのclassを当ててね〜」ってあらかじめたくさんのclass(css)が用意されてます。それを目的に応じて使っています。
ちなみにここで使っているのはグリッドとh1のテキストサイズ・カラー、テーブルです。
詳しくは公式ページを御覧ください。
https://getbootstrap.jp/docs/4.3/getting-started/introduction/
結果下記の通りになります。
なんかそれっぽくなってきました。
この勢いで他のページもガンガンいきます。
次はフォームを使ったnew.html.erbとedit.html.erbをいきます。
この2つについては、フォームだけ別のファイル(_form.html.erb)に分けて部品化し、一度上記ファイルを読み込んだ後に中でフォーム用の部品ファイルを呼び出してくる様になってます。
<%= form_with(model: employee) do |form| %>
<% if employee.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(employee.errors.count, "error") %> prohibited this employee from being saved:</h2>
<ul>
<% employee.errors.each do |error| %>
<li><%= error.full_message %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="form-row">
<div class="form-group col-md-6">
<%= form.label :'氏' %><br />
<%= form.text_field :lastname, class:'form-control' %>
</div>
<div class="form-group col-md-6">
<%= form.label :'名' %><br />
<%= form.text_field :firstname, class:'form-control' %>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<%= form.label :'フリガナ(氏)' %><br />
<%= form.text_field :lastrubi, class:'form-control' %>
</div>
<div class="form-group col-md-6">
<%= form.label :'フリガナ(名)' %><br />
<%= form.text_field :firstrubi, class:'form-control' %>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<%= form.label :'メールアドレス' %><br />
<%= form.text_field :mail, class:'form-control' %>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<%= form.label :'誕生日' %>
<%= form.date_field :birthday, class:'form-control' %>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<%= form.label :'年齢' %>
<%= form.number_field :age, class:'form-control' %>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<%= form.label :'パスワード' %>
<%= form.text_field :password, class:'form-control' %>
</div>
</div>
<div class="actions text-center">
<%= form.submit "登録" %>
</div>
<% end %>
<div class="container">
<div class="row justify-content-center">
<div class="col-6 py-5">
<h1 class="mb-5">新規従業員登録</h1>
<!-- ここで呼び出してる！ -->
<%= render 'form', employee: @employee %>
<%= link_to 'Show', @employee %> |
<%= link_to 'Back', employees_path %>
</div>
</div>
</div>では見た目のビフォーアフター
まるでろでぃ坊が寝返りをうつ姿が目に浮かぶようです…。
この要領で他のページも整えました。
edit.html.erb show.html.erb
年齢問題に気づいてしまう
「見た目もある程度整ったところで、生年月日を元に年齢を登録させるぞ〜♪」とルンルン気分で取り掛かってすぐその問題に気づきました。
「アレッ…登録後ニ誕生日来タラ、ドウスンダコレ…」
はい、何もせずに勝手にDBの年齢の数字が変わるはずないですよね。ナマ言ってすんません。。
現実的なのは、ページを呼び出す際に生年月日情報も取ってくるんだから、それをうまいこと変換できればいいんじゃね？と考えググりました。
ありました。
実際にindex.html.erbのループに組み込むと下記の通り。
<% @employees.each do |employee| %>
<tr>
... 略 ...
<td><%= employee.birthday %></td>
<td><%= (Date.today.strftime('%Y%m%d').to_i - employee.birthday.strftime('%Y%m%d').to_i) / 10000 %></td>
... 略 ...
</tr>
<% end %>
ふー…これで一安心…ではありません。
不要になったageカラムを抹消せねばなりません。
不要になったカラムを闇に葬る
まずはコマンドでmodel変更用のマイグレーションファイルを生成します。
$ rails g migration remove_age_in_employeesマイグレーションファイルの中身を追記。
db > migrate > 最新日付のファイル
class RemoveAgeInEmployees < ActiveRecord::Migration[6.1]
def change
# 操作内容 :model名, :カラム名, :型
remove_column :employees, :age, :integer
end
end追記が終わったらターミナルでmigrateを実行。
$ rails db:migrateこれでageカラムとはグッバイです。
最後に、前回と今回の要領で顧客情報管理機能を追加したところで今日の締めにします。
(力尽きたので過程はスキップします…)
次回はDeviseという便利なものを使ってユーザ認証(ログイン機能)を実装しようかと思います。
次回も失敗談を包み隠さずぶちまければと思います。