Rails関連のことを調べてみた2020年03月22日

ユーザー情報にアイコンとプロフィールを追加する方法を丁寧に解説（rails）

# はじめに

こんにちは。今回はSNSなどで普段よく目にするアイコンとプロフィールの実装方法を解説していきます。
Line、Twitter、Instagram、YouTubeなどで目にするアイコンは全て丸い形をしているので、そのようなデザインにする方法も一緒に解説します。このCSSのレイアウト調整が意外と苦戦しました(汗)

それにしてもなんでアイコンって正方形じゃなくて丸いんだろう、とふと疑問に思ったので調べてみたのですが、どうやらTwitterなどにある添付画像が四角いのでパッと見でアイコンだと区別がつくように丸くしたようです。

余談はこの辺にして実際の完成イメージからご紹介します。

# 完成イメージ

今回は編集画面でアイコンを追加、追加したアイコンを詳細画面に表示のみご紹介しますが、
新規登録時にアイコンを追加できるようにしたり、投稿と紐付けてユーザー名の横にアイコンを表示させたりも
今回の実装をベースにすれば容易に実現可能だと思います。

![exhoop_200321_icon.gif](https://qiita-image-store.s3.ap-northeas

Railsプロジェクト作成手順

# 環境
– macOS Mojave 10.14.6
– rbenv 1.1.2
– Homebrew 2.2.10
– ruby 2.7.0
– Rails 6.0.2.2

# 方法

## 1. ディレクトリを作成する。
“`
$ mkdir practice_project
“`

## 2. 作ったディレクトリに移動する。
“`
$ cd practice_project
“`

## 3. Gemfileを生成する。
“`
$ bundle init
“`

## 4. Gemfileを編集する。
“`:Gemfile
# frozen_string_literal: true

source “https://rubygems.org”

git_source(:github) {|repo_name| “https://github.com/#{repo_name}” }

gem “rails” ←コメントアウトを外す
“`

## 5. Gemをインストールする.
“`
bundle install –path vendor/bundle
“

[Rails+Vue.js]に係るCRUD入門〜Part Last: Docker化編〜

Rails+Vue.js+Webpackerによる「Create, Read, Update, Destroy」処理のチュートリアルを記述する…
しかし、半年前にあらかた学びたいことは終わり、業務では Nuxt を見ることが多くなるため、シリーズとして終了とする。

# ＜概要＞
## □ 本記事の内容
– 開発環境を Docker 化する。
– 合わせて Ruby と Rails のバージョンを上げる。
– 今回のコードは，[GitHubのコミット履歴](https://github.com/masayuki-0319/rails-vue-bookshelf/commits/07/setting_docker)で確認可能である。

## □ 記事共通
– 目次
– [ソースコード(GitHubへリンク)](https://github.com/masayuki-0319/rails-vue-bookshelf)
– [〜Part１: 環境構築編](https://qiita.com/Moo_Moo_Farm/items/afacfe4349af6a106253)

rbenvを利用してRubyのバージョンを最新安定版にする

# 環境
– macOS Mojave 10.14.6
– rbenv 1.1.2
– Homebrew 2.2.10

# 方法
## 1. 公式サイトで最新版を確認する。
https://www.ruby-lang.org/ja/downloads/

## 2. rbenvのインストール可能なバージョン一覧に、1.で確認したバージョンがあるか確認する。
“`
$ rbenv install –list
“`

### （もし確認したバージョンが無い場合）
以下のコマンドで、rbenvとruby-buildを更新する。

“`
$ brew upgrade rbenv ruby-build
“`
再度、rbenvのインストール可能なバージョン一覧に、1.で確認したバージョンがあるか確認する。

“`
$ rbenv instal

railsストロングパラメータについて

#はじめに
ストロングパラメータについて調べたので備忘録として記事にしました。

###対象読者
プログラミング勉強始めたての方。

###題材
自分のポートフォリオのUserオブジェクト周りを題材としています。

#ストロングパラメータとは
ユーザー登録フォームなどによって送られてきた情報を限定して取得し、データベースに一気に保管出来るようにした処理のことです。なぜ、情報を限定するかというとユーザー側にいじって欲しくない情報をデータベースに保存させないようにするためです。
例えば管理者情報などをいじられて勝手に管理者にならないようにしています。
また、複数カラムにデータを保存できるようにする役割もあります。
実際に設定しているものがこちらです。

“`ruby:app/controllers/users_controller.rb
def create
@user = User.new(user_params)
if @user.save
log_in @user
flash[:success] = ‘ユーザー登録完了’
redi

LoadError, Unable to autoload constant ~

#本記事投稿のいきさつ
railsでアプリ作成をしていたところLoadErrorが発生し基礎知識がなかったためにハマったため忘れないように、書き残します。
また、同じエラーで困っている初心者のためになれば幸いです。

##エラー発生
itemモデルとitem_imageモデルでアソシエーションを組み,以下の記述をしたところエラーが発生

““items_controller.rb
def new
@item = Item.new
@item_images = Item_image.new
end
““

エラー表示は以下です。

““
LoadError in ItemsController#new
““

““
Unable to autoload constant Item_image, expected *****/models/item_image.rb to define it
““

##解決まで
なるほど。アソシエーションの記入を間違えたのか。
と初学者の自分は考えitem_image.rbを確認します。
item_imag

チーム開発 3/21

3/21
#メモになります
最終課題　四日目
トップページが終わったので
商品詳細ページのビューを作っていきます

ブロックの形を丸くしたい
border-radius
で解決

ボタンを押すと引っ込んだりする
立体的な動きをするようにしたい
:active
を使って擬似要素を使っていく
プラスα
border-bottom: solid 5px #25b8bd;
を使うとボーダーの色を変えて影っぽくして
擬似要素に
border-bottom: none;
を使って押すとボーダーをなくしてボタンを押したようにできる

表っぽく作りたい
border
を使うと解決

ページのソースを表示するためのショートカットキー
「option + command + U」

%li.optionalBtn
　%a{:href => “#”}
%i.fa.fa-flag
不適切な商品の通報
このコードを=>使わずに使いたい

%li.optionalBtn
=link_to “#” do
%i.fa.fa-flag 不適切な商品の通報
これ

Pay.jpを用いた購入機能の実装

##概要
Pay.jpを用いた購入機能の実装を備忘録としてまとめます。
修正点ありましたらご指摘お願いいたします。
Transaction（取り引き）テーブルおよびProduct（商品）テーブルをもとに作っていきます。

##前提
* Pay.jpのアカウント作成済み
* Pay.jpにてクレジットカード登録機能は実装済み
* ビューはHamlで記載
* deviseにてログイン済み

##手順

1. Transactionテーブルを作成（購入済みの場合SOLD OUTを表示させるため）
2. アソシエーションの設定
3. Transactionコントローラーを作成
4. 環境変数の設定
5. ルーティングの設定
6. マークアップ：購入内容確認画面
7. マークアップ：購入完了画面
8. マークアップ：購入済みの場合SOLD OUTを表示
9. 購入データの確認

##Transactionテーブルを作成
今回は購入済みの場合SOLD OUTを表示させるためにTransactionテーブルを作成します。

“`
$ rails g model Transaction
“`

`

docker-compose buildでYou must use Bundler 2 or greater with this lockfile.とエラーが出た話

##経緯

「既存の作成済のrailsアプリケーションにDockerを導入してみたい！！でも、いきなり導入していろいろ変なことになったら嫌だな」ということで、[Railsチュートリアルの開発環境をDockerにしてみなイカ？](https://qiita.com/Moo_Moo_Farm/items/0d08da27371272ed1390)という記事を参考にさせていただき、まずはrailsチュートリアルをdockerにのせようと、奮闘している最中、

“`console
You must use Bundler 2 or greater with this lockfile.
ERROR: Service ‘app’ failed to build: The command ‘/bin/sh -c bundle install –jobs=4’ returned a non-zero code: 20

“`

というエラーが。。

##解決した方法

“`console
You must use Bundler 2 or greater with this lockfil

[Rails]いいねした商品をマイページに一覧表示する

ユーザー(user)のマイページ(show)にいいね(like)した商品一覧を表示させます。
**モデルの指定は[こちら](https://qiita.com/yummy888/items/2b7708a498861e5ba733)に記載してます。**

#　ルーティング
“`routes.rb
resources :users, only: [:index, :show] do
collection do
get :likes
end
end
“`
userのshowアクションにネストさせます。

# モデル
“`user.rb
has_many :likes, dependent: :destroy
has_many :like_items, through: :likes, source: :item
“`
※今回のポイント
`like_items`でuserがどのitemにいいねしているか取得できます。

#　ビュー
“`users/_side-bar.html.haml
.side-bar
%section.side

Blocked host: localhostの対処

# プロダクションモードで起動した時のエラー内容
“`
To allow requests to localhost, add the following to your environment configuration:
config.hosts << "localhost" ``` # 解決方法 config/environments/production.rbに以下追記 ``` config.hosts << "localhost" ``` productionモードで再起動

[Rails]非同期のいいね機能実装

ユーザー(user)が出品した商品(item)にいいねできる機能を実装してます。

## Likeモデル、テーブル作成
`rails g model Like`

“`like.rb
class Like < ApplicationRecord end ``` ```XXXXXXXXXXX_create_likes.rb class CreateLikes < ActiveRecord::Migration[5.2] def change create_table :likes do |t| t.integer :user_id t.integer :item_id t.timestamps end end end ``` `rails db:migrate`マイグレーションファイル実行 ## モデル 通常はuserとitemは１対多の関係ですが、いいね機能実装時に関してはlikeテーブルが加わるので、多対多の関係になります。 ```user.rb has_many :likes, depen

複数画像投稿で盛大に自爆した時の確認事項[備忘録]

##はじめに
某フリマアプリの模倣アプリを開発中、出品機能実装で複数画像の登録に死ぬほど手を焼いたので、備忘録として掲載します。

誤った記述などあればご指摘いただけると幸いです。

##開発環境・前提

Ruby 2.5.1p57
Ruby on rails 5.2.3
jquery-rails 4.3.5
haml-rails 2.0.1
sass-rails 5.1.0
CarrierWave 2.1.0

##完成コード

先に完成コードを載せておく。

“`image.rb
belongs_to :item, optional: true
validates_presence_of :item
validates :content, presence: true
mount_uploader :content, ImageUploader
“`

“`item.rb
belongs_to :brand, optional: true
belongs_to :user, optional: true
belongs_to :categor

Railsチュートリアルメモ – 第13章

[メモの目次記事はこちら](https://qiita.com/yokohama4580/items/dedfd5510080273dc2a0)

[公式Railsチュートリアル第13章へのリンク](https://railstutorial.jp/chapters/user_microposts?version=5.1#cha-user_microposts)

## サマリ
– マイクロソフトの表示、投稿、削除
– モデルの関連付け（`has_many`および`belongs_to`）
– モデルを使ったレコードの取得（取得条件、並び順、取得件数の指定）
– ラムダ式 (Stabby lambda) を使ったProcオブジェクトの生成
– Homeページの動的な出し分け
– CarrierWaveを使った画像ファイルのアップロード
– ImageMagick(+MiniMagick)を使った画像ファイルのリサイズ
– 本番環境でのfogを使ったS3への画像アップロード

## ポイント
– `rails generate model`の際、`references `を指

jwtで認証を実装する時のrspecテスト

# はじめに
今参加させていただいているスタートアップでapi実装をしており、認証をfirebase authenticationに頼っているのですが、rspecでテストを行うときにjwtの認証をよしなにスキップする方法でめちゃめちゃハマったのでその備忘録です

# 元々のコード(説明のためかなり省略しています)

“`ruby:applicatioion_controller.rb
class ApplicationController < ActionController::Base before_action :authenticate! private def authenticate! if request.headers['Authorization'].present? jwt = request.headers['Authorization'] # jwtを渡すと検証を行いユーザーの情報を返してくれる独自モジュールを呼び出し @user_info = Firebase::JwtAuth.authenticat