はじめに
Rails6.1ハンズオン(1)の続きです。
環境はこれを参考にしてください。
コードはGithubにあげています。章ごとにコミットしてますので、参考にしていただければ幸いです。
やること
- erbからhamlにする
- Bootstrap 5.0.0.beta2(2021/2/22時点)を入れる
- Font Awesomeを入れる
- i18nを使って日本語化
- 見た目をいい感じに整える
実装
3-1. erbからhamlにする
Gemfileに
gem 'haml-rails'
を追加。bundle install。
rails haml:erb2haml
で、プロジェクト内のerbをhamlに一斉変換できる。（最後に元のerbを消していいか聞かれるのでyを入力）
3-2. Bootstrap 5.0.0.beta2を入れる
参考：
Use Bootstrap 5 with Ruby on Rails 6 and webpack step by step
ターミナルで以下のコマンドを入力
yarn add bootstrap@next
yarn add @popperjs/core
app/views/layouts/application.html.hamlのstylesheet_link_tagの行を以下に置換
= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
app/javascript/stylesheets/application.scssを作成
@import "bootstrap";
を追加。
app/javascript/packs/application.js
import "bootstrap"
import "../stylesheets/application"
を追加。
3-3. Font Awesomeを入れる
yarn add @fortawesome/fontawesome-free
app/javascript/stylesheets/application.scss
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
を追加。
app/javascript/packs/application.js
import '@fortawesome/fontawesome-free/js/all'
を追加
3-4. 日本語化
参考：
[初学者]Railsのi18nによる日本語化対応 - Qiita
config/application.rbに以下を追加
config.time_zone = 'Tokyo'
config.i18n.default_locale = :ja
config.i18n.load_path += Dir[Rails.root.join('config', 'locales', '**', '*.{rb,yml}')]
config/locales/model.ja.ymlを作成
ja:
activerecord:
models:
community: コミュニティ
comment: コメント
attributes:
community:
id: ID
title: タイトル
owner_name: 作成者
comment:
id: ID
author_name: 投稿者
content: 内容
attributes:
created_at: 作成日
updated_at: 更新日
↑ここからconfig/locales/ja.ymlを作成
locales/views/以下にもyamlファイルを作りますが、詳しくはgithubにて...
3-5. 見た目を色々整える
app/javascript/stylesheets/application.scss
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
$primary: #9400d9; //Bootstrapの変数をいじる
@import "bootstrap";
app/controllers/communities_controller.rb
def show
@community = Community.find(params[:id])
@comments = @community.comments.order(created_at: :desc) # 投稿日：降順で並び替え
end
app/views/layouts/application.html.haml
!!!
%html
%head
%meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
%title Rails61HandsOn
%meta{:content => "width=device-width,initial-scale=1", :name => "viewport"}/
= csrf_meta_tags
= csp_meta_tag
= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
%body
= render '/layouts/header'
.container-fluid.pt-4.px-4
= yield
app/views/layouts/_header.html.haml
%nav.navbar.navbar-expand-lg.navbar-dark.bg-dark
.container-fluid
= link_to root_path, class: 'navbar-brand' do
Rails6.1掲示板
%button.navbar-toggler{"aria-controls" => "navbarSupportedContent", "aria-expanded" => "false", "aria-label" => "Toggle navigation", "data-bs-target" => "#navbarSupportedContent", "data-bs-toggle" => "collapse", :type => "button"}
%span.navbar-toggler-icon
#navbarSupportedContent.collapse.navbar-collapse
%ul.navbar-nav.me-auto.mb-2.mb-lg-0
%li.nav-item
= link_to root_path, class: 'nav-link' do
トップ
%li.nav-item
= link_to new_community_path, class: 'nav-link' do
コミュニティを作る
app/views/communities/index.html.haml
.d-flex.justify-content-between.align-items-center.mb-4
%h1= t('.title')
= link_to new_community_path, class: 'btn btn-primary' do
%i.fas.fa-plus
= t('.link_to_new')
.container-fluid
.row
- @communities.each do |community|
.col-md-6.col-lg-4.p-1
.card
.card-body
%h4= community.title
%div= t('activerecord.attributes.community.owner_name') + '：' + community.owner_name
.d-flex.justify-content-between
%div= t('activerecord.attributes.community.created_at') + '：' + l(community.created_at)
= link_to community_path(community) do
%i.fas.fa-arrow-right
中に入る
app/views/communities/new.html.haml
%h1= t('.title')
= form_with model: @community do |form|
= form.label :title, class: 'form-label'
= form.text_field :title, class: 'form-control mb-2'
= form.label :owner_name, class: 'form-label'
= form.text_field :owner_name, class: 'form-control mb-4'
= form.submit '作成', class: 'btn btn-primary'
Bootstrap5.0からは.form-groupがなくなるらしい。その代わりに.mb-3を使ってとのこと。（今回はmb-2にしてますが）
Dropped .form-group for margin utilities (we've replaced our docs examples with .mb-3).
app/views/communities/show.html.haml
= link_to communities_path, class: 'btn btn-light mb-3' do
%i.fas.fa-arrow-left
戻る
.container
%h1= t('.title', title: @community.title)
= link_to new_community_comment_path(@community), class: 'btn btn-primary' do
%i.fas.fa-comment
= t('.link_to_new_comment')
%ul.list-group.mt-4
- @comments.each do |comment|
%li.list-group-item
.fs-5= comment.author_name
.fs-6.mb-3= l(comment.created_at, format: :long)
.fs-6= simple_format(comment.content)
.fs-*というクラスも増えてる。フォントサイズが変えられる。
app/views/comments/new.html.haml
= link_to community_path(@community), class: 'btn btn-light mb-3' do
%i.fas.fa-arrow-left
戻る
.container
%h1= t('.title', community_title: @community.title)
= form_with model: [@community, @comment] do |form|
= form.label :author_name, class: 'form-label'
= form.text_field :author_name, class: 'form-control mb-2'
= form.label :content, class: 'form-label'
= form.text_area :content, class: 'form-control mb-4'
= form.submit '投稿', class: 'btn btn-primary'
こんな感じになりました↓
