サイト
ja.gravatar.com
アバター登録は以下の手順でできます。
mrradiology.hatenablog.jp
記述追加 GemFile(58行目)
gem 'gravtastic'
GemFile
source 'https://rubygems.org' 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.0.7', '>= 5.0.7.1' # Use postgresql as the database for Active Record gem 'pg', '>= 0.18', '< 2.0' # Use Puma as the app server gem 'puma', '~> 3.0' # Use SCSS for stylesheets gem 'sass-rails', '~> 5.0' # Use Uglifier as compressor for JavaScript assets gem 'uglifier', '>= 1.3.0' # Use CoffeeScript for .coffee assets and views gem 'coffee-rails', '~> 4.2' # See https://github.com/rails/execjs#readme for more supported runtimes # gem 'therubyracer', platforms: :ruby # Use jquery as the JavaScript library gem 'jquery-rails' # 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', platform: :mri 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' end # Windows does not include zoneinfo files, so bundle the tzinfo-data gem gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby] #bootstrap gem 'bootstrap-sass', '~> 3.4.1' #デバイス gem 'devise', '~>4.2' gem 'jquery-rails' #Gravatar gem 'gravtastic'
コマンド
bundle
記述追加 app\models\user.rb(3行目)
include Gravtastic gravtastic
app\models\user.rb
class User < ApplicationRecord # アバター画像表示用 include Gravtastic gravtastic # Include default devise modules. Others available are: # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable devise :database_authenticatable, :registerable, :recoverable, :rememberable, :validatable #長さ50文字以下 入力必須 validates :fullname, presence: true, length: {maximum: 50} end
記述追加 app\assets\javascripts\application.js(16行目)
//= require gravtastic
app\assets\javascripts\application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files // listed below. // // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts, // or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path. // // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the // compiled file. JavaScript code in this file should be added after the last require_* statement. // // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details // about supported directives. // //= require jquery //= require bootstrap-sprockets //= require jquery_ujs //= require gravtastic //= require turbolinks //= require_tree .
ナビゲーションバーにアバター画像を追加します。
記述追加 app\views\shared\_navbar.html.erb (22行目)
<%= image_tag current_user.gravatar_url, class: "img-circle avatar-small" %>
app\views\shared\_navbar.html.erb
<!-- ナビゲーションバー --> <nav class="navbar navbar-default navbar-static-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">ナビゲーション トグル</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">テストサイトMinpaku</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <% if (!user_signed_in?) %> <li><%= link_to "ログイン", new_user_session_path %></li> <li><%= link_to "新規ユーザ登録", new_user_registration_path %></li> <% else %> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <!-- アバター画像 --> <%= image_tag current_user.gravatar_url, class: "img-circle avatar-small" %> <!-- 氏名表示に変更 --> <%= current_user.fullname %> <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li role="separator" class="divider"></li> <li><%= link_to "ユーザ登録情報修正", edit_user_registration_path %></li> <li><%= link_to "ログアウト", destroy_user_session_path, method: :delete %></li> </ul> </li> <% end %> </ul> </div> </div> </nav>
ブラウザ確認
http://localhost:3000/
登録したアバター画像が表示されます。