今回はRuby on RailsでFontAwesomeを導入する方法を記載したいと思います。
最終的にはECサイトを作成したいと思います。
環境
OS/ミドルウェア | バージョン |
---|---|
CentOS | 7.2.1511 |
ruby | 2.4.2p198 |
Rails | 5.1.4 |
FontAwesomeをインストール
GemfileにFontAwesome
を追加します。
ディレクトリの場所「アプリケーション名/」
対象ファイル「Gemfile」
[ファイルの編集]
1 |
$ vi Gemfile |
[ファイルの中身]
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
git_source(:github) do |repo_name| repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/") "https://github.com/#{repo_name}.git" end # Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '~> 5.1.4' # Use mysql as the database for Active Record gem 'mysql2', '>= 0.3.18', '< 0.5' # Use Puma as the app server gem 'puma', '~> 3.7' # Use SCSS for stylesheets gem 'sass-rails', '~> 5.0' # Use Uglifier as compressor for JavaScript assets gem 'uglifier', '>= 1.3.0' # See https://github.com/rails/execjs#readme for more supported runtimes gem 'therubyracer', platforms: :ruby # Use CoffeeScript for .coffee assets and views gem 'coffee-rails', '~> 4.2' # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks gem 'turbolinks', '~> 5' # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder gem 'jbuilder', '~> 2.5' # Use Redis adapter to run Action Cable in production # gem 'redis', '~> 3.0' # Use ActiveModel has_secure_password # gem 'bcrypt', '~> 3.1.7' # Use Capistrano for deployment # gem 'capistrano-rails', group: :development group :development, :test do # Call 'byebug' anywhere in the code to stop execution and get a debugger console gem 'byebug', platforms: [:mri, :mingw, :x64_mingw] # Adds support for Capybara system testing and selenium driver gem 'capybara', '~> 2.13' gem 'selenium-webdriver' end group :development do # Access an IRB console on exception pages or by using <%= console %> anywhere in the code. gem 'web-console', '>= 3.3.0' gem 'listen', '>= 3.0.5', '< 3.2' # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring gem 'spring' gem 'spring-watcher-listen', '~> 2.0.0' end # Windows does not include zoneinfo files, so bundle the tzinfo-data gem gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby] # jquery gem "jquery-rails" gem "jquery-turbolinks" # Bootstrap4デザイン gem 'bootstrap', '~> 4.0.0.alpha3' # アイコン gem "font-awesome-rails" |
[追加した部分]
1 2 |
# アイコン gem "font-awesome-rails" |
[bundleインストール]
1 |
$ bundle install |
ディレクトリの場所「app/assets/stylesheets/」
対象ファイル「application.scss」
※私の場合は、Bootstrap4
を導入しているため、編集するファイルが「application.scss」になっています。Bootstrap4を導入していない場合は「application.css」
を編集してください。
[ファイルの編集]
1 |
$ vi app/assets/stylesheets/application.scss |
[ファイルの中身]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/* * This is a manifest file that'll be compiled into application.css, which will include all the files * listed below. * * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's * vendor/assets/stylesheets directory can be referenced here using a relative path. * * You're free to add application-wide styles to this file and they'll appear at the bottom of the * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS * files in this directory. Styles in this file should be added after the last require_* statement. * It is generally better to create a new file per style scope. * *= require font-awesome * */ @import "bootstrap"; |
[追加した部分]
1 |
*= require font-awesome |
以上でFont Awesomeのアイコンが利用可能になります。
ヘルパーメソッド
font-awesome-rails
では、アイコンタグを挿入するヘルパーメソッドが提供されます。iタグを使わずにアイコンを挿入できます。
提供されるメソッドは「fa_icon, fa_stacked_icon
」の2種類です。
fa-icon
の使い方
ディレクトリの場所「app/views/shopping/」
対象ファイル「index.html.erb」
[ファイルの編集]
1 |
$ vi app/views/shopping/index.html.erb |
[ファイルの中身]
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 |
<div id="header"> <div class="nav-left"> <div id="head-logo"> <%= link_to image_tag('/images/logo/logo_001.png'), '/' %> </div><!-- head-logo --> </div><!-- nav-left --> <div id="nav-search"> <%= form_tag '/', :method => 'get' do %> <div class="input-group"> <%= text_field_tag :search, params[:search], placeholder: "キーワード検索", class: "form-control" %> <span class="input-group-btn"> <%= button_tag fa_icon("search"), :name => nil, class: "btn btn-primary" %> </span> </div><!-- input-group --> <% end %> </div><!-- nav-search --> </div><!-- header --> <h1>Hello</h1> <p> 現在登録されているユーザは次のとおりです。 </p> <p> <!-- アクションから渡されてきたモデルクラスのオブジェクトの配列の数だけ順にメールアドレスとパスワードを取得して画面に>表示 --> <% @users.each do |user| %> [メールアドレス] <%= user.email %>, [パスワード] <%= user.password %><br /> <% end %> </p> |
[修正した部分]
1 |
<%= button_tag fa_icon("search"), :name => nil, class: "btn btn-primary" %> |
動作確認
それではRailsアプリケーションを起動してここまでの動作を確認してみます。ターミナルを起動し、起動させたいアプリケーションのルートディレクトリに移動して下さい。そして下記のコマンドを実行して下さい。
[Railsサーバ起動]
1 |
$ rails server -b 0.0.0.0 |
ブラウザから次のURLへアクセスして下さい。
1 |
http://☓☓☓.☓☓.☓☓☓.☓☓:3000/ |
[変更前]
[変更後]
これで一通りの作業が終了しました。
Ruby on Rails5でコントローラーからテンプレートの表示
Ruby on Rails5でモデルの作成とデータベースの利用
Ruby on Rails5でBootstrap4デザインにする
Ruby on Rails5で検索フォームと一体型になった検索ボタン作成方法
Ruby on Rails5でFontAwesomeを導入する方法(アイコンが使用可能)
Ruby on Rails5でBootstrap4のナビゲーションバーを使用する方法
Ruby on Rails5でBootstrap4のナビゲーションバーに画像(ロゴ)を設置
Ruby on Rails5でBootstrap4を使用しながらCSSを使用する
Ruby on Rails5でBootstrap4のドロップメニューをホバー表示する方法
Ruby on Rails5でBootstrap4のドロップメニューログインアイコンを作成
Ruby on Rails5でBootstrap4のドロップメニューでカートアイコンを作成
Ruby on Rails5でBootstrap4のドロップメニューで注文履歴を作成