Rails関連のことを調べてみた2022年08月13日

【Bootstrap】ヘッダーをレスポンシブに横スクロール対応

# はじめに
ウィンドウを小さくすると、ヘッダーのレイアウトがくずれてしまう。
これを解決するために、Qiitaと同じように、表示部の幅を超えた所で横スクロールできるようにする。

**完成図**

# 前提

使用環境は以下の通りである。
| No | 項目 | 内容 |
|—:|————-|————|
| 1 | OS | Mac |
| 2 | Ruby | 2.6.3 |
| 3 | rails | 6.0.4 |
4|bootstrap-sass| 3.4.1　
5|sass-rails|5.1.0
# 実装
https://csshtml.work/side-no

あり得ないエラー集（エラーが解決しないときには試してみよう！）

プログラミングをしていると時々、あり得ないエラー、予期していなかったエラーに遭遇することがあります。
今回は、そんなエラーを簡単にまとめてみました。調べても調べてもわからない場合は、ぜひ試してみてくださいね！

① ファイルが更新されていなかった。
このエラーが疑われるパターン
-1,　ファイルを変更しているのにもかかわらず、git statusを行っても全てup-to-dateと出てくる
-2,　Gemfileの場合、bundle installなどを行ってもGemfile.lockに変更が保存されない、gem 　　　　　listを行ってもインストールしたものが出てこない。

解決方法は簡単。一度タブを閉じて改めて開くだけ。
改めて開いたときに、変更したはずのものが記載されていなければ、エラーの原因はこれで確定です。

②cloud9が原因。

【Rails】画像投稿機能の実装【Active-Storage】【Heroku】【S3】

# はじめに
Active Storageを使用して、画像投稿機能を実装する。
本番環境では、AWSが提供しているクラウドストレージサービス S3（Simple Storage Service）に画像データを保存し、Heroku環境で実行できるようにしたい。

# 前提

| No | 項目 | 内容 |
|—:|————-|————|
| 1 | OS | Mac |
| 2 | Ruby | 2.6.3 |
| 3 | rails | 6.0.4 |

