はじめに
ポートフォリオを作成する中で、入力フォームで登録した内容をビューで表示させると、改行できていない・URLが有効化されていないということに気付きました。
URLについては、入力フォームでurl_fieldを使用すれば簡単に解決できるかと思います。しかし、今回は、入力フォームに普通の文章とURLを混ぜ合わせて入力できるようにしたかったので、違う方法での実装を考える必要がありました。
そんなに難しい内容ではありませんが、記事にまとめることにしました。
実装環境
Ruby 3.1.2
Rails 6.1.6
実装方法
前提条件
モデル ：Book（インスタンス変数として@bookを使用します）
┗カラム：content
今回は、Bookモデルのcontentというカラムを表示させることにします。
【入力テキストの改行の有効化】
一般的にには、以下のように記述すると思います。
<%= @book.content %>
しかし、これだとtext_area等の入力フォームで改行しても、表示される時には改行が反映されていません。
そこで、以下のように記述することで、改行を反映させることができます。
<%= safe_join(@book.content.split("\n"),tag(:br)) %>
適宜、@book.contentの中身を変えてください。
余談になりますが、simple_formatというヘルパーを使用しても改行を反映させることができます。
しかし、その場合には、空白の改行は無効化されてしまうので、ご留意ください。
【URLのリンクの有効化】
こちらには、gemのrinkuを使用します。
まずは、Gemfileに書き込み、bundle installします。
あとは、該当のviewファイルに以下のように記述するだけです。
<%= Rinku.auto_link(@book.content, :all, 'target="_blank"').html_safe %>
【統合】
以下の記述で、上記の2つを組み合わせることができます。
rinkuの記述の中に、safe_joinを入れ込むだけです。
<%= Rinku.auto_link(safe_join(@book.content.split("\n"),tag(:br)), :all, 'target="_blank"').html_safe %>
さいごに
以上で改行とURLの有効化が実装できました。
簡単かつUI/UXの向上にもつながるのでおすすめです。
この記事が、どなたかのお役に立てれば幸いです。