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

Routing Error uninitialized constant ~~ の対処法

#背景
Railsにて ログイン機能を実装できるGem devise を実装しようとしていた中の出来事です。
ログイン画面はできたのですが、ログアウトを選択すると以下のエラーが発生しました。

“`
Routing Error
uninitialized constant Users
“`

直訳すると「初期化されていない定数」とのことです。

#原因
users コントローラがないことが原因でした。
初歩的なミスですね。作り忘れていたみたいです。。

#解決策

usersコントローラーで作成したら解決です。
ログアウトを選択してもエラーは出なくなりました。

新規登録機能の作成

# 一覧画面に新規登録のリンクを作成する
“`rb:app/viws/tasks/index.html.slim
h1 タスク一覧

# btnとbtn-primaryの２つのCSSクラスを与えることで、bootstrapがリンクをボタンにような見た目にする
= link_to ‘新規登録’, new_task_path, class: ‘btn btn-primary’
“`
* new_task_pathは、リンク先のURL

# 翻訳情報を追加する
* バラバラに記述しないでいいように一箇所にまとめる

“`rb:config/locales/ja.yml
has_many: “%{record}が存在しているので削除できません”
# ここから追加
models:
task: タスク
attributes:
task:
id: ID
name: 名称
description: 詳しい説明
created_at: 登録日時
upd

Shopify CLIでrails createしたらcannot load such file — nokogiri/nokogiriのエラーが発生したがBundlerの設定を変更して対応できた

Shopify CLIを使いたくてプロジェクトを作るほぼ最初からハマった。
Shopify CLIの問題では無いが次に同じようなことで時間を無駄にしないためにメモ。

# 環境

– MacBook Pro (16-inch, 2019)
– CPUはIntel Core i9
– macOS Big Sur (11.5.2)
– Shopify CLI 2.2.2
– Homebrewでインストールできる最新版 (2021/08/25 現在)
– Ruby 2.6.3 (OS標準)
– Bundler 1.17.2
– Node.js / Yarnは多分動けば大丈夫だと思う (が一応バージョンも記載)
– Node.js 14.17.0
– Yarn 1.22.10

普段は `rbenv` を使ってプロジェクトに応じてRubyのバージョンを切り替えているが `shopify rails create` で何かしらエラーが出ていたのでとりあえずOS標準のRubyを使うようにしています。
Shopify CLIはHomebrewでインストール済み

【インクリメンタルサーチ】Ajaxを用いたキーワード検索機能の実装

#インクリメンタルサーチとは
>キーワード検索を行う際に、利用者が文字を入力するたびに検索を実行する方式。
検索語全体を入力する前に検索を開始し、一文字進むごとに検索結果が更新し即座に候補を表示させる便利な機能。

#実装内容
今回はDBに保存してあるカラム値を対象にインクリメンタルサーチを使用して選択した値をフォームに自動入力させます。

##処理全体の流れ

1. 検索フォームに入力後、jsファイルでイベントが発火
1. jsファイルから受け取ったデータをコントローラのアクションへ返す
1. データベースからjsファイルで受け取ったデータと合致するデータを抽出し、そのデータをjbuilderへ渡す
1. jbuilderでJSON形式に変換したデータを再度jsファイルに送り、そのデータをもとに検索結果を表示

この説明では何いっているか分かりませんよね、、（自分でも分かりません笑）

#完成形はこちら
![4635318dc0d230da36ba06d6b026197b (2).gif](https://qiita-image-store.s3.ap-northeast-1.ama

【Rails】お気に入り(いいね)のハートアイコンとカウント数の間に謎の下線、消し方(メモ）

#　目標
#### このハートアイコンとカウント数の間にある下線を消す。


“`erb:likes.html.erb

お気に入り一覧

<% @like_posts.each do |post| %>
<% if logged_in? %>
<% if current_user.like?(post) %>
<%=link_to post_likes_path(post), method: :delete do %>
　
　<% end %>
<% else %>
<%=link_to post_li

【Rails Apiモード + devise】ログイン状態が保持されない時の解決法

