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

[Rails]ActionCableでリアルタイム機能を実現してみた

# はじめに
Action Cableは、 WebSocketとRailsのその他の部分をシームレスに統合するためのものです。ちなみに、WebSocketとは、Webにおいての双方向通信を、従来のHTTP等よりも低コストで行うための仕組み。

# 事前知識
## コンシューマー
WebSocketコネクションのクライアント。複数のケーブルチャネルにサブスクライブできます。

## Pub/Sub
パブリッシャ-サブスクライバ（pub/sub）型モデルとも呼ばれる、メッセージキューのパラダイムです。`パブリッシャ側（Publisher）が、サブスクライバ側（Subscriber）の抽象クラスに情報を送信`します。

## 購読(subscription)
クライアントがWebsocket通信を通じたチャネルと関連付け。購読は、一度に複数のチャネルに対して作成可能。

## app/channels/〇〇_channel.rb
Websocket処理におけるコントローラーのような役割を果たす。

“`ruby
class RoomChannel < ApplicationCable::

[Rails]ローディング(ロード画面)の実装

おしゃれなサイトはローディングをよく実装していますので、今回はポートフォリオにて実装してみました。

思ったよりかんたんに実装できて、サイト全体の雰囲気がアップするのでおすすめです！

参考にしたサイトは以下で、「1.【サンプル】ローディング（テキストだけでふわっと）」をRailsのアプリケーションに落とし込んで解説していきます。
[【jQuery】 ローディング、実装サンプル集](https://125naroom.com/web/3835)

#開発環境

> ruby 2.6.3
> Rails 5.2.6

#実装方法

今回はHTMl,CSS,JavaScriptを使ってローディングを実装していきます。
ではいってみましょう〜！

#ビュー
まずはビューから、このビューのid名、class名に対してCSSやJavaScriptをあてていきます。

今回はhomes/topで実装。

`1番上の行`から記述していってください。

“`erb:views/homes/top.html.erb

win10 Hoem docker rails ローカルファイルの更新 反映されない

## コードの修正後の反映設定

“`config/environments/development.rb
config.file_watcher = ActiveSupport::FileUpdateChecker
“`

config.file_watcher部分を上記に変更

## 何かしらの理由で上記のファイルを変更できない場合
Git管理をしているとローカルのみで管理対象外にしてもPullやcheckoutができないのでどうにかしたかった

initializersに下記のファイルを追加して管理対象外にしてみた。

“`config/initializers/dev.rb
require “active_support/core_ext/integer/time”

Rails.application.configure do

config.file_watcher = ActiveSupport::FileUpdateChecker

end
“`

これだけで動作も更新もできたのでとりあえずこれで作業してみる

[Rails]Action Textでリッチテキストを作ろう！

# はじめに
Rails6で追加されたActionTextにリッチテキストコンテンツと編集機能を導入出来ます。
今までは自分で実装していたので、便利な機能だと思い、使い方を調べてみました！

# 使用方法
1.ActionTextのセットアップを行い、`rails db:migrate`を実行する。

“`bash
$ rails action_text:install

$ rails db:migrate
“`

2.埋め込み画像や他の添付ファイルを扱うため、ActiveStorageのセットアップを行う。

[参考]

https://qiita.com/ren0826jam/items/58bdbaff17581280ee5a

3.使用するモデルにリッチテキストのフィールドを追加する。

“`app/models/message.rb
class Message < ApplicationRecord has_rich_text :content end ``` 4.ビュー側でヘルパーメソッドを使用する。 ```ruby <%= form_with(model:

ローカルと本番環境で挙動が違う時の対処法

ローカル環境での動作はバッチリ！
次に本番環境で動作確認していると、あれ、、思うように動かない。

考えられる原因の仮説として、
ローカル環境では動いているということでコードに問題はないとして、githubのmasterブランチにあげ忘れかな?

確認してみたものの全てmergeしている、、
なんでだろう、、

そうだ！思い切ってDBをリセットしちゃおう！！

“`
#dbのリセット
heroku run DISABLE_DATABASE_ENVIRONMENT_CHECK=1 rails db:drop db:create db:migrate

#herokuの再起動
heroku restart

