Rails関連のことを調べてみた

[Rails7]application.bootstrap.scssの変更が反映されない

## 目的
Rails７でbin/devコマンドでサーバーを起動させた際に、エラーが起きたのでその解決方法を共有しつつ備忘録として残します。

## 開発環境
– rails 7.0.4.3
– ruby 3.1.2
– Bootstrap 5.3.3
– Popper.js 2.11.8

## 解決方法
#### 事の始まり
下記の記事を参考にRails７にBootstrap５を導入しました。

https://qiita.com/PJZ9n/items/03341f942c2c84713c99

無事bootstrapの導入が終わって動作確認をしていた際に、`application.bootstrap.scss`の変更がブラウザに反映されないことに気づきました。
これはおかしいと思って色々調べたり、試してみました。

#### Rails7では`bin/dev`を使う
投稿者は開発途中でrails6からrails7にアップデートしました。
アップデート後も`rails s`コマンドで何も問題なくサーバーが起動されていたので、そのまま`rails s`コマンド

ActiveStorageを使用しての画像のリサイズがうまくいかない時

# はじめに
チーム開発が無事終了し、振り返りに躓いたところをアウトプットしています。
今回は正しくActiveStorageを導入し、リサイズの記述をしているはずなのに、リサイズされない現象が起きました。
解決方法をまとめています。

# ActiveStorageの導入手順
まずはじめに、ActiveStorageのインストールを行います。

“`
$ rails active_storage:install
“`

インストールが終わるとdb/migrateディレクトリ内にActiveStorageのマイグレーションファイルが追加されます。
これをmigrateします。

“`
$ rails db:migrate
“`

ActiveStorageを使用して画像表示をするためには、どのモデルで画像を使用するのか宣言する必要があります。
今回はItemモデルに記述していきます。

“`app/models/item.rb
class Item < ApplicationRecord has_one_attached :item_image end ``` これでA

AWS FargateでRakeタスクを定期実行する

## 実現したいこと
– 従来はWheneverでcron定義を自動生成し、EC2上で定期バッチを実行させていた
– EC2からFargateへのインフラ移行に際して、定期バッチもFargateで実行できる形にしたい
– 定義の反映はアプリケーションのCI/CDに載せて自動化したい
（「手作業でECS Schesuled Tasksを編集する」のような形は避けたい）
– 定義は設定ファイルで構成管理したい
（「スケジュール追加スクリプトを実行する」ような形は避けたい）

## 選択肢