Rails Apiモード + Devise で認証機能を作成。
Session + Cookieでログイン状態を保持するような仕様にしたいが、ブラウザをリロード等するとログイン状態が保持されていないことがわかった。

## 問題のソースコード

“`ruby:sessions_controller.rb
class Api::V1::Auth::SessionsController < Api::V1::ApplicationController before_action :require_no_authentication, only: [:create] # POST /api/v1/auth/login def create user = User.find_for_database_authentication(email: user_params[:email]) if user.nil? return render json: { errors: { message: 'アカウントが見つかりませんでした' } }, statu

ActiveStroge 使い方

①インストール

“`ruby
rails active_strogeinstall
“`

使用するために必要なマイグレーションファイルが作られる。

②app/models/user.rbに追記。

“`ruby
has_one_attached :image　　#imageの部分は何でも良い
“`
必要な属性を追加。 複数の画像投稿したい場合はhas_many使う。モデルの関連付けと一緒。

③user.rbに追加したimageをアクションで受け取れるようにする。

“`ruby
private

def user_params
params.require(:user).permit(:name, :image)
end
“`

privateメソッドでStrongParametersも使ってみた

タブでの切り替えの実装　HTML CSS Javascript Bootstrap

タブの切り替え


今回は、タブ切り替え機能を作成します！！！

なんだかんだで苦戦しました。というのもjQuery UIというものを使用すれば、
”簡単”にタブの導入ができるみたいなのですが、うまく導入できなかったのか、
変な動きをしてしまったので諦めました・・・・。

ので、以下のyoutube動画を参考に実装しましたが、
私はBootstrapを使ってるため、以下の動画とコードは完全一致していませんので、
ご注意ください！！！

HTMLから書く！！！！

“`perl:views/users/show.html.erb
#まず、タブの見出し（タイトル）を作成　

Railsで無限スクロールの導入

使用環境
Ruby2.6.8
Rails6.1.4

#完成イメージ
TwitterやYoutubeのように、ページ下層部に到達したときに次のページを自動的に読み込む機能の実装

#前提
RailsアプリケーションにjQuueryの導入をしている必要があります。
jQueryの導入をしていないちょ、という方はこちらを参考に。

https://qiita.com/tatsuhiko-nakayama/items/b2f0c77e794ca8c9bd74

#処理の流れ
①kaminariのインストール
②jscrollの導入
③ページネーションの実装
④無限スクロールの実装

##①kaminariのインストール
おなじみgemファイルを操作してbundle installするだけです、はい。
最後の行とか、適当な場所に追加しましょう。

“`:Gemfile
gem ‘kaminari’
“`

“`
$ -> bundle install
“`

##②jscrollの導入
「view/application.html.erb」など、無限スクロールを実装する箇所のheadに

RailsでCustom Fontを使う(Webpacker)

フォントをダウンロードして、app/javascript/src配下に置く

app/javascript/src/style.scssにフォントのパスを記入と使用

“`scss
@font-face {
font-family: “maru-gosic”;
src: url(‘./Corporate-Logo-Rounded.ttf’) format(‘truetype’);
}

html {
font-family: “maru-gosic”;
}
“`

これで、OK!!

参考：　https://anthonybroadcrawford.com/2020/02/14/custom-fonts-rails-six.html

[初心者向け] Railsで管理用ページを作成し、管理者権限を持つユーザーのみアクセス可能にする[rails_admin]

#はじめに
右も左もわからないプログラミング初心者が書く備忘録です。
膨大な勉強量の中で気になった事をメモしていきます。

今回ポートフォリオの作成ともあり、管理者ページに転移する際にパスワードを求めたくない
（担当の方に余計な一手を打たせたくない）という理由からはじめました
しかし、普通に運用する際もセキュリティの向上が期待できると思いますので
パスワードのみでブロックしている方などは参考にしてみてください♪

#今回の内容
gem ‘devise’
gem ‘cancancan’
gem ‘rails_admin’, ‘~> 2.0’
を使用し、webアプリに管理者ページを作成したいと思います

管理用ページのアクセスに関して

・アクセス可能なのは管理者のみ
・他のユーザーはアクセス不可（トップページへ飛ばす）
・ログインしていない場合、ログインページへ移動させる

