内容

投稿一覧ページとは別に、トップページを実装する

rails日本語化

1. エラーメッセージを日本語化

時刻を日本に合わせたため、ついでにエラーメッセージも日本語化する（application.rbのみ編集済み）
日本語に対応するgemを導入
Gemfile

gem 'rails-i18n'
#devise日本語化
gem 'devise-i18n'

ターミナル

% bundle install
% rails s
% rails g devise:i18n:locale ja

config/localesディレクトリにファイルが作成され、自動的に日本語化してくれている
しかしこのままではGem 'rails-i18n'やdevise.ja.ymlを導入したことによって使える日本語しか含まれていないので、deviseのデフォルト以外の文字は英語で表示されてしまう
したがって、これらを翻訳するファイルを手動で作成
config/localesディレクトリに、ja.ymlというファイルは既に作成しているので、そこに追記していく
config/locales/ja.yml

例）以下のように日本語化されていない単語を日本語登録する
ja:
  activerecord:
    attributes:
      user:
        nickname: ニックネーム
      post:
        comment: コメント
      comment:
        comment: コメント

モデルのバリデーションのメッセージも日本語にしておく
user.rb

# 例）
validates :password, format: { with: /\A(?=.*?[a-z])(?=.*?\d)[a-z\d]+\z/i, message: 'は半角英数字混合で入力してください' }

2. テストコードを修正

テストコードのエラーメッセージの部分を日本語に修正
user_spec.rb

# 元
expect(@user.errors.full_messages).to include("Nickname can't be blank")
# 日本語化
expect(@user.errors.full_messages).to include("ニックネームを入力してください")

修正できたらテストを実行して確かめる
ターミナル

% bundle exec rspec spec/models/user_spec.rb

コメント機能

Action Cableを用いてコメントの即時更新機能を実装する
理解に時間がかかりそうだったのと、このアプリにおいては必須ではないため、即時更新機能は保留とすることにした

トップページ機能

1. ルーティングを設定

ルートパスをindexからtopに変更する
routes.eb

root to: 'posts#top'

2. コントローラーを編集

postsコントローラーでtopアクションを定義
posts_controller.rb

before_action :authenticate_user!, except: %i[top index show search]

def top
end

3. ビューを編集

これまでroot_pathはindexアクションを呼び出していたが現在はtopアクションに変更されている
投稿が完了した時等の何かしらのアクションを起こした後は、indexアクションを呼び出し投稿一覧ページを表示させるようにする
root_path→posts_pathに修正
また、top.html.erbを作成し、ログインボタン等を記述

4. application_controller.rbを編集

deviseはサインアップやサインインした時、デフォルトでルートパスに遷移するように設定されている
トップページからログインすると投稿一覧ページに遷移させたいため、コントローラーを編集する
application_controller.rb

def after_sign_in_path_for(resource)
  posts_path
end

def after_sign_up_path_for(resource)
  posts_path
end

次回

住所登録/検索機能を実装する

参考

CSSでボタンクリックの動きをつけたい時

押し込み式ボタンを作成した時、最初は以下のように記述していた
top.css

.top-btn {
  border-bottom: 0.2rem solid #800000;
}

.top-btn:active {
  transform: translateY(0.2rem);
  border-bottom: none;
}

しかし、これだと前後の要素も一緒に動いてしまった
marginの相殺やらが悪さするらしいが、今回はmarginを特に指定していない
translateYを用いるとボタンの下がすべて動いてしまうのか？
いまいちわからないが以下のように編集すると問題なく動いた
top.css

.top-btn {
  position: relative;
  box-shadow: 0 0.2rem #800000;
}

.top-btn:active {
  top: 0.2rem;
  box-shadow: none;
}

kota_104’s diary

railsの日本語化

内容