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

⚡️Blitz.js – React on Rails


**⚡️Blitz.js** – Railsにインスパイアされて作られたフルスタックReactフレームワークです。

Reactエンジニア・JSエンジニアが少ないリソースでWEBサイトを構築するまでにはいくつもの選択が必要です。

使いやすいFormライブラリはどれだ、ORMはどれだ、ディレクトリ構成はどれだ、、などを決めなくてはいけません。
もちろん、これは自分で設計を行ってミニマムにアプリケーションを作るには適しています。

しかし、一方でRailsやLaravelのようにパワフルなフレームワークのおかげですぐに本質的な作業に入りたい方もいるでしょう。

そんな方にBlitz.jsをご紹介します。

https://github.com/blitz-js/blitz

## Introduction

なにはともあれ、サイトを構築してみ

Docker環境でコマンドを用いてMysqlを編集

Dockerを初めてまだ日数が立っていないので、備忘録としてターミナルでMysqlに接続し、弄る方法を記述していく。

始めに、

“`
docker ps
“`

で、MysqlのコンテナIDを確認。

“`
name@mbp APP_NAME % docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
2acfbade0963 app_name_web “rails s -p 3000 -b …” 2 days ago Up 2 days 0.0.0.0:3000->3000/tcp app_name
c71b0bf50f29 mysql:5.6.47 “docker-entrypoint.s…” 2 days ago Up

初心者がRuby on Railsでポートフォリオを作成しました

# はじめに

今回の内容は転職活動中で作成しているポートフォーリオの説明です。
アドンバイスなどがありましたらよろしくお願いします。

# 開発環境

– Ruby 2.6.3
– Rails 5.2.3
– DB：PostgreSQL 12.3
– AWS/EC2/S3
– Route53,ACM,ALBでSSL

# 背景

売れていないお笑い芸人は生活するために、バイトなどをしております。
芸人は、自分が出演するライブのチケット販売のノルマを課せられ、達成できない場合、給料から天引きされます。
給料が天引きされるて給料が入らなくなると、本来するべきである芸を磨くということがに時間を使えなくなり、バイト三昧と負のループに陥ってしまいます。

そこで芸人自身が出演するライブのチケットを売り切ることで収入が安定し、
芸を磨くことに当てる時間が増えるため芸人としてヒットする確率も上がると考えました。

現在、芸人の方々もSNSを駆使してライブの情報やチケット販売の広報などをしておりますが、
1つのプラットフォームにまとまっていないため、検索がしづらく、すでに芸人を知っている方はライブの

RefineryCMSの導入【Ruby on Rails】

https://www.farend.co.jp/blog/2019/01/refinerycms/
をほぼパクった自分用メモ。OSはMacです。
[Refinery公式](https://www.refinerycms.com/guides/installation-prerequisites)のガイドを見ながらすると簡単。
# 実行環境
Rails 5.1.6.1
refinerycms 4.0

[Refinery公式](https://www.refinerycms.com/guides/installation-prerequisites)のガイドを見て自分の環境を確認してください。

## インストール・プロジェクト作成
### gemのインストール
$ gem install refinerycms

### プロジェクト作成

#### ターミナル

$ rails _5.1.6.1_ new プロジェクト名 -m https://www.refinerycms.com/t/4.0.0
RailsのVerを指定して作成

$ cd プロジェクト名

Rails 4.2.x から 5.0.x にアップグレードする際にカナリアリリースすると session が取得できなくなる不具合を回避する

## はじめに

– カナリアリリースとは複数サーバのうちの一部にだけ新しいバージョンのアプリケーションをリリースするデプロイ手法である
– Rails 4.2.x から 5.0.x にアップグレードする際にカナリアリリースをする、つまり Rails 4.2.x と 5.0.x のアプリケーションが混在した環境を作ると session が取得できなくなる不具合が発生するのでこれを回避したい

この時世に Rails 5.0.x へのアップグレード（しかもカナリアリリースを挟んで）をする方がいらっしゃるのかは不明ですが、どなたかの役に立てば幸いです :pray:

Ruby や Rails をある程度触ってる方向けの内容なので、Rails における session や rack などの基礎的な説明は省きます。

## 解決方法

– rack gem のバージョンを `2.0.7` に固定する

## 原因を一言で

Rails 4.2.x -> 5.0.x のアップグレードに引きずられて rack gem が 2.0.8 以上にアップデートされるのが原因。（rack の 2.0.7

[Ruby] 詳細ページなどに直接URLを入力されても他のページに遷移させる方法

初めての投稿なのでアドバイスあればよろしくお願いいたします！

フリマアプリ作成中、詳細ページまで作成してふと、
「これって直接詳細ページ飛べちゃうやん？」
と思い調べて自分なりにまとめてみました。

“`items_controller.rb
class ItemsController < ApplicationController before_action :set_item, only: [:show, :edit] def edit #重要なのはここから@itemは、before_actionからきてます if @item.user == current_user #current_userは、ログインしているユーザーのこと #@item.userは、@itemに入ってるuserを出してます render "edit" else #もし等しくなければ、redirect_toでroot_path(ホーム画面に戻っています) redirect_to root_path end private def

collection_selectを使って、Active_Hashに格納したデータをプルダウンにする

##概要

今回実装したいのは、商品出品機能を実装する際に、発送元や商品の状態などの変化しない情報をActive_Hashとして格納して、ビューファイルにプルダウンとして表示する機能です。

Active_Hashで都道府県などを格納する方法に関しては、別で記事を書いたのでそちらを参照してください。

[Active Hashについて](https://qiita.com/keiya_man/items/3b0f50254ceb39097f42)

##collection_selectとは
ヘルパーメソッドの一つで、セレクトボックスのなかに、キーを与えたバリューを表示できる記述です。

基本的な記述は

“`ruby:xxx.html.erb
f.collection_select(:カラム名, 要素の配列, value属性の項目, テキストの項目, { prompt: “選択してください” }
“`

となるようです。

##例
今回は、商品出品する際に配送料の有無をPostageTypeクラスとして実装した例を書き残しておきます。

“`ruby:products/new.

Rails6 以降 Javascriptファイル読み込み方

# Javascriptファイルを読み込む
Rails6以降のverでは、デフォルトでwebpackを使用してJavaScriptを管理するようになりました。(Rails5.1からwebpackでJavascriptの管理ができます)

Rails5verでは,デフォルトがsprocketsになっており、Javascriptを管理していました。

もし、app/assets/javascriptsの配下にJavaScriptが置いてある場合は、Sprocketsです。作成したjsファイルを読み込ませたい場合は

“`javascript
//= require …
//= require_tree .
“`

もし、app/javascriptの配下にJavaScriptが置いてある場合は、webpackerですので、require(…)やimport …を使って下さい。この場合は、webpackerが利用するwebpackのドキュメントを参考にして下さい。import文はES2015+の構文ですので、MDNのJavaScriptのドキュメントも参考になります。以下参考

Rails6のフロントエンド開発:javascriptの管理がSprocketsからWebpackerへ

rails3.1からrails5.2までは、Sprocketsで行っていたが、
rails6からWebpackerが標準に。
webpackerについてまとめ増田。

## Webpackerとは
webpackのラッパー。
webpackは、jsなどの様々な形式のファイルをまとめるモジュールパンドラー。
webpackは、複数のjsモジュールを1つのファイルにまとめたりすることができる。
まとめる段階で、jsのコンパイルや圧縮などの様々な処理を実行可能。

### Webpackerの使い方
app/javascript/packs/配下に、最終的にモジュールをバンドルしてまとめられるファイルを置き、それ以外ディレクトリにモジュールを置く。

rails newを行うと、app/javascript/packs/application.jsが生成されて、デフォルトに入っているjsライブラリは読み込まれている。

#### Webpackerが用意している設定方法
rails newで以下のファイルが自動的に生成される。

– config/webpacker.yml
– confi

ヘルパーメソッドform_withについて理解する

##form_withとは
form_withとはRailsのヘルパーメソッドの一つで、ビューファイルに記述します。
このメソッドによって、情報を送信することができます。

form_withを使うと、入力フォームに必要なHTMLを作成することができます。

調べてみると、送信した情報をデータベースに保存する時と保存しない時では若干記述が変わるみたいです。

**データベースに保存しない時**

“`ruby:xxx.html.erb
<%= form_with url: "パス" do |f| %>
フォーム内容
<% end %>
“`

**データベースに保存する時**

“`ruby:xxx.html.erb
<%= form_with(model: モデル名, local: true) do |f| %>
フォーム内容
<% end %>
“`

form_withでは、データを保存しない
input typeの要素も使えるし、
データを保存するヘルパーメソッド(f.text_fieldなど)も両方使えるようです。

最後に、実際に今日実装してた内容を抜粋して記録とし

【each, map…】今夜、配列処理をくらべてみました【ruby】

rubyの配列の要素を操作するメソッドってたくさんありますよね。
結局、どれがどんな挙動で、どれが一番効率よくかけるかどうか比較するためにまとめてみましたよ。

#配列の操作早見表

|メソッド|戻り値|挙動
|:–|:–|:–
|each|レシーバの配列|ブロック内で配列の要素をひとつずつ、繰り返し処理
|each_slice|nil|ブロック内で配列の要素を複数単位で、繰り返し処理
|each_with_index|レシーバの配列|ブロック内で配列の要素とインデックス番号をそれぞれ繰り返し処理
|map|変化した配列|配列のまま、要素を変化させる
|select|変化した配列|配列のまま、条件式がtrueになる要素に絞る
|reject|変化した配列|配列のまま、条件式がfalseになる要素に絞る
|find|要素|要素の中で、最初にヒットした要素を取り出す

#繰り返し処理

###each
要素を単数でループさせる

“`ruby

array = [“リンゴ”, “ミカン”, “スイカ”, “メロン”]

array.each do |obj|
p obj
end

Rails5.2でIEでもリンクを保存せずに直接開けるようにする

railsでPDFをsend_dataしているリンクが、IE11では保存の選択肢しかでず、不思議に思っていたら
Rails5.2リリースノートの変更点　https://railsguides.jp/5_2_release_notes.html
にありました。
> セキュアなX-Download-OptionsおよびX-Permitted-Cross-Domain-Policiesをデフォルトのヘッダーセットに追加。 (Commit)

デフォルトでは、脆弱性を突いたファイルをいきなりアプリで開かないようにとの意図かと思うのですが、試したブラウザの中では皆スルーされている中で、IE11だけ「保存しかできない」状態になるのが意外というかなんというか。（いろいろ誤解している可能性あり）

そこでIE11でも直接開きたい場合は例えばこんな感じ。

“`
response.headers[“X-Download-Options”] = nil （if　…リスク許容条件…）
send_file(file_path,:filename => filename

モデルのscopeを使ってコードをすっきりさせる！

モデルのscopeについて勉強する機会があったので、紹介させていただきます！

Scopeとは、モデルへのメソッド呼び出しとして参照されるクエリに、
名前を付けてひとまとまりにしたものです。

## Scopeを定義する

例えば、あるBookのidを降順にし、かつ10件表示したいとします。
その場合、以下のようなメソッドを使います。

“`ruby
Book.order(id: :desc).limit(10)
“`

他にも条件を追加したい時、もっとメソッドを連結させる必要があり、コントローラーの記述量が増えます。
また、あまりにも長いと一見何の処理を行っているか分かりにくくなるかもしれません。

そこでscopeの出番です。

scopeを使うと以下のように書けます。

“`ruby
class Book < ActiveRecord::Base scope :recent, -> { order(id: :desc).limit(10) }
end
“`

このように定義しておけば、コントローラーで「Book.recent」という記述が可能になります。

“`ru

Herokuにデプロイできない【Precompiling assets failed.】

Railsで作ったアプリをHerokuにデプロイするときにハマった質問があったので、解決するまでを記録します。heroku push origin master で precompile assets faild. エラー。

## エラー文

“`
remote: Bundle completed (42.25s)
remote: Cleaning up the bundler cache.
remote: —–> Detecting rake tasks
remote: —–> Preparing app for Rails asset pipeline
remote: Running: rake assets:precompile
remote: yarn install v1.22.4
remote: [1/4] Resolving packages…
remote: [2/4] Fetching packages…
remote: [3/4] Linking

アセットパイプラインについて

この記事は文字のみのため理解しづらい部分があるかと思います。

**完全に自分自身のアウトプットのためなので読みにくいなと感じたらこちらの記事を参考にしてください。**

[Rails初学者がつまずきやすい「アセットパイプライン」](https://www.transnet.ne.jp/2016/02/28/rails%E5%88%9D%E5%AD%A6%E8%80%85%E3%81%8C%E3%81%A4%E3%81%BE%E3%81%9A%E3%81%8Dcolnr%E3%80%8C%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88%E3%83%91%E3%82%A4%E3%83%97%E3%83%A9%E3%82%A4%E3%83%B3/)

**アセットパイプラインについて**

そもそも前提としてRuby on Railsはどのようなアプリケーションを開発する際にも
共通して作成する必要がある物を自動的に作ってくれているフレームワークです。

例えばメールのテンプレート文なんかは御中だとか一番下の行には自身の詳細情報を載っけていたりしますよね。

【Rails6】Rails + Bootstrap 5.0.0-alpha 環境で、Bootstrapをカスタマイズする

※Qiita初投稿です。宜しくお願い致します。

BootstrapはCSSフレームワークとして数多くのプロジェクトに導入されていて、
2020年6月にメジャーバージョンアップとして5.0 alpha がリリースされました。

長年使われているフレームワークで採用数も多いことから、デフォルト設定で使用されている場合、
「Bootstrap臭」と揶揄されることもありますが、
カスタマイズすることで柔軟にUIを変えることが可能です。

今回はRails 6.0環境にwebpackerで導入したBootstrap 5.0において、
各変数をカスタマイズする方法についてご紹介します。

# 概要

Bootstrap内で設定されている_variables.scssの値を、別ファイルから上書き変更します。

# 参考文献・記事

以下記事で紹介されている方法について、cssをwebpackerで管理する場合に応用した方法になります。

また、以下リンクの公式ページで紹介している方法を参考

Dockerで開発環境使ったら、Railsコマンドが使えなくなった罠を解決

いよいよ本格的に何か作ろうと思いまして、まずは開発環境で、Rails6の環境構築を終了しました。
ちなみに参考にした記事は、
・[DockerでRuby on Railsの環境構築を行うためのステップ【Rails 6対応】 – Qiita](https://qiita.com/kodai_0122/items/795438d738386c2c1966)

その他、上手くいかなかった部分には、
・[Rails6+MySQL+Nginx+Unicorn+Docker環境構築メモ – Qiita](https://qiita.com/horoyoi/items/b9f2a7f8cf066116c068)
・[PostgreSQL（Docker）にRails（Docker）が接続できなくなったから調べてみた。（could not translate host name “db” to address: Name or service not known） – Qiita](https://qiita.com/at-946/items/2fb75cec5355fad4050d)

上記の記事を参

Heroku上で背景画像が表示されないけどなんなんこれ

HerokuにpushしたRailsアプリケーションのassets background-imageが読み込まれない問題の解決方法

## 状況
1. ローカルでRailsアプリケーションを作成
1. Herokuにデプロイ
1. heroku open
1. ローカルで表示されていた背景画像が表示されない

## 解決策

結論、以下の方法で解決しました。

**config/environments/production.rb**

“`ruby
# Do not fallback to assets pipeline if a precompiled asset is missed.
config.assets.compile = false
“`

上記の
**config.assets.compile = false**
を、
**config.assets.compile = true**
に修正

参考
https://qiita.com/pugiemonn/items/1663ca88766ceba6a397

その後、rails assets:precom

設計と実装をRailsでシームレスに行う(API仕様書)

## 目的
– API仕様書のメンテコストをなくす
– 実装に前倒しで着手する

### 前提
– フレームワークにRailsを使用する
– Railsの環境構築を行う

### 手順
1. Gemfileにgemを指定してbundle installする
2. spec/request/xxxx_spec.rbにテストケースを書く
3. AUTODOC=1 bundle exec rspec spec/requests/xxxx_spec.rbを実行する

### 1. Gemfileにgemを指定してbundle installする

“`
group :development do
gem ‘autodoc’
end
“`

### 2. spec/request/xxxx_spec.rbにテストケースを書く
“`

require ‘rails_helper’

RSpec.describe “Api::V1::Users”, type: :request, autodoc: true do
describe “GET /api/v1/users/:

【Railsでhamlに動画を挿入する方法】

動画が挿入できると、webサイトをお洒落でカッコよく装飾できます。
今回はRailsでhamlに動画を挿入する方法を詳しく解説していきます。

# publicフォルダにvideosフォルダを作成
テキストエディタで新しいフォルダを作成をクリックし、public下にvideoフォルダを作成します。

# videoフォルダ下に挿入したい動画ファイルを入れる
使用したい動画ファイルをvideoフォルダ下に持ってきます。

この時、**動画ファイルの拡張子はmp4**を使用してください！
なぜなら、現在mp4をほとんどのブラウザが対応しているからです。
今回は拡張子mp4のファイル、sample_video.mp4を用います。

# hamlに以下を記述
“`ruby:◯◯.html.haml
= video_tag(“/videos/sample_video.mp4”, autoplay: true, loop: true, muted: true, class: ‘video’)
“`

1つずつ解説していきます。
**= vide