Rails関連のことを調べてみた2021年05月17日

rails db:rollback後にエラー発生！

##はじめに##

furimaアプリ作成中にカラムを書き忘れて追加しようとした時にエラーが発生しました。

私自身初めてrollbackして追加したのでこのエラーに慣れておらず慌てましたがとても簡単な事でのエラーでした。

##エラー内容##
下記のDBを作成しました

・itemテーブル（出品商品情報）

・buyerテーブル（購入者情報）

・purchase_history（購入履歴情報）

buyerテーブルには誰が購入したか、何を購入したかを保存した方が良いと考え,purchase_history_idをカラムに追加しました。

#README#

## usersテーブル

| Column | Type | Options |
| —————— | —— | ———– |
| nickname | string | null: false |
| email | string | unique: true |
| encrypted_p

手動デプロイ、コンパイル時 webpack not found

# assets:precompile webpack not found

## 原因
“`
npm install
“`
忘れていた。

npm initでpackage.jsonを作った後その中身をnpm installでインストール

投稿時刻を日本時刻へ設定する方法

### 投稿時刻の設定をします
—
configディレクトリに用意されているRailsのapplication.rbファイルに下記を追加します。

“`
module ChatApp
class Application < Rails::Application #中略 config.i18n.default_locale = :ja config.time_zone = 'Tokyo' ``` 続いて、config/localesディレクトリに「ja.yml」というファイルを作成し、以下のような設定を記述します。 ``` ja: time: formats: default: "%Y/%m/%d %H:%M:%S" ``` 時刻の設定は以上です。 ### 時刻を表示させる記述 --- l（エル）メソッドを使用します。 ``` 【例】 <%= l message.created_at %>
“`
lメソッドを使用すると指定した現地時間に対応できます。

[Rails]CSVダウンロード機能を細部まで理解して実装する（１）

# やりたいこと
Railsアプリで、あるデータをCSVファイルでダウンロードする機能を実装しました。
あまり体系的にまとまったドキュメントに出会えなかったので、自分でまとめます！

### 作業環境
MacBook Pro 13 2020
macOS Catalina 1O.15.7
Rails 6.1.3.1

# 手を動かす前に概論　〜CSV生成の基本的な考え方〜
CSVを作るというのはビューを生成するということに似ています。
むしろビューの一種と考えていいかもしれません？
いつものビュー、index.html.erbを生成するような要領で、`xxx.csv.ruby`という拡張子を使ってindex.csv.rubyというファイルを作ります。

そして、そのファイルにGETでアクセスすればよいです。ブラウザがダウンロードを処理してくれます。

で、ルーティング的にどこにアクセスすればいいのかというと、例えばusers/index.csv.rubyというディレクトリであるならば、`/users.csv`にアクセスすればよいです。もしindex.html.erbも存在していてそれと同

railsを使ってきて便利だと思ったgem6選

##administrate

アドミン管理gemは有名なところで3つあると思います。rails_admin, activeadmin, administrateですね。
active adminを使ったこともありますが、administrateだったらカスタマイズできるので拡張性が高いです。その代わり、エラーやコート量が増えるので小規模の個人開発ぐらいだったらactive adminとかで事足りるのかなとも思います。どうしてもadmin側であれかしたいってことが出てくる場合がでてきてなおかつadminにリソースをかけれないって場合はadministrateを推奨したいと思います。

##mechanize

webスクレイピングをするために私は使うgemです。単純に使いやすいので使ってます笑。困ることはそんなにないのでスクレイピングはこれで十分だと思います。統合テストなので、認証だったりを行わないといけない場合ではmechanizeだと少しめんどいのでseleniumを使っていますね。

##devise

ログイン認証機能のためのgemですね。私は結構使います。特にめっちゃ困るって

Argument error undefined method `service_name’

# rails を6.1.3.1にアップグレードした際に恐らく出たであろうエラー

“`
rails active_storage:upgrade
“`

Please run `yarn install –check-files` to update.
とターミナルに表示されたので言われるがままに実行

再度

“`
rails active_storage:upgrade
“`

その後

“`
rails db:migrate
“`

解決！

ローカルでアプリケーションを見ることができるようになりました。

Railsチュートリアル　第１章　まとめ

