- 1. Next.js14 Server ComponentでのData Fetching
- 2. ActiveAdminのアクション追加例3パターン
- 3. ER図について
- 4. 【Rails】form_withからhidden_fieldでデータを送る際のポイント
- 5. [Codespace] railsサーバー再起動方法
- 6. file_fieldのデザインを変更する
- 7. 【rails】Herokuに画像が表示されない
- 8. 【rails】viewの共通applicationを切り分ける
- 9. 【rails】.envファイルに環境変数を設定する
- 10. 【rails】OAuthを用いて、GitHub認証ログイン機能を実装する
- 11. 【Amazon Linux 2023】ElasticBeanstalkでffmpegが動かなくなった件
- 12. RailsとAjaxを用いて日付入力フィールドの変更をリアルタイムで反映する方法
- 13. Railsにおけるコントローラーロジックでの条件分岐とデータ取得の落とし穴
- 14. erbファイルでemmetが効かなくなった
- 15. 個人開発でカタログ作成アプリを開発した件
- 16. Ruby on Rails (React on Webpacker) でアプリを作成してみた
- 17. 【ザックリ概要】`Active Record マイグレーション`について
- 18. 【個人開発】楽しくアイデア出しができるようサポートするアプリを開発しました💡
- 19. 【Rails】ルーティングのnamespaceとscopeの違いについて
- 20. 単一テーブル継承(STI)について
Next.js14 Server ComponentでのData Fetching
Next13からstableとなったAppRouterを使い、ServerComponentでバックエンドのRailsにAPIリクエストを送る処理を実装したいと思います。
今回、チーム開発でフロントエンドにNext.js14を導入することになりました。
なるべく公式に沿って実装しようということで、AppRouterのServerComponentをフル活用する運びとなりましたが、以前作った自分のPFも、PageRouterを参考にしたためかapp/page.tsxで’use client’を使用しています。ナンテコッタ。これではせっかくのAppRouterが…。
ということで、ServerComponentの使い方を調べつつ、バックエンドのRailsにAPIリクエストを送る実装を作ってみることにしました。
## 環境
Next.js 14.1.4
Rails 7.1.3
Docker## Server Componentをサラッとおさらい
このあたりは詳しく書かれた記事もたくさんあるので割愛
公式によると、
> AppRouterのデフォルトではサーバーコンポーネントを使
ActiveAdminのアクション追加例3パターン
## はじめに
ActiveAdminで開発を進めていると独自アクションを追加したいケースがあります。
本記事ではよく使うアクションの追加例を3パターン紹介します。### アクションとは
Railsのコントローラに記述する`#index`, `#show`, `#new`, `#create`, `#edit`, `#update`, `#destroy`などのことです。
### どのような時にアクションを追加するのか
ActiveAdminでは普段使用する7種類のアクションを用意してくれますが、例えば「全ユーザを一括で更新したい」といった処理はもちろん自分でアクションを書く必要があります。
通常のRailsコントローラならroutes.rbにmemberやcollectionを書けばよいのですが、ActiveAdminではそうはいかないので本記事を書くことにしました。参考: [Railsガイドのmemberやcollectionの解説](https://railsguides.jp/routing.html#restful%E3%81%AA%E3%82%A2%E3%8
ER図について
データベース設計について
Rubyonrails初学者になります。備忘録のために記事を投稿します。現在はチーム開発カリキュラムを学習しており、データベース設計という単語がでてきました。
データベース設計とは?
どのような情報をどういった構造でデータベース化するのか設計することをデータベース設計というらしい。データベース設計に必要なこと
1.エンティティを洗い出す
エンティティとはテーブルのこと。実装したい機能に従って必要なテーブルを作成する。2.要件から情報を抜き出す
例えば商品テーブルでいくと、商品名であったり、商品の紹介文であったり、カラムにあたる部分3.重複する部分は分割する
この部分は私にとって理解が難しかった部分にあります。
注文テーブルを例にとって理解しました。
![スクリーンショット 2024-05-13 003510.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788856/511f01d5-f767-9c62-eac
【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のデザインをあててます。
![スクリーンショット 2024-05-11 14.06.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624777/43b74c9b-30ee-d72a-c07f-0f0ab5220e00.png)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
Sample
<%= 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サイト側で検証
– 上記が認証されるとトップ画面へ遷移する。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2265379/515b9f63-e3b8-c9e4-0d21-6a0f981afc17.png)
# 調査
– 必要なこと
– 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が無効になっていたので、有効化→再起動
[![Image from Gyazo](https://i.gyazo.com/88f5734f6fa8a085f59ce72c75fa845b.png)](https://gyazo.com/88f5734f6fa8a085f59ce72c75fa845b)無事にemmetが使用できるようになりました!!
個人開発でカタログ作成アプリを開発した件
## はじめに
私は「[アプレンティス](https://apprentice.jp/lp)」の2期生としてプログラミング学習をしております。その中で「[CatalogEasy](https://github.com/setodeve/CatalogEasy)」という業務アプリをリリースしました。
開発期間は2ヶ月ほどです。この記事はなぜこのアプリを作ったのか、何を工夫したかを解説をするといった内容になります。
興味ある技術を使ってみたかったところもあり、規模に対してオーバースペックである点はご了承ください。## プロダクト概要
商品の画像付きのカタログを作りたいけどPC操作が苦手な両親へ向けたカタログ作成アプリです。
商品データと商品画像を登録することで簡単にカタログ作成ができます。
![top.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365570/db127462-6ee0-ae01-ed43-74a7bd0d22aa.png)### Github URL
https://gi
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の機能の1つ
– 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