【Rails】Deviseのログイン時などのリダイレクト先変更

ログイン時などのリダイレクト先の変更方法。

def after_sign_up_path_for(resource)
  # (リダイレクト先)
end
def after_update_path_for(resource)
  # (リダイレクト先)
end
def after_sign_out_path_for(resource_or_scope)
  # (リダイレクト先)
end
def after_sign_in_path_for(resource)
  # (リダイレクト先)
end

【Rails】aタグの中にaタグを入れ子にする方法【html、CSS】

twitterのように、投稿全体が詳細へのリンクとなっていてその中にユーザー詳細へのリンクがある、というやり方。

何も考えずに書くと投稿詳細への<a> タグが意図しないところで閉じられてしまう。

まず、詳細へのリンクをCSSdisplay: block;とすると、親要素全体に有効範囲が広がる。

さらに、ユーザー詳細へのリンクをで囲む。 すると<a>タグを入れ子ににすることができる。

ただ、タグは外部コンテンツの埋め込みのためのタグなので、本来の使い方ではないかもしれないです。何か他に良い方法があったら教えて下さい。

(index.html.erb)

<%= link_to blog, class:"link_to_blog_show" do %>

  <%= blog.content %>

  <object>
    <%= link_to "#{blog.user.name}", user_path(id: blog.user.id) %>
  </object>

<% end %>

(styles.css)

.link_to_blog_show {
  display: block;
}

フォロー・フォロワー機能のコントローラ、ビュー

maa0917.hatenablog.com

以前の続きです。

(views/users/show.html.erb)

<%= render partial: 'users/follow_form', locals: { user: @user } %>
$ rails g controller Relationships create destroy

(routes.rb)

resources :relationships, only: [:create, :destroy]

(views/users/_follow_form.html.erb)

<div id="follow_form_<%= user.id %>">
  <% unless current_user.active_relationships.find_by(followed_id: user.id) %>
    <%= form_with(model: current_user.active_relationships.build(followed_id: user.id))  do |f| %>
      <%= f.hidden_field :followed_id %>
      <%= f.submit 'フォローする' %>
    <% end %>
  <% else %>
    <%= form_with(model: current_user.active_relationships.find_by(followed_id: user.id), method: :delete) do |f| %>
      <%= f.submit 'フォロー解除' %>
    <% end %>
  <% end %>
</div>
class RelationshipsController < ApplicationController
  before_action :authenticate_user!
  respond_to? :js
  def create
    relationship = current_user
                  .active_relationships
                  .build(followed_id: params[:relationship][:followed_id])
    relationship.save
    @user = User.find(relationship.followed_id)
  end

  def destroy
    relationship = Relationship.find(params[:id])
    relationship.destroy
    @user = relationship.followed
  end
end

(users/relationships/create.js.erb)

$("#follow_form_"+"<%= @user.id %>").html("<%= j(render partial: 'users/follow_form', locals: { user: @user}) %>")
$("#follow_form_"+"<%= @user.id %>").html("<%= j(render partial: 'users/follow_form', locals: { user: @user}) %>")

【Rails】Ajaxでいいね機能

$ rails g model likes user_id:integer blog_id:integer
class CreateLikes < ActiveRecord::Migration[5.2]
  def change
    create_table :likes do |t|
      t.references :user, foreign_key: true
      t.references :blog, foreign_key: true

      t.timestamps
    end
  end
end
rails db:migrate
class Like < ApplicationRecord
  belongs_to :user
  belongs_to :blog
end
class User < ApplicationRecord
  has_many :likes, dependent: :destroy
  has_many :like_blogs, through: :likes, source: :blog
end
class Blog < ApplicationRecord
  has_many :likes, dependent: :destroy
  has_many :like_users, through: :likes, source: :user
end
$ rails g controller Likes create destroy
resources :likes, only: [:create, :destroy]

(blogs_controller.rb)