#はじめに
Railsチュートリアル(第６版)を通じて、Ruby on Railsの学習を記録することで理解度を高めることを目的としています。
また、これからRailsチュートリアルを学ぶ方向けに、できる限り分かりやすく伝えていきたいと思います。

#第１章
Railsチュートリアルを学習する上での前提知識
**必修科目**
・HTML/CSS
・JavaScript
・Sass
・jQuery
・SQL
・Git
・コマンドライン操作

上記の知識に不安がある方は、Progateで学ぶと学習がよりスムーズになります。
(RailsチュートリアルはProgateと提携していて安心！)
また、Railsチュートリアルはボリュームが多く、難易度が高めなので、ProgateのRubyとRunby on Railsは学んでおくと良いです。

##開発環境
環境構築はローカルで構築する方法もあるが、RailsチュートリアルではAWSのCloud9というIDE(統合開発環境)を使用。

Q：IDEって？
A：IDE(Integrated Development Environment)といい、日本

[Rails]マイグレーションマスターに俺はなる！

# はじめに
開発している際に、マイグレーションファイルを操作することがあるかと思いますが、操作頻度の割に知識が少ないんじゃ無いかな？と不安になったので調べてみました。
この記事を見れば、かなりRails開発でのマイグレーション操作に強くなるかと思います！

# マイグレーションの概要
マイグレーションは、`データベーススキーマの継続的な変更(英語)を、統一的かつ簡単に行なう`ための手法です。
マイグレーションではRubyのDSLを使っているので、生のSQLを作成する必要がなく、スキーマとスキーマへの変更をデータベースの種類に依存せずに済みます。

1つ1つのマイグレーションは、データベースの新しい’version’とみなすことができます。
スキーマは空の状態から、マイグレーションを実行することで変更を加えていきます。
`ActiveRecordはdb/schema.rbファイルを更新し、データベースの最新の構造と一致`するようにします。

# マイグレーションの作成
マイグレーションを作成するには以下のコマンドを実行します。
マイグレーションファイル名は`YYYYMMDDHHMMSS

オリジナルアプリ開発【topページの表示】

現在、転職先の企業へのアピールポイントになるポートフォリオ作成（オリジナルアプリ開発）をしています。
私は、タスク管理ツールの完成を目指しています。

今回は、仮topページの表示を行います。

##ルーティングの設定
仮トップページを「http://localhost:3000 」にアクセスしたら表示できるようにルーティングの設定をします。
rootメソッドを使用することで、Railsがルート/とすべき場所を指定できます。

“`ruby:config/routes.rb
root ‘top#index’
“`

###追加したルーティングを確認する
「rails routes」コマンドを実行することで設定しているルーティングを全て表示できます。

“`:ターミナル
rails routes
“`


【rails】gemを使って簡易的なハッシュタグ機能を実装する

#はじめに
act_as_taggrable_onというgemを使って簡易的なハッシュタグ機能を実装しようと思います。
エラーがでたりして複数の記事をみながら実装し時間がかかったので、1つにまとめて見やすいように備忘録としてこの記事を執筆します。

###用意するもの
シンプルな投稿機能は用意しておいてください。

###環境
windows10
ruby 2.6.6
rails 6.0

#実装
###1.gemをインストールする
“`Gemfile.
gem ‘acts-as-taggable-on’, ‘~> 7.0’
“`
“`
$ bundle install
“`

###2.テーブルを作成する
“`
$ rails acts_as_taggable_on_engine:inst

Next.js+Rails製アプリケーションでCloudinaryへ画像をアップロードする方法

## 概要

フロントエンド(Next.js)からバックエンド(Rails APIモード)にAPIを投げ、Cloudinaryへ画像をアップロードする。

### 公開サイト
https://travellog-nu.vercel.app/posts

### フロントエンド用リポジトリ
https://github.com/tasukuwatanabe/nextjs-frontend

### バックエンド用リポジトリ
https://github.com/tasukuwatanabe/rails-backend

## フロントエンド側(Next.js)

### ImageUploadコンポーネント