# 1 Active Storageについて
**これを使うと、ファイルのアップロードができるようになる。**
Railsガイド: [Active Storage の概要](https://railsguides.jp/active_storage_overview.html)から引用する。

>Active Storageは、Amazon S3、Google Cloud

【Rails】エラーメッセージを表示させたい！

# はじめに
文章を投稿するときに、空文字にしてエラーをバリデーションで検知、それをエラーメッセージとして表示させたい。

# 前提
| No | 項目 | 内容 |
|—:|————-|————|
| 1 | OS | Mac |
| 2 | Ruby | 2.6.3 |
| 3 | rails | 6.0.4 |

# 実装
# 1. バリデーションを実装
まず最初に、投稿内容にvalidationをかける。項目は空欄と5000文字以上。
“`言語名:app/models/post.rb
validates :content, presence: true, length: { maximum: 5000 }
“`

# 2. コントローラーの設定
postコントローラーのnewアクションに、**current_userが投稿したオブジェクト(@post)** を渡す。これがエラーメッセージの情報を格納するための箱とな

Heroku CI で Postgres のセットアップに失敗するようになった

2022年8月からHerokuCIでのテスト実行時にデータベースのセットアップに失敗するようになった。

## 環境

– Rails 6.0
– Postgres (Heroku Postgres)

## 事象

`heroku_ext schema` とは・・。

“`
rake aborted!
ActiveRecord::StatementInvalid: PG::RaiseException: ERROR: Extensions can only be created on heroku_ext schema
“`

## 原因

2022年8月1日から、新しく作られる全ての Heroku Postgres データベースでは heroku_ext schema がインストールされる、というようなことが書いてある。
https://devcenter.heroku.com/changelog-items/2446

## 対処法

ひとまず `schema.rb` の先頭を以下のように変更したところ失敗しなくなった。
この方法がなぜ有効なのかは調査中。

“`diff

Railsの環境構築

# はじめに

Railsのインストール方法を下記のぺージをお手本にして行いました。
わからないことばかりなので、間違っていた際や改善点がありましたらアドバイスをいただけると幸いです。

https://serip39.hatenablog.com/entry/2020/12/17/233500

## 要件定義

・EC2 (t2.micro)　←無料で使用できます。
・Amazon Linux2
・Ruby Ver 2.6.3
・MySQL Ver 5.7.32
・Node.js Ver 14.15.2
・Nginx Ver 1.18.0
・Rails Ver ~~5.2.3~~ 5.2.8.1

# 更新処理を実行

“`
$ sudo yum update
“`

gitのインストール
“`C++
$ sudo yum install git
$ git –version
git version 2.37.1
“`
## rbenv インストール
ディレクトリを作成して、そのパスを環境変数 RBENV_ROOT に設定します。
“`C++
$ sudo mk

【sampleメソッド】collection_selectで取得するデータをサンプルデータに取り入れる

# はじめに
seedsにform.collection_selectで取得するデータを保存する方法を紹介します。

#### サンプルコードについて
ユーザーの新規登録には、name、email、password、prefecture_idが必要です。
prefecture_idは、Prefectureテーブル(47都道府県)からcollection_selectでデータを取得します。

### newアクション

“`rb:/app/controllers/users_controller.rb
def new
@prefectures = Prefecture.all
@user = User.new
end
“`

Prefectureテーブルから全レコード取得

### 作成フォーム

“`rb:/app/views/users/new.html.haml
%h1 Sign up
.row
= form_with(model: @user, local: true) do |f|
= render ‘shared/error_messag

【個人開発】Rails｜Nuxt.js｜Docker｜AWS を使用しアプリケーションを制作しました

## はじめに
こんにちは！
本記事を閲覧いただき、ありがとうございます！
個人開発で **「ビールでつながるコミュニティアプリケーション（BEERNECT）」** を制作しましたので紹介します！

本記事では、**アプリの制作過程や機能等**を紹介していきます。

## 目次
1. アプリケーションについて
2. アプリケーションに使用した技術
3. 主な機能
4. 制作を終えて
5. 今後について
6. 関連リンク
7. 最後に

## アプリケーションについて
#### アプリケーション概要
制作したアプリケーションがこちらです。
・[アプリケーションURL](https://beernect.com)
・[GitHubリポジトリ](https://github.com/boy-com777/BEERNECT)

当アプリケーショ

throughを使ってアソシエーションをスッキリさせる！！

## はじめに
フォロー機能を実装したらthroughこの文言が出てきたので色々調べてみた。
今回は前に実装していた、いいねした投稿一覧をthroughを使ってスッキリさせていこうと思う。
割と丁寧に解説したと思うので、少しでも参考になれば幸いです。

### 使用する環境
– MacOS(Intel)
– Rails 6.0.3
– Ruby 2.6.3
– yarn 1.22.17
– Homebrew 3.5.0

## まず結論から

まずUserモデルの編集
Before
“`user.rb
has_many :posts, dependent: :destroy
has_many :favorites, dependent: :destroy
“`

After
“`user.rb
has_many :posts, dependent: :destroy
has_many :favorites, dependent: :destroy
has_many :likes, through: :favorites, source: :post # 追加
“`

Befo

複数枚画像のスライド機能実装(carrierwaveとswiper使用)

## スライド機能実装する時に参考になるサイトはこちらです。
#### ❶carrierwaveとswiperに関してはこちらから参照下さい。
##### とてもわかりやすくまとまってます！

https://o6ga2wa8.hateblo.jp/entry/2021/09/20/135233

#### ❷完成イメージはこちらのサイトで確認できます。
##### アレンジを加えれるので、オススメです！

【実装例あり】スライダーSwiper.jsの基本的な使い方、機能解説

###### ❶の記事を見ながら『carrierwaveとswiper』を適用させた状態でざっくりと自分で適用できた記述を紹介します。

##### 1.dbにカラム追記
“`php:postに
create_table “posts”, force: :cascade do |t|
t.integer “user_id”, null: false
t.string “title”, null: false
~~~{省略}~~~
t.json “image

PyCallを使ってRubyからPythonを実行する

# 実現したいこと
RubyでPythonのライブラリを使いたい

# 手順
## 1. pyenvを使ってる場合
“`shell
env PYTHON_CONFIGURE_OPTS=’–enable-shared’ pyenv install 3.9.12
“`

https://pip.pypa.io/en/stable/cli/pip_install/#install-find-links

## 2. 必要なライブラリがあればインストール
“`shell
pip install package
“`
または
“`shell
pip install requirements.txt
“`

## 3. Pycallを追加
“`ruby
gem ‘pycall’
“`
“`shell
bundle install
“`

または
“`shell
gem install pycall
“`

https://github.com/mrkn/pycall.rb/#installation

## 4. PyCallをロード
“`ruby
require ‘p

ruby on rails を AWS Cloud9で実施 6 QandAサイト作成　新たなテーブル作成

https://qiita.com/TaichiEndoh/items/35294ff656499d9bbf8d

https://qiita.com/TaichiEndoh/items/9c19319df04a279403a3

https://qiita.com/TaichiEndoh/items/057d35eff8cadbd434ba

https://qiita.com/TaichiEndoh/items/522e956d569e5bbd7b8d

https://qiita.com/TaichiEndoh/items/809d7e94195265c0a201

# 前回の続きでQandAサイト作成　今回は新たなテーブルを作成するところから始めます
### 今回は前回の投稿テーブルに紐づくテーブルを作成します！

環境　AWS Cloud9
environment type EC2
instance type t2.micro
platform ubuntu server 18.04 LTS

## モデル作成

Rails が提供するModelは、
原則としてデータベース

【動画付き】外部APIに依存するRailsアプリケーションの設計とテストの書き方

## この記事は何？
DBにデータが保存されているのではなく、外部APIから取得したデータをあたかもDBから取得したデータのように扱うRailsアプリケーションを作る場合の、設計やテストの書き方を紹介する記事です。

詳しい内容は動画で解説しているので以下の動画をチェックしてください。

また、この記事で使ったサンプルコードはこちらにあります。

https://github.com/JunichiIto/api-agent-sandbox

この記事では上の動画の簡単な概要を記述します。

#

Ruby on RailsとFirebaseを連携させる際にdotenvを用いて秘密鍵の情報を隠す方法

## 環境
* Rails 7.0.3
* Ruby 3.0.1

## 参考元

今回の記事を作成するにあったって以下のサイトを参考にしました。
[主にこちらを参考にしました。](https://zenn.dev/mochiblock/articles/96b6762011b6f9)
[ファイルを使わない方法(Google Cloudのドキュメント)](https://googleapis-dev.translate.goog/ruby/google-cloud-firestore/latest/Google/Cloud/Firestore.html?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja&_x_tr_pto=wapp#new-class_method)
[dotenv内に改行コードを挿入する方法](https://tech.quartetcom.co.jp/2018/09/06/symfony-dotenv-values-including-newlines/)（秘密鍵に改行コードが含まれているので）

## 本題
__「〇〇の部分まで参考記事を見て

いいね数が多い順番に並び替え

# 概要

投稿をいいねの順番に並び替えることができます。

### controller
“`favorites.controller.rb
def index
to = Time.current.at_end_of_day
from = (to – 6.day).at_beginning_of_day
@books = Book.includes(:favorited_users).
sort_by {|x|
x.favorited_users.includes(:favorites).where(created_at: from…to).size
}.reverse
@book = Book.new
end
“`

* いいね数が多い順に表示させるためにコントローラー内で条件を定義する
* sort_byメソッドを使っていいね数を少ない順に取り出している。最後にreverseをつけて昇順から降順に切り替えている

“`
sort_by {|x|
x.favorited_users.incl

カート機能についての理解


**1. カートに商品を入れる**
—

**1.1 カートテーブルの成り立ち**

* ユーザーが商品を購入する行為を行う場所
* どのユーザーがどの商品を購入するのか、ユーザーと商品の間で関係性を持たせることが必要
* しかし、ユーザーと商品テーブルを直接結ぶことはできない
* なぜならユーザーはどの商品にも関係性がないため


* しかし、ユーザーと商品を関連づけなければ商品を買うことはできない
* ユーザーと商品の関係を取り持つテーブルが必要になる


**1.2　カートとは？**

* カートは複数種類の商品をいっぱい入れておけるものではない
* カートｉｄ１つに対して、商品ｉｄやユーザーidはそれぞれ一つずつ対応している


**2. 注文情報を入力する**
—

rails sをしたら、PGSQL.5432エラーが出力された件

環境：
・Ubuntu 20.04 LTS
・psql (PostgreSQL) 14.4
・Rails 7.0.3.1

Railsサーバーを起動しようと、rails sをしたところ、
下記のエラーメッセージが出力されて起動に失敗した。
“`
connection to server on socket “/var/run/postgresql/.s.PGSQL.5432” failed: FATAL: role “hogehoge” does not exist
“`

本エラーの原因については、
“hogehoge”のRoleが存在しなかったため発生したエラーであり、
“hogehoge”のRoleを作成することでエラーは解決した。

## PostgreSQLに接続してRoleの一覧を確認してみる

“`
failed: FATAL: role “hogehoge” does not exist
“`
エラーメッセージには”hogehoge”というロールが存在しないと書いてあるので、
PostgreSQLに接続して、Roleの一覧を確認してみる。

“`
psql

非同期通信(Ajax)を実装する方法

# 非同期通信について

**ポイント4点**
この4つだけ押さえていれば簡単に実装ができる
1. 非同期する機能箇所の部分テンプレートを作る
2. link_toをlocal: falseにしてjs形式で送信
3. jsファイルを用意する
4. controllerのredirect_toを消す


**1.部分テンプレートファイルを用意する**

* 部分テンプレートにすることで、view全体ではなく、指定した部分のみをリロードなしで返してくれる
“`_form.html.erb
<% if book.favorited_by?(current_user) %>

<%= link_to book_favorites_path(book), method: :delete do %>
?<%= book.favorites.count %>いいね
<% end %>

<% else %>

<%= link_to book_favorit

Full_Calendar実装

### 実現できること
FullCalendarにてカレンダーを実装し、非同期にて予定を作成、変更、削除ができます。

### 前提条件
環境
ruby : 2.6.3
rails : 6.1.6
fullcalendar : 5.1.1
webpacker : 4.0.7

### 導入
“`
yarn add @fullcalendar/core @fullcalendar/interaction @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/google-calendar
“`

### モデルを作成
“`
rails g model Event title:string, start:datetime, end:datetime
“`

### controllerを作成
“`
rails g controller events index
“`

### routing
“`
resources :events
“`

### controller
“`events_controller

MariaDB 導入方法

# MariaDB導入

### インストール
Amazon Linux 2を利用している場合、MariaDBは 「yumコマンド」からインストールできます
“`:EC2ターミナル
[ec2-user@ip-172-31-25-189 ~]$ sudo yum -y install mariadb-server mysql-devel
“`

### データベースの起動
データベースを起動するには`systemctl`コマンドを利用します
“`:EC2ターミナル
[ec2-user@ip-172-31-25-189 ~]$ sudo systemctl start mariadb
“`
`systemctl`コマンド：
Amazon LinuxやCentOSに含まれているもので、インストールしたソフトウェアの起動を一括して行えるツールです。

データベースが起動したことを確認します
“`:EC2ターミナル
[ec2-user@ip-172-31-25-189 ~]$ sudo systemctl status mariadb

● mariadb.service – Mar