[Rails] content_forを使ってタイトルを動的に出力する

学習記録

はじめに

タイトルを固定にするのはユーザビリティやSEOの観点からあまりよろしくありません。ページごとに出力を変えたい場合があります。タイトルとは、ブラウザのタブ部分に表記されている文字のことです。content_for というヘルパーを使って**「ページ名 | 固定タイトル」**と出力するやり方を見ていきましょう。

以下のようにタイトルが表示されるように実装します。

  • トップページ・・・SAMPLE BOARD APP
  • ログインページ・・・ログイン | SAMPLE BOARD APP
  • ユーザー登録ページ・・・ユーザー登録 | SAMPLE BOARD APP
  • 掲示板作成ページ・・・掲示板作成 | SAMPLE BOARD APP
  • 掲示板一覧ページ・・・掲示板一覧 | SAMPLE BOARD APP
  • 掲示板詳細ページ・・・個別の掲示板のタイトル名 | SAMPLE BOARD APP

基本、「|」の右側は固定タイトルとし、左側を各々のページごとに出力を変えます。掲示板詳細ページのタイトルは個別の掲示板タイトルを表示させるようにし、トップページは「|」は不要で固定タイトルのみ表示させます。

ヘルパーメソッドとは?

viewをよりシンプルにDRYに書くためにRailsで用意されているモジュールのこと。

view以外もhelpできますが、基本的にはviewをhelpしてくれるものだと捉えましょう。

代表的なもので link_toform_withimage_tag などが存在します。

DRY原則とは?

DRY(Don’t Repeat Yourself)とは、「同じコードを重複させない」という意味だけではなく、一箇所の修正で済むのであれば、できる限り一箇所で管理して必ずそこから参照するべき」という意味をもつ原則です。

カスタムヘルパーメソッドとは?

元からあるメソッドだけでカバーしきれないところを自分で書き込んでいくことで補う物のことをカスタムヘルパーと呼びます。


作業の流れ

  • 新しくカスタムヘルパーメソッドを作成する
  • ビュー側に設定を追記する
    • レイアウトのタイトルを変更する
    • 各ページのタイトルを変更する

新しくカスタムヘルパーメソッドを作成する

タイトル部分を組み立てるカスタムヘルパーメソッドをapplication_helper に書きます。

module AplicationHelper
  def page_title(page_titlle = '')
    base_title = 'SAMPLE BOARD APP'

    page_title.empty? ? base_tiitle : page_title + ' | ' + base_title	
  end
end

コードを紐解く

page_title.empty? ? base_title : page_title + " | " + base_title

こちらは条件演算子(三項演算子)を使った書き方になってます。

式 ? 真だった場合の処理 : 偽だった場合の処理

書き換えると以下のようになります。

if page_title.empty?
  base_title
else
  page_title + " | " + base_title
end

ビュー側に設定を追記する

レイアウトのタイトルを変更する

レイアウトのタイトルを動的に変更できるように修正します。

<title><%= page_title(yield(:title)) %></title>

各ページのタイトルを変更する

前提として、ja.yml に翻訳を登録しておく必要があります。

ja:
  defaults: #すべてのコントローラーで使える
    login: 'ログイン'
    register: '登録'
    logout: 'ログアウト'
    post: '投稿'
    message:
      require_login: 'ログインしてください'
      created: '%{item}を作成しました'
      not_created: '%{item}を作成できませんでした'
  users:
    new:
      title: 'ユーザー登録'
      to_login_page: 'ログインページへ'
    create:  
      success: 'ユーザー登録が完了しました'
      fail: 'ユーザー登録に失敗しました'
  user_sessions:
    new:
      title: 'ログイン'
      to_register_page: '登録ページへ'
      password_forget: 'パスワードをお忘れの方はこちら'
    create:
      success: 'ログインしました'
      fail: 'ログインに失敗しました'
    destroy:
      success: 'ログアウトしました'
  boards:
    index:
      title: '掲示板一覧'
      no_result: '掲示板がありません'
    new:
      title: '掲示板作成'
    show:
      title: '掲示板詳細'
    bookmarks:
      title: 'ブックマーク一覧'
  profiles:
    show:
      title: 'プロフィール'

content_for を使って、ログイン、ユーザー作成、掲示板作成、掲示板一覧の各ページの先頭にタイトルを設定します。

<% content_for(:title, t('.title')) %>

掲示板詳細ページは、個別の掲示板のタイトル名を表示したいので@board.title とします。

<% content_for(:title, @board.title) %>

終わりに

content_forとyieldを使うことで、各テンプレート間で異なる情報をレイアウトファイルに伝えることができました。

自分で自カスタムヘルパーメソッドを作成する事もぜひマスターして使いこなせるようにしましょう。

参考記事

【Rails 】content_forとyieldの使い方 - Qiita
#はじめに今回はRailsにおけるcontent_forとyieldの使い方について解説します!コンテンツを1箇所に保存し、他のビューで使えるようにするためのものです!ぜひご覧ください#使い方content_forを説明する前に…
Rails: ページタイトルはビューテンプレートの`content_for`で表示すること(翻訳)|TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Set your page title in the view template using content_for - Andy Croll 原文公開日: 2017/12/11 著者: Andy Croll 2018/05/15: 初版公開 2022/12/...
レイアウトとレンダリング - Railsガイド
Action ControllerとAction Viewが提供する基本的なレイアウト機能について解説します。画面出力 (レンダリング) とリダイレクト、content_forブロックとパーシャル (部分テンプレート) の使用方法についても解説します。
ヘルパー(カスタムヘルパー)ってなんぞ? - Qiita
#Railsのviewにおけるメソッドただし、もともと用意されている物ではありません。これは、自作するなりどこかからコピぺする必要があります。Railsのviewには、元から用意されている様々…
【Rails】独自ヘルパー(Helper)メソッドの使い方 - Qiita
#ヘルパーとはhelper(ヘルパー)を一言で表すと、「処理を別ファイルに分離し、viewをよりシンプルにDRYに書くためのモジュール」です。(view以外もhelpできますが、基本的にはv…

コメント

タイトルとURLをコピーしました