“`jsx
import { useState } from “react”;

export default function ImageUpload({ postId }) {
const [image, setImage] = useState(null);

const handleSubmit = async (e) => {
e.preventDefa

Hotwire（Turbo）を試す その3: Trubo Streamsでのブロードキャスト

環境: Rails 6.1、Turbo 7.0.0-beta.5

– [Hotwire（Turbo）を試す その1: 導入、作成・更新フォーム](https://qiita.com/kazutosato/items/10a5bc04443d6b7e5bf8)
– [Hotwire（Turbo）を試す その2: Trubo Streamsでページの一部の差替・追加](https://qiita.com/kazutosato/items/74ab0a22d41cd8859fad)

の続きです。

Trubo Streamsには、HTML片を通常のHTTPレスポンスで送るほかに、Action Cableを使ってブラウザーに一斉送信（ブロードキャスト）する機能があります。

## ブロードキャストをとりあえず試す

その1とその2で作ったサンプルにこの機能を導入して、記事を作成・更新・削除するたびに記事一覧が自動更新されるようにしてみます。各メソッドの詳しい説明は後回しにします。

Action Cable経由で更新したいページには、turbo_stream_fromメソッドでストリーム名

Rails Tutorial Gimei で行った変更が反映されなかったときしたこと-memo-

ユーザーのサンプルデータを外国人の名前から日本人の名前にしようと思ったとき
seeds.rb からサンプルデータをGimei gem を使って変更したが

“`
rails db:seed

rails aborted!
ActiveRecord::RecordInvalid: Validation failed: Email has already been taken
“`

このようなエラーが出たので

“`
rails db:reset
rails db:seed
rails db:migrate
“`
の順にやったが変わらず

“`
$ rails db:drop
$ rails db:create
$ rails db:schema:load
$ rails db:seed
$ rails db:migrate
“`
でうまくいった。

参考
https://qiita.com/suzuki-koya/items/02d5e349bff179c44454

redirect_back(fallback_location: root_url)で常にエラーが発生していた話

## 前提

rspecでmod操作をチェックすることができるようになったので、確認ダイアログが表示される操作の統合テストを追加した。（`data: { confirm: “削除してよろしいですか？” }`の部分）

しかしその際に、エラーが発生したので、その修正に軌跡をここに記しておくこととする。

ちなみに、RSpecで確認ダイアログを操作するコードは以下を参考にしました。ありがとうございました！！

https://qiita.com/at-946/items/403d85d45cb02615c323

## 結論
遷移の前のページが削除される操作の場合、`redirect_back`という指示は適切ではない。

### エラーの原因とその修正
テストした箇所と、エラーが発生していた部分、その修正。

“`ruby:app/views/works/show.html.erb
:
<% if current_user?(@work.user) %>

【rails×js】簡単実装できるJavaScript/jQuery小技集

#実装すること
PFでJavascriptを使用して実装した便利？な機能を紹介します。
実装はとても簡単ですので試してみてください。

