Railsアプリ内のURLテキストにリンクを自動でつけたい！
どうも、Linです。中華、通ってます。
Railsアプリを使っていてあったらいいなと思う機能に、
URLテキストに自動でリンクをつける
というものがあります。
何もしない状態だと、いくらURLをテキストを投稿してもリンクにならないし、
かといってaタグつきで投稿するとそのままHTMLタグが出力されるという悲劇に笑
困ったのでインターネットサーフィンしてみると、次の神記事に遭遇しました。
今日はこの方法を元に、0からURLテキストにaタグリンクをつける方法を備忘録も兼ねてまとめておきますね。
例として、
URLを投稿したらaタグが自動でつくアプリを作ってみましょう。
Step1. Railsアプリ作成
まずRailsアプリを作成します。作成の呪文はターミナルで 「rails new アプリ名」でしたね？
|
1 |
$ rails new url |
意外かもしれませんが、今回のアプリ名は「url」です。
Step2. アプリのディレクトリに移動
続いて、先ほど誕生したアプリのディレクトリに移動。
|
1 |
$ cd url |
Step3. scaffoldで土台作る
scaffoldコマンドを発動させてアプリの土台を作ります。
|
1 |
$ rails g scaffold Post url:string |
urlカラムを持つPostテーブルを作ってみましょう。
Step4. データベース作成
|
1 |
$ rake db:migrate |
でデータベース作成！
この時点でURLを投稿できるというシンプルなアプリが完成します。
Step5. application_helper.rbを編集
Railsアプリ中の「applcation_helper.rb」というファイルを次のように編集します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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行目の
|
1 |
require uri |
で読み込んで、
6行目でURIライブラリのextractメソッドを使っているようです。
text_url_to_linkという関数の引数textが「httpもしくはhttpsで始まる」テキスト要素を空のsub_textという文字列の変数に、
- <a href=”
- URLテキスト
- ” target=\”_blank\”>
- URLテキスト
- </a>
を順番に「<<」で連結させているみたいです。
詳しくは、神のみぞ、知るです。
Step6. Viewファイルで表示
あとはビューファイルで次のように表示するだけ。
|
1 |
<%= text_url_to_link(h(URLテキストの変数)).html_safe %> |
たとえば、今回作成したurlアプリでしたらindex.htmlを次のように編集してみました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<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メソッドで展開する箇所で、
|
1 |
<%= text_url_to_link(h(post.url)).html_safe %> |
とpost.urlで投稿のURLをapplication_helper.rbで定義した「text_url_to_link」メソッドに引数として渡していますね。
うまくいくと、こんな感じになると思います。
無事にhttpとhttpsのURLテキストにaタグのリンクが付与されましたね。
いや、しかし、専門のGemが存在していた！？
ここまで長い道のりで、正直よく理解しきれないコードをapplication_helper.rbに追加してきました。
しかしながら、現実はもっとやさしく、このプロブレムを一瞬で解決してくれるGemが存在しているようなのです。
その名も、
Rinku
です。
こちらのサイトの記事でこの衝撃的な新事実が判明。
programmer-jobs.blogspot.jp
まずターミナルで
|
1 |
$ gem install rinku |
でRinkuをインストールし、すかさずRailsアプリのGemfileの一番下に
|
1 |
gem 'rinku' |
を追加。
そして、ビューファイルでの出力は、
|
1 |
<%= raw Rinku.auto_link(h(URLテキストの変数)) %> |
とすればいいみたいなのです。
試しに、先ほどのアプリのapplication_helper.rbで編集した内容を一度削除し、Gemを追加してビューファイルのindex.htmlを、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<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タグを自動でつけたいときは試してみてくださいね。
「いや、それでも自動でaタグ使えねえし？」
とキレそうになっている方にはエンジニア専門のQAサイト「teratail」がおすすめです。
質問に答えてくれる方はプロのエンジニアの方ばかりなので、問題を解決できるかもしれません。
それでは！
Lin
新卒で入ったネット広告代理店を1年半で退職。
その後、副業として活動していたウェブメディア運営のフリーランスへ。
現在はプログラミングの勉強に励み、0からフリーエンジニアの道を目指す。好きな映画は「メリーに首ったけ」
>>Twitterをフォローする
