photo credit: Hauptbahnhof, Central Train Station, Hamburg – Train Lines via photopin (license)
こんにちは!
長い文字を切り取って「…」を付けたくなるとき、いっぱいありますよね! 今回はRailsでそれをやる方法を紹介します!
truncateメソッドを使おう
ActiveSupportでStringクラスにtruncateメソッドが追加されています。 ここで注意してほしいのは、”たーんけーと”じゃなく、”とらんけーと”だということ。 10分くらい、なんで動かないんだろう????(゜∀゜)ってなったのは僕だけですか?
separatorを指定するとキリのいい所で文章を切ってくれる omissionを指定すると「…」以外を文章の後ろに追加することが出来る
"This is a test case.".truncate(10) # => "This is a ..." "This is a test case.".truncate(10, separate: ' ') # => "This is a ..." "This is a test case.".truncate(10, omission: '...continued') # => "This is a ...continued"
これで完璧! 最近はCSS3のtext-overflowプロパティでも実装出来るけど、どうなんだろう。 CanIUseを見る限りは97%以上は使えるぽいからそろそろCSSで実装してもいいのかな。
またhelperとしても提供されているので以下のようにしてもOK
# defaultだと30文字で切り取られる <%= truncate("This is a test case.") %> # => "This is a test case...." # 文字数の指定をする場合 <%= truncate("This is a test case.", length: 10) %> # => "This is a ..." # separator指定 <%= truncate("This is a test case.", separator: ' ') %> # => "This is a test case...." # omission指定 <%= truncate("This is a test case.", omission: '...continued", length: 10) %> # => "This is a ...continued"
最後に
Rails楽しい!!
参考
・API RubyOnRails Document – truncate ・ActiveSupoprt API RubyOnRails Document – truncate