ページタイトルの取り扱い : 小林研 Rails Tips (33)

Rails

はじめに

Rails Tips の 33 回目です。昨日の controller_and_action の応用を説明するにあたり、それに必要なページタイトルの取り扱いをまとめておく必要があると思いました。これまではページタイトルは手動で書き換えており、html のタイトルとは一致していませんでした。現在は、この部分をシステム化し、少しずつ全てのページで書き換えを行っているところです。

application.html.haml の修正

html のヘッダ部分には title タグがあり、ここに表示されるタイトルがブックマークなどに記載されます。applicatiton.html.haml の title 部分は以下のように記載しています。ここでは、title という content_for が存在した場合には、その返り値をタイトルとして描画しています。存在しない場合には、これまで通りコントローラのクラス名とアクション名を表示しています。ページの書き換えが終わっていないページでは、これまで通りの描画になるわけです。

!!!
%html{xmlns: "http://www.w3.org/1999/xhtml", "xml:lang" => "ja", lang: "ja"}
  %head
    %title
      - if content_for?(:title)
        = yield(:title)
      - else
        #{controller.class.name} : #{controller.action_name}

さらに %body の中ではこのようにして @page_title インスタンス変数に保存されているページのタイトルを h1 で描画しています。これにより、html のタイトルとページのタイトルが必ず一致することになります。

    - if @page_title
      %h1= @page_title

hoges/action_name.html.haml の先頭部分

各ページ (hoges/action_name.html.haml) の先頭には以下のような content_for を記述することにします。先ほど参照した :title に対応する content_for を用意します。ここでは @page_title インスタンス変数のみを設定するだけです。この行が content_for の返り値になるため、title ヘッダに描画されることになります。その後、@page_title が設定されていることから、body の h1 タグにタイトルが描画されます。 .title は locales の相対表記であるため、全てのページで共通になります。詳しくは後述します。

- content_for :title do
  - @page_title = t ".title"

もし、タイトルに補足情報を追加したい場合には、以下のようにします。ただ、補足情報は turbo_frame の中に入れたいことが多いので、h2 で別表記することの方が多いです。

- content_for :title do
  - @page_title = %[#{t ".title"} (#{@additional_info})]

.title の locales 設定

view のページ内で「.title」とした場合、ページの相対的な locale アクセスになります。この場合、「ja.hoges.action_name.title」と記述したことと同義になります。このため、config/locales/views/ja.yml には以下のようにタイトルを記述すればよいことになります。

ja:
  hoges:
    action_name:
      title: hoge 一覧

おわりに

各 view のタイトルの設定方法を解説しました。明日はこの locales の情報を view 以外から取得する方法を解説します。