【Rails】投稿文章にURLが含まれていたら自動的にリンク化し、文章の改行もする

はじめに

ポートフォリオ制作中に、投稿文章の中に外部リンクを貼りたいと思ったら、まさかのリンク化されないことに気付いてしまいました。
どうすれば解決するのか調べてみると、
https://qiita.com/Jackson123/items/a5e21c6d6d229681cb6b
こちらの方が解説してくれていました！
記事を参考に自分なりに記述した内容を解説していきます！

問題

普通にtext_areaで文章を投稿し、viewページに以下のようにコードを記述。（Itemテーブルのtextカラムがあった場合）

view

<%= @item.text %>

理想としてはこのような表示を作りたいと思います。

しかし上記のコードのままだと文章の改行がされず、URLもリンク化されません。
また、URLが長すぎるとレイアウトが崩れてしまう場合もあります。

↑こんな感じになります。
（※URLの部分が改行されているのは自動でされてしまいました）

これを解決していきたいと思います。

まずはRinkuを導入

Rinkuというgemが簡単に解決してくれました。

Gemfile

gem 'rinku'

bundle install

実装

Rinkuの使い方は参考ページの方が解説してくれているので省略します。

view

<%= raw Rinku.auto_link(h(変数)) %>

「変数」には「@item.text」など、当てはまる変数を入れてください。
これでURLを含んだ文章を投稿してみると

という風になったと思います。

仕上げ

続いて文章の改行やレイアウトが崩れないようにする記述を追加していきます。

view.html.erb

<div class="url-text">
  <%= raw Rinku.auto_link(simple_format(h(変数)), :all, 'target="_blank"') %>
</div>

css

.url-text {
  word-break: break-word;
}

１つずつ見ていきましょう。

(simple_format(h(変数))

この記述で文章の改行などををしています。
simple_formatはrailsが元々準備してくれているヘルパーで、文章の改行やスペースによる空白などを適用してくれるみたいです。

:all, 'target="_blank"'

「:all」はモードの指定です。URLもemailもリンク化します。
この部分を「:urls」に変更するとURLのみリンク化され、「:email_addresses」にするとemailのみリンク化されます。

「'target="_blank"'」は外部リンクの指定です。
簡単に言うと通常はリンクをクリックすると同タブ内での画面遷移が行われますが、'target="_blank"'を指定記述することによってタブを新しく開いてリンク先ページの表示を行ってくれます。
同webサイト内での画面遷移を行いたいなど、不要な機能だという方は記述しないようにしましょう。

word-break: break-word;

こちらのCSSについては、URLが長くなってしまった際に文章が親要素からはみ出る現象を防ぐためのものです。
はみ出る現象が起きない方は不要な記述です。記述しておいても特に損はない？　ので不安な方は入れておきましょう。
また、bootstrapを使用していてcssをあまり弄りたくないという方は、「class="text-break"」と記述してください。

最後に

今回はいろんな方の記事を参考にさせていただきました！
自分自身はまだまだプログラミング初心者ですが、同じ機能を欲している方は結構いるのではと思い記事にしてみました。
皆さんの参考になれば幸いです。

●参考●
simple_formatについて　https://qiita.com/mmaumtjgj/items/1b672f3accd37387b2f3
Rinkuについて　https://qiita.com/ngron/items/151e1e4b94319bcbdeec
word-breakについて　https://developer.mozilla.org/ja/docs/Web/CSS/word-break