Rails Tutorial 拡張(ブラウザのタブに好きな画像を表示) #Rails

はじめに

Ruby on Rails Tutorialをやっていて、ふと、ブラウザのタブにRailsのロゴを入れたいなと思い、調べて見ました。案外簡単だったので、使って見てください。

Railsにはもともと、ActionView::Helpers::AssetTagHelperに favicon を使用できるように favicon_link_tag が定義されているようです。

そもそも faviconって。。。？

プログラミング初心者の中には、 faviconという言葉を初めて聞いたという人も多いのではないでしょうか？僕もその一人で、今回これを調べるにあたり初めて知りました。
そんな方でも安心してください！もう今後、 faviconって何？ なんて絶対に言わなくなります！ 絶対に です！

faviconとは、、、

言葉で説明するより、見た方が早いと思うので、こちらの画像を用意しました。

見ての通り、よくwebサイトで見る、このアイコンのことです。
それでは、言葉でも説明したいと思います。

faviconとは、

fav + icon

のことである！！！！
favとは、 favorite　の略で、つまり、どういうことかというと、　自分の好きな画像　ってことだね！
何かオリジナルでサービス開発する時には、ここもこだわるといいかもしれません。

実際に使って見る。

API docや、こちらのブログを参考にしました。

favicon.ico を用意

今回は、やはり、Rails Tutorialということもあり、 Rails のロゴがいいなと思い、Rails Tutorialに沿って、ダウンロードします。
ターミナルで、

Terminal

$ curl -OL http://railstutorial.jp/rails.png

と入力し、rails.pngをダウンロードします。
そして、こちらのサイトへアクセスし、favicon.icoを作成・ダウンロードします。

次に、作成した favicon.ico を使用したいアプリケーションの app/assets/images 以下に配置してください。

favicon.icoを読み込ませる。

favicon.icoを使用するためには、基本的に、　favicon_link_tag を使用します。このヘルパーは、アセットパイプラインに則っているので、引数に.icoファイル名を指定しただけでも、　app/assets/images/画像ファイル.ico を探してくれます。引数に何も指定しないと、app/assets/images/favicon.icoを自動で読みに行ってくれるようです。User-firstって感じがしますね〜

application.html.slim

doctype html
html
  head
    title
      = full_title(yield(:title))
    = csrf_meta_tags
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
    = favicon_link_tag 'favicon.ico'

この一番下の部分ですね。(Template Engineは、今回 slim を採用しています。)

確認してみる

実際にロゴが適用されているか確認しましょう。もちろんローカルサーバーと起動し、それぞれ、localhostにアクセスして見てください。
自分の場合はこうなりました。

これで、Rails TutorialにもRailsのロゴが適用されました！！！
皆さんも自分の好きなアイコン(favicon)を設定してください。

参考にしたサイト

です。ありがとうございました。アドバイス等々ありましたら、ご指摘いただけると嬉しいです。