タイトルを動的に表示する

課題

共通レイアウトであるapplication.html.erbのhead部分は現在<title>アプリのタイトル</title>というような静的なタイトルが記載されている。このままだとWebページで検索した際、一覧ページであろうが、新規登録ページであろうが、ページタイトルは全て共通のものとなってしまう。

何がいけないの？

ユーザビリティ、つまり特定の利用者にとって使い勝手が良くない。
SEOの側面でよろしくない。
→ SEO(Search Engine Optimazation)…検索エンジン最適化。検索エンジンの中には「こういったページは良いページだから、検索結果を最初の方に表示してあげよう」といった特定の基準がある。これを満たす行為のことを検索エンジンの最適化、SEOという。

対策

Railsにデフォルトで用意されているcontent_forというメソッドを使う。
(provideというものもあるそうな)

使い方

① レイアウトファイルのhead部分を以下のように変更する
application.html.erb

<title>アプリのタイトル</title>
↓
<title><%= yield(:title) %></title>

② それぞれのビューファイルに以下の記載を追加

<%= content_for(:title, 'ログイン|アプリのタイトル')%>

これでページを開いたときのタイトル部分が変更されている

かっこは省略化
i18nを当てる時はカッコがきで記載

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

タイトル初期値の設定

下記のように記載すると、content_forの指定がなかったページはデフォルトのタイトルになる。

<title><%= contetn_for?(:title) ? yield(:title) : "デフォルトのタイトル"%></title>

↑三項演算子というやつ。こうやって使うのか！！！と目から鱗だった🐟

条件式 ? trueの処理 : falseの処理

やってみたこと

以下、私がやってみただけで最適解ではない様です。

課題としてはタイトルをページ名| アプリ名の様にすることであり、上記の使い方の様に記載しては全ページ分必要になってしまうので、下記の様にする。

翻訳ファイル

ja:
  defaults:
    page_title: "%{item}|アプリ名"

各画面のビューファイル一番上

<%= content_for :title do %>
  <%= t'defaults.page_title', item: (t'.title') %>
<% end %>

i18nの翻訳ファイルに既に各ページタイトルの翻訳文を記載しているのでitemは翻訳文を利用
これでタイトル部分がログイン|アプリ名という形になった。

※上記の書き方では、ブロックにしないとシンタックスエラーが出てしまった。

全部のビュー画面の上にcontent_forを記載するのは面倒臭かったので共通レイアウトのbody部分に記載してみたが上手く行かなかった。パーシャルを作ってみたが表示されなかった。

後から見つけたサイト

わざわざ翻訳で書かなくてもページタイトル|アプリ名の表示にする方法があった。

<title><%= contetn_for?(:title) ? yield(:title) + '|アプリ名' : "デフォルトのタイトル"%></title>

(　д)　ﾟ　ﾟ

基本的なやり方だった。これもこうやって使うのか…と思った。

所感

ちゃんと課題文を読んでおらず、helper、moduleというキーワードを完全に失念していました。

helperとは

rails g controllerをした際に生成されている

rails g controller Users
create app/helper/users_helper.rb
create app/controllers/users_controller..rb

その実態はmoduleのことであり、今回の課題はそこに各ページで使うモジュールを設定すること。

続く>>>>

参考にしたサイト

【Rails 】content_forとyieldの使い方 - Qiita

ユーザビリティは、単なる「使いやすさ」ではない！（UXデザインセンター #003）

UIとUXの違いとは？デザインを改善するポイントも解説！ | Lakeside Software

ユーザビリティとUX – U-Site

https://wa3.i-3-i.info/word1382.html

3.2 yieldを理解する | Railsガイド

3.3 content_forを使う | Railsガイド

[Rails] content_forでレイアウトの内容をviewから柔軟に変更する | Akashic Records

rails helper 基本 - Qiita

おまけ

UI・・・ユーザーインターフェース

端的に、サービスの扱いやすさ、ユーザーとの接点
サービスのデザイン性や操作性を指す。快適な操作感や視認性に優れたレイアウトという面でも、ユーザーの使いやすいと感じられるサービスが求められる

UX・・・ユーザーエクスペリエンス

ユーザーの体験。
そのプロダクトやサービスにおいてユーザーが感じる体験のこと
UIもこれに内包される

Rails Diary

プログラミングの学習記録です。