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

[Rails7][Heroku] Active Storage や ActionText で画像が表示されない問題を解決する

# はじめに
`Rails7` で構築したアプリケーションを　`Heroku` にデプロイしたが画像が表示されない問題を解決していきます。
`Active Storage`を使用していることを前提としています。
以下、確認・修正すべきことを書いていきます。

# 画像をアップロードしておくストレージの設定
開発環境ではローカルストレージに保存されますが、
本番環境（今回の記事では`Heroku`）では画像を保存するストレージを設定する必要があります。
これは、ググればたくさん情報が出てきます。
`AWS`の`S3`を使用する構成が簡単でしょう。
本記事では`AWS`の`S3`を使用していきます。

https://qiita.com/hmmrjn/items/479c9e9ce82771f1b6d7

# `AWS`の`S3`のバケットに`CORS`の設定を追加
`AMAZON S3` > `バケット` > `sample buket name`
↑ご自身で設定したバケットを開いてください。

「アクセス許可」というタブを選択してください。
![スクリーンショット 2023-01-2

RailsでAjax通信を使って項目を絞り込む

# やりたいこと

　個人開発でやっているサービス「lytnote」の改善を行いたい。目標一覧画面にはユーザーが登録した目標が並んでいる。それぞれにはステータスがあって、完了や中止や進行中が選べる。振り返りの際に目標のステータスを変更するのだ。

“`
目標A 状態：進行中
目標B 状態：完了
目標C 状態：中止
目標D 状態：完了
….
“`

　でも使っていくと、目標がどんどん増えてしまう。進行中の目標のみを絞り込んで表示したい。

　目標の絞り込みを行うぞ。

# フロー

“`
目標一覧画面表示
↓
絞り込みたいステータスをプルダウンで選ぶ
↓
絞り込みボタンを押す
↓
絞り込まれる
“`

　これでやっていこう。つくるものを考える。

1. 一覧画面にプルダウン表示
2. コントローラー修正
3. jsファイル修正
4. 一覧画面に部分テンプレート追加

# 1. 一覧画面にプルダウン表示

“`erb:app/views/plans/index.html.erb
<%# 略 %>

<%= form_with url: plans_pat

MVCゼミ ワーク

# ワークの下準備
**ターミナルでアプリ作成**
“`ruby:ターミナル(コマンドプロンプト)
cd Desktop

rails _6.1.5_ new mvc

cd mvc

code .

rails db:create

# コントローラーを作成してみよう！！

rails g model Post body:string

rails db:migrate

“`

**seedを編集しよう！**
“`ruby:db/seeds.rb
Post.create([
{ body: ‘Web’ },
{ body: ‘コース’ },
{ body: ‘LOVE’ }
])
“`

https://qiita.com/takehanKosuke/items/79a66751fe95010ea5ee

**ターミナルで適応**
“`ruby:ターミナル(コマンドプロンプト)
rails db:seed
“`

# MVCを構築していこう！
**Controllerにindexアクションを定義してみよう！**
“`ruby:app/controller

【忘備録】期間内に特定のカラムが複数回登録されているレコードを抽出する(SQL、Rails、Pandas)

簡単だろうと勝手にたかを括っていたら時間が掛かってしまったため、
忘備録としてメモ。

Booksテーブルから次の条件を満たしたレコードを抽出するSQL文を作成する。

・2022年中に3回以上同じcategoryが登録されているbookレコード

（Booksテーブル）

存在するカラム：category,tag1,tag2,created_at,updated_at

created_atが2022年内なら登録されているとする。

## SQL

“`sql:books.sql
SELECT *
FROM books
WHERE category in (
SELECT category
FROM books
WHERE created_at BETWEEN ‘2022-01-01 00:00:00’ AND ‘2022-12-31 23:59:59’
GROUP by category
HAVING count(category) >= 3
);

“`

## Rails
目的は達成したが、気になったのでついでに考えてみる。

“`ruby:books.rb
categ

【GitHub Actions】Fargateへの自動デプロイ時にハマったことと対応まとめ

# 概要
下記記事を参考にGitHub ActionsでのCI/CDを構築した。

– test

https://zenn.dev/ryouzi/articles/cd6857c08e60e7

– deploy

https://qiita.com/hatsu/items/a70d5c49a39561836751

※ubuntuとcheckoutについてはそれぞれ最新バージョンに変更して利用した。
– ubuntu→latest
– checkout→v3

テストの方は特に問題なく設定できたが、デプロイではハマる箇所が多かったためまとめ。

# 環境
– アプリ
– ruby 3.0.2
– rails 6.1.4
– mysql 8.0.31
– インフラ
基本的にこちらの記事の通り。

https://qiita.com/hatsu/items/22e11e94a0a981d78efa

HTTPSでアクセスできるようSSL化まで行っている、
ローカル→(HTTPS)→ALB→(HTTP)→Fargate⇄RDS
の状態。

# 発生したエラーと対応

【Rails】【collection_check_boxes】checked: を使って初期表示をさせる方法

## はじめに
タグ付け機能を実装するためにcollection_check_boxes を使いました。
その際にユーザーがすでにチェックをつけていた場合にはチェックをつけて表示させたかったのですが、その実現に苦労したため、アウトプットも兼ねて記事にしました。
初学者の為、至らない点もあるとは思いますが温かい目で読んでいただけると嬉しいです！

## collection_check_boxes とは？
モデルからチェックボックスを自動生成してくれます。
基本的な使い方については[こちら](https://pote-chil.com/rails_collection_check_boxes/)の記事が分かりやすかったです。

## やりたかったこと

投稿(Episode)を見た閲覧者(Us

ruby3.1に上げたらrubyの外部コマンド起動がエラーになって途方に暮れたら

ruby2.7を3.1に上げた時、それまで動いていたruby on railsのプログラム起動の仕組みが、起動時に
“`
can’t find executable rails for gem railties. railties is not currently included in the bundle, perhaps you meant to add it to your Gemfile? (Gem::Exception)
“`
というエラーで起動できなくなりました。

原因と対策はこちらのページに御世話になりました（感謝）。

おおたの物置
　bundle中に別のbundleを呼ぶと予期しない結果になる対策
https://ota42y.com/blog/2015/01/28/bundle-in-bundle/

こちらにあるようにruby3.1の直接の問題ではありませんが、
当方で起動をしかけていたのは別のrubyプログラム（プロセス監視）で、ruby3.1にした際に
net-smtpなどをGemfileで指定しなければならなくなり、それによって起動しようとしたrai

【随時更新】Railsでの開発時に入れたいgem集

## これはなに
Railsでの開発が捗るよっていうgemをまとめたものです。

みなさんのおすすめのgemがあれば教えていただけると嬉しいです!!

___

#### デバッグ
– [better_erros](https://github.com/BetterErrors/better_errors#installation)
– [binding_of_caller](https://github.com/banister/binding_of_caller)
– [pry-byebug](https://github.com/deivid-rodriguez/pry-byebug#installation)

#### テスト
– [rspec-rails](https://github.com/rspec/rspec-rails#installation)
– [factory_bot_rails](https://github.com/thoughtbot/factory_bot_rails)
– [faker](https://github.com/faker-ruby

Railsでの画像の保存場所

# はじめに

#### ※以下の内容には誤りが含まれる可能性があります

Railsでアプリケーションを作っていて、トップページの画像や背景画像を配置する際、
私がやったことを書きます。

# 具体的な内容

画像は「public」フォルダに配置しておくと、や「background-image:url(“/画像名”);」のよう

に、画像名を指定するだけで、簡単に画像を表示できます。

“`
public/
├─ top.jpg
├─ rails.phg
└─────── 画像はpublicフォルダの中に置く
“`

__ビューファイル(views/home/about.html.erb)__
“`about.html.erb

“`

__cssファイル(assets/stylesheets/home.scss)__
“`home.scss
background-image: url(“/top.jp

Rails7でdata: { turbo_method: :delete }が効かなかったときの解決法

初歩的な内容かもしれませんが、備忘録として残しておきます。

前提として以下のgemがインストールされていること。
“`
gem “importmap-rails”

gem “turbo-rails”

gem “stimulus-rails”
“`

インストールが済んでいたら
“`
$ rails importmap:install
“`
“`
$ rails turbo:install stimulus:install
“`

以上のコマンドを実行することで無事deleteメソッドが使用できるようになりました。

その際以下のファイルは初期化されるので既に存在＆記述してある場合は注意が必要です。
app/javascript/application.js
config/importmap.rb

validatesのエラーメッセージを表示する仕組み

## 環境
Rails 5.2

## 内容

validatesのチェックで引っかかった場合、どのような仕組みでエラーが表示されているのか、確認してみました。

userモデルには、**name**と**name_id**の２つのカラムがあり、次のようにvalidatesチェックをかけています。
“`user.rb
validates :name, presence: true
validates :name_id, presence: true, uniqueness: true
“`

editで編集画面を表示して、**name**を空白にし、**name_id**に重複したデータを入力して、更新ボタンを押します。すると、コントローラの**update**メソッドに入ります。validatesのチェックは、**@user.update**が実行されるタイミングで行われます。validatesのチェックで引っかかった場合、**@user.update**の戻り値が**false**で返ってくるため、if文のelseに入ります。**flash**には「更新が失敗しました。」

Rails7で外部URLのリダイレクトは例外が発生するようになった

Rails7でリダイレクトの処理が少し変わったので見ていきます。

## Rails のリダイレクト

Railsでは以下のように書くとリダイレクトすることができます。

“`ruby
# 内部URL
redirect_to root_path
# 外部URL
redirect_to ‘https://example.com’
“`

## Rails7 のリダイレクト

Rails7からは Open Redirect protection がデフォルトとなり、外部のURLにリダイレクトすると`UnsafeRedirectError`発生するようになりました（内部のURLにリダイレクトするときは今まで通りです）

例外を発生させないようにするために、`allow_other_host: true`を設定する必要があります。

“`ruby
redirect_to ‘https://example.com’, allow_other_host: true
“`

## URLが内部URLかチェックする

パラメータでURLを渡す場合は、外部のURLになる可能性もあります。`Uns

【Rails7】 Simple Form でdata属性をつける

# 初めに
Rails7
simple_form
haml
を使っています。

調べても出てこなくて45分潰れました。
hamlで書いてます。

# 結論
こうじゃなくて
“`haml
= f.input :name, data: { hoge: ‘hoge’ }
“`

こう
“`haml
= f.input :name, input_html: { data: { hoge: ‘hoge’ } }
“`

### 参考
https://developer.mozilla.org/ja/docs/Learn/HTML/Howto/Use_data_attributes

フォロー、フォロワー機能の実装

# モデルの作成を行う
– Userモデルの中間テーブルとなるRelationshipモデルを作成する

– カラムは、以下となります
follower_id : フォローしたユーザー
followed_id : フォローされたユーザー

“`
$ rails g model Relationship follower:references followed:references
“`

– 上記コマンド作成されたファイルに下記を追記
`foreign_key: { to_table: :users }`
“`:(作成日時)_create_relationships.rb
class CreateRelationships < ActiveRecord::Migration[5.2] def change create_table :relationships do |t| t.references :follower, foreign_key: { to_table: :users } #追記 t.references :followed,

ChatGPTに適当に指示してRubyプログラムを書いてもらう

## はじめに

[ChatGPT](https://openai.com/blog/chatgpt/)というAIチャットが昨年暮れから話題ですね。
なにか質問すると、まるで人間のように的確な受け答えをしてくれる有能なAIです。

最近だとGoogle社内で、ChatGPTの台頭にCodeRedを宣言したという記事も出てましたね。

記事： [ChatGPTのリリースでGoogleは「コードレッド」を宣言、AIチャットボットが検索ビジネスにもたらす脅威に対応するためにチームを再割り当て](https://gigazine.net/news/20221223-google-code-red-against-chatgpt/)

一方でChatGPTはプログラムコードも書けるということなので、適当に指示を出してどのていど良い感じのコードを書いてくれるのか、Rubyで試してみました。

## 手始めに簡単なプログラムを
とりあえず簡単なプログラムを書いてみてもらいました。

![スクリーンショット 2023-01-19 10.16.28.png](https://qiita-image-st

RubyonRailsにスクレイピング機能を持たせてみる。

## はじめに
今回は連載企画第２回目ということで、スクレイピングについて書いていこうと思います。
### これまでに書いた記事はこちら
– [【個人開発】日用品を自動で購入してくれるアプリを作りました。](https://qiita.com/prg_mt/items/decb7912e82e6384fafb)
– [Ruby on RailsのアプリにLINEを組み込む。](https://qiita.com/prg_mt/items/b3238ebfae1a3df67cab)

## gemの導入
まずはじめに、gemを導入します。
以下の記述をgemfileに追加してください。
また、seleniumはRSpecで通常使用するものになりますので、`group :test do ~ end`のブロックの中にすでに記載がある場合はブロック外に記載を移すようにしてください。

“`ruby:Gemfile
# selenium
gem ‘selenium-webdriver’
“`

上記を記載しましたら`bundle install`を実行してください。

## ChromeDr

【AWS】自動デプロイ後にアクセスしたら502 Bad Gateway

## 結論
deploy.rbに記載ミスがあった。
なんとこれだけです。

## 経緯
AWSへのデプロイに初挑戦。
手動でのデプロイ時点では上手く行っていたのに自動デプロイを試みると502 Bad Gatewayとエラー。
なんじゃこりゃ、、、？

## 502 Bad Gateway とは
とりあえずググってみた。

“`
502 Bad Gatewayとは、ウェブサイトのサーバーの通信状態に問題があることを示すエラーメッセージです。
以下のようなエラー画像が表示されます。
“`
参考：https://blog.hubspot.jp/502-bad-gateway

通信状態？　
AWS側の不具合やらこっちのWifiが原因ってことかな？
、、、ってそんなわけあるかーーー！

## 原因
以下の記事を参考に原因究明。
https://qiita.com/kana_web/items/638a5d605870558879a4

こちらの記事から、ファイルとディレクトリの位置関係を洗い出すことに。

### currentディレクトリに移動できるか確認してみる
“`　:ターミ

React と Rails でアプリを作成してみた【TODOアプリ】

## React on Rails

Rails
■ データをJSON形式で返す
■ MVCのMとCを担当

React
■ MVCのVを担当

## JSONとは？
JSONは「JavaScript Object Notification」の略で、JavaScriptで値を取り扱うためのドキュメント規格の事。
もともとはJavaScript上で値を取り扱うためのフォーマットだったが、JavaScriptで値を扱う上で便利に利用できることから、JavaScriptフロントエンドの普及に伴い、バックエンドと通信する際のフォーマットとして利用されはじめた。

## 環境の準備

“`
rails new <プロジェクト名> –webpack=react -T
yarn add react-router-dom axios styled-components react-icons react-toastify

//react-toastify ユーザーに対してエラーその他アラートを表示させるときに便利な機能
“`

## model & table & data

“`
rai

github actionsのrunner-osのアップデートの際サービスコンテナを使ってmysqlのバージョン対応した話

github actionsのrunner-osを今まで`ubuntu-18.0.4`を使ってたが、今更ながら
アップデートしました。
https://github.com/actions/runner-images/issues/6002

### 変更後
“`yml:workflow.yml
jobs:
runs-on: ubuntu-latest
“`

### 困ったこと
これで再プッシュして一件落着かと思ったが、プッシュ後データベースのマイグレーションjobでテストが落ち、調べていると`ubuntu-latest`のラベルを指定すると`ubuntu-22.0.4`のイメージを使うことになるらしい。
https://github.com/actions/runner-images#available-images
んでこちらのイメージだとプリインストールされているmysqlは8系だよとのこと。
https://github.com/actions/runner-images/blob/main/images/linux/Ubuntu2204-Readme.md

CI

パーシャルのオプションを使うには

# エラーになる
“`html
.
.
.
<%= render '*****/******', locals: {variable: @user} %>
.
.
.
“`
“`undefined local variable or method `variable’ for #“`

どうしてローカル変数を設定したが、定義されていないと書かれてある。

# ドキュメントをじっくり読んでみた
“`:layoutなどの追加オプションも渡す場合は、:partialオプションも明示的に指定する“`必要があります。

### 出典
https://railsguides.jp/layouts_and_rendering.html#:~:text=%3Alayout%E3%81%AA%E3%81%A9%E3%81%AE%E8%BF%BD%E5%8A%A0%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%82%E6%B8%A1%E3%81%99%E5%A0%B4%E5%90%88