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

Sponsored Link


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

どうも、Linです。中華、行きます。

 

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

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

というものがあります。

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

 

rails リンク自動

 

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

rails リンク自動

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

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

例として、

url

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

 

 

Step1. Railsアプリ作成

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

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

 

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

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

 

Step3. scaffoldで土台作る

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

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

 

Step4. データベース作成

でデータベース作成!この時点でURLを投稿できるという非常にシンプルなアプリが完成します。

rails リンク自動

 

 

Step5. application_helper.rbを編集

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

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

で読み込んで、

4行目でURIライブラリのextractメソッドを使っているようです。多分おそらく、text_url_to_linkという関数の引数textが「httpもしくはhttpsで始まる」テキスト要素を空のsub_textという文字列の変数に、

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

を順番に「<<」で連結させているみたいです。詳しくは、神のみぞ、知るです。

 

Step6. Viewファイルで表示

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

 

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

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

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

 

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

rails リンク自動

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

 

 

いや、しかし、専門のGemが存在していた!?

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

じつはこのプロブレムを一瞬で解決してくれるGemも存在しているようなのです。

その名も、

Rinku

です。

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

 

こちらの記事によると、まずターミナルで

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

を追加。

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

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

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

としてみると、

ここでもできとるやん!

rails リンク自動

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

 

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

 

それでは!

Lin

飯橋凛(Ihashi Lin)

インターネット広告代理店を1年半で退職。
その後、副業として活動していたウェブメディア運営のフリーランスへ。
現在はプログラミングの勉強に励み、0からフリーエンジニアの道を目指す。最近はキムチをまとめ買いにはまっている。


Sponsored Link

コメントはこちらからお願いします!



もう1本読んでみる