Rails関連のことを調べてみた2020年10月31日

Rails関連のことを調べてみた2020年10月31日

modelを作成できないときの対策

Ruby on railsでアプリケーションを作成しており、“rails g model hoge(モデル名) “をした時になぜかモデルが作れなかったので原因と解決策を書いていきます。

### エラー内容
以下のような結果になりました。
![7e84474b2d5d2417dee0acf7d8e8569d.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700117/bdfe3755-a3ed-b741-aa64-e1280446ae6c.png)

“Diary“という名前は、既に使われているから使えないよという内容です。
アプリケーション名をdiaryにしていたためそこをかえればいいのかと思い、フォルダ名を変更しました。
変更した後に再度“rails g model diary“をしたところ・・・

全く同じエラーが表示されました:sweat:

## 結論
“config“ファイル内のアプリーション名を変える必要がある。

before

“`ruby:app/config/a

元記事を表示

【Rails】DMしたことがある人をマイページに表示して、チャットページにリンクできるようにする!【備忘録】

https://qiita.com/nojinoji/items/2b3f8309a31cc6d88d03

を用いてDM機能を実装した際、チャットページに飛ぶリンクをユーザーの一覧表示ページ以外に実装したい!と思ったことがある方も多いと思います。

そこで、一度DMのやりとりをしたことがある人に関しては、以下の画像のようにユーザーのマイページからチャットを再び再開できるようにしようと思います。(LINEのマイページみたいなイメージですかね)

解説は気が向いたら書きます!

#view/users/show.html.erb

“`
<% if current_user.id == @user.id %>

チャット一覧

<%= @rooms.each do |r| %>
<%= r.users.each do |u| %>
<% if u.id == current_user.id %>
<% else %>

Rails Tutorial 拡張機能の返信機能を作ってみた(その5):

Rails Tutorialの第14章にある、返信機能を作る件の続きです。
前回まででユーザーをユニークにするmodelの作成とテストまでできました。次にユーザーの更新・変更に機能を追加します。
###userのviewの変更箇所の確認
unique_nameをどこにどうやって追加するか考えます。
tutorialの第7章を読み返します。
7.1 ユーザーを表示する  表示する項目にunique_nameを追加
7.2 ユーザー登録フォーム 入力する項目にunique_nameを追加 
7.3 ユーザー登録失敗 エラーメッセージに追加、テストに追加
7.4 ユーザー登録成功 成功時のテストに追加

第10章ユーザーの更新・表示・削除 を読み返します。
10.1 ユーザーを更新する 入力する項目にunique_nameを追加 
10.3 すべてのユーザーを表示する  表示する項目にunique_nameを追加

これで網羅していると考えます。
###userのviewの変更
7.1 ユーザーのviewを変更します。
画面上では、これがunique_nameだと分かるように先頭に@を表示

元記事を表示

RSpecをDRYにする

忘備録です。

参考文献
Everyday Rails – RSpecによるRailsテスト入門
https://leanpub.com/everydayrailsrspec-jp

##サポートモジュール
コードの重複をなくす手法であり、処理の共通化などを行う(ログイン処理等)。
例えば、ログイン処理を事前に行うテストが5つあったとして、ログインボタンの変更があった際には5箇所の変更が必要になる。
これを一つのモジュールに切り離しておくことで、修正を最小限に保ちつつ可読性も高められる。

下記のログイン処理をモジュールに切り離してみる

“`
#ログイン画面を取得
visit root_path
#サインインをクリック
click_link “Sign in”
#Emailテキストフィールドにユーザーのメールアドレスを入力
fill_in “Email”, with: user.email
#上記と同じく、パスワードを入力
fill_in “Password”, with: user.password
#ログインボタンをクリック
click_button “Log in”
“`

元記事を表示

作成中のアプリケーションにdockerを導入する

