Rails関連のことを調べてみた2021年07月16日

[Rails] jQueryプラグインslickを使ったカルーセルスライダーの実装

スライダー実装時にslick以外の手段も手段も検討したのですが、その中でもslickが１番使い勝手がよさそうだったので、slickに決めました。

なので今回は、jQueryのプラグインであるslickを使って、カルーセルスライダー（スライドショー）の実装をしていきます。

デモは[slickの公式サイト](https://kenwheeler.github.io/slick/)か、ぼくの[ポートフォリオ](https://oogiri-legendroad.com/)で、確認してみてください。

#開発環境

> ruby 2.6.3
> Rails 5.2.6

#前提

– jQueryが使える状態
– FontAwesomeが使える状態
– 使用する画像は各自用意して、assets/imeges直下に配置してください
– homes/topで実装

####スライダーの仕様
スライダーは自動で切り替え、手動で切り替え、両方できるように実装していきます。

– 自動で画像が切り替わる
– 矢印クリックで、画像切り替え
– 下のドットクリックで、その画像に切り替え

以上前提をふま

rails チャット通知

#[Rails]DM、チャット通知機能＋チャット一覧、チャット機能の実装

##目標
チャットの通知機能の実装に関する記事が少ないように感じたので投稿しました。
こんな感じでの画面です。チャットのページを開くと通知の青いマークが消えます。
チャット機能、チャットの一覧ページと通知の実装手順を紹介します。
（＊Deviseを用いたログイン機能を実装している前提でコードを書いています。）

　　
　

##参考記事

チャット機能そのものについては、下記記事を

【Rails】HTTPメソッドまとめとPATCHとPUTの違い

####My Profile
プログラミング学習歴②ヶ月目のアカウントです！
プログラミングスクールで学んだ内容や自分が躓いた箇所等のアウトプットの為に発信しています。
また、プログラミング初学者の方にわかりやすく、簡潔にまとめて情報共有できればと考えています。
もし、投稿した記事の中に誤り等ございましたら、コメント欄でご教授いただけると幸いです。　

#対象者

* HTTPメソッドについて知りたい方

#目的

* HTPPメソッドの種類を知る
* PATCHとPUTの違いを知る

#実際の手順と実例
###1.HTTPメソッドのまとめ
メソッド名 　　よく使うアクション 　　　意味
GET 　　　　　Read/new/show/edit 　　 リソースの取得
POST 　　　 　Create 　　　 　　　　　 子リソースの作成、　リソースへのデータ追加、その他処理
PUT 　　　　　Create/Update 　　　　　リソースの更新、リソースの作成
DELETE 　　　Delete 　　　　　　　　　リソースの削除
HEAD 　　　　　　　　　　　

[Docker + Rails] Webpackerのインストール時のエラー解決方法

# 概要
Docker + Rails環境でSprocketsからWebpackerに移行作業時にWebpackerをインストールするまでのエラーにハマってしまったため、解決方法を紹介します。
暫定的対応のため、本来のエラー解決方法をご存知の方はコメント下さると幸いです。

# 環境
– ruby 2.6.3
– Rails 5.2.3
– docker

# エラーが起こるまで
1. Dockerfileにyarnを使用するための記述追加
1. Gemfileに“`gem ‘webpacker’“` 追加
1. docker-compose run web bundleにてgemインストール
**\ エラー発生 /**

““
webpack binstubs not found.
Have you run rails webpacker:install ?
Make sure the bin directory or binstubs are not included in .gitignore
Exiting!
ERROR: 1
“`

エラー文にある
“`r

AWSの自動デプロイ設定を行ったら、画像が表示されなくなった(Railsアプリ)

##はじめに

オリジナルアプリの完成が近づいてきました。もっともっと盛り込みたい機能が山ほどあるのですが、転職活動のほうも疎かにできないので、とりあえずAWSにはデプロイしようということで作業を進めていました。

AWSにデプロイするにあたって、アプリの改修などをした際に、結構たくさんのコマンドを打たなければならなくて、大変なので自動デプロイを導入しました。

Capistranoという自動デプロイツールを使って導入したのですが、完成後、手動デプロイしていた時にはしっかり表示されていたアプリ内で使われている画像たちが表示されなくなってしまいました。

~~明確な理由はわからないまま、自分なりに仮説を立てて解決できましたので記事に残しておきます。~~
よろしくお願いします。

##画像が表示されなくなった
私の画像は“`app/assets/images“`の配下に置いていて、img_tagで呼び出していました。
手動でデプロイを行なっていた時は、ちゃんと呼び出されていたのですが、自動デプロイをした後に小さな画像が壊れたようなマークだけが表示されて、目的の画像が表示されていなくなり

No route matches [POST] エラー解決方法　form_with namespace使用時

前提

ECサイトを作成しています。
商品登録ページで以下のようなルーティングエラーが発生しました。

今回、namespaceを使い管理者側(admin)、顧客側でルーティングをわけていました。

エラーの内容


createアクションはあるし、POSTになっている。
![スクリーンショット 2021-07-15 17.37.03.png](https://qiita-i

【個人開発】「自分の声」が嫌いな人ほど使ってほしい！声成分分析サービス『Voice component』を作りました！

## はじめに
突然ですが、ご自身の声は好きですか？嫌いですか？
ちなみに私自身は後者です。理由は男なのに声が高くて電話でよく女性に間違われるからです笑
ふとそんな話を通っているスクールで話したところ男性・女性問わず「自分の声」が嫌い・苦手と思っている方が意外と多いことが分かりました。調べてみると、下記の一般向けに行われた調査データのように自分の声が好きと答えた人は約3割なのに対して、自分の声が嫌いと答えた人は約7割と圧倒的に多いということが分かります。（データ情報古いですが・・・）
参考: [あなたは「自分の声」が好き？ 嫌い？](https://news.livedoor.com/article/detail/13569420/)

声は生まれ持ったもので変えることはできません。その為、今「自分の声」が嫌い・苦手だと感じている人に向けて声を好きになれるきっかけを与えられるサービスを提供できないかと思ったのが作成のきっかけです。

## サービス概要
PC（IEは不可）・タブレット・スマホでご利用いただけます。

https://voice-component.com

簡単5秒でユ

作業中ブランチで間違ってpullしてしまった場合の対応

## はじめに

ローカルで機能開発中に、最新のリモートブランチの動作確認をしようと、`git pull` をしました。
しかし、develop ブランチに切り替えるのを忘れており、作業中のブランチにpullしてしまったため、pullを取り消す方法についての備忘録です。
## 前提

– branchAで作業中
– まだコミットしていないファイルがある状態でpullしてしまった

## 対応方法

`git pull` は`git fetch` でリモートの最新状態のブランチを持ってきて、ローカルの現在いるブランチにマージするコマンドなので、pull してきたリモートブランチのマージを取り消しすればよいだけです。

つまりマージする前の位置にHEADを移動させればいいことになります。
### 1. HEADの移動履歴を確認

まずは、現在のHEADの位置を確認しましょう。

“`zsh
% git reflog

# 現在のHEADの位置
e6ec135b (HEAD -> feature/branchA) HEAD@{0}: pull origin HEAD: Merge made

【Rails】ActionController::UrlGenerationError: No route matchesが発生する原因の1つ

## 背景

Rspec初心者の自分がテストを書いていて「ActionController::UrlGenerationError: No route matches」というエラーに遭遇しました。これでちょっとハマってしまったので同じように悩む人がいたらと思いメモとしてまとめておきます。

## 原因
超初歩的なところで`params`にURLのパスパラメーターを設定していないのが原因でした。

例えば`offices/:office_id/user/:user_id`のURLに設定したコントローラーアクション（show）をテストするためには以下のようにパスパラメーターを`params`に設定しないといけません。

“`
get :show, params: { office_id: 1, user_id: 1}
“`

【Rails】ポリモーフィック関連先の項目で検索する方法

# はじめに

ポリモーフィック関連先の項目の検索方法を時間をかけて調べたのですが、なかなか出てこなかったためまとめておこうかなと思います。

ポリモーフィック関連の作成方法などはやりません。
関連リンクを下記に載せておくので、必要であれば参考にしてください。。

* Railsガイド – ポリモーフィック関連付け
* https://railsguides.jp/association_basics.html#%E3%83%9D%E3%83%AA%E3%83%A2%E3%83%BC%E3%83%95%E3%82%A3%E3%83%83%E3%82%AF%E9%96%A2%E9%80%A3%E4%BB%98%E3%81%91

# 関連性

以下のような“`Animal“`モデル、“`Panda“`モデル、“`Cat“`モデルの構成を作成します。

“`ruby:animal.rb
class Animal < ApplicationRecord belongs_to :animalable, polymorphic: true end ``` `

[Rails]JavaScript(jQuery)でサーっとページトップに戻るボタン(FontAwesome)

ページトップ機能はいろんな実装方法があると思いますが、今回はJavaScript（jQuery)とFontAwesomeを使ったページトップへ戻るボタンの実装をしていきます。

スクロールが多いページだとページトップボタンは必須かなと考えます。

ただスマホの場合は指でスクロールが簡単にできるので、スマホのみのサービスの場合は必須とまではいかないかなと。（スマホではあまりページトップボタンクリックされてないみたいなデータがあったような、、、）

完成イメージはこちらです。(右下のボタン)


実際の動作を確認したい方は、ぼくの[ポートフォリオ](https://oogiri-legendroad.com/answers)を確認してみてください。
ある程度スクロールしたら右下に出てくるので、クリック

rails generate の使い方

# はじめに
rails初学者の私的にrails generateがややこしく感じたので、まとめる事にしました。
参考になることがあれば、幸いです。
# rails generateについて
rails generateとは簡単に言うと、いろんなファイルなどをテンプレートとして作ってくれるものです。
rails generateで作ったファイルなどは、rails destoryを使って削除することが出来ます。
generateで作れるファイルにはmodel,controller,migration,view,asset,root,test,helperがあります。
generateの後ろにいれる単語によって作られるファイルが変わります。
## scaffold
“`
$ rails generate scaffold NAME　…
“`
上記のように入力すると、generateで作れるファイルを全て作ることができます。

## scaffold_controller
“`
$ rails generate scaffold_controller NAME　…
“`
上

【Rails】新規投稿時に複数のタグ付け機能を実装したい

# 概要
新規投稿（photo）に複数タグ(tags)を付けられるように実装していきます。
※タグは別途、ユーザーによる新規登録機能が実装済みとして考えます。

# 解決方法
①中間テーブル（photo_tags）を生成して、各テーブルとのアソシエーションを記述する。
②複数のタグ選択時にプルダウンのデザインを良くするためにselect2を導入する。
③新規投稿時にタグが紐づくように、photosコントローラー内のパラメーターの記述を編集する。
④タグの複数選択ができるように、ビューファイルを編集する。

※前提として、すでにusersテーブルとphotosテーブル、tagsテーブルの生成が完了しているとします。
それぞれのテーブルのカラムとアソシエションは下記の通りです。

“`ruby:README
### users table
| Column | Type | Options |
| ———— | ————–| ———– |
| first_name | string

with_optionsで共通のバリデーションをまとめよう！

# with_options
「with_options 〇〇 」と書くことで、
複数の情報に対して共通したオプションを付けることが可能となる

## 記述例
「nickname, last_name, first_name それぞれのカラムが空だと保存できない」というバリデーションを設定する場合

class User < ApplicationRecord validates :nickname, presence: true validates :last_name, presence: true validates :first_name, presence: true end 上記のようにカラムひとつひとつに`presence: true`（カラムが空だと保存できない）というバリデーションを記述することになる **with_options使用した場合** class User < ApplicationRecord with_options presence: true do validate

Couldn’t find Blog with ‘id’=show

#エラーについて
paramの値が空か間違っているという意味です。
今回の場合は、投稿→showに遷移する際にこのエラーを検出しました。
#エラーの原因
pathにid指定されていなかったことが今回の原因でした。

“`ruby:controller.rb
def create
@book = Book.new(book_params)
if @book.save
flash[:notice] = “Book was successfully created.”
redirect_to “/books/show”
else
@books = Book.all
render :index
end
end
“`
if文の中のredirect_toにidが指定されていないことが原因あると分かりました。
#解決方法

https://railsdoc.com/page/redirect_to

redirect_toに関するドキュメントを参考にしながら以下のように書き替えました。　

“`ruby:contr

【Rails】簡単に投稿数を表示する方法！

####My Profile
プログラミング学習歴②ヶ月目のアカウントです！
プログラミングスクールで学んだ内容や自分が躓いた箇所等のアウトプットの為に発信しています。
また、プログラミング初学者の方にわかりやすく、簡潔にまとめて情報共有できればと考えています。
もし、投稿した記事の中に誤り等ございましたら、コメント欄でご教授いただけると幸いです。　

#対象者

* 投稿数を表示させたい方
* 数を数えるcountメソッドを使いたい方

#目的

* 投稿数を表示して記録を取る！！

#実際の手順と実例
###1.モデルを関連付ける
前提として本の投稿をするアプリケーションの作成をしています。
１人のユーザーが何回も投稿が可能なので関係性は以下の通りです
user:book = 1：N

“`user.rb
has_many :books, dependent: :destroy
““

“`book.rb
belongs_to :user
““

###2.投稿数を表示しよう
投稿数を表示するviewは以下の通りです。
今回はuserのshowにcountを

[Rails]RspecにてKeyError: Factory not registered

##はじめに
Rspecにてテストコードを記述していたところ“`KeyError: Factory not registered“`というエラーが出ました。
悩んだ割にはさくっと解決できました。一応記事に残しておきます。

##解決法
まず、私の場合、FactoryBotで定義していたのがこちらになります↓

“`ruby
FactoryBot.define do
factory :progress do
progress_page {300}
comment {“◯◯と◯◯がよくわからなかったから次回詳しく教えて欲しい” }
association :students_textbook
end
end
“`

こちら実際のターミナル上のエラー↓
![スクリーンショット 2021-07-13 19.15.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1552346/eb1c8646-98f1-36f6-b8e3-96d

Railsざっくりアプリケーション作成の流れ（MVC）

# アプリ作成の流れ（MVC）
### 雛形作成
“`
$ rails new　　アプリ名

$ rails _6.0.0_ new アプリ名
#railsのバージョン指定　指定しなければ、インストールされているrailsのバージョンが指定される

$ rails new　　アプリ名 -d DB
#DBを指定したコマンド　　デフォルトはsqlite
“`

### DB作成
`rails new`で新しくアプリケーション部分が作成されたので、次は、DBを作成する。

“`:DB作成コマンド
$ rails db:create
#デフォルトでは、development（開発）にDBが作成される
$ rails db:create　RAILS_ENV=production
#production（本番）にDBを作成したい場合はこのコマンド
“`

## ルーティングの設定

ルーティングは、クライアントからのリクエストに対して、どう処理してやるのかの道標です。
app/config/routes.rbにルーティングを記載していきます。

“`ruby: ルーティングの基本

Ra

詳しいことはさておき爆速でRailsアプリをAWSにてデプロイする方法

詳しい概念や、説明はさておき、とにかくRailsアプリをAWSにデプロイする方法を解説します。

## EC２の設定

### リージョンの確認

[](https://gyazo.com/08ba41ebc8a990704d4ca6b3e8522049)

右上のサポートの横が東京になっていればOKです。

### EC2インスタンスの作成

EC2をクリックして

[](https://gyazo.com/e76484d8616f28077e69422bb62be24d)

画面下部のインスタンスを起動をクリック

### AMIを選択

「 Amazon Linux 2 AMI 」という、AWSが独自にカスタマイズしたAMIを利用
多分一番上です。

インスタンスタイプは無料枠

rails g modelをしたら「FATAL: Listen error…」が出たので、その時の対処法

今回初投稿という事もあり、色々と不慣れで見にくいとは思いますが、暖かい目で見てください。

タイトル通り、今回rails g modelをした所「FATAL: Listen error: unable to monitor directories for changes.」というエラーが発生したため備忘録として残します。

#現在のrails環境のバージョン
Ruby on Rails バージョン: 6.1.4
vagrant 2.2.17

“`ruby:エラーした時の状況
$ rails g model Hogehoge hoge:hoge hoge:hoge
“`
をした所

“`ruby:エラー文
FATAL: Listen error: unable to monitor directories for changes.
Visit https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers for info on how to fix this.
“`
というのが発生し