を意識していきたいと思います

#開発環境
Rails 6.1.3.2
ruby 2.5.1
Docker version 20.10.6
devise (4.8.0)
cancancan (3.3.0)
rail

RailsでのSquare webクレジット決済のサンプル

SquareWebPaymentsSDKを用いたカード決済サイトを構築する一般的な方法は以下のドキュメントに記載されています。
– [Web Payments SDK Overview](https://developer.squareup.com/docs/web-payments/overview)
– [Web Payments SDK Documentation](https://developer.squareup.com/reference/sdks/web/payments): javascriptベースの決済フォーム作成に関するドキュメント
– [Square API Technical Reference](https://developer.squareup.com/reference/square)
– [square/web-payments-quickstart](https://github.com/square/web-payments-quickstart) : 今回のサンプルプロジェクトはこれをベースに作成しました。
– [API Explorer](

Rails　【初心者向け】フォロー機能のモデル同士の関連付けについて理解を深掘ってみた！

####【フォロー機能のモデル同士の関連付けについての理解】

SNS系WEBアプリの制作中に、**フォロー機能のモデル同士の関連付け**について理解できていないまま実装していた部分があったので、復習も兼ねて理解を深めていきたいと思い、実装の部分を一から学習し直しました。
今回はフォロー機能の関連付けを行う際の理解を掘り下げることで学んだ内容をまとめてみようと思います。

・フォロー機能の実装に関しては[こちら](https://qiita.com/kazukimatsumoto/items/14bdff681ec5ddac26d1#%E8%87%AA%E5%B7%B1%E7%B5%90%E5%90%88%E5%A4%9A%E5%AF%BE%E5%A4%9A%E3%81%BE%E3%81%A8%E3%82%81)の記事を参考にさせていただきました。

注）この記事では主にモデル同士の関連付けの理解について深掘りを行っていくため、実装の部分は割愛させていただきます。

## はじめに
~~~ruby:app/models/user.rb
class User < Application

[Rails] コントローラーとビューについて

# コントローラを作成する
“`:ターミナル
# bin/rails g controller コントローラ名 [アクション名 アクション名]
$ bin/rails g controller tasks index show new edit
“`

* ルーティング・・・URLとHTTPメソッドの組み合わせから、リクエストを処理すべきコントローラーとアクションを特定すること
* リクエストを処理するコントローラとアクションは、ブラウザからのリクエストに含まれるURLとHTTPメソッドによって決定する
* コントローラのアクションを設定するときは、入口となるURLとHTTPメソッドをあわせて考える必要がある
* controllerのジェネレーターでアクションを指定するとアクションと同名のビューも作成される
* HTTPメソッドがGETのアクションは同名のビューを使うことが多いので、HTTPメソッドがGETになるアクション名をジェネレーターコマンドの引数として指定すると便利

* ジェネレーターコマンドを実行するとアクションについて個別にルーティングの設定が追加される
* ルーテ

[Rails] タスクモデルを作成する

# タスクモデルのひな形を作成する
* モデル作成に便利なジェネレーターを使う

“`:ターミナル
# bin/rails g model [モデル名] [属性名:データ名 属性名:データ名]
$ bin/rails g model Task name:string description:text
“`

|生成されるものの種類|ファイルパス|用途|
|:—:|:—:|:—:|
|モデルクラスのソースコード|app/models/task.rb|Taskクラスの実装|
|マイグレーションファイル|db/migrate/xxxxxx_create_tasks.rb|データベースにtaskテーブルを追加|
|モデルの自動テスト|test/models/task_test.rb|Taskクラスについての自動テストの実装|
|モデルの自動テストで使うfixtureファイル|test/fixture/tasks.yml|Taskクラスについての自動テストのためのデータ投入の定義|

# データベースにテーブルを追加
* Railsが用意しているマイグレーションを使う
* db/

[Rails] アプリケーション作成の準備

# アプリのひな形の作成
“`:ターミナル
# ひな形の作成(新しいRailsアプリが作成される)
$ rails new アプリ名

# 先程作ったアプリケーションディレクトリに移動
$ cd アプリ名

# データベースの作成
$ bin/rails db:create

# サーバーを起動する
$ bin/rails s
“`

# データベースの使い分け
* Railsはデフォルトで３種類の環境が与えられていて、１つの環境に対し、１つのデータベースを対応させる。

|開発の種類|環境のシステム名|用途|
|:—:|:—:|:—:|
|開発|development|動作確認|
|テスト|test|自動テスト|
|本番|production|ユーザーが利用可能な形で稼働|
* config/database.ymlにどの環境にどのデータベースを対応させるか記述する
* 開発時は、開発とテストの環境を使う

# Slimを作成する
* RailsではデフォルトでERBというテンプレートエンジンが採用されているが、HTMLをツリー構造で簡単に表現できるSlimを使うこと

国際化エラー I18n::MissingTranslationData: translation missing: en.faker.name.first_name

#”Fakerを利用してseedファイルにデータを生成する##

Fakerとは、ランダムな値を生成するGemです。
Gemfile の中に gem ‘faker’ を追記して、
bundle install コマンドを実行すれば準備完了
　
a = Faker::Games::Pokemon.nameというコードを記述すると、
変数aの中にポケモンの名前がランダムで一つ入ります。

seeds.rb

“`
9.times do |n|
name = Faker::Games::Pokemon.name
email = Faker::Internet.email
password = “111111”
password_confirmation = “111111”
User.create!(name: name, email: email, password: password, password_confirmation: password_confirmation, admin: false)
end
“`
##I18n::MissingTransla

JavaScriptの非同期通信でCSRFトークンの検証を回避する

#開発環境
– OS：macOS Big Sur 11.2.2
– Ruby：2.6.5
– Ruby on Rails：6.0.0
– テキストエディタ：Visual Studio Code

#課題
twitterのいいねボタンを押下したときのように、非同期通信でDB更新しつつWebページの見た目を変えたかった。
今回はXHRオブジェクトを作って実装。

“`clip.js
~
XHR.open(‘POST’, URL, true);
XHR.send();
“`

このリクエストが422エラーになる。もう少し詳細を追ってみると、
「ActionController::InvalidAuthenticityToken」
というエラーだった。

# CSRFとrailsのCSRF対策について
**CSRF=クロスサイトリクエストフォージェリ**とは脆弱性のあるWebアプリケーションに対し悪意のあるリクエストを送り攻撃すること。

railsではCSRF対策メソッドとして[protect_from_forgery](https://github.com/rails/rails/bl

WSL環境下でRailsを動かしたときの小ネタ

# 初めに
WSL1環境下で、Railsを動かしたときにちょっと引っかかった小ネタを紹介します。

# 環境設定
– OS: Windows10 Pro 64bit
– Version: 1909
– OS build: 18363.1256
– WLS
– Ubuntu 20.04
– Ruby 2.7.2
– Rails 6.0.3.3

# BCrypt::Errors::InvalidHash: invalid hash
[devise](https://github.com/heartcombo/devise)を利用しており、またMacからWindows環境へ乗り換えたときに発生する可能性が高いのがこのエラーです。
[Rails: BCrypt::Errors::InvalidHash (invalid hash) Devise 1.5.4 Rails 2.2.5](https://stackoverflow.com/questions/46010754/rails-bcrypterrorsinvalidhash-invalid-hash-devise

SchemaSpyを使って、RDSのTable情報をER図まで自動的に作って欲しい

# 概要

SchemaSpyを使って、接続先のDBのTable情報を綺麗に抜き取り、あわよくばER図にしてくれるところまでしてほしい

# SchemaSpy

[GitHub – schemaspy/schemaspy: SchemaSpy code home](https://github.com/schemaspy/schemaspy)

# やった事

1. EC2にDockerを追加
2. SchemaSpy Dockerイメージの取得
3. schema生成
4. ローカルにSchemaデータをDL

## EC2にDockerを追加

“`bash
$ sudo yum install -y docker
$ sudo service docker start
# ec2-userがdockerコマンドを実行できるように、ec2-userをdockerグループに入れる
$ sudo usermod -a -G docker ec2-user
“`

## SchemaSpy Dockerイメージの取得

“`bash
$ docker pull schemaspy