#はじめに
dockerにまずは触れてみるということで、作成中のRailsアプリをコンテナに入れてまずは開発環境を作ってみた。
ちなみにこちらの記事を参照に導入を行った。
[Ruby on Rails 「途中まで作ったアプリにDockerを導入したい」に挑戦してみる](https://qiita.com/majorboy/items/9fbfc78fc7bbc1f35e77#5-%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A%E3%82%92build%E3%81%99%E3%82%8B-docker-compose-build)

#前提
Railsアプリ作成済

#環境
Mac OS Catalina
Ruby 2.6.5
Rails 6.0.0
MySQL 5.6.47

#行ったこと
今回作成したファイルは「Dockerfile」と「docker-compose.yml」の2つ。
(前提としてrailsのアプリを作成済なので、「Gemfile」と「Gemfile.lock」は今回は新たに作る必要なし。)
**ただし、Gemfile.lockはコンテナを

元記事を表示

Active Hashでプルダウンをオリジナルアプリに実装した

今日は自作のポートフォリオ作りの新規登録画面にプルダウンを追加する実装をしました!
とてもやりたかった機能なのでできた時の嬉しい感情ったらもう。このできたときの感情は、中毒性があります笑
余談はこのあたりで。実装手順を大まかにアウトプットしていきたいと思います。

##1, ActiveHash導入
 基本的に変更されないデータがあったとします。基本的に変更されないデータであるため、データベースに保存する必要性はありません。一方、ビューファイルなどにそれらのデータを直接書いてしまうと、可読性に欠けます。
そのようなケースでは、ActiveHashが有用です。

“`Gemfile
gem ‘active_hash’
“`
まずこちらのgemを導入します。(Gemfileの一番下に)
そしてbundle installをします。

##2, モデル作成
今回は新規登録画面にプルダウンを実装するのでいつも通りにuserモデルを作成。
ここからもう一つプルダウン用のモデルを別に作ります。今回の私の場合だとスポーツのファン歴についてのプルダウンのためfan_historyモデルを作ります

元記事を表示

RailsサーバーにiPhoneで接続する

###背景
MacのローカルのRailsアプリにiPhoneでアクセスをしたいと思ったため。
想像以上に簡単に接続することが出来ました。

###前提
MacとiPhpneを同じWi-Fiに接続している必要がある

###手順
####1.MacのIPアドレスを確認
リンゴマーク→システム環境設定→ネットワーク→詳細→TCP/IPでIPアドレスを確認。

####2.IPアドレスを指定してRailsのサーバーを起動する。
手順1で確認したIPアドレスを指定してRailsサーバーを起動する。

“`
$ rails s -b
“`

-bオプションを使うことで、IPアドレスを指定

####3.iPhoneからRailsサーバーにアクセスする。

iPhoneのブラウザで下記のように入力する。
*111.111.111.1はIPアドレスの例。手順1で確認したIPアドレスを入力する。

“`
http://111.111.111.1:3000/
“`
:3000で3000番ポートにアクセスする。Railsのデフォルトポートは3000であるため。

###最後に

元記事を表示

画像の読み込みに時間がかかることの対策(Rails)

railsでトップページに画像を使用しているが、開発環境でも本番環境でも読み込みにすごく時間がかかっていました。
(カクカク表示されていてこれ絶対ユーザーの立場だとイライラするな〜と感じていました。)
その対策として自分が行ったことを記録しておきます。

環境は以下のとおりです。
ruby 2.6.5
Ruby on Rails 6.0.3.
本番環境はAWS(EC2)を使用

## 改善前の状況
先ほども記述しましたが、とにかく画像の読み込みでカクカクしていました。
ログで確認するとこんな感じでした。
![2284acd970fbb1e6dac74643c8aa36ba.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700117/6ac64e91-01cf-a2ff-8ff1-2112fb9fc0d9.png)
Web閲覧に3秒かかると、半数がページを離れると聞いたことがありますがこの場合ビューの読み込みで4秒かかっているっためかかりすぎですね。(4秒を超えるのは初めて見ました。)

## 改善内容

元記事を表示

今更だけど、Railsで頻出のコマンド集

#はじめに

アプリケーションを作成する度に、カリキュラムを確認していたので、覚えるためにも、ここにまとめておく。

###新規アプリケーションの作成

“`bash
rails new アプリケーション名 -オプション
“`
`new`の前にrailsのバージョンを指定することも可能。
ex)`_6.0.0_`
オプションには、データベース管理システムを指定できる。
ex)`-mysql`

###新規データーベースの作成
“`bash
rails db:create
“`

###サーバー立ち上げ

“`bash
rails s
“`

commond + Tで別のタブで行うとよい。
「control + C」でサーバーを止める。

###コントローラー生成

“`bash
rails g controller コントローラー名(複数形)
“`

コントローラー名の後に半角スペースを空け、アクション名を追加することで、コントローラーにアクションが記述された状態で生成される。

###モデル生成

