【Rails応用講座 11】オピニオンの仕上げ >
文字表示を整える

長い文字を短くするtruncate

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

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

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

# clips/show.html.erb

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

truncateのオプション

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

オプション 説明 デフォルト
:omission 省略された文字列の後ろにつける文字列。 ...
:separator 区切り文字。中途半端なところで文字列が切れないようにする。 なし

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

# clips/show.html.erb

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

ヘルパーメソッドのtruncate

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

# clips/show.html.erb

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

truncateヘルパーのオプション

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

オプション 説明 デフォルト
:length 省略後の文字列長。 30
:omission 省略された文字列の後ろにつける文字列。 ...
:separator 区切り文字。中途半端なところで文字列が切れないようにする。 なし
:escape HTMLエスケープ(falseを指定するとエスケープしない) true

例えば、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文字にしてみて下さい。

無料ビデオ講座のお知らせ

Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。

無料講座一覧を見る