#herokuに再アクセス
heroku open
“`

コマンド入力後再度動作確認すると、無事正常に動いている！
偶発的な問題だったみたいです。

皆さんもぜひ試してみてください:thumbsup_tone1:

priceのバリデーションを半角数字だけ適応したい

#はじめに
投稿内容に金額（price）を入力する欄を作りました。

しっかり半角数字のバリデーションを定義したのに全角でも入力できてしまったので解消法を投稿します。

#やってしまったミス

“`rb
class Review < ApplicationRecord with_options presence: true do validates :faclity_name, length: { maximum: 40 } validates :images validates :price, format: { with: /\A[0-9]+\z/ } end end ``` このように`price`に空だと投稿できない、半角数字でなければ投稿できないバリデーションを定義しました。 しかし全角文字でも投稿ができてしまいました。 #解決方法 **数値のみ**というバリデーションがありました。 ``` numericality: ``` 今回は0円から9,999,999円までまでは投稿できる設定にしたいので以下のように記述しました。 ``

【Rails】カートモデルの代わりにsessionを使ってカート機能を実装する

#はじめに#
####簡単な自己紹介####
はじめまして、shunと申します。
善良で健康な23歳です。
現在、「私立探求学園」というプログラミングスクールの「Rails共同開発プログラム」に2期生として参加しております。
プログラミング歴は執筆時点で3ヶ月ほどです。

Qiitaに記事を投稿するのは今回が初めてになります。
そのため、専門性に欠ける部分や読みづらい点が多々あるかとは思いますがご容赦ください。

#本記事の内容#
###カート機能を実装する###
ECサイトでよく目にするカート機能を実装します。
今回実装するカート機能では以下の事が可能です。
本稿では主にコントローラに焦点を当てて解説します。

**① 「カートへ」ボタン押下で商品をカートに入れる。
② カート内商品を表示する。
③ カート内商品の個数変更[^1]、商品削除ができる。
④ 「購入する」ボタンを押下でカート内を空にして購入完了画面を表示する。
⑤ 購入完了画面で注文番号を表示する。**

###本記事の特徴###
本記事では、カート内で商品情報を出し入れする際には**カートモデルを使用しません。**
そ

Railsで架空のCafeのHPを作ってみよう!【5日目】『完全一致の正規表現』編

#概要
基本Railsの記法に則り書いていきます！
１から全ての説明ではなく
その中であれ？どうやるの？と
疑問に思った点や実装に困った箇所を
ピックアップして紹介していきます♩

#設定と準備
・Rails
・HTML
・CSS
・Javascript(jQuery)

↑上記の言語とフレームワークを使い
架空(自分で考えたテキトーなもの)のCafeの
HPを作っていこうと思います！

#5日目の作業内容:round_pushpin:
・deviseの導入

#5日目の躓いた箇所:zap:
**「従業員しかログインできないようにバリデーションを
かけたいけどどうしたらいいだろう？」**

今回はHPを作っているため
従業員しかログインできないように
パスワードにバリデーションをかけたい！

前提としてdeviseを導入し、userモデルを作成しています。

“`user.rb

class User < ApplicationRecord # Include default devise modules. Others available are: # :confirmab

Herokuでデプロイ後の画面表示エラー

##　Herokuエラーのまとめ
ローカル環境では問題がなかったのに、
Herokuにデプロイ後にエラーになってしまった時の対応をまとめました。

### 1.実例)エラー画面

エラー文章は
`We’re sorry, but something went wrong.`
`If you are the application owner check the logs for more information.`

###　2.とにかくエラーログを見ろ！
基本的に、エラー画面が出た時の対応はこちらです。

1.エラー画面が表示されたら作業ストップ
2.そのままターミナルへ移動
3.`% heroku logs`を実行
4.ログの下の行を見ていくと、エラーのHTTPステータスがある
5.HTTPの

Ruby on rails データベース操作の最低限知るべきコマンド

⚫︎データベース操作作成

“`
#Model作成
$ rails g model カラム名:型　　

#Modelと対応するmigrationファイル作成
$ rails g migration カラム名:型

#データベース作成
$ rails db:create

##データベース削除
$ rails db:drop

#migration データベースへの反映
$ rails db:migrate

#migration データベースを元に戻す
$ rails db:rollback

#初期でデータ投入
$ rails db:seed

#データベースのリセット
$ rails db:reset *基本は使わないのがおすすめ

#データベースリセット
$ rails db:migrate:reset *ゼロからmigrationファイルを実行してDBを再作成するコマンド

“`

初学者がrailsで作ったウェブサイトをherokuでデプロイしたときに出たエラー「The page you were looking for doesn’t exist.」