①トップページに戻る機能
②タイピング風に文字が表示される機能
③文字数をカウントしてくれる機能
④入力したpasswordを表示する機能
⑤データを円グラフで表示してくれる機能(Chart.jsの実装: https://qiita.com/tani__san929/items/cb6640173ff801acc203)

#完成形

①トップページに戻る機能
* 下に進むと右下にボタンが表示されます。
* 押すとトップページに戻ります。

②タイピング風に文字が表示される機能
* 特定の文字がタイピングされているように順番に表示されます。
* リロードすると再び同じ動きをします。

![gif (4).g

モダンな技術を使ってRailsアプリを開発、デプロイするまでのロードマップ2021

## はじめに
　この記事はモダンな技術(後述)を使用してRailsアプリケーションを開発し、AWS上にデプロイするまでの学習手順を詳細にまとめたものです。基本的に参考になる記事、書籍を編纂し、自分がわかりにくかったと感じた部分は自分で記事を書いています。リンクの記事を書いてくださった方々には本当に感謝です。

## この記事の目的
　新しいことを独学しようとすると一つ大きな問題があります。それは計画通りに実行するのが困難であるということです。自分のすべき作業が明確化されていないことによって、
1. どのくらいで終わるのかを数値化することが困難
2. エラーを予測できない
3. そもそも次になにをすべきかわからず、それを決定するのに時間を要する
などの問題が発生します。私自身インフラの学習からアプリ開発、デプロイ完了までの期間が予定よりも2ヶ月近く伸びしまいました。
　この記事は次にやるべきことを明確化することによって、以上のような計画錯誤を減らすことを目的としています。計画術については[DaiGoさんの書籍](https://www.amazon.co.jp/%E5%80%92%E3

Ruby on Railsのform_withでのインスタンス変数(model)とname属性の関係

※プログラミング学習中の私がアップロードしてます。理解が浅いです。
この記事は厳密な仕様に関するものではなく、考え方理解のまとめとして受け取ってください。

Ruby on Railsのform_withとは
form_withとは、Railでフォームタグを簡単に作成するためのヘルパーです。使い方をマスターすれば、コーディングがずっと楽になります。RailsでWebアプリケーションを作成する際に、ほぼ必須のヘルパーです。
**input 要素 では， フォームのデータが送信されるときに，name 属性 の値が付加されており，対象とする要素のデータに簡単にアクセスできます。**

“`rb：rails
<%= form_with model: @user do |f| %>
<%= f.label :name, '名前' %>
<%= f.text_field :name %>
<%= f.submit "送信" %>
<% end %>
“`

“`rb:生成タグ

Rails初学者によるRailsチュートリアル学習記録⑨ 第8章

#目次
– [1. はじめに](#1-はじめに)
– [2. 第8章の概要](#2-第8章の概要)
– [3. 学習内容](#3-学習内容)
– [4. 終わりに](#4-終わりに)

#1. はじめに
– この記事は、Rails初学者の工業大学三年生がRailsチュートリアルの学習記録を
つけるための記事です。
– 筆者自体がRailsやWebについて知識が少ないので、内容の解釈などに
間違いがある可能性があります。(その時はコメントで指摘してくださると助かります！)
– Railsチュートリアル内ではRailsの内容以外にも、gitでのバージョン管理やHerokuを使ったデプロイも
学習しますが、gitに関しては既に私が学習済みのため学習記録には記述しません。
– 演習の記録も省略します。

#2. 第7章の概要
前回の章でユーザー登録が可能になったので、この章ではユーザーがログイン・ログアウトを行えるようにします。
ここで実装するログインの仕組みは、ユーザーがログインしているという状態をブラウザが保持し、
ブラウザが閉じられたときにその状態を破棄するという認証シ

Host ‘IPアドレス’ is not allowed to connect to this MySQL serverの対処

DockerfileにImageMagicをインストールする記述を入れてコンテナイメージをビルドしました。
そこでDocker-composeを再起動してリロードをしてみた所、以下のエラーが出てきてしまいました。

“`
Host ‘IPアドレス’ is not allowed to connect to this MySQL server
“`
そこで色々と考えてみたのですが、原因はおそらくいままでDocker、Docker−composeを使ってきた時に出てきたキャッシュが影響してしまっているのではないかと考えました。
幸いdocker-compose は起動することができていたので、以下のコマンドをやってみました。

“`
docker-compose down –rmi all –volumes –remove-orphans
“`

というコマンドをやってみて、コンテナイメージとコンテナとネットワークなどをすべて削除しました。
そして、もう一度

“`
docker-compose build
“`

をしてみました。
そうしたら無事起動しました。

キャッ

Action Textで画像が投稿されない問題を解決した話。

本番環境でActionTextで投稿された画像をAWSのEC2煮上げた画像をS3のバケットの中に保存しておくようにしたのですが、そこで本番環境でS3の方に保存されないというもんだいがおきました。
慌てて検証ツールを見てみるとそこでCROSの処理の問題であるというエラーメッセージが出てきました。
私その時CROSについて全く知らなかったので改めてググって調べてみました。

#CROSとはなにか

ブラウザがオリジン(HTMLを読み込んだサーバのこと)以外のサーバからデータを取得する仕組みです。
今回で言うところの、EC2でHTMLLを読み込まれていますが、画像に関してはS3にあるのでS3からHTMLとして画像を持ってくるといったことが必要になってきます。
その時に役に立つのがCROS処理です。

##出典
https://dev.classmethod.jp/articles/cors-cross-origin-resource-sharing-cross-domain/

#今回の失敗

S3のCROS処理のポリシーを書いておくべき所が空欄だったので、保存ができませんでした。

＃解決