def show
  @blog = Blog.find(params[:id])
  @like = current_user.likes.find_by(blog_id: @blog.id)
  @likes_count = Like.where(blog_id: @blog.id).count
end

(likes_controller.rb)

class LikesController < ApplicationController
  def create
    @like = current_user.likes.create(blog_id: params[:blog_id])
    @blog = @like.blog
    @likes_count = Like.where(blog_id: @blog.id).count
  end

  def destroy
    @like = Like.find(params[:id]).destroy
    @blog = @like.blog
    @likes_count = Like.where(blog_id: @blog.id).count
  end
end

(blogs/show.html.erb)

<div id="likes_area_<%= @blog.id %>">
  <%= render partial: 'likes/like', locals: { blog: @blog, like: @like }  %>
</div>

(likes/_like.html.erb)

<% if like.present? %>
  <%= link_to '解除', like_path(id: like.id), method: :delete, remote: true  %>
<% else %>
  <%= link_to 'いいね', likes_path(blog_id: blog.id), method: :post, remote: true  %>
<% end %>
<%= @likes_count %>

(likes/create.js.erb)

$('#likes_area_<%= @blog.id %>').html("<%= j(render partial: 'likes/like', locals: {blog: @blog, like: @like}) %>")

(likes/destroy.js.erb)

$('#likes_area_<%= @blog.id %>').html("<%= j(render partial: 'likes/like', locals: {blog: @blog, like: nil}) %>")

【Rails】ユーザーアイコンにデフォルト画像

CarrierWave+MiniMagickを使っています。 アップロードされなかった場合、ユーザーアイコンにデフォルト画像を設定します。

バージョン情報

uploaderの設定

アップローダコメントアウトを外す。

(app/uploaders/icon_uploader.rb)

def default_url(*args)
  ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default.png"].compact.join('_'))
end

画像の準備

app/assets/images/fallbackdefault.pngファイルを置く。

icon.thumb.urlを使う場合はthumb_default.pngファイルを置く。

呼び出し

icon.urlnilの場合、default.png が呼び出される。

icon.thumb.urlnilの場合、thumb_default.pngが呼び出される。

【CSS】classやidを指定できないときは属性セレクタを使う

例えばアップロードした画像を表示する際にデザインを適応させたい。 しかし、なにかしらの原因でclassidを指定できないときに、 属性セレクタを使うとうまくいきました。

src"/uploads/user/icon/" を含む<img> を丸くしたい場合、

img[src*="/uploads/user/icon/"] { 
  border-radius:50%; 
}

参考

developer.mozilla.org

【Rails】CarrierWave+MiniMagickでユーザーアイコンを作る

CarrierWave + MiniMagickでユーザーアイコンを作ります。

バージョン情報

ユーザーアイコンを作る

元画像を切り抜く

width 100px, height 100pxで切り抜き、第三引数で切り抜きを行う際の中心点を指定します。

(app/uploaders/icon _uploader.rb)

process resize_to_fill: [100, 100, "Center"]

サムネイルの設定

30×30のサムネイルを設定します。.icon.thumb.urlで呼び出せます。

(app/uploaders/icon _uploader.rb)

version :thumb do
  process resize_to_fit: [30, 30]
end

画像の表示

ヘッダーにはサムネイルを表示します。

(app/views/layouts/appliacation.html.erb)

<%= image_tag current_user.icon.thumb.url, class: 'icon'%>

プロフィールページにはそのまま表示します。

(app/views/users/show.html.erb)

<%= image_tag @user.icon.url, class: 'icon'%>

丸くデザイン

cssで丸くデザインします。

(app/assets/stylesheets/styles.css)

.icon {
  border-radius: 50%;
}

複数のサムネイル

ちなみに、サムネイルは複数設定できます。

(app/uploaders/icon _uploader.rb)

version :thumb30 do
  process resize_to_fit: [30, 30]
end

version :thumb50 do
  process resize_to_fit: [50, 50]
end

それぞれ、.icon.thumb30.url.icon.thumb50.urlで呼び出すことができます。