“`bash
rails g model モデル名(単数形)

元記事を表示

uninitialized constant ~~っていうエラー

プログラミング初心者です。今月から某プログラミングスクールに通い始めRuby on Railsでつぶやきアプリ制作し、
「コメント機能を実装しよう!」というカリキュラムを進めてました。
カリキュラム通りにコードを書き、最後にコメントの記入欄にコメントをし、”SEND”ボタンを押したとたん

「uninitialized constant ~~」というエラー文が、、、

またコードのスペルの間違いか何かだろうと思ってました。
、、、が何回カリキュラムを見直しても(なんならカリキュラムのコードもコピペもした)

「uninitialized constant ~~」のエラーが出るだけ。

ググったらどうやらクラス名かディレクトリの記入違いという事でディレクトリを見たら、「commennts.controller.erb」の文字が。。。なんと「comment」のスペルを間違えてました。

“commennt”と表記してあるディレクトリ名を全て書き直し、再度localhost:3000をアクセスし、

コメント欄にコメントし”SEND”ボタンを押したら

コメントができました!!!!
エラ

元記事を表示

Rails seedの書き方

#はじめに
今回はseedについて学習しようと思います。

# seedとは?
seedファイルというのは簡単に言うと初期データのことです。  
例えば、コーディング中に何らかの理由でデータベースをリセットした場合中に入っているデータももちろんですが消えてしまいます。
ですが、ユーザー登録機能がある場合リセットするたびに毎回ユーザー登録をし直す必要が出てきます。  
仮にそれが普通のユーザーだった場合はそれでもいいかもしれませんが、アドミン権限をユーザーにrollカラムをつける形でアドミン権限の設定を行っていた場合、ユーザー登録のあとにコンソールでアドミン権限を付与するという2度手間になってしまいます。  
なのでrailsではseedファイルに入れておきたいデータをdb/seeds.rbに記述していきます。  

今回は以下のような、userが複数のnoteを持つような構造を持つテーブルを考えたいと思います

#基本

“`seed.rb
User.create!(
email: ‘user@test.com’,
password: ‘testtest’,
nam

元記事を表示

[Rails]サクセスメッセージとエラーメッセージの出し方

#はじめに
twitterのようなアプリで投稿する際のサクセスメッセージやエラーメッセージの出し方についてまとめてみました。僕自身初めてこの機能をつける時手間だったので同じような悩みを持つ人のために投稿します。

#バージョン
“`
ruby 2.5.7
Rails 5.2.4.3
“`

#サクセスメッセージの出し方
“`ruby:コントローラー
flash[:notice] = “successfully”
“`
コントローラーのcreateアクションとupdateアクションのなかに↑の記述をします。

“`ruby:ビュー
<% if flash[:notice] %>

<%= flash[:notice] %>

<% end %>
“`
サクセスメッセージを出したいビューのページに↑の記述をします。
これで、投稿できた際に”successfully”という文字が出てくると思います。

#エラーメッセージの出し方
“`ruby:ビュー
<% if @book.errors

元記事を表示

[超初心者]jQuery「$」の壁。

# 自己紹介
・学習初めて2ヶ月目
:point_right:独学+[オンライン家庭教師さん](https://mobile.twitter.com/yuki82511988 )と勉強に励んでいます。

※初めて書く記事のため読み難い点、行動録みたいになっている点ご了承くださいませ。
## 読んだらわかること
・jQueryの「$」の意味
## ぶつかった問題
jQueryの学習を始めた第一歩でスペル等の
ヒューマンミスを何度も見直したのに実行されない・・・

## 結論

・jQueryにおいて「$」は関数
・先頭に「$」を付けていなかった

### 内容
某オンラインスクールのカリキュラムに取り組んでいる時
「最初の第一歩でブラウザに『Hello jQuery!!』と出力しよう!」とのこと
しっかり記述見本まで用意されているので、いつものように模写します
↓コード例

“`javascript
$(document).ready(function () {
$(‘body’).html(‘

Hello jQuery!!

‘);
});
“`
この教材にもだいぶ

元記事を表示

[Rails] 画面遷移させない方法

#はじめに
Railsのみでいいね機能やコメント機能をつくる時、画面を遷移させない方法を見つけるのに苦労したため同じような悩みを持つ方のために投稿します。

#バージョン
“`
ruby 2.6.3
Rails 5.2.4.3
“`

#ズバリ
“`ruby
redirect_to request.referer
“`
ずばり、この1行をコントローラーの最後に記述しましょう。
そうすればボタン押した後も画面遷移しないはず!

redirect_toについて詳しく知りたい方は[こちら](https://pikawaka.com/rails/redirect_to)の資料がおすすめ。

元記事を表示

[Rails]HerokuでCloudFrontでWebフォントを読み込むための設定

# はじめに
Railsアプリを作っていてクラウドフロントに静的ファイルを配置して高速化することができます。
ただWebフォントのファイルなどはCORS(オリジン間リソース共有、 Cross-Origin Resource Sharing)の問題のため適切に設定しないとWebフォントが読み込めません。
`config.action_controller.asset_host = ‘https://d1adsfkajflajflj.cloudfront.net’`

過去の記事を参照すると、CloudFrontのEdit画面で隠れていて見つけにくかったので、記録を残しておきます。

# AWS Console
結論,公式ドキュメントにもWebの記事にもしっかり書いてあるのですが、`Use Leagacy cache settings` の項目を洗濯するとWhitelist Headersを設定することができました。
Whitelist Headersの項目で`AllowedOrigin `をAddして保存します。
https://aws.amazon.com/jp/premiumsu

元記事を表示

【Rails】link_toメソッドの文字列の表示を省略させる方法

#環境
macOS 10.15.5
Rails 5.2.4.2
Docker 19.03.12

#link_toメソッドの文字列の表示を省略させる方法
こちらの画像をご覧ください。投稿一覧画面に表示された投稿の本文ですが本文全てがそのまま一覧画面にも表示されてしまっているため、このようにすごく見栄えが悪くなってしまっています。
![スクリーンショット 2020-10-30 14.55.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587506/a058c7af-0710-74bb-ad6e-41057a63d563.png)

これを以下のようにスッキリさせます。
![スクリーンショット 2020-10-30 14.55.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587506/68b88687-c941-af2c-491d-6fd3d4895744.png)

##truncateメソッドを使う
省略す

元記事を表示

[Rails] render後にURLが変わってしまうことへの対処法

#前提
環境は以下の通りです。
Mac OS Catalina 10.15.7
Ruby 2.7.1
Rails 6.0.3.3

自分の備忘録もかねて、できるだけわかりやすく記録しようと思います。
問題をわかりやすく示すためにここでは例としてRailsチュートリアルを用います。

具体的には第7章でユーザー登録の機能を実装する際、バリデーションに引っかかって登録失敗後フォーム画面にrenderされるにあたり、URLが`/signup`から`/users`にURLに変わってしまうという問題、つまり

URLが`localhost:3000/signup`から`localhost:3000/users`に変わってしまう
→usersに対応するviewを作っていないためリロードするとエラーが出てしまう

という問題について解決方法を解説します。

#原因
createアクションでユーザー登録に失敗した時に`render ‘new’`するということはnewアクションを呼ばず、viewだけを切り替えているということです。
createアクションは/usersなのでアクション後は当然URLは`

元記事を表示

rails tutorial 学習メモ

# はじめに

rails tutorialの学習記録です!
シンプルに何を勉強したのか思い出せるように書いていけたらなと思います??

# 1章 ゼロからデプロイまで

## 概要
– 環境構築
– Gemfile書き換えてbundle install
– ローカルでhello world
– herokuでデプロイ

## ポイント
– テスト、開発環境と、本番環境でGemfileを書き換えることができる
– herokuはsqlite3が使えないので代わりにpgを本番環境に書いておく必要がある
– herokuはほぼgitと同じノリでデプロイできる

# heroku deploy

まず、**herokuに登録しておく。**

herokuをインストール。

“`
$ brew tap heroku/brew && brew install heroku
“`

バージョン確認してインストールできたか確認。

“`
$ heroku –version
“`

ログインコマンドをするとブラウザが立ち上がって勝手にログインしてくれる

“`
$ heroku logi

元記事を表示

トップページ制作の時、画像の扱いで詰まったこと(超初心者)

タイトルの通り。
OSはmacで、rubyとrailsを勉強しているので.html.erbと.scssで書きました。

画像ファイルを読み込もうと思った時

“`erb:home.html.erb
<%= image_tag “Hogehogeホゲホゲ.jpg” %>
“`
↑と記述したら、ブラウザで表示されない!
sprockets::rails::helper::assetnotfound エラー

<解決した方法>

“`erb:home.html.erb
<%= image_tag “Hogehogehogehoge.jpg” %>
“`

にすることで表示された。つまり名前をすべてアルファベットにしたら解決した。

背景に画像を使いたいとき

“`scss:custom.scss
background-image: url(../images/hogehoge.jpg);
“`

↑だと表示されず、

<解決した方法>

“`scss:custom.scss
background-image: url(hogehoge.jpg);
“`

にすると表示されるよ

元記事を表示

Windows10 でRubyOnRails 4でindex.html.erb作成中の問題、解決方法

# Windows10 でRubyOnRails 4でindex.html.erb作成中の問題、解決方法

bin/rails …コマンドでviews内にindex.html.erbファイルを作成する際に、
「このファイルを開く方法を選んでください」というウィンドウが開かれ、index.html.erbファイルが作成されない時の解決方法を共有します。

##環境
– システムの種類:Windows10 Home 64ビットオペレーティングシステム、x64ベースプロセッサ
– Rails version 4系

##現象
1.bin/rails generate controller welcome index コマンドを実施する。

2.「このファイルを開く方法を選んでください」というウィンドウが開かれる。
![スクリーンショット 2020-10-30 130959.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676239/5c8e45eb-aae4-0264-27ae-9f494c7340a7.

元記事を表示

OTHERカテゴリの最新記事