【Rails】テキスト内のURLを自動でリンク化してくれるgem「rinku」を導入してみた

SNSの投稿や自己紹介文（テキスト）にURLを記述すると自動でリンク化してくれるように、Railsで作成したアプリ内でも入力したURLを自動でリンク化できるようにしたい、

と思い立ちググってみたら、テキスト内のURLに自動でリンクタグを付けてリンク化してくれるgem「rinku」があることが判明。

ということで、「rinku」を導入する流れと使い方についてまとめました。

開発環境

• Ruby 3.1.2
• Ruby on Rails 7.0.3
• Bootstrap 5.1.3
• M1 Macbook Air 2020
• mac OS Monterey (ver. 12.4)
• ターミナル bash (Rosetta 2 使用）

rinkuを導入する流れ

まずは「rinku」をインストールします。

$ gem install rinku

以下をGemfileに記述し、

gem "rinku"

bundle installします。

$ bundle install

今回、対象となるテキスト<%= simple_format(@user.content) %>に「rinku」gemが用意するメソッドを適用することでURLを自動でリンク化してくれます。

<h1 class="text-center">プロフィール</h1>

　　・・・
    <label for="exampleFormControlInput1" class="form-label fw-bold">自己紹介</label>
    <div class="mb-3">
      <%= simple_format(@user.content) %>
    </div>
　　・・・
  </div>
</div>

「rinku」gemを適用する前にテキスト内にURLを記述すると、以下のようにURL文字列がそのまま表示されるだけでリンク化はされていません。

それでは、インストールした「rinku」gemを適用してみましょう。

「rinku」を適用するためには、以下のようにRinku.auto_linkを追記します。

<%=  Rinku.auto_link(simple_format(@user.content)) %>

すると、リンクを貼り付けた箇所にリンクタグが自動挿入されます。

しかし、このままだと自動エスケープによりHTMLタグがそのまま表示されてしまいます。

そこで、Rinku.auto_linkの直前にrawを追記することで自動エスケープなしで出力することができます。

<%=  raw Rinku.auto_link(simple_format(@user.content)) %>

以下のように、自動エスケープなしでURLの箇所はリンク化されていることが確認できます。

別タブで開くようにする(target=”_blank”属性を付与する)

リンク化されたURLを別タブで開きたい場合は、第２引数に:urlsを、第３引数にtarget="_blank"属性を以下のように付与することで可能になります。

=  raw Rinku.auto_link(simple_format(@user.content), :urls, 'target="_blank"')

ただ、別タブで開く場合はtarget="_blank"属性のみだとセキュリティ的にアウトなので、別途rel="noopener noreferrer"属性も付与する必要があります。

リンクに rel=”noopener noreferrer”属性を付与する

rel="noopener noreferrer" 属性は、以下のようにtarget="_blank"属性の中（第３引数の中）に続けて記述します。

'target="_blank" rel="noopener noreferrer"'

=  raw Rinku.auto_link(simple_format(@user.content), :urls, 'target="_blank" rel="noopener noreferrer"')

以下のように区切ってしまうとエラーになるので注意が必要。

# ダメな例
'target="_blank"', 'rel="noopener noreferrer"'

どうやら、第３引数内で全ての属性をまとめて書けということみたいですね。

参考記事

Qiita

【Ruby】テキスト内のURLを自動でリンクにしてくれるgem rinkuの導入と使い方【auto_linkの20倍早い】 - Qi... はじめにRailsアプリで以下のような文字列中にあるリンクを文字列のままではなく自動でリンクに変換しクリックで画面遷移できる様にさせたいと思いました。※ Railsのsimple...

Just do IT

Rinku gem で リンクに rel="noopener noreferrer"属性を付与したい - Just do IT URLやemailの文字列をリンクにしてくれる便利な Rinku gem。 vmg/rinku: Autolinking. Ruby. Yes, that's pretty much it. target _blank属性を付与できるのは公式ドキュメ...