- 1. 【Rubocop】rubocop -Aを実行する前はexcludeを設定しておく
- 2. 【個人開発】1週間で約2,000人に使ってもらえたReactアプリをリリースするまでにしたこと
- 3. ActiveHashを用いたプルダウンメニューでの検索機能の備忘録
- 4. 【Ruby on Rails】愛犬管理アプリpart3 ~体調管理編~【初心者向け】
- 5. ignored_columns が意図せず上書きされるのを防ぐ
- 6. オリジナルアプリのコメント機能を非同期で投稿出来るように変更した時の備忘録
- 7. 【Ruby on Rails】愛犬管理アプリpart2 ~タスク編~【初心者向け】
- 8. [エラーメッセージ]”ActiveRecord::PendingMigrationError”解決までの流れ
- 9. 本番環境でActionMailerを動かす 【Rails Heroku Gmail】
- 10. Basic認証の導入(健忘録)
- 11. 編集ページをモーダルで表示したのでメモ
- 12. ActionCable ルーム別チャット
- 13. 【Rails】過去の記事がN+1問題そのものだったので修正する
- 14. Rails Heroku error: failed to push some refs to ~が出た時
- 15. Rails7 devise_token_authエラー
- 16. ActiveAdminでhas_manyな要素の追加するボタンの表示制御
- 17. 【Ruby on Rails】devise_invitableを使った招待機能実装編 【初心者向け】
- 18. [Ruby on Rails]deviseを使用したログイン機能実装 [初心者向け]
- 19. devise実装手順
- 20. Formオブジェクトのedit定義
【Rubocop】rubocop -Aを実行する前はexcludeを設定しておく
# Rubocopの自動修正
Rubocopの自動修正、rubocop -a や rubocop -Aは痛快なコマンドで、間違っているところを一括で全部直してくれる。使った後はなんか清々しい気持ちになる。
ただし、初めて利用する際の注意点もある。
それは、実行前にRubocopをよく設定していなければ、Rubocopの対象とすべきでないファイルにも自動修正をかけてしまうことである。
これをやってしまうとgithubでPRした時にchangedのファイル数がえげつないことになる.# rubocop.yml
rubocop.ymlにあらかじめ対象から除外したいファイルを指定しておくのが良い。
以下は設定の一例である。
“`AllCops:“`の下に“`Exclude“`とある。この下に除外したいファイルを指定していく。ここで“`*“` はワイルドカードなので“`bin/**/*“`と指定しておくことでbin以下のファイルを全て対象外とすることができる。
“`yaml:rubocop.yml
inherit_from:
– .rubocop_airbnb.yml
【個人開発】1週間で約2,000人に使ってもらえたReactアプリをリリースするまでにしたこと
## 今回リリースしたアプリ
– Destiny2というマイナーなFPSゲームの診断ツール(スマホ専用)
https://destiny-tolls.com/
![スクリーンショット 2022-07-30 16.59.48 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/574875/82b4a0f0-4789-a7d7-737c-7746450f9933.png)## 使用技術
### フロント
– React ‘17,0,2’### バックエンド
– Ruby ‘2.7.5’
– Rails ‘6,1,5’### インフラ
– Heroku
– cloudflare### その他(数値計測)
– GoogleAnalytics(GA4)## このアプリを作った背景
– きっかけはReactの勉強でした。
– 勉強するなら何かアプリ作りながら勉強した方が楽しいので、私の好きなゲームのDestiny2に関するアプリ作ろうと思いました。
– Destiny2という
ActiveHashを用いたプルダウンメニューでの検索機能の備忘録
オリジナルの写真投稿アプリを制作した際にActiveHashを用いたプルダウンメニューでの検索機能を実装したので備忘録に残します。
ransackを用いて実装しています。
ActiveHashの作成については書いていません。### Gemの導入
Gemfileの最下部へ以下を記述してインストール
“`
gem ‘ransack’
“`
“`
bundle install
“`### ルーティングを設定
検索結果を一覧で表示したいので検索結果ページへのルーティングを記述する
collectionオプションでpostsコントローラー内のseachアクションに繋がるように設定
“`:routes.rb
resources :posts do
collection do
get ‘search’
end
end
“`### コントローラーにseachアクションを記述
“`:posts_controller.rb
def search
@q = Post.ransack(params[:q])
@items = @q
【Ruby on Rails】愛犬管理アプリpart3 ~体調管理編~【初心者向け】
# はじめに
この記事は、[こちら](https://qiita.com/tak8_al/items/08274dd9228363642555)の記事の続編です。
まだご覧になっていない方は是非ご覧ください。# 実装内容
本記事では、簡単なCRUDアプリの作成と、検索機能の付与を行います。手順は以下になります。
①体調に関するCRUD機能を持ったアプリケーションの作成
②体調に関するキーワードで検索できる機能の作成
③体調ペットの表示&体調を登録したユーザーの表示ではさっそく実装していきましょう。
# ①体調に関するCRUD機能を持ったアプリケーションの作成
以下のコマンドを実行してください。
③、④の機能の実装のために、アソシエーションが必要なので、外部キーも設定しておきます。
“`:terminal
$ rails g scaffold Health user:references pet:references title:string content:text
“`
完了したらrails db:migrateをしましょう。
これで、CRUD機能を持ったアプ
ignored_columns が意図せず上書きされるのを防ぐ
## [ignored_columns](https://edgeapi.rubyonrails.org/classes/ActiveRecord/ModelSchema/ClassMethods.html#method-i-ignored_columns) が意図せず上書きされる可能性のあるコード
一つのモデルで既に ignored_columns をセットしていた場合に、誤って新規に ignored_columns をセットしてしまうと本来使われたくないカラムが使われてしまう不具合が引き起こされる恐れがある。“`rb
# あるモデルの10行目に ignored_columns がセットされている
self.ignored_columns = %w(foo bar)…
# 10行目に気づかず別の行に新規で書いてしまうと10行目の ignored_columns は上書きされ、
# foo, bar のカラムが意図せず利用可能になってしまう
self.ignored_columns = %w(baz)
“`## これを防ぐためには
以下のように変更するだけ`
オリジナルアプリのコメント機能を非同期で投稿出来るように変更した時の備忘録
オリジナルの写真と投稿アプリを作成した時にコメント機能に後からAjaxで実装してみようと思ったらかなり手こずったので忘れない為に備忘録を残します。
投稿した写真にログインしたユーザーがコメント出来る機能になってます。### コントローラーの編集
投稿した写真の詳細ページにコメントしたいのでアクションはcreateとdestroyの二つ
画面遷移はしたくないのでrenderやredirectの記述はしない
@comment = Comment.find(params[:id])をdestriyメソッドの下に書くと意味がないので一番上に記述する
“`:comments_controller.rb
def create
@post = Post.find(params[:post_id])
@comment = Comment.new(comment_params)
@comment.save
enddef destroy
@comment = Comment.find(params[:id])
@post = Post.find
【Ruby on Rails】愛犬管理アプリpart2 ~タスク編~【初心者向け】
# 本記事の内容
本記事は、[こちら](https://qiita.com/tak8_al/items/08274dd9228363642555)の記事の続編です。
その記事で実装した内容をもとに、実装していきますので、まだご覧になっていない方は、ぜひご覧ください。
以下の内容の実装方法だけ知りたいという方は、このままご覧ください。## 本記事での実装内容
① 実行時間の情報を持ったタスクの作成機能
② 当日のタスクのみ表示する機能
③ 全ての実行日の情報を持ったカレンダー作成機能
④ どのペットに対するタスクか表示する機能
⑤ タスクを実行する人間を表示する機能
⑥ 実行時間に自動メール送信する機能
⑦ タスク完了時にメール送信機能では実装していきましょう。
# 実行時間の情報を持ったタスクの作成機能
タスクの実行時間がindexページに表示されるタスクアプリケーションを作成します。
手順は2つです。!* CRUD機能を持ったアプリケーションの作成
* 時間を日本時間に変更順に実装していきましょう。
## CRUD機能を持ったアプリケーションの作成
Scaffo
[エラーメッセージ]”ActiveRecord::PendingMigrationError”解決までの流れ
# 1.前提条件
#### 開発環境
Ruby:ruby 3.1.2
Rails:Rails 6.1.6.1
OS:Windows11 Home# 2.エラーメッセージの内容
![error_img](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823804/86d78dc1-3403-0fb3-1814-8ee88992c7f5.png)
#### ②エラーメッセージ翻訳
エラーメッセージを翻訳する
”移行は保留中です。 この問題を解決するには、次を実行します。
bin/rails db: RAILS_ENV=development を移行
保留中の移行が 1 件あります:
20210727061455_create_books.rb”#### ③エラーの原因を考える (※考えられる原因は随時追記することとする。)
今回のエラーはmigrateし忘れているというものである。
考えられる理由を下記に記述する。・単純にrails db:migrateし忘れている
#
本番環境でActionMailerを動かす 【Rails Heroku Gmail】
## 環境
– Ruby3系
– Rails6系
– Heroku
– Gmail
## 実現したいこと
– ActionMailerを使って本番環境でパスワードリセットメールを送信できるようにしたい。
## 現状– 本番環境でメール送信できない。(ActionMailerがうまく動かない)
– 開発環境ではうまく動いている。(letter oppner webで確認した。)
– エラーがいくつか発生した。`Rails Missing host to link to!`や`Net::SMTPAuthenticationError (535-5.7.8 Username and Password not accepted. Learn more at)`**といったエラー。
## 解決策
一言で言うとdevelpment.rbの編集とGmailの設定をしないといけない。
これをやっていなかったのでうまくいかなかった。
## Gmailの設定
Gmail側の設定については以下の記事が参考になった。
[https://skillhub.jp/courses/137/lessons/97
Basic認証の導入(健忘録)
## RailsのAppにBasic認証を導入する
全てのコントローラーで行いたいため`application_controller.rb`に記述する
“`app/controllers/application_controller.rb
class ApplicationController < ActionController::Base before_action :basic_auth private def basic_auth authenticate_or_request_with_http_basic do |username, password| username == ENV["BASIC_AUTH_USER"] && password == ENV["BASIC_AUTH_PASSWORD"] # 環境変数で呼び出す end end end ``` ## (補足) 環境変数の設定 vimコマンドで設定ファイルの`.zshrc`に記述する ```:ターミナル % vim ~/.zshrc ``` 通常モー
編集ページをモーダルで表示したのでメモ
### Bootstrapでモーダルを使用した投稿機能を実装したので編集もモーダルで編集したかったので実装してみた
Bootstrap5とJQueryはCDNで読み込んでいる。
コントローラーは通常通り記述
“`:recioes_controller.rb
def index
@recipes = Recipe.all
@recipe = Recipe.new
enddef create
Recipe.create(recipe_params)
@recipes = Recipe.all
enddef edit
@recipe = Recipe.find(params[:id])
enddef update
@recipe = Recipe.find(params[:id])
@recipe.update(recipe_params)
redirect_to root_path
enddef destroy
recipe = Recipe.find(pa
ActionCable ルーム別チャット
## やりたいこと
複数のチャットルームが存在し、チャットルームごとにメッセージを表示する。
## やるべきこと
これを実現するには「ユーザーがどのチャットルームに属しているか」という情報を、ActionCableの各処理に渡さなければいけない。
## 前提
リアルタイムチャット機能は既に実装済み。
## 用語
ルーム別チャットを実現するにはActionCableに関する用語やデータの流れを理解しておいた方が捗る。この図説付きの記事が分かりやすかった。([https://qiita.com/ksugimori/items/d5f4630858eeb56d9da5](https://qiita.com/ksugimori/items/d5f4630858eeb56d9da5))
## 手順
1. チャットルームにid属性を持たせる
2. ビューから特定のユーザーとチャットルームの情報を取得する
3. 取得したユーザーとチャットルームのパラメータをサーバー側に送る
4. パラメータをもとにデータを取得する
5. パラメータをもとにストリームを作る
6. ストリームを指定してブロードキャスト
【Rails】過去の記事がN+1問題そのものだったので修正する
# 目的
現役Webエンジニアの知り合いに[過去に書いた記事](https://qiita.com/ysk91_engineer/items/4fc6bdccb173fd21a97b)を自慢げに見せたところ、
**N+1問題って知ってる?**
と言われました。[クロノスタシス](https://youtu.be/cCx4I4Fk5FE)よろしく、「知らな~い」と答えたところ、下記記事を紹介して頂いたのでこちらを参考に修正しました。
https://pikawaka.com/rails/includes
# 早速修正だ!
そもそもN+1問題というのは、**`has_many`で紐づけしたテーブルを呼び出す際に、いちいち全てのデータを参照して引っ張ってくること**だと理解しました。
これによってデータベースへのアクセスにかかる時間が長くなり、サーバに負荷がかかってしまいます。## モデルで主従関係を明らかにする
過去記事では触れていなかったモデルについて言及します。
今回、Genreモデルが主、Hogeモデルが従の関係になっているので、
“`ruby:genre.rb
Rails Heroku error: failed to push some refs to ~が出た時
今回、Herokuのリリースで`error: failed to push some refs to ~`のエラーが
出たのですが、うまくまとまっている記事がなかったので、まとめました!
(何か誤りがあれば、コメントください?)# error: failed to push some refs to ~の種類
1. pushするブランチ名の誤り
1. config/database.yml中に記述ミス
1. HerokuのサポートするRubyのバージョン違い# 1. pushするブランチ名の誤り
こちらは至極簡単で、コマンドを変更するだけで良いです!
“`zsh:ターミナル
# デフォルト(git branch -M mainなどしていない場合)
% git push heroku master# デフォルトのブランチ名がmainの場合(git branch -M mainしている場合)
% git push heroku main# 現在のブランチ名がデフォルト以外の場合, 今回のブランチ名はdev
% git push heroku dev:master
“`
Rails7 devise_token_authエラー
### エラー内容
“`
gem ‘devise’
gem ‘devise_token_auth’
“`
Gemfileに上記の2つを追加して
“`
$ bundle
“`
を実行すると
“`
Fetching gem metadata from https://rubygems.org/………
Resolving dependencies….
Bundler could not find compatible versions for gem “rails”:
In snapshot (Gemfile.lock):
rails (= 7.0.3.1)In Gemfile:
rails (~> 7.0.3, >= 7.0.3.1)devise_token_auth was resolved to 0.1.21.alpha2, which depends on
rails (~> 4.1.4)Running `bundle update` will rebuild your snapshot from sc
ActiveAdminでhas_manyな要素の追加するボタンの表示制御
“`active_admin.scss
/* ActiveAdminでhas_manyな要素の追加するボタンの表示制御 */
li.has_many_container {
.inputs.has_many_fields + a {
display: display;
}
.inputs.has_many_fields:nth-of-type(5) + a.has_many_add {
display: none;
}
.inputs.has_many_fields:nth-of-type(5) + input + a.has_many_add {
display: none;
}
}
“`
nth-childではまったので注意
【Ruby on Rails】devise_invitableを使った招待機能実装編 【初心者向け】
# 本記事の内容
[初心者向け] ポートフォリオに愛犬管理アプリを作ってみた話[Ruby on Rails]の付属記事です。
ご覧になっていない方は、[こちら](https://qiita.com/tak8_al/items/08274dd9228363642555)からご覧ください。devise_invitableの使い方だけ知りたい!という方は、このままご覧ください。
当記事は、Deviseの実装は一通り終わっていてサインインもサインアップも実装できている前提です。
まだ行っていない方は、[こちら](https://qiita.com/tak8_al/items/265b080674456398d56e)をまずはご覧ください。# 開発環境
MacBook Air (M1, 2020)
Rails 6.1.6.1
ruby 3.0.1
yarn 1.22.19# 導入手順
* devise_invitableの導入
* 招待用のカラムの追加
* 招待ページの生成
* ユーザー名の追加
* routing設定
* 導入確認順にやっていきます
# devise_invi
[Ruby on Rails]deviseを使用したログイン機能実装 [初心者向け]
# 本記事の内容
[初心者向け] ポートフォリオに愛犬管理アプリを作ってみた話 [Ruby on Rails]へのdevise導入編になります。
ご覧になっていない方は、[こちら](https://qiita.com/tak8_al/items/08274dd9228363642555)からご覧ください。deviseの使い方が知りたい方は、この記事で完結させますので、このままご覧ください。
CRUD機能を持ったアプリケーション実装済みの方を対象にしていますので、まだの方は実装してから、ご覧ください。# 開発環境
MacBook Air (M1, 2020)
Rails 6.1.6.1
ruby 3.0.1
yarn 1.22.19# 本記事での実装機能
* deviseの導入
* 新規登録時に名前を入力できるようにする
* ユーザー画面作成# deviseの導入
deviseを導入するにあたって、やる工程は4つです。
①Gemfileに追記
②deviseの設定ファイルの作成
③Userモデルの作成順に説明していきます。
## ①Gemfileに追記
早速アプリ
devise実装手順
## 毎回devise導入時コマンド忘れるので書き残しておく。
以下のコマンドは一貫して行う。“`ruby:Gemfile
gem ‘devise’
bundle
“`
“`ruby:ターミナル
$ rails generate devise:install
$ rails generate devise user // モデルその後、何かカラムを追加してから
$ rails db:migrate
$ rails generate devise:views
“`
Formオブジェクトのedit定義
例えばitemsテーブルとtagsテーブルの2つを合わせたFormオブジェクトがあったとしたら、それを編集するためのeditアクションは下記のようになる。
“`items_controller.rb
def edit
@item = Item.find(params[:id])
@tag = @item.tag
item_attributes = @item.attributes
tag_attributes = @tag.attributes
item_tag = item_attributes.merge(tag_attributes)
@item_tag = item_tag.new(item_tag)
end
“`
attributesメソッドでそれぞれの値をハッシュとして取り出し、それらをmergeメソッドでハッシュを結合することで、編集したいitem_tagの情報を取り出すことができる。