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




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

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

 

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

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

というものがあります。

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

 

rails リンク自動

 

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

 

rails リンク自動

 

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

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

例として、

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

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

 

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を投稿できるというシンプルなアプリが完成します。

 

rails リンク自動

 

 

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をリンク化できますよ。

 

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

 

rails リンク自動

 

無事に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 %>

としてみると、

ここでもできとるやん!

 

rails リンク自動

 

ただし、このGemの仕様上、タブを新しく開いてリンク先に飛ばすことはできないみたいですね。いや、たぶんできるのかもしれませんけど笑

 

どちらにせよ、Gemも用意されているので心強い。RailsアプリのURLテキストにaタグを自動でつけたいときは試してみてくださいね。

 

それでは!

Lin




音生入力で楽にブログを書く技が満載!
ブログ音声入力術

音声入力の使い方から文章を書くコツまで完全網羅。ブログを書きたいすべての人向けの電子書籍