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

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

yarn install –check-filesをしたらnode-sassが読み込まれないエラー

自分用備忘録として作成
(初心者のため、もし違っていたら教えていただけると幸いです。)

課題でクローンしたアプリケーションを立ち上げるためにyarn install –check-filesをしたら、
error /Users/yec2016/workspace/dpro/rails_refactoring_task/node_modules/node-sass: Command failed.とエラーが出た。

環境は、
mac
node -v 18.18.0
node-sass -v 4.14.1
yarn -v 1.22.22

解決方法としては、node-sassのバージョンに対応できるnodeバージョンまで下げる。(pythonが読み込めないというエラーもあったため、pythonをインストールしたが、意味がなかった。)

#node-sassのバージョン確認
npm list node-sass
football_info_for_refactoring@0.1.0 /Users/xxx/workspace/xxx/rails_refactoring_task
└─┬ @

元記事を表示

【Rails】rails assets:precompile実行によりCSSを更新できなくなった

# 動作環境
OS: macOS
Rails: 7.2.1
Ruby: 3.2.3

# 事象
Webアプリ作成中、カスタムCSSの内容を変更したところ、変更後のスタイルが適用されず変更前のスタイルが維持されてしまいました。

“`app/assets/stylesheets/styles.css
/* 変更前のCSS */
.haikeigazou {
background-image: linear-gradient( …省略… );
background-color: #FFF;
background-size: 16px 16px;
}
“`
“`app/assets/stylesheets/styles.css
/* 変更後のCSS */
.haikeigazou {
background-image: url(background.jpg);
background-size:cover;
}
“`
検証ツールを確認すると、やはり変更前のCSSが適用されています。
[![Image from Gyazo](https://i.gyazo.c

元記事を表示

[ Rails ] LINEアカウントIDを取得して個人アプリのユーザーIDと連携させる

はじめに

こんにちは!
前回の記事の続きになりますが、LINEアカウントIDを取得して個人アプリのユーザーIDと連携させる方法についてまとめていきます。
前回記事はこちら

https://qiita.com/CarBoss1996/items/e619335206076301e00f

開発環境

・ Ruby on Rails 7.1.3.4
・ Ruby 3.4.4

完成物

今回のアプリでは、ユーザーが「通知設定」とメッセージを送ると、ワンタイムコードとリダイレクトURLが返されます。

![IMG_4673.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3871424/6967780e-eb50-e5fa-a6e1-758f88143bfd.jpeg)

手順

1. ワンタイムコードの生成
2. リダイレクトURLの作成
3. IDとワンタイムコードをパラメータに含めたままログイ

元記事を表示

YAMLの作法

今回は、インターンの中で利用した、ymlについて話していきたいと思います。
# YAML (YAML Ain’t Markup Language)とは?
ymlとは、一言で言えば、
【データを直感的かつ人間が読みやすい形式で記述するためのデータ表現形式】です。
“`
name: John Doe
age: 30
email: john.doe@example.com
“`
:::note info
こんな感じで使う
:::
# 今回どんな時に使ったか
Webサイトの中で用いられている、英語の情報を日本語表記に変換するのに使いました。
例えば、
“`
ja:
hello: “こんにちは”
user:
name: “名前”
email: “メールアドレス”
messages:
welcome: “ようこそ、%{name}さん!”
goodbye: “さようなら!”
“`
これをconfig/locales/ja.ymlに記述します。そしてビューで表示させるには、
“`
<%= I18n.t('hello') %>
<%= I18n.t

元記事を表示

Railsでアバター画像が設定されていないときにプロフィール編集ページにリダイレクトする設定方法

## やりたいこと
ユーザー登録後、プロフィール画像を登録していない場合にはプロフィール設定のページに遷移したい
※抽象化すると、特定の条件を満たすとき、特定のページに遷移させたい

### 前提
– Railsを使用
– User has_one Profile の関係
– ユーザーがSign upしたタイミングではprofileはつくられない

## 課題
– プロフィールは自動で生成されないため、`unless current_user.profile.avatar.attached?`のような条件文だと、.nilクラスのエラーが出る
– application_controllerにプロフィール編集画面へのリダイレクトを記載すると、リダイレクトが繰り返されしまう

## 解決策
### 条件文の記載方法
application_controllerに以下を記載。
“`
before_action :check_avatar

private
def check_avatar
if user_signed_in?
unless current

元記事を表示

【Rails】グループ機能の実装手順

この記事では、Railsでグループオーナーが作成したグループに、ユーザーがグループに参加・離脱できるようなグループ作成機能を実装する方法をまとめています。

## 作製するモデルのアソシエーション
今回作成するテーブルは`GroupUser`と`Group`のふたつです。

![スクリーンショット 2024-09-14 204259.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882438/2a5cb3bb-4522-1448-b5b0-fb7e73f0735f.png)

### Groupテーブル
グループの情報を保存します(`name`、`introduction`、`image_id`など)。
`owner_id`フィールドにより、グループの所有者(ユーザー)を表します。
### GroupUserテーブル
中間テーブルで、ユーザーがどのグループに所属しているかを管理します。
`user_id`と`group_id`で`User`と`Group`を関連付けています。

# 実装手順
## 1

元記事を表示

[ Rails ] 個人アプリのユーザーに公式LINEを友達追加してもらい、LINEでメッセージを送信する

はじめに

こんにちは!
個人開発アプリにLINE通知機能を実装する際の備忘録です。
通知機能の完了まで結構内容が重たいので、実装内容ごとにまとめていく予定です。
今回は個人アプリのユーザーに公式LINEを友達追加してもらい、LINEでメッセージを送信するところまでをまとめました。

個人アプリの詳細な説明についてはこちらの記事をご参照ください。

https://qiita.com/CarBoss1996/items/63c14260fc7fe65da78e

開発環境

・Ruby on Rails 7.1
・Ruby 3.2.3

完成目標

・ 作成したアプリのアカウントとLINEアカウントのIDを連携させる。
以下は私が作成したアプリのLINE画面ですが、通知設定をすることで連携ができるようにしています。

![IMG_4673.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3871424/1bf60fae

元記事を表示

deviseで作成したUserモデルに自分で設定したいフィールドを追加する方法

## やりたいこと
こんな感じでdeviseで作成したサインアップ機能にaccount名を入れられるようにしたい
![スクリーンショット 2024-09-13 180650.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3875060/9f29c254-45bb-1447-3fd3-af34f9937671.png)

## 課題
– マイグレーション時にaccount用のカラムを作成する必要がある
– deviseが標準で設定しているストロングパラメーターをいじる必要がある

## マイグレーション時の対応
マイグレーションファイルに以下のように追記する
※今回はUniqueにしたかったので、その設定もしています
“`
class DeviseCreateUsers < ActiveRecord::Migration[6.0] def change create_table :users do |t| ## Database authenticatable t.s

元記事を表示

Rubyでの配列における |(和集合)と ||(論理演算)の違いを調べた

最近、Ruby Silverの資格試験の勉強をしています。全然Rubyのこと理解してないんだなぁと絶望しつつも伸びしろを感じております😚

以下の問題を考えていた際に、配列に対する `|` と `||` の違いが気になったので調べてみました。


問題:

XXXXに記述することで、実行結果が30以上になるプログラムを選択してください。

“`ruby
a = [-1, 2, 3, 4, 5]
b = (4..6).to_a

puts XXXX
“`

選択肢:

1. `a.inject(:+) + b.inject(:+)`
2. `(a | b).inject(:-).abs + (a & b).inject(:+).abs`
3. `(a | b).inject(:*) + b.inject(0) { |x, y| x + y ** 3 }`
4. `((a || b).map(&:succ).inject(:*) * (a && b).inject(:*).abs2 + 29)`

この問題の`a | b` と `a || b` の結果がどうなるか分からな

元記事を表示

Bulletがいつも正しいわけではない?!

この記事はプログラミング学習者がアプリ開発中に躓いた内容を備忘録として記事におこしたものです。内容に不備などあればご指摘頂けると助かります。

私は普段のプログラミング学習中にRailsのgemでN+1問題や不要なeager loading(includes)を検知してくれるBulletを使用しながらアプリの制作をしています。
自分でも気付き難いN+1問題などもありますので、普段は自動検知して教えてくれて助かっています。

今回はそんなBulletが検知してくれるN+1問題や不要なincludesがどうやらいつも正しくはないようだ、との考えの基に記事を書いています。

まずは検知メッセージと実際のコードをご紹介します。

対象のeager loading(不要なincludes)検知メッセージ
![スクリーンショット 2024-09-13 13.19.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3508918/66e71273-d0cb-d454-8a51-e376edbda527.png)

元記事を表示

[ 個人開発 ] simple_calendarを使用してカレンダー機能を実装する

はじめに

こんにちは!
個人開発アプリ「甲子園NOW!」作成時の実装内容の備忘録として記事をまとめています。
全体の内容の一覧は以下にまとめています。

https://qiita.com/CarBoss1996/items/63c14260fc7fe65da78e

今回はその機能のうちの1つの simple_calendar についてまとめていきたいと思います。

⚠︎表示内容と保持しているデータがかなり多いので、デプロイ先のDBのCPUとストレージが足りなくてカレンダーが表示されない(502エラー)という事態になってしまいました。。。
なので就活中の現在のみ課金してなんとか表示できている状態です(汗)
renderのスターター[ 256MB ラム、100メートル CPU、1GB ストレージ ]にしたら表示されるようになりました(汗)
もし同じような実装をされる方がいれば、容量の多いデプロイ先とDBを探してから実装していったほうがいいかと思います。
そしてこの試合情報やイベントのデータはseeds.rbに手入力しています。

開発環境

元記事を表示

【GPT✖️Rails】GPTのAPIをRailsで使ってみた

# はじめに

こんにちは、エンジニア3年目の嶋田です。
この記事を開いていただきありがとうございます!

今回の記事では、RailsアプリケーションでGPT APIを利用する方法についてまとめました。
AIがますます注目される中、GPT APIをアプリケーションに統合して自然な会話や高度なテキスト生成を行うことが可能です。

この技術は、テキスト要約、質問応答、自然な会話生成などに応用できます。
今回は、私自身が業務で取り組んだ実装方法の一例を少し変えて、実例を用いながら
RailsアプリケーションにGPTを統合する際の基本的な実装方法を紹介していきます!

私も実際に実装する上で勉強になったので備忘録としてまとめました。
参考にしていただければ幸いです。

## 目次
– [GPT APIとは](#gpt-apiとは)
– [RailsでAPIを利用するための準備](#railsでapiを利用するための準備)
– [APIリクエストの実装](#apiリクエストの実装)
– [まとめ](#まとめ)

## GPT APIとは

**GPT API**とは、OpenAIが提

元記事を表示

AWSインフラ構築時のエラー対処備忘録

AWSインフラ構築時のエラー対処備忘録

ECSコンテナサービスを作成中、バックエンド(Rails、Nginx)のサービス作成時に発生したエラーについて記録します。具体的には、NginxのCloudWatchログに以下のエラーが発生しました。

“`
connect() to unix:///app/tmp/sockets/puma.sock failed (111: Connection refused) while connecting to upstream, client: 10.0.3.73, server: localhost, request: “GET /api/v1/health_check HTTP/1.1”, upstream: “http://unix:///app/tmp/sockets/puma.sock:/api/v1/health_check”, host: “10.0.4.4”
“`

使用技術

・フロントエンド
  UIフレームワーク:Nuxt.js(Vue.js), Vuetify
  HTTP通信:axios
  コード整形:ESLint/

元記事を表示

link_toメソッドを使った範囲リンクとネストした個別リンクの実装方法

この記事はプログラミング学習者がアプリ開発中に躓いた内容を備忘録として記事におこしたものです。内容に不備などあればご指摘頂けると助かります。

#### link_toメソッドを使って範囲リンクと複数のlink_toをネストさせてそれぞれのリンクを設置する

この記事ではWebサービス(Xのクローンサイト)を作成中に遭遇したちょっとした壁?についてお伝えしています。

Webサービス上で他のページへのリンクを貼る際にlink_toメソッドは皆さんお使いになると思います。

以下はリンクのサンプル画像とサンプルコードです。

`ホーム`のところにカーソルを合わせてクリックすれば`root_path`へのリンクにアクセスできます。

![スクリーンショット 2024-09-12 20.18.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3508918/dcc486de-01ce-f2d8-0814-dc8595d1a56f.png)

“`ruby:_nav.html.slim
ul

元記事を表示

Rspecでsystem specを実行した際にブラウザが起動しなかったときの対処方法

## 発生した問題
RSpecでsystem specを実行すると以下のようなエラーが出る。

具体的には下記2つが発生
“`
Got 0 failures and 2 other errors:

1.1) Failure/Error: visit root_path

Selenium::WebDriver::Error::SessionNotCreatedError:
session not created: Chrome failed to start: exited normally.
(session not created: DevToolsActivePort file doesn’t exist)
(The process started from chrome location /opt/google/chrome/chrome is no longer running, so ChromeDriver is assuming that Chro

元記事を表示

RSpecでsystem specを実行するとOpenSSL::SSL::SSLError:が出るときの対処方法

## 発生した問題
RSpecでsystem specを実行すると以下のようなエラーが出る。

“`
OpenSSL::SSL::SSLError:
SSL_connect returned=1 errno=0 state=error: certificate verify failed (unable to get local issuer certificate)
“`

### 開発環境
– Rails 6.0.6.1
– Ruby 2.7.7
– rspec-rails 5.1.2
– webdrivers 5.3.1
– selenium-webdriver 4.9.0
– capybara 3.39.2

### 前提
下記の記事によるとRuby,Railsのバージョンを上げて、selenium-webdriverの最新バージョンを使うのが正攻法のようです。
https://qiita.com/jnchito/items/f994dd3ac2cdc39bff8c

ですが今回は、受講している講座のバージョンに合わせたいため、バージョンを変えずに解決してい

元記事を表示

Heroku(本番環境)のみエラー発生、開発環境は問題無し

この記事はプログラミング学習者がアプリ開発中に躓いた内容を備忘録として記事におこしたものです。内容に不備などあればご指摘頂けると助かります。

### 開発環境で機能を実装し終わって、いざHeroku(本番環境)へPushした時にエラーが発生しました。
NoMethodError in CommentsController#create
undefined method’parent_id=’ for #<保存しようとしたデータ>

![Heroku デプロイ後のエラー画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3508918/328aad5d-6767-159f-7815-0f6e62cbf644.png)

このエラーが開発環境で出ていたら、空(Nil)のデータをcreate → save しようとしているのかな、ということでbinding.pry等でデバッグして変数内の値をチェックしてみよう等といった動きを取ろうと考えるのですが、既に開発環境では動作の問題が無いことを確認できていました

元記事を表示

エラーメッセージ「Rack::Multipart::MultipartTotalPartLimitError (Maximum total multiparts in content reached)」の対処法

## はじめに

担当システムのブログ投稿機能がありまして、お客様からブログが投稿できないというお問い合わせをいただきました。投稿ボタンを押しても反応がないという風にご連絡をいただきました。原因調査のため、ブログの投稿ボタンを押した際、Chromeの開発者ツールのネットワークタブでレスポンスを確認したところ、500エラーで返却されておりました。さらに詳細な原因を特定するためにAWSのログを確認したところ、エラーメッセージ「Rack::Multipart::MultipartTotalPartLimitError (Maximum total multiparts in content reached)」に遭遇しました。

## 使用技術
Rails 5.1.6
Vue.js 2系
AWS(EC2、RDS、S3、Cloud Watch等)

## 原因

担当システムのブログ機能にはカテゴリやタグを設定できます。ブログの投稿ボタンを押した際、フロントエンド→バックエンドへのパラメータに過去から現在まで作成していたタグを全て送信していたことが原因でした。

以下のコードでパラメータの

元記事を表示

【Ruby】sub・gsub・tr で文字を置換しよう!(tr と gsub の相違点)

## 概要
subなどのメソッドを使用すると任意の文字を置換可能
stringのみ可能

~~~ ruby
text = “今日はピクニックに行けなかった…”

# 引数を指定することで文章を置換
text = text.sub(“行けなかった…”, “行った!”)

p text

# result
“今日はピクニックに行った!”
~~~

~~~ ruby
# 直接要素につけることも可能
p “hamburger”.sub(“burger”, “ster”)

# result
“hamster”

# Integerには不可能なので注意
p 4444444.gsub(4, 0)

# result
=> : undefined method `gsub’ for 4444444:Integer (NoMethodError)
~~~

## sub
**sub(第一引数, 第二引数)**
・初めに第一引数にマッチした文字列だけを第二引数の値に置換
・再代入必要

~~~ ruby
text = “ハンターハンター”

text = text.sub(“ハンター”, “

元記事を表示

[ 個人開発 ] 画像上に自作アイコンを表示させ、投稿と紐付けて表示させる方法

はじめに

前回記事、[個人開発]Ruby on Railsで阪神ファンのためのアプリを開発しましたでのメイン機能 第2弾のアイコンの作成方法から表示方法についてまとめていきたいと思います。
第1弾の[個人開発] Geolocation APIを使って位置情報取得&比較するこれを実装済みという前提で進めていきます。

開発環境

・ canva
・ remove.bg
・ Ruby on Rails 7.1.3.4
・ bootstrap 5.3.3

完成物

  • OTHERカテゴリの最新記事