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

Sponsored Link


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

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

 

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

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

というものがあります。

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

 

rails リンク自動

 

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

 

rails リンク自動

 

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

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

例として、

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

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

 

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行目の

で読み込んで、

6行目で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タグを自動でつけたいときは試してみてくださいね。

 

「いや、それでも自動でaタグ使えねえし?」

とキレそうになっている方にはエンジニア専門のQAサイト「teratail」がおすすめです。

質問に答えてくれる方はプロのエンジニアの方ばかりなので、問題を解決できるかもしれません。

 

それでは!

Lin

飯橋凛(Ihashi Lin)

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


Sponsored Link

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



もう1本読んでみる