はじめに

Rails Tips の 53 回目です。昨日、articles で「Hello, Rails」というタイトルだけを表示しました。今日は、「アプリケーションの Home ページを作成する」を実施した後で、このページタイトルを html 自体のタイトルにも表示しましょう。

4.3 アプリケーションの Home ページを設定する

昨日のページは http://localhost/articles としてアクセスしました。せっかくなので、ホームページにアクセスしたらこのページが表示されるようにしたいです。そのためには、routes.rb の root を設定するだけです。昨日の get の上に root を追加します。

  root "articles#index"
  get "/articles", to: "articles#index"

これで、 http://localhost にアクセスすると articles に飛び、Hello, Rails が表示されました。

この状態で、db:create してみましょう。

$ bin/rails db:create
Created database 'hkob_blog_development'
Created database 'hkob_blog_test'

無事に成功できています。再度 bin/rails s をすると今度は正しく Rails の画面が表示されました。

これだけだと流石に短すぎるので、このタイトルを locales に登録しましょう。テストを変更してみます。当然何もしていないのでエラーになります。

    it_behaves_like "描画結果に文字列が含まれている?", %w[こんにちは Rails!]

これを実現するために index.html.haml を次のように変更します。

%h1= t ".title"

view 用には専用の翻訳ファイルを用意したいと思います。

$ mkdir -p config/locales/views
$ touch config/locales/views/ja.yml

この ja.yml に「こんにちは、Rails!」を登録しましょう。articles の index の title なので以下のようになります。

ja:
  articles:
    index:
      title: こんにちは、Rails!

これで無事に「こんにちは、Rails!」と見出しが表示されました。

ここで ページタイトルの取り扱い : 小林研 Rails Tips (33) で説明したタイトルの処理を実施します。現在、 application.html.haml の title はこのようになっています。どのページでも HkobBlog となっていて嬉しくありません。

  %title HkobBlog

33日目で説明したようにこの部分を以下のように変更します。page に contents_for が存在した場合、その返り値を h1 で描画します。なかった場合には、後で確認できるように controller の名前とアクションを表示します。

    %title
      - if content_for?(:title)
        %h1= yield(:title)
      - else
        #{controller.class.name} : #{controller.action_name}

この状態でページを表示すると、html タイトルは ArticlesController : index となりました。index.html.haml を以下のように変更します。先ほどの翻訳文字列を @page_title に登録しました。

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

これでページタイトルが表示されましたが、見出しがなくなってしまいました。そこで application.html.haml の body を以下のように変更します。上で設定した @page_title があれば、見出し1として表示します。

ホームページの設定だけでは短すぎたので、タイトルを content_for で描画する部分も修正してみました。