1. CloudFormation でEventBridgeルールの定義を行い、CircleCI 内で`aws cloudformation deploy` を実行する
2. [ecschedule](https://github.com/Songmu/ecschedule)（ECS Scheduled Task 設定を管理する gem）を使い、circleci 内でコマンドを実行する
3. [Elastic Whenever](https://github.com/wata727/elastic_wh

新規投稿機能

# はじめに
2024年2月からプログラミン学習を始めたばかりなので間違ったことを記載している可能性もあります。間違っている部分やアドバイスがありましたらご指摘していただけたら幸いです。

また、今回の記事は以下の記事の続きになっています。

https://qiita.com/sslevel5/items/74c5a92ae30e4d991778

## 前提
ruby
rails
gem device

上記の環境で作成します。

## 実装

今回は顧客側で投稿をする際に使用するジャンルの追加・編集ができるよう管理者側にジャンル投稿機能を実装したいと思います。

### テーブルの追加
Model名は大文字から始まる単数形になります
今回は投稿のジャンル名をtitileカラムとして作成をします。

“`
rails g model Genre title:string
“`
マイグレーションファイルを確認し少し編集します。
“`〇〇〇〇〇〇〇〇_create_genres.rb
class CreateGenres < ActiveRecord::Migration[7.1

Railsでコードを書く時に気をつけること

# 前提
* 既存のコードに合わせなくて良い、良い状態を考えて作ること

## 一般的なチェック
* メソッドに ! をつける場所は適切ですか
* Aws::SQS::Client のテストは instance double を使わずに、AWS SDK for Ruby を利用
* raise した エラーは 明示的に capture せずとも Sentry が自動で拾ってる可能性を考慮

## rspec

### subject の命名
“`rb
# context など rspec 命名と被るものを利用している部分があるが避けたい
subject(:context) { described_class.call }
# 一般的には result や outcome などが推奨される。
subject(:result) { described_class.call }
“`

### 時間停止系処理

“`rb
# travel_back を忘れがちなのでブロックで書く
travel_to Time.zone.local(2024, 5, 25, 10, 0, 0)

[Rails7] Popper.js Popper__namespace.createPopper is not a function エラー解決方法

## 目的
Rails7で後からbootstrap5を導入しました。
その際にPopper.jsのエラーにハマったのですが無事解決でき、記事が少なかったので備忘録として投稿します。

## 開発環境
– rails 7.0.4.3
– ruby 3.1.2
– Bootstrap 5.3.3
– Popper.js 2.11.8

## Bootstrap5導入方法
rails7で後からBootstrap5の導入をしたい方はこちらを参考にしてください。

https://qiita.com/PJZ9n/items/03341f942c2c84713c99

投稿者はこの記事を参考にしてBootstrap5を導入する途中でPopper.jsのエラーにハマりました。

## エラー内容
ブラウザでBootstrapのjavascriptで動く部分の動作確認をしていたら、下の写真のようなエラーに遭遇しました。

エラー名：`Popper__namespace.createPopper is not a function`

![スクリーンショット 2024-05

【DeviseTokenAuth】メールアドレス変更時に古いメールアドレスに変更通知メールを送信する方法

## 設定を記述

設定を記述する。

“`rb:config/initializers/devise.rb
Devise.setup do |config|
# …
config.send_email_changed_notification = true
end

“`

## メール内容の変更

メール内容を変更する。

“`erb:app/views/devise/mailer/email_changed.html.erb

<%= t(:hello).capitalize + '、' + @resource.name %>さん。

<% if @resource.try(:unconfirmed_email?) %>

メールアドレスの変更がリクエストされました。
<%= @resource.unconfirmed_email %>にメールアドレス確認用のメールを送信しています。
内容を確認し、メールアドレスを認証してください。

<% else %>

メールアドレス

現場で使える ruby on rails 5速習実践ガイド を読んでみて

# はじめに
現場で使える Ruby on Rails 5速習実践ガイドを読んでみて感じたこと、調べてみたことにまとめました
# 良かったところ
* Railsでかかれているアプリケーションの構築方法だけでなく、どうやって動いているかまで詳しく説明されていて良かった
* テストの重要性やチーム開発の流れについて書かれており、実際に実務をイメージすることができる内容でした
* コードのリファクタリングや共通化に関してもわかりやすく書かれていた
# 学んだこと
### rails7 でのセットアップ
本書はrails5での書き方をされているため、現在(2024/05)使われているrails7での書き方に直す必要がありました
今回は、Dockerでの構築でのセットアップを紹介しようと思います
本書で学ぶ際にセットアップで悩んでいる方がいらっしゃれば、
参考にしていただけると幸いです

dockerでの構築で参考にさせていただいたのは、
Udemyで講座を配信しておられる
かめれおん さんの`米国AI開発者がゼロから教えるDocker講座`です

https://www.udemy.com/c

睡眠をテーマにした新しいSNS「SwimIn」を紹介させてください

# 自己紹介
2023年の9月ごろにプログラミングと出会い、のめり込み、今まで独学でずっと勉強してきました。運が良かったのもあって、12月ごろに某Web系の自社開発企業に内定をいただき、来年の4月からエンジニアとして働けることが決まっています。
就職活動中にも、ポートフォリオ(勤怠管理アプリ)を作成したのですが、今思い返せば、あまりモダンな開発ではなかったなぁと思います。バニラjavascriptを使って、htmlファイルを複数個用意したり、O/Rマッパーの存在も知りませんでしたから、SQLをゴリゴリにベタ書きしていました。（確かProgateでそのやり方を見たからだと記憶しています）
そこで、本格的に個人開発をしたいと思い、フルスタックな開発に着手し、一ヶ月ほどで「SwimIn」を完成させました。

# SwimInとは？
**友達が寝ているかどうかがわかる**、睡眠SNSとなっています。

ActiveStorage#signed_idの生成を読解

# 発生事象
複数のstg環境でActiveStorage#signed_idが同じものを生成したのでロジックを追ってみた

# ActiveStorage#signed_idの生成を読解

[signed_id](https://api.rubyonrails.org/v7.1.3/classes/ActiveStorage/Blob.html#method-i-signed_id)はActiveStorageのBlobの`id`を暗号化したもの

## エントリーポイント
[`ActiveStorage::Blob#signed_id`](https://github.com/rails/rails/blob/36c1591bcb5e0ee3084759c7f42a706fe5bb7ca7/activestorage/app/models/active_storage/blob.rb#L163-L165)がエントリーポイントです。
“`ruby
def signed_id(purpose: :blob_id, expires_in: nil, expires_at: nil)

【Rails × AmazonS3】 RailsアプリでAmazonS3を利用し、本番環境に画像をアップロードする

# はじめに
はじめまして、ずっと大地と申します。
2023年11月より、オンラインスクールのRUNTEQにて、未経験からのWebエンジニア転職を目指して学習をしています。
初学者のうえ、記事を書くのは初めてです。
記述漏れや作成ファイルの記載忘れなど、不備があるかもしれないので、間違いなどあれば教えて頂けたらと幸いです。
また、人によって環境の違いがあるかと思うので、あくまでも私自身の環境で、記事投稿時の記録ということをお許しください。

# 概要
アプリ開発にて実装した、`Amazon S3`での本番環境の画像アップロードについて、設定が多く難しいと感じたので、記事にしたいと思います。
`CarrierWave`を導入済み、`AWS`に`rootユーザー`、`IAMユーザー`としてログインできる状態を前提とします。

https://aws.amazon.com/jp/register-flow/

# 環境
Ruby 3.2.3
Rails 7.1.3.2
CarrierWave
Amazon S3
Render.com

# 手順

### rootユーザーとしてサインイン
ま

ランダムな画面遷移（2パターン）

## はじめに
　今月の頭に小さなアプリを作ってみようと思い立ち、その中でランダムな画面遷移機能の実装に挑戦しました。

この時に作成したアプリはこちら
(2024年7月末まで稼働予定)

https://tomi-meisei.onrender.com/

## 環境
ruby 3.2.2

rails 7.1.3.2

Render

MacBook

## 付けたい機能
　「指定のリンクをクリックすると、その時々で異なる結果のページを表示させる」

これを実装するために今回は2種類の方法を取ってみました。

## 方法1
データベースに保存された値をランダムに表示させる方法

**ランダムに表示したいデータベース作成**

`rails g model randam_rogers`
（※randamの綴りが間違えていますがご了承ください）

“`ruby
class CreateRandamRogers < ActiveRecord::Migration[7.1] def change create_table :randam_rogers do |t|

未経験からモダンな技術を学んで「バーチャル旅行を楽しめるサービス」を立ち上げるまで【React / Rails / Firebase Authentication / Google Map / YouTube API】

# はじめに

こんにちは！**いとう([@Ito_GeekHatch](https://x.com/Ito_GeekHatch))** と申します。
未経験からWebエンジニアを目指し転職活動中です！

転職活動用のポートフォリオとして
**「地図と動画でバーチャル旅行を楽しめるWebアプリ」** を個人開発しました！
開発したWebアプリに加えて、自己紹介とこれまでの学習歴、これから挑戦したいことについて紹介させていただきます！
未経験からWebアプリをポートフォリオとして開発する予定の方の参考になれば幸いです🙇‍♂️

:::note warn
**ご注意**
なかなかの長文になっております。
「制作したアプリのことだけ知りたい！」という方は
**[2. ポートフォリオの紹介](#2-ポートフォリオの紹介)** をご覧ください🙏
:::

# 目次
[1. 自己紹介](#1-自己紹介)
[2. ポートフォリオの紹介](#2-ポートフォリオの紹介)
[3. 技術選定の理由](#3-技術選定の理由)
[4. 学習過程](#4-学習過程)
[5. 今後の展望や挑戦したいこと](#5-今

[備忘録] Railsアプリケーションでtailwind.cssが読み込まれないとき

## 起こったこと
railsアプリケーションでcssがうまく読み込めなかった
error内容はこんな感じ
“`:
The resource ファイル名 was preloaded using link preload but not used within a few seconds from the window’s load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
“`

## 試したこと
### 1. ブラウザのキャッシュクリア
効果なし

### 2. tailwind.css の再ビルド
いったん `app/assets/builds` 配下のファイルを削除 (今回は`tailwind.css`)
“`
$ rails assets:clobber
“`

その後 tailwind.css を再びビルド
“`
$ rails tailwindcss:build
“`

`app/assets/builds/tailwin

turbolinksがJavaScriptに干渉する

turolinksによって、画面が切り替わってもその通常起こりうるloadイベント（jsファイルが実行)が起きない場合がある。

document.addEventListenerなどで囲っている宣言の方法を変えてみるとうまく動作するかも。

複数権限でのDevise使用

# はじめに

2024年2月からプログラミン学習を始めたばかりなので間違ったことを記載している可能性もあります。間違っている部分やアドバイスがありましたらご指摘していただけたら幸いです。

また、今回の記事は以下の記事の続きになっています。
https://qiita.com/sslevel5/items/abe275d948f55f9f34d3

## 前提
ruby
rails

上記の環境で作成します。

## 実装

管理者側と顧客側でログイン等の認証機能を分けるので、管理者と顧客側を分けて’Devise’の導入を行います。

↓’Devise’の導入の参考記事

https://zenn.dev/h_hana/articles/6dac69de42cbfe

### ‘Devise’のインストール

Gemfileの最後の行に下記を追記します。
“`
gem ‘devise’
“`
gemをインストールします。
“`
bundle install
“`
deviceをインストールします。
“`
rails g devise:install
“`

### 管理者

[rails ＆ cloudinary]carrierwaveで詰まるのでActive Storage で画像投稿を実装する

# 経緯
railsにてcloudinaryとcarrierwaveを用いて画像投稿を実装していたのですが、どうやら最近carrierwaveが上手く動いていないようでローカルにそのまま画像が保存されたり、`Errno::EACCES in HogesController#create Permission denied @ apply2files -`の様なエラーが出てるようで。。。。

Active Storageを利用すれば無事投稿が出来たので備忘録として残しておきます。

# 本記事の想定
– cloudinaryのアカウント登録が完了している
– 投稿機能が実装済み
– 環境変数は`gem ‘dotenv-rails’`で管理

※rails6.1.7 ruby3.0.4を使用しています。

https://cloudinary.com/

# 実装
Active Storageの詳しい仕様ついては公式ドキュメントで確認して下さい。

https://railsguides.jp/active_storage_overview.html

## Active Storageの

【Rails】namespaceを使用してアプリケーションの作成

# はじめに
初投稿になります。
最初は、自分の学習の復習をしながらアプリケーションの作成をしていく予定です。
2024年2月からプログラミン学習を始めたばかりなので間違ったことを記載している可能性もあります。間違っている部分やアドバイスがありましたらご指摘していただけたら幸いです。

## 前提
ruby
rails

上記の環境で作成します。

また、今回は管理者側と顧客側があるアプリケーションを作成します。

## 実装
### アプリケーションの作成

まず最初にアプリケーションを作成します。

“`
rails new review_app
“`

### namespace の使用

今回は管理者側と顧客側が存在するのでコントローラーを名前空間でグループ化します。
要すると
– 同じデータを扱うコントローラーとビューを管理者側と顧客側で2つ作成し、それらをそれぞれのフォルダーに分けて管理する
– 管理者側と顧客側でルーティングをグループ分ける
ということです。

https://railsguides.jp/routing.html#%E3%82%B3%E3%83

herokuでデプロイするときにつまづいた話

自分がつまづいた部分は
1 Command “webpack” not found.
2　パッケージのバージョンのエラー
3 herokuでgit push heroku mainすると画像のデータが消える。Active strageにはデータとしては存在する

でした。

### Command “webpack” not found.の話

結論から言うとnode.jsを先にインストールしたら直りました。
バージョンの話が色々とネットには溢れていましたが自分の場合はすごく初歩的な問題でした。
けどこう言う問題も初心者のうちは気付けないから怖いですね。
この順番にインストールしてくれたらOKです。

[](https://gyazo.com/655f0a0d5d0a7d87bbe16f8c8293bd6e)

### パッケージのバージョンのエラー

## 環境
ruby:3.2.2
rails:7.0.8
node.js:

Rails – Docker上の Rspec を Makefile から実行する書き方の例

# 概要

– docker-compose 構成が前提
– Makeの引き数として `RSPEC_TARGET` を利用してファイル名を指定する
– localではRailsのディレクトリがMakefileのあるディレクトリより下層にある場合 ( 例: `some_rails_directory ` ) を想定している

# Makefile

“`rb
rspec:
docker-compose run –rm -e RAILS_ENV=test rspec ${RSPEC_TARGET:some_rails_directory/%=%}
“`

実行例

“`sh
make rspec RSPEC_TARGET=spec/dir/
make rspec RSPEC_TARGET=spec/dir/example_spec.rb
make rspec RSPEC_TARGET=spec/dir/example_spec.rb:11
“`

# チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャット