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

【Rails】form_withからhidden_fieldでデータを送る際のポイント

# はじめに
Rails6.1での予約機能の作成時に、予約を確定する前に確認画面を挟むことにしました。

その際に商品のデータを渡す方法に戸惑ったので、どのように実装したか記録しておこうと思います。

# 結論
今回私がデータをうまく渡せなかったのは、paramsの使い方をきちんと理解できていなかったことが原因でした。

ビューからform_withを使ってコントローラにデータを渡し、送られたデータをコントローラで受け取るためにはparamsを使用します。

paramsはハッシュでデータが格納されるので、キーが必要になります。
私はこちらの認識が抜けていました。

“`ruby:
customer = Customer.find_by(email: params[:customer][:email])
“`
form_withから@​customerでmodelを指定して送ったデータを受け取るには、上記のようにキー[:customer]が必要になります。

# createまでitem_idを渡す方法を考える
今回私がやりたかったのは、
商品詳細（show）から予約

[Codespace] railsサーバー再起動方法

## 対象
GitHubのCodespaceを使って開発している方

## 前提
codespaceを立ち上げた状態でターミナルのコマンドで再起動します

## 手順
1. 起動中のプロセスIDを確認する
入力コマンド　※「$ 」はターミナルを意味するので入力は不要です
$ cat /workspaces/[リポジトリ名]/tmp/pids/server.pid
-> xxxxx(数字)
2. サーバーを停止する
$ kill -9 xxxxx　←手順1で取得したプロセスID
3. 再度サーバーを立ち上げる
$ rails server

file_fieldのデザインを変更する

### きっかけ
file_fieldのデザインをデフォルトのものから変更したいと思いましたが、
UIkitでは単数のfile_fieldのclassは用意されているものの、
複数用のfile_fieldは用意されていなかったので、
自分で変更する方法を調べて変更してみました。

初学者のため、誤りがありましたらご指導いただけると幸いです。

### 環境
Rails7.1
UIkit
ActiveStorage
stimulus

前提として
すでにmodelやdb等は作成してあるとして進めさせていただきます。

### 完成系のイメージ
送信ボタンにはUIkitのデザインをあててます。

