Ruby on Railsで文字数を指定して表示させる方法

2021-02-16

Ruby on Railsでブログやウェブサイトのようなウェブアプリケーションを作成した際に役立つtipsを紹介します。

記事の冒頭だけを抜粋して処理したい方はぜひ参考にしてください。

Ruby on Railsで文字の数を指定して表示させる方法

例えば、記事を一覧に表示させる時に

このような構成になりますが、この「記事の冒頭部分」を全表示させているとデザインが崩れてしまいますよね。

記事の冒頭部分は先頭文字の▲文字以内で切り指定文字数以降は「…」と処理をしているサイトを見かけると思いますが、それをRuby on Railsで実装する方法を紹介していきます。

例えば、ブログやキュレーションサイトなどコンテンツを主体としたウェブサイトをRailsで構築する場合、データベースから取り出す文字列の数を制限したくなる場合があると思います。

画像では文字列がx文字以降は切り捨てられるという処理がされています。

これはトランケートと呼ばれるものですが、Ruby on Railsでは簡単に実装できるようにビューヘルパーで用意されています。

それではさっそく見ていきましょう。

データベースから取り出した文字列に字数制限を加えたい場合は、Railsにもともと備わっているビューヘルパーを使用します。これは「truncateメソッド」と呼ばれるものです。

例えば、ブログのようなウェブアプリケーションを構築したと仮定しましょう。

それぞれのモデルを以下のように設定するとします。

この中から、contentモデルにトランケート処理を実装します。

例えば、「contentの先頭15文字でトランケート処理を加える」場合を想定すると下記ソースコードで実装できます。

<%= truncate(content, length:15) %>

オプションでlength:15と指定することで、contentに格納されている文字数の中から先頭の15文字を引っ張ってくる、先頭の15文字でトランケート処理を加えるということになります。

なお、lengthのオプションはデフォルト値は30で設定されています。

何も設定しなければ、30文字でトランケートされます。

また、トランケート処理の際に末尾に付与される「…」はomissionオプションで変更することも可能です。

例えば、「…」ではなく、「続きへ」と設定したいと仮定します。その時のコードは以下の通りになります。

<%= truncate(content, length:15, omission:続きへ) %>

omissionオプションをうまく活用すれば、「続きへ」「read more」などブログやニュースサイトライクな表示も可能になりますね。