ブログアプリ⑥(記事を表示しよう)

データを登録できたので、次は表示させる

記事一覧画面で表示するもの

  • タイトル
  • 記事の最初30文字くらい
  • 最終更新日

記事詳細画面で表示するもの

  • タイトル
  • 記事全文
  • 最終更新日

タグ機能やページ送りもつけたいけど、まずは最低限表示できるようにしよう

コントローラでビューに渡すデータを取得して、ビューでデータを表示させるよ

記事一覧

controllerで、Articleのデータの中でstatusが1のデータを登録日降順に表示させる

controllers/articles_controller.rb

  def index
    @articles = Article.where(status: 1).order("created_at DESC")
  end

せっかくなので部分テンプレを使ってみる

views/articles/index.html.haml

= render partial: 'article', collection: @articles
views/articles/_article.html.haml

%ul
  = link_to "/articles/#{article.id}" do
    %li
      = article.title
    %li
      = article.text.truncate(30, omission: "...続きを見る")
    %li
      = article.created_at.to_s(:date)

ひとまずこんな感じにした

f:id:d_riko:20181202211612p:plain

textとcreated_atは少し頑張ったので記録

text

truncateというヘルパーメソッドを使うと、簡単に途中の文字まで表示することができる

デフォルトだと文字数30文字、末尾に「...」が表示される

truncate - リファレンス - - Railsドキュメント

ビューに記述するだけでできるなんて、ヘルパーメソッドってほんと便利

created_at

まず、何も設定しない状態だと、以下のように表示される

f:id:d_riko:20181202212257p:plain

直したい点としては2つ

  • 本の時間を表示したい(デフォルトはUTC
  • 日付だけ表示したい

順に直していこう

日本時間で表示

意外と簡単!以下のように修正すればOK

config/application.rb

    config.time_zone = 'Tokyo'

こちらの記事を参考にしたよ

qiita.com

日付だけ表示

調べたところ2つ方法があった

  1. strftimeメソッドを使う
  2. 日付のフォーマットを変える

strftimeメソッドは簡単に使える

strftime - リファレンス - - Railsドキュメント

ただ、日付を表示したいところに全部書いていくのは面倒なので、フォーマットを変えちゃう

config/initializers/time_formats.rb

Time::DATE_FORMATS[:default] = '%Y年%m月%d日 %H時%M分'
Time::DATE_FORMATS[:datetime] = '%Y年%m月%d日 %H時%M分'
Time::DATE_FORMATS[:date] = '%Y年%m月%d日'
Time::DATE_FORMATS[:time] = '%H時%M分%S秒'
Date::DATE_FORMATS[:default] = '%Y年%m月%d日'

※ファイルがなかったので新規作成

サーバを再起動して設定を適用

あとは表示させたいやつを記述すればOK

= article.created_at
=> 2018年12月02日 16時00分

= article.created_at.to_s(:date)
=> 2018年12月02日

曜日を日本語表記にもできそうだけど、ひとまずこれでOK

こちらの記事を参考にしたよ

qiita.com

記事詳細

記事一覧とほとんど同じかな

controllers/articles_controller.rb

  def show
    @article = Article.find(params[:id])
  end
views/articles/show.html.haml

%ul
  %li
    = @article.title
  %li
    = @article.text
  %li
    = @article.updated_at.to_s(:date)

f:id:d_riko:20181202220332p:plain

次は、投稿した記事の編集と削除をできるようにしよう