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

【Rails】remote:true形式でAjax通信を行う(ブックマーク機能のajax化)

## Ajaxとは
**Ajax**とは、Webブラウザ上で`非同期通信`を行い、ページ全体の再読み込み無しにページを更新する方法のことです。

`同期通信`だと、クライアントはwebページ全体の情報(HTMLとそれに紐づくcss,js,imageなどのアセット)をサーバーから受け取って、ページを一から作り直します。
例えばページの一部を変更するだけなのに、他の部分も組み立て直すってことはその分ページの表示に時間がかかっちゃいます。(サーバー側の処理を待つことになる)

しかも、この**リクエスト〜レスポンス**の処理を行っている間は、他の処理を行わずに**サーバーからレスポンスが返ってくるのを待ち続ける**必要があります(よくあるのが画面が真っ白になって何もできない状態)。

そこでAjaxのような非同期通信を使用すれば、**ページ遷移無しに、高速で更新処理**を行い、尚且つ、**リクエスト〜レスポンスの処理を行っている間も他の処理が行えます**。

この便利なAjaxによる非同期通信を行う方法としては、
**①remote:true形式
②ajax関数を使った形式**
の2パタ

Day9 #RailsApp作成手順~#new/#create/#destroy/#edit/#update/#showアクション/#login/#mypage/#n+1問題/#user_signed_in?

#### 5. newアクションの設定
##### Ⅰ. ルーティング
“`config/routes.rb
Rails.application.routes.draw do
resources :tweets, only: [:index, :new]
end
#newのpathを構築
“`

##### Ⅱ. コントローラー定義
“`app/controllers/tweets_controller.rb
def new
@tweet = Tweet.new
end
#Tweetクラスのインスタンス@tweetを生成
“`

##### Ⅲ. ビュー作成
“`erb:app/views/tweets/new.html.erb

<%= form_with(model: @tweet, local: true) do |form| %>

投稿する

<%= fo

Day13-14 Rails 検索機能を実装

#1.検索フォーム作成

“`erb:app/views/tweets/index.html.erb
<%= form_with(url: search_tweets_path, local: true, method: :get, class: "search-form") do |form| %>
<%= form.text_field :keyword, placeholder: "投稿を検索する", class: "search-input" %>
<%= form.submit "検索", class: "search-btn" %>
<% end %>
“`

#2. ルーティング
collection:ルーティングに:idがつかない
member:ルーティングに:idがつく
→検索機能は:id取得する必要がないので、collenction

“`config/routes.rb
collection do
get ‘search’
end
“`

#3. searchメソッドをTweetモデルに定義
ビジネスロジック(プログラムの処理の流れ)は、メソッ

Rails6+Reactで付箋アプリっぽいページを作ってみた。4 (UI作成編2)

# 記事について
[前回](https://qiita.com/hanaitama-kaz/items/9b680c50566161046690)まででUIの作成を行いましたが、見た目があまりに寂しいので、
スタイルシートを使って、それっぽく見せてみます。

# 関連する記事
書いているうちに分量がすごくなって記事を分割したので、リンク先をまとめておきます。
[その１(環境構築〜モデル作成編)](https://qiita.com/hanaitama-kaz/items/5b68b9c665f75020bcd4)
[その２(API作成編)](https://qiita.com/hanaitama-kaz/items/b461ff8564a5368523fc)
[その３(UI作成編1)](https://qiita.com/hanaitama-kaz/items/9b680c50566161046690)
[その４(UI作成編2)](https://qiita.com/hanaitama-kaz/items/e82a9ec9538914861746)
[おまけ(モデルのテスト編)](ht

【Rails】gem ‘ active_hash’ プルダウンメニュー作成

#手順
1:gem導入
2:手動でモデルを作成
3:データを引っ張る
4:アソシエーションを定義
5:実装中のエラー
##１：gem 導入
“`Gemfail.
gem ‘active_hash’
“`
`bundle install`する。

##２：モデル作成
`※モデルは手動で作成`

“`model/Shipping_fee.rb
class ShippingFee < ActiveHash::Base self.data = [ {id: 1, name: '送料込み（出品者負担）'}, {id: 2, name: '着払い（購入者負担）'} ] end ``` ターミナルで確認 ``` [2] pry(main)> ShippingFee.find(1)
=> #1, :name=>”送料込み（出品者負担）”}>
“`
##３：プルダウンメニューにデーターを引っ張る
“`new.html.haml
.new-contents__box__ti