herokuでウェブサイトを公開しようとしたときにでたエラーの話です。

デプロイまでの手順はhttps://qiita.com/misakigumi/items/68d3557c67739c552ef5
こちらの記事を参考にしました！

デプロイまでの手順も色々とエラーが起きましたが、
設定箇所
1. Gemfile
2. config/database.yml
3. config/environments/production.rb
この３つをしっかり確認して、エラーコードをみて修正するとなんとかうまくいきました。

そして

“`
% git push heroku master
“`
これを実施して、デプロイすると
「The page you were looking for doesn’t exist.」
「探していたページが存在しません。」

このままググってみると、ルートがうまく設定できていないと判明

記事の設定箇所に
4.config/routes.rb
rootページ(例：root ‘questions#index’)が設定されているか確認する（設定されていな

Rails6でデータベースをpostgreSQLに変更したその後のエラー

##開発環境
Railsアプリケーションの開発
Rails ver. 6.1.3
Ruby ver. 2.6.3
postgreSQL ver. 13.2

##エラー①
Rails6ではデータベースの変更がコマンド１つでできるので、
こちらの方の記事を参考に
https://qiita.com/vinaka/items/fbdb17bebe75d40de995

Herokuへデプロイする予定なのでデータベースをdevelopment、production含め
一括でpostgreSQLに変更しようと考えた
以下のコマンドを実行し、bundle install

“`
$ rails db:system:change –to=postgresql
$ bundle install –clean
“`
railsサーバーを起動すると

“`
ActiveRecord::ConnectionNotEstablished (could not connect to server: No such file or directory
Is the server runnin

[Rails]タブと無限スクロール機能の両立(kaminariとjscroll)

今回はタブ機能と無限スクロール機能を実装したけど、無限スクロールで表示される要素がダブったり、表示されなかったりといった不具合が発生している方向けに発信していきます。

ぼく自身がこの不具合にだいぶハマってしまったので、同じような不具合にハマってる方の役にたてれば幸いです。

#開発環境

> ruby 2.6.3
> Rails 5.2.6

#前提

– 投稿サイトを想定
– 無限スクロールはkaminariとjscrollで実装
– タブはCSSとJavaScriptで実装

無限スクロールとタブ機能の実装は以下記事の実装方法を使用。
[[Rails]kaminariとjscrollを使って無限スクロールを実装](https://qiita.com/nakachan1994/items/1edc7a03e36bc00992c5)
[[Rails]CSSとJavaScriptを使ったタブ切り替え機能](https://qiita.com/nakachan1994/items/566cfcb60376feb3fe8c)

モデル名、変数名等は適宜、ご自身の開発環境に変換してお考えく

rubocop：Metrics/BlockLengthからRSpecファイルを除外する

# 経緯
VScodeでrubocopの設定が反映されなかったので、１事例として残す。

# 変更内容
rubocop解析項目の`Metrics/BlockLength`で、RSpecファイルを除外する。

**Metrics/BlockLength：ブロック行数をチェックしてくれる項目**
※デフォルトでは２５行

# 目的
RSpecのテストコードを書くと、どうしても２５行以上になるので個別設定にしておく。

# 設定すべきファイル

rubocopの各種設定ができる`.rubocop.yml`を変更する。

“`.rubocop.yml

Metrics/BlockLength:
Exclude:
– “spec/**/*”

“`

インターネットで情報収集してると、パスを`”spec/**/*.rb”`としているケースも見られたが、それでは反映されなかった。

# おわりに

rubocopの設定変更は今後も必要になる可能性があるので、ネット記事だけではなく、自分でも微修正しながら設定する意識をする。

原因は追及できなかったが、各種ソフトのバージョンも関

[Rails]Action Mailboxとはメール受信時の処理を行うライブラリ

# はじめに
Rails6から追加された、メール受信時の処理を行う機能を提供するAction Mailboxというライブラリ。比較的新しい機能で使う機会がなかったのですが、機会が巡ってきたので、備忘録を書こうと思います！

# 対応するメールサービス、メールサーバ
– Mailgun
– Mandrill
– Postmark
– SendGrid
– Exim
– Postfix
– Qmail

# 利用方法
※今回は本番環境でSendGridを利用することを想定して実装します。

1.ActiveJobので読み込むキューを設定する。

“`config/sidekiq.yml
:queues:
…
– action_mailbox_routing
– action_mailbox_incineration
“`

2.ActiveStorageの保存先をクラウドストレージサービス(S3等)に変更する。

3.Action Mailboxのセットアップを行う。

“`bash
$ rails action_mailbox:install

$ rails db

[Rails]Active Storageを理解してない人は覗いてご覧なさい

# はじめに
Rails5.2から、公式でファイルアップロード機能が提供されました。それが`Active Storage`です。アプリケーションでActive Storageを用いることで、ImageMagickで画像のアップロードを変換したり、 PDFやビデオなどの非画像アップロードの画像表現を生成したり、任意のファイルからメタデータを抽出したりできます。

# 使用方法
1.Active Storageに必要なファイルを生成する。

“`bash
$ rails active_storage:install
“`

2.ファイルアップロードを利用したいモデルを生成する。
※今回はscaffoldを利用してUser関連のファイルを生成しています。

“`bash
# portraitというActive Storage用属性を追加する
$ rails g scaffold user name portrait:attachment
“`

`rails db:migrate`で、マイグレーションファイルを実行する。

3.主となるモデルにActiveStorage用の宣言をする

【Rails】ユーザー情報を編集更新した後、ログアウトされてしまう

# 概要
deviseで生成したユーザー情報を編集更新した後、ログアウトされてしまう事象を解消します。

# 解決方法
①password以外の情報を変更するためにビューファイルを編集する。
②passwordを入力しなくてもデータが更新できるようにUserモデルにバリデーションをかける。
③情報更新後にログアウトされた状態から再度ログインするようにコントローラーに記述を追加する。

※前提として、すでにdeviseの導入と独自でカラムの追加が完了しているとします。
導入方法は下記の通りです。

“`ruby:Gemfile
gem ‘devise’
“`

“`ruby:terminal
$bundle install
“`

“`ruby:20210530040353_devise_create_users.rb
class DeviseCreateUsers < ActiveRecord::Migration[6.0] def change create_table :users do |t| ## Database authenticatabl

Rails API + Vue.js + TypeScriptで作るシンプルなTodoアプリ（SPA）

## 概要

業務でVue.jsを使う事になったため、とりあえずTodoアプリを作りながら入門してみました。

全体的な構成としては、バックエンドにRails API、フロントエンドにVue.jsを採用したSPA（Singe Page Application）になっています。

## 完成イメージ


## 全体構成

“`
rails-vue-todo-app
├── backend
│   ├── app
│   ├── bin
│   ├── config
│   ├── db
│   ├── lib
│   ├── log
│   ├── public
│   ├── storage
│   ├── test
│   ├── tmp
│   ├── vendor
│   ├── config.ru

「いいねをする」、「いいねを取り消す」でページが更新されるときに他のページへの遷移を防ぐ（メモ）

#問題
`一覧(index)ページ`の記事のいいねをクリックしたときに、以下のように設定していても`詳細(show)ページ`に遷移されてしまう。

###↓likes_controller.rbのcreateメソッド内
“`ruby
if current_page?(root_path)
redirect_to root_path
else
redirect_to article_path
end
“`
現在のページが一覧ページ(root_path)だったとき、一覧ページに遷移する。
現在のページが詳細ページ(article_path)だったとき、詳細ページに遷移する。
→現在のページがリロードされるように遷移すると考えた。

#原因
いいねをクリックしたときの遷移先が`現在のページ(current_page)`となる。

###↓いいねのリンク（hamlで記載）
“`haml
link_to article_like_path(article), data: {method: ‘post’} do
“`
ページでは表示されないが実際は、いいねクリック時に特定の記事取得

[Ruby on Rails]グループ作成機能③ グループメンバーへメール送信　Action Mailer

初めに

プログラミング学習開始して1ヶ月と少しです。誤り、理解不足はご指摘いただけますと幸いです。

今回やること

①②に引き続き、グループ機能を作成します。

②の記事はこちらです。

https://qiita.com/ki_87/items/eb2d073c2dccbed42c5a

今回は、グループのオーナー（管理者？）から、グループメンバーにRuby on rails上？からメールを送れるようにします。
今回はこのように、グループ作成者が[Mail」ボタンを押すと、タイトルと本文を入力できる画面に遷移し、
その内容をグループメンバーに送信します。
メール送信後は、送信完了画面も出します。

完成イメージ


![スクリーンショット 20