文字表示を整える

長い文字を短くするtruncate

オピニオンの仕上げとして、clips/show.html.erbでオピニオン概要を表示させるようにします。ですが、実際に表示させてみると以下のように本文が長すぎてとても見にくくなってしまいます。

今回学んでいくtruncateメソッドは、このような時に文字を短く省略させるために使うメソッドです。truncateメソッドの使用方法はとても簡単で、省略させたい対象の末尾にtruncate(文字数)という記述を追加するだけです。

では、実際にshow.html.erbでオピニオン本文に対して使用してみましょう。今回は100文字で切り上げるようにしています。

# clips/show.html.erb

<%= opinion.body.truncate(100) %>

truncateのオプション

truncateメソッドでは以下のようなオプションを指定する事が出来ます。

では、omissionを実際に使ってみます。

# clips/show.html.erb

<%= opinion.body.truncate(100), omission: '#=>' %>

ヘルパーメソッドのtruncate

こちらもtruncateメソッドで簡単に短くする事が出来ます。

# clips/show.html.erb

<%= truncate opinion.body, length: 100 %>

truncateヘルパーのオプション

truncateヘルパーもオプションを指定する事が出来ます。

例えば、omissionを使用する場合は以下のように記述します。

# clips/show.html.erb

<%= truncate opinion.body, length: 100, omission: '#=>' %>

ブロックで書く

truncateは、ブロックを使って書くこともできます。使い方の例は以下です。ブログメディアなどでよく見る、続きを読むなどが設定可能です。

# clips/show.html.erb

<%= truncate opinion.body, length: 100, omission: '#=>', separator: '、' do %>
  <%= link_to "続きを読む" %>
<% end %>

課題

他のページでもtruncateを使ってみましょう。home/index.html.erbと clips/index.html.erbで、本文部分を50文字にしてみて下さい。