file選択ボタンの部分をデフォルトから
![スクリーンショット 2024-05-11 14.08.53.

【rails】Herokuに画像が表示されない

# はじめに

– `assets/images/logo.jpeg` に画像を保存し,imgタグにてパスを参照してブラウザ表示を試みた。
– 上記ローカル環境にて表示することはできたが、“heroku“にデプロイした環境では表示させることができなかった。

# やったこと

– 拡張子が `jpeg` になっていた→ `jpg` に修正する。
– `img` タグで記述を `image_tag` に修正する。
– `assets/images/x_logo.jpg` で絶対パス指定していたものを、 `x_logo.jpg` の形で相対パスに変更する。
– 修正後のコード↓

“`ruby
.login
.text-center
= image_tag ‘x_logo.jpg’ ,alt: ” ,width: ’60’ ,height: ’57’
h3.text-center サインアップ

“`

# 結果

– 開発環境、Heroku本番環境の両方でアイコンの画像を表示させることができた。

# 参考

https://qiita.com/jnchito/

【rails】viewの共通applicationを切り分ける

# やりたいこと

– deviseを用いたログイン、サインアップ画面と通常のメイン画面とで、共通のviewを切り分けて表示させたい。
– (例)メニューヘッダー,サイドバーはログイン画面には表示させたくない

# やったこと

1. ユーザー認証用のHTMLを作る

2. ApplicationControllerに描画の切替を制御する記述をする

ユーザー認証用のHTML（ファイル名は任意）のファイル名で作って、`app/views/layouts/`配下に作る

※`app/views/layouts/devise.html.erb`で作るとします

devise.html.erb

“`jsx




<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'rel

【rails】.envファイルに環境変数を設定する

# はじめに

– 外部に公開したくないpasswordなどを環境変数として `.env`ファイルに設定する。
– githubにコミットした際に、 `gitignore` ファイルに.envファイルを指定することで、パスを外部に公開されないようにすることができる。
– 上記の手順を簡単に下記へまとめる。

# 手順

– detenvを `Gemfile` にインストール

“`jsx
gem ‘dotenv-rails’
“`

– `.env` ファイルに外部に公開したくないIDやpassを記述する

“`jsx
LOGIN_NAME=’name123′
LOGIN_PASSWORD=’pass123′
“`

– 上記を `環境変数` として他のファイルから呼び出す際は以下のように記述する

“`jsx
ENV[‘LOGIN_NAME’]
ENV[‘LOGIN_PASSWORD’]
“`

– Githubに.envファイルがコミットされないように `.gitignore` ファイルに以下を追加

“`ruby
/.env
“`

# 参考

https://q

【rails】OAuthを用いて、GitHub認証ログイン機能を実装する

# やりたいこと

– deviseのomniauthableの機能でgithubログインを実装する
– [ログイン](http://localhost:3000/users/sign_in),[サインアップ](http://localhost:3000/users/sign_up)からgithubログインができるようにする。

– 挙動
– サインアップ、ログイン画面より「GitHub認証」のボタンを押下
– GitHubのログイン画面へ遷移しid,パスを入力しログインボタンを押下
– github上で認証するためのトークンを発行し、それをWebサイト側で検証
– 上記が認証されるとトップ画面へ遷移する。


# 調査

– 必要なこと
– omniauthableの実装に必要なge

【Amazon Linux 2023】ElasticBeanstalkでffmpegが動かなくなった件

どうもこんにちは。

今回は、Railsのバージョンを上げたときに生じた問題を解決したのでその備忘録を書いていきます。

# 変更した点

変更した点は以下です。

| 変更箇所 | 変更前 | 変更後 |
| — | — | — |
| Ruby | 3.0.6 | 3.2.2 |
| Rails | 7.0.5 | 7.1.3.2 |
| プラットフォーム | Ruby 3.0 running on 64bit Amazon Linux 2 | Ruby 3.2 running on 64bit Amazon Linux 2023 |

# 発生したエラー

Railsのバージョンを上げた時に、`jquery-ui`が動作しなくなった問題はありましたが、`@hotwired/turbo-rails”`を先にインポートしたら解決しました。

ただ、今回は`ffmpeg`の`ffprobe`コマンドが正常に実行されなくなった問題を解消した方法を記載します。

# 解消方法

## 0. 前提条件

以下の事柄は実施しているものとします。

– `Ruby 3.2 runni

RailsとAjaxを用いて日付入力フィールドの変更をリアルタイムで反映する方法

## 導入

Webアプリケーションにおいて、フォーム入力のリアルタイム処理はユーザー体験を向上させる重要な要素です。特に予約システムのようなアプリケーションでは、利用者が入力する日付に応じて利用可能な時間帯やサービスの情報を動的に更新することが求められます。この記事では、Railsを使用して日付入力フィールドからの入力をAjaxを通じてリアルタイムに処理し、ページの特定の部分を更新する方法を紹介します。

## 実装手順

### 1. 日付フィールドの準備

まず、日付を入力するためのフィールドを用意します。このフィールドには、JavaScriptでイベントリスナーを設定するためのIDが必要です。

“`erb
<%= form_with model: @reservation, local: true do |form| %>
<%= form.label :date, "日付" %>
<%= form.date_field :date, id: 'date_field', value: Date.today, class: 'form-control' %>
<% e

Railsにおけるコントローラーロジックでの条件分岐とデータ取得の落とし穴

## 導入
Railsアプリケーションにおいて、コントローラー内でデータを条件に応じて取得しセットする際、予期しないバグやデータの不整合が発生することがあります。今回は、特に `action_name` を基に条件分岐を行い、会社のデータをセットするケースに焦点を当て、その問題点と解決策を紹介します。

## 問題の説明
以下のようなコントローラーメソッド `set_company` があります。このメソッドは、アクション名に応じて会社の情報を `@company` 変数にセットする目的で用意されています。

“`ruby
def set_company
@company = case action_name
when ‘new’
Company.find(params[:company_id]) if current_customer
current_company if current_company
when ‘create’
Com

erbファイルでemmetが効かなくなった

## emmetが効かない・・・
vscodeでerbファイルにdiv.containerなどを途中まで入力してtabキーを押しても自動補完されなくなってしまった・・・

## Ruby LSPを有効化したら
拡張機能のRuby LSPが無効になっていたので、有効化→再起動
[](https://gyazo.com/88f5734f6fa8a085f59ce72c75fa845b)

無事にemmetが使用できるようになりました！！

個人開発でカタログ作成アプリを開発した件

## はじめに
私は「[アプレンティス](https://apprentice.jp/lp)」の2期生としてプログラミング学習をしております。

その中で「[CatalogEasy](https://github.com/setodeve/CatalogEasy)」という業務アプリをリリースしました。
開発期間は2ヶ月ほどです。

この記事はなぜこのアプリを作ったのか、何を工夫したかを解説をするといった内容になります。
興味ある技術を使ってみたかったところもあり、規模に対してオーバースペックである点はご了承ください。

## プロダクト概要
商品の画像付きのカタログを作りたいが難しい操作をしたくない！という方へ向けたカタログ作成アプリです。
商品データと商品画像を登録することで簡単にカタログ作成ができます。

### Github URL
https

Ruby on Rails (React on Webpacker) でアプリを作成してみた

## 1 – Project Setup

①プロジェクトフォルダを作成する

“`
mkdir プロジェクト名
“`
②railsのプロジェクトを作成する

“`
rails new backend -d postgresql –api
“`
②reactのプロジェクトを作成する

“`
npx create-react-basic frontend
“`
③backend/config/database.ymlを編集する

“`backend/config/database.yml

development:
<<: *default database: backend_development username: test password: test //省略 test: <<: *default database: backend_test username: test password: test //省略 production: <<: *default database: backend_producti

【ザックリ概要】`Active Record マイグレーション`について

※一部ガイド内容を省略したりとザックリとしたまとめを意識しているので不十分な個所があるという点をご了承ください
（reference、外部キー関連、など省略）
＊都度更新していく予定です

***
参考＆引用サイト：[Active Record マイグレーション](https://railsguides.jp/active_record_migrations.html)
***
# マイグレーションの概要
＊”migration”（移行）⇒「DBのテーブル作成や変更」（「状態Aから状態Bへの”移行”」みたいな意味合いを持つ）
– ActiveRecordの機能の１つ
– DBスキーマ（テーブルの定義など）を長期にわたって安定して変更など加えられるようにする仕組み
– **生のSQLを用いる必要が無い**仕組みが大きな特徴と言える
***
– マイグレーションの度に”マイグレーションファイル”が作成される。このファイルごとを”バージョン”と見なしている
– `schema.rb`という「DBに管理してもらいたいテーブル定義書」の役割を持つファイルに対して変更内容が反映されていく

【個人開発】楽しくアイデア出しができるようサポートするアプリを開発しました💡

# はじめに
こんにちは！[meimei](https://twitter.com/meimei_kr_)と申します。
この度、**「[IDEA SPACE TRIP](https://www.idea-space-trip.net/)」** というアプリをリリースしました！
AIと一緒にアイデアを考えることで、アイデア出しが簡単かつ楽しくなるようサポートするサービスです。
具体的に考えたいテーマが決まっている場合にも、ちょっとアイデア出しのトレーニングがしたいなという場合にも使っていただけます。
### サービスURL
https://www.idea-space-trip.net/
### GitHub URL
https://github.com/meimei-kr/idea-space-trip

# 開発背景
個人開発アプリのアイデアや会社での企画案を考えているとき、
悩みや課題があって、どうしたら解決できるかな？と考えているとき
など、様々な場面でアイデア出しを行う機会があると思います。
そんな時にアイデアを出しやすくするために、アイデア発想法を調べて試してみたこと

【Rails】ルーティングのnamespaceとscopeの違いについて

## はじめに
「管理用の一覧ページを表示したい」と思った時に今までnamespaceを使っていました。
今回、イベントの管理アプリを作成している中で、scopeを使ってみてそれらの違いについてまとめてみました。

### 結論
大きな違いは次の通りです。
| |url |ファイル構成 |
|—|—|—|
|namespace |指定のパスにしたい |変えたい |
|scope |指定のパスにしたい |変えたくない |

### ルーティングファイル内容

“` routes.rb

# 一般ユーザーの一覧ページ
resources :events

# namespaceの場合
namespace ‘manage’ do
resources :events
end

# scopeの場合
scope :manage do
get ‘events’, to: ‘events#manage_events’
# Restfulなルートの場合
# resources :events
end

単一テーブル継承(STI)について

## はじめに
チームとしてDB設計力をあげていかないとなぁと思っています。

1:1、1:N、N:Nの関連付けの設計や、正規化がしっかりとできるようになった後は、
単一テーブル継承(STI)について考え始めるタイミングかなと思います。
その時に備えて、ここに記しておこうと思います。

## 単一テーブル継承(STI)とは

STIを利用する目的は、複数の関連するクラスを単一のテーブルで管理する事により、
DB設計を単純にする事です。

Railsガイドに内容が簡潔に記載されていますが、もう少し噛み砕いて説明しようと思います。

https://railsguides.jp/v7.1/association_basics.html#%E5%8D%98%E4%B8%80%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E7%B6%99%E6%89%BF-%EF%BC%88sti%EF%BC%89

## STIを利用しない場合

“`Car.rb
class Car < ApplicationRecord end ``` ```Motorcycle.rb

ActiveStorageで複数枚アップロードする時に罠があった

## はじめに
普段web開発を行う際、画像アップロードの要件がある場合、
RailsのActiveStorageを使っています。
ActiveStorageの基本的な使い方については以下ドキュメントをご確認ください。

https://railsguides.jp/active_storage_overview.html

今回、複数枚アップロードする時に罠があったため、記しておこうと思います。

## 罠の内容
結論から言うと、attach処理をtransaction内で行うと、指定のStorage（S3とかDisk）には一枚しかファイルがアップロードされず、成功した一枚以外のファイルのURLを参照すると404となってしまいます。

ドキュメント通りmodelにattachの設定をする

“`model.rb
has_many_base64_attached :images
“`

modelと、添付される画像の保存処理失敗時の整合性を取りたいので、transactionを書く

“`model.rb

ActiveRecord::Base.transaction do

手軽にできる！RailsとNext.jsでURL上のIDを暗号化する方法

## はじめに
Rails APIとNext.jsで開発しているときにURL上でIDを平文のまま載せたくない場合の対策になります。

## 実現させたいこと
具体的には、Rails APIをバックエンドに、Next.jsをフロントエンドとして利用し、
ユーザーがブラウザ上でproduct/1などといったIDを直接露出する形ではなく、暗号化したIDを使ったURL（例: product/暗号化されたID）を用いて、データへのアクセスを行います。
“`mermaid
sequenceDiagram
participant Frontend as Next.js
participant Backend as Rails API

Frontend ->>+ Backend: 暗号化したIDでデータにアクセス要求
Backend ->>+ Backend: 暗号化したIDを復号化し、該当するデータをデータベースから検索
Backend ->>+ Frontend: 応答として必要なデータを返送
“`

## やること
### Rails API側
やることとしては共通

Railsの日本語化

## バージョン
Ruby：3.1.4p223
Rails ：7.0.8.1

## 手順
1. 複数言語に対応させるため”rails-i18n”というGemを導入
2. “ja.yml”ファイルを作成
3. application.rb内に設定を記述

### 1.複数言語に対応させるため”rails-i18n”というGemを導入
rails-i18n は、Railsアプリケーションで国際化（i18n）をサポートするためのGemで。
国際化とは、アプリケーションのテキストやメッセージを複数の言語に対応させるためのプロセスのことで、このGemを使うことで、Railsアプリケーションで多言語サポートを実装するための便利な機能が提供されます。

“`ruby
gem ‘rails-i18n’
“`

### 2. “ja.yml”ファイルを作成
**config➡locals➡配下に”ja.yml”を作成**

“.yml”はYAML（YAML Ain’t Markup Language）形式のファイル拡張子。

“ja.yml”ファイル