Railsアプリ内のURLテキストにリンクを自動でつけたい！
どうも、Linです。中華、通ってます。
Railsアプリを使っていてあったらいいなと思う機能に、
URLテキストに自動でリンクをつける
というものがあります。
何もしない状態だと、いくらURLをテキストを投稿してもリンクにならないし、
かといってaタグつきで投稿するとそのままHTMLタグが出力されるという悲劇に笑
困ったのでインターネットサーフィンしてみると、次の神記事に遭遇しました。
今日はこの方法を元に、0からURLテキストにaタグリンクをつける方法を備忘録も兼ねてまとめておきますね。
例として、
URLを投稿したらaタグが自動でつくアプリを作ってみましょう。
Step1. Railsアプリ作成
まずRailsアプリを作成します。作成の呪文はターミナルで 「rails new アプリ名」でしたね？
$ rails new url
意外かもしれませんが、今回のアプリ名は「url」です。
Step2. アプリのディレクトリに移動
続いて、先ほど誕生したアプリのディレクトリに移動。
$ cd url
Step3. scaffoldで土台作る
scaffoldコマンドを発動させてアプリの土台を作ります。
$ rails g scaffold Post url:string
urlカラムを持つPostテーブルを作ってみましょう。
Step4. データベース作成
$ 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
URIというライブラリを2行目の
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 %>
たとえば、今回作成した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 %>
@postsをeachメソッドで展開する箇所で、
<%= 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
です。
こちらのサイトの記事でこの衝撃的な新事実が判明。
まずターミナルで
$ gem install rinku
でRinkuをインストールし、すかさずRailsアプリのGemfileの一番下に
gem 'rinku'
を追加。
そして、ビューファイルでの出力は、
<%= 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 %>
としてみると、
ここでもできとるやん！
ただし、このGemの仕様上、タブを新しく開いてリンク先に飛ばすことはできないみたいですね。いや、たぶんできるのかもしれませんけど笑
どちらにせよ、Gemも用意されているので心強い。RailsアプリのURLテキストにaタグを自動でつけたいときは試してみてくださいね。
それでは！
Lin
おそらく、ブロガー。
今年でフリーランス 6年目。
