【Rails開発メモ】URLテキストにaタグリンクを自動でつける方法

Railsアプリ内のURLテキストにリンクを自動でつけたい！

どうも、Linです。中華、通ってます。

Railsアプリを使っていてあったらいいなと思う機能に、

URLテキストに自動でリンクをつける

というものがあります。

何もしない状態だと、いくらURLをテキストを投稿してもリンクにならないし、

かといってaタグつきで投稿するとそのままHTMLタグが出力されるという悲劇に笑

困ったのでインターネットサーフィンしてみると、次の神記事に遭遇しました。

Qiita

[Ruby][Rails]テキスト内のURLをaタグに書き換える - Qiita

https://qiita.com/satoken0417/items/df4098a122d05d69a3e6

RailsでWebページ上にテキストを表示するときにときに自動でテキスト内のURLをaタグに書き換えてくれたら楽だなーと思って調べてみた。```application_helper.rbrequire "uri"def...

今日はこの方法を元に、0からURLテキストにaタグリンクをつける方法を備忘録も兼ねてまとめておきますね。

例として、

URLを投稿したらaタグが自動でつくアプリを作ってみましょう。

開発環境はRails 5を想定しています

Step1. Railsアプリ作成

まずRailsアプリを作成します。作成の呪文はターミナルで「rails new アプリ名」でしたね？

$ rails new url

1	$ rails new url

意外かもしれませんが、今回のアプリ名は「url」です。

Step2. アプリのディレクトリに移動

続いて、先ほど誕生したアプリのディレクトリに移動。

$ cd url

$ cd url

Step3. scaffoldで土台作る

scaffoldコマンドを発動させてアプリの土台を作ります。

$ rails g scaffold Post url:string

1	$ rails g scaffold Post url:string

urlカラムを持つPostテーブルを作ってみましょう。

Step4. データベース作成

$ rails db:migrate

1	$ rails db:migrate

でデータベース作成！

この時点でURLを投稿できるというシンプルなアプリが完成します。

Step5. application_helper.rbを編集

Railsアプリ中の「applcation_helper.rb」というファイルを次のように編集します。

module ApplicationHelper
  require "uri"

def text_url_to_link text

  URI.extract(text, ['http','https'] ).uniq.each do |url|
    sub_text = ""
    sub_text << "<a href=" << url << " target=\"_blank\">" << url << "</a>"

    text.gsub!(url, sub_text)
  end

  return text
end
end

module ApplicationHelper

require "uri"

def text_url_to_link text

URI.extract(text, ['http','https'] ).uniq.each do |url|

sub_text = ""

sub_text << "<a href=" << url << " target=\"_blank\">" << url << "</a>"

text.gsub!(url, sub_text)

end

return text

end

URIというライブラリを2行目の

require uri

1	require uri

で読み込んで、

6行目でURIライブラリのextractメソッドを使っているようです。

text_url_to_linkという関数の引数textが「httpもしくはhttpsで始まる」テキスト要素を空のsub_textという文字列の変数に、

<a href=”
URLテキスト
” target=\”_blank\”>
URLテキスト
</a>

を順番に「<<」で連結させているみたいです。

詳しくは、神のみぞ、知るです。

Step6. Viewファイルで表示

あとはビューファイルで次のように表示するだけ。

<%= text_url_to_link(h(URLテキストの変数)).html_safe %>

1	<%= text_url_to_link(h(URLテキストの変数)).html_safe %>

たとえば、今回作成したurlアプリでしたらindex.htmlを次のように編集してみました。

<p id="notice"><%= notice %></p>

<h1>Listing Posts</h1>

<table>
  <thead>
    <tr>
      <th>Url</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @posts.each do |post| %>
      <tr>
        <td><%= text_url_to_link(h(post.url)).html_safe %></td>

        <td><%= link_to 'Show', post %></td>
        <td><%= link_to 'Edit', edit_post_path(post) %></td>
        <td><%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'New Post', new_post_path %>

<h1>Listing Posts</h1>

<table>

<thead>

<tr>

</tr>

</thead>

<tbody>

<% @posts.each do |post| %>

<tr>

</tr>

<% end %>

</tbody>

</table>

<br>

<%= link_to 'New Post', new_post_path %>

@postsをeachメソッドで展開する箇所で、

<%= text_url_to_link(h(post.url)).html_safe %>

1	<%= text_url_to_link(h(post.url)).html_safe %>

とpost.urlで投稿のURLをapplication_helper.rbで定義した「text_url_to_link」メソッドに引数として渡していますね。

これで投稿に含まれるURLをリンク化できますよ。

うまくいくと、こんな感じになると思います。

無事にhttpとhttpsのURLテキストにaタグのリンクが付与されましたね。

いや、しかし、専門のGemが存在していた！？

ここまで長い道のりで、正直よく理解しきれないコードをapplication_helper.rbに追加してきました。

しかしながら、現実はもっとやさしく、このプロブレムを一瞬で解決してくれるGemが存在しているようなのです。

その名も、

Rinku

です。

こちらのサイトの記事でこの衝撃的な新事実が判明。

programmer-jobs.blogspot.jp

Ruby on Railsで、URLやメールアドレスの自動リンク「Rinku」

https://programmer-jobs.blogspot.jp/2013/06/ruby-on-railsurlrinku.html

IT関連ネタを中心とした、彷徨えるウェブプログラマーの技術メモ

まずターミナルで

$ gem install rinku

1	$ gem install rinku

でRinkuをインストールし、すかさずRailsアプリのGemfileの一番下に

gem 'rinku'

1	gem 'rinku'

を追加。

そして、ビューファイルでの出力は、

<%= raw Rinku.auto_link(h(URLテキストの変数)) %>

1	<%= raw Rinku.auto_link(h(URLテキストの変数)) %>

とすればいいみたいなのです。

試しに、先ほどのアプリのapplication_helper.rbで編集した内容を一度削除し、Gemを追加してビューファイルのindex.htmlを、

<p id="notice"><%= notice %></p>

<h1>Listing Posts</h1>

<table>
  <thead>
    <tr>
      <th>Url</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @posts.each do |post| %>
      <tr>
        <td><%= raw Rinku.auto_link(h(post.url)) %></td>
        
        <td><%= link_to 'Show', post %></td>
        <td><%= link_to 'Edit', edit_post_path(post) %></td>
        <td><%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'New Post', new_post_path %>