【Rails】テーブルを分けて複数の画像をアップロードする

複数枚の写真を一度に保存する機能の実装において、
【itemテーブル】と【item_imageテーブル】の二つに
分けて複数枚の写真を保存する機能を実装した際の手順をまとめたのでご紹介します。

# 完成形
○ 商品写真は最大で10枚まで投稿可能。
○ 一つのファイルフィールドに一つの写真でアップロードしていく。
○ 5枚投稿時点で下段に切り替わる。
[](https://gyazo.com/c159d314e084b76e1b53bb78b2d441ae)

# 1. HTMLの用意

“`haml:sample.haml

~ 省略 ~

.image-container
.image-container_box
.form-title
%span.box-form-explanaion
商品画像
%span.indispensable
必須
%p.i

Ruby on Rails Ⅱ

# 投稿一覧ページ
データベースをHTMLに直接書く

投稿に関するページ
postsコントローラ
indexアクション名

コマンド
「rails generate controller posts index」は「rails g controller posts index」と省略可
作成された「views/posts/index.html.erb」に投稿一覧ページ用のHTMLを書いていく

「config/routes.rb」を開いて、
get “posts/index” => “posts#index”
というルーティング

「app/controllers/posts_controller.rb」を開いて、
indexアクションを持ったpostsコントローラ

「app/views/posts/index.html.erb」を開いて、ビューファイルが作成されている
HTMLファイルを張り付け

TweetApp

MiniMagick(imagemagick)で複数のフォントファイルを使って絵文字に対応する

ちょっと前にimagemagickで絵文字を含むテキストを合成する時に結構ハマったのでなんとなく備忘録を。
imagemagickはフォントが1つしか指定できないので、大抵の場合絵文字があると文字化けしてしまいます。
そこで、pangoを使って複数フォントに対応します。

(以下、dockerでrailsを動かす前提で進めます。)

## フォントを置く
まずは使いたいフォントをDLしてコンテナのfontsに置きます。
(apt-getで手に入るならそっちのほうがいいと思います)
今回はNoto Sans CJK JPとNoto Color EmojiをDLして/assets/fontsに置きました。

“` Dockerfile
# Dockerfile
COPY /assets/fonts /usr/share/fonts
“`
#### memo: Noto Color Emojiについて
Noto Color Emojiは定番のフォントだと思いますが、入手先が3つあってそれぞれ対応しているUnicodeのバージョンが違います。
– 公式サイト → Unicode10
– a

貧乏環境(t3.small)でFWのベンチマーク Rails6.x vs SpringBoot2.3.x vs Vert.x3.9.0 vs actix-web1.0.x (2020/05現在)

最近はVert.x推し。でもだれでも使えるSpringBootは実際どれくらいなの？ってことを知りたかった。
CPUが潤沢な場合にパフォーマンスが出るのはすごいよ。すごい。
でも貧乏人には大きなサーバーは無理。だから小さめの環境で効率が良くさばける？という観点でベンチマークする。
有名なベンチマークのアレではPlay Frameworkはそんなスコア出てない。
Vert.x vs Play となってPlayはScalaで脳死するのでJavaが使えるVert.xが勝つ、っていう私の前提。
プロジェクトでみんなが使えるか、って視点。

#　環境
* EC2のt3.small
* EC2にSSHして内部からabコマンド実行(堪忍して、傾向はわかるはず)
* SpringBootとVert.xはKotlinで書いたけどまぁ、この程度のプログラムでそんな関係あるはずない(はず)
* Vert.xはwebプラグイン付き。流石に生は辛い

# プログラム
簡単なJSONを吐き出すエンドポイントを実装(DBとかしらん、FWの単純性能JSOシリアライズってやつ？)

# ベンチマーク
## 同時接続10

before_action

#before_actionとは

railsのコントローラーのアクションを実行する前に処理を行いたいときや、同じ記述の処理をまとめたい時に使います。

基本的な書き方は以下です

“`hoges_controller.rb
before_action :処理させたいメソッド名
“`

この場合だと、同じコントローラーに定義されている各メソッドの実行の前に、指定したメソッドによる処理が行われます。

もしくは[resourcesメソッド](https://qiita.com/kouhei_matuura/items/c440994b3e2102ddefcb)と同じようにonlyやexceptなどでアクションの限定をすることもできます。

“`hoges_controller.rb
before_action :処理させたいメソッド名, only: [:アクション1,:アクション2]
“`

この場合はアクション１と２が実行される前にのみ、指定した「処理したいメソッド」が実行されます。

#使用例

コントローラーに下記の記述があったとします。

“`tweets_co

[Rails]ユーザー情報にenumを使った実装

# はじめに
初めまして、Railsを勉強中のものです。
現在SNSアプリを開発中です。

よくある投稿機能や出品機能などに持たせるカラムとして、あらかじめ用意した値の中から選択させる属性を扱う場合`enum`が便利だと色んな記事で見てたのですが、
思っていたよりすんなり実装できなかったので初めて`enum`を使う方の参考になればと思い記録しておきます。

あくまで私が実装した内容を載せるだけなので、細かい説明は参考にしたリンクを貼っておきますのでそちらをご参照ください。

## 実装する内容
ユーザー情報に持たせるカラムとして、性別と年齢を`enum`を使って実装していきます。
Railsのバージョンは`5.2.4`です。今回は`haml`で書いてます。

それではやってみましょう。
# enumで値を定義する

まずはマイグレーションファイルから。
`enum`を使うカラムは`integer`型で用意します。

“`ruby:db/migrate/xxxx_devise_create_users.rb
class DeviseCreateUsers < ActiveRecord:

[エラー解析]デバッグして、Gemの中身を確認して、エラーの原因を特定した

## わけのわからんエラーが表示された

Facebookログイン画面の操作中に、以下のOKボタンを押すと、500番エラーが表示されログインができない。

ターミナルのログには`undefined method ‘load_from_provider’ for #`というエラーメッセージが表示されている。
Facebook固有のページには遷移できているのに、何故ログインできないのか原因を掴めなかった。

## 原因とその解決方法
結論を述べると、Userモデルの`authenticates_with_sorcery!`という、sorceryを使用する上で必要な記述がなぜか抜け漏れていたため(まさかすぎて全然気づけなかった)。
その抜け漏れを発見するまでのデバッグ処理のプロセスが勉強になったので、

編集画面で更新ができない！？

# An invalid form control with name=’◯◯[image]’ is not focusable. というエラー

編集画面（edit）ではnewの画面をコピーして使用することもあるかと思います。
私は今回コピペで作成し、動作確認をしていました。

通常であれば問題なく動くはず。。。なのですがなぜか更新ボタンを押しても反応しない状態状態でした。
デベロッパーツールを見てみると、
**An invalid form control with name=’recipe[image]’ is not focusable.**
というエラーが出ていました。


#name=’recipe[image]’のformコントローラーが使えない・・・？

##該当コード

“`
=

uniqueness: scope を使ったユニーク制約方法の解説

#uniqueness: scope を使ったユニーク制約方法の解説

uniqueness: scopeを利用して一意性検証をする方法について解説します。

## 目次
* [動作環境](#動作環境)
* [実装例](#実装例)
* [解説](#解説)
* [複数のscope](#複数のscope)
* [データベース側の制約](#データベース側の制約)
* [おわりに](#おわりに)

—————————————
## 動作環境
`OS : macOS Mojave 10.14.6`
`ruby : 2.6.3p62`
`rails : 5.2.4`

##実装例

“`ruby
class Label < ApplicationRecord has_many :labelings, dependent: :destroy belongs_to :user, optional: true validates :name, presence: true, uniqueness: { scope: :user } en

GitHubとアプリケーションの紐付け方-チーム開発-

###概要
この記事ではGitHubとアプリケーションの紐付け方を解説します。
また、その際にGitHub Desktopを活用していきます。

###方法

まず、ローカルリポジトリを作成します。

GitHub Desktopを開いて左上のCurrent　Ripositoryをクリックします。
クリックして開いた画面のAddをクリックします。

すると下記のような画面が出てきます。

rails generate migrationをdockerで立ち上げたRailsで実行したい

#はじめに
dockerでRailsを立ち上げたら、Railsコマンド使えなかった。困った。
これは完全なる自分用の備忘録です。

##既存DBのテーブルにカラムを追加したい
“`
docker-compose exec app rails g migration AddSomeColumnsToHoge
“`

`app`はdockerで立ち上がってるものです。`app`とか`web`とかそんな名前で使われることが多い。~~(知らんけど）~~
`AddSomeColumnsToHoge`の`Hoge`はカラムを追加したいテーブル名にしました。

これで`db/migrate`に `20200xxxxxx_add_some_columns_to_Hoge.rb`ファイルが作られます。
中身を見ると

“`20200xxxxxx_add_some_columns_to_Hoge.rb
class AddSomeColumnsToHygienists < ActiveRecord::Migration[5.2] def change end end ``` こんな感じ。 こ

RailsでRSSを生成した時の備忘録(RSS2.0準拠)

## これなに
RailsでRSSを生成した時にちょっと困ったりして調べたのでまとめておく。
RSS::MakerとかBuilder::XmlMarkupとかあるけど、[slim](https://github.com/slim-template/slim)で書けばいいじゃない！と思ったけど結局builderでも書きました。
たぶんSmartNewsの[SmartFormat仕様書](url: https://publishers.smartnews.com/hc/ja/articles/360010977813-SmartFormat%E4%BB%95%E6%A7%98%E6%9B%B8-RSS2-0%E6%BA%96%E6%8B%A0-)の必須項目は埋めてあるはず。

## サンプルコード

postsテーブルの構造はわりと一般的だと思うので割愛します。

### slim
“`rss.xml.slim
doctype xml
rss version=’2.0′ xmlns:content=’http://purl.org/rss/1.0/modules/content/’ xm

railsアプリの作成手順

##①rails new
rails newコマンドは、Railsアプリケーションの土台を作るためのコマンド
“`
$ rails _5.2.4_ new sample -d postgresql
“`

##②rails server
rails severはwebサーバーを起動させるコマンド
“`
$ rails db:create
“`

##③rails new scaffold
簡単なCRUD機能をもつアプリを作成するコマンド
“`
$ rails generate scaffold モデル名 カラム名:データ型
“`
作成時にGemfileからjbuilder gemを削除するとJSON関連のコードを生成しない。
“`
gem ‘jbuilder
“`

参考記事
https://qiita.com/jnchito/items/ec070f7551c983cc5b60

Rails6+Reactで付箋アプリっぽいページを作ってみた。3 (UI作成編1)

# この記事について
[前回](https://qiita.com/hanaitama-kaz/items/b461ff8564a5368523fc)までRailsを利用してバックエンド側を作り込んでみたので、フロントエンド側の実装に入っていきたいと思います。
果たして、分量が多くなりすぎるのではないかと心配してますが、きっと多くなります。

# 関連する記事
書いているうちに分量がすごくなって記事を分割したので、リンク先をまとめておきます。
[その１(環境構築〜モデル作成編)](https://qiita.com/hanaitama-kaz/items/5b68b9c665f75020bcd4)
[その２(API作成編)](https://qiita.com/hanaitama-kaz/items/b461ff8564a5368523fc)
[その３(UI作成編1)](https://qiita.com/hanaitama-kaz/items/9b680c50566161046690)
[その４(UI作成編2)](https://qiita.com/hanaitama-kaz/ite

Rails6+Reactで付箋アプリっぽいページを作ってみた。1 (環境構築〜モデル作成編)

# 手段のために目的を。。
職場で（家庭でも？）やらなきゃいけないこと（タスク）を付箋に書いて、見やすいところに貼り付けて管理している人って結構多いと思います。
そして、勝手に他人の机に自分の付箋を貼り付けて、仕事を押し付けたり、有料で取引したり。。。

そんなやりとりをWebアプリでできたら、メンバーの持っているタスクなどが共有できて面白いかも？
ということで、Reactの勉強がてら実際に作ってみた過程を共有させていただきたいと思います。

・・・というか、「RailsでReactを使って何かやってみたい」という手段を目的としているので、実用性は度外視。。。

# 関連する記事
書いているうちに分量がすごくなって記事を分割したので、リンク先をまとめておきます。
[その１(環境構築〜モデル作成編)](https://qiita.com/hanaitama-kaz/items/5b68b9c665f75020bcd4)
[その２(API作成編)](https://qiita.com/hanaitama-kaz/items/b461ff8564a5368523fc)
[その３(UI作成編1