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

windowsでRuby on Railsインストールからプロジェクト作成までの流れ

##windowsでRuby on Railsインストールからプロジェクト作成までの流れ

Railsは下記のコマンドでインストールできます。

“`terminal
gem install rails
“`

インストールが完了したら、下記コマンドでバージョン確認ができます。

“`
rails -v
gem list rails
“`
“`
rails (6.0.2.1)
rails-dom-testing (2.0.3)
rails-html-sanitizer (1.3.0)
sprockets-rails (3.2.1)
“`
特定のバージョンを追加したい場合は、下記のコマンドで追加できます。

“`
gem i -v 5.2.4.1 rails
“`
バージョンを確認すると、増えていることが分かります。

“`
gem list rails
“`
“`
rails (6.0.2.1, 5.2.4.1)
rails-dom-testing (2.0.3)
rails-html-sanitizer (1.3.0)
sprockets-rails (3.2.

[自動更新が止まらない]RailsでJavascriptファイル（html機能）を用いて自動更新機能実装をした時に、ブラウザ上の繰り返し表示が止まらないエラーの解決例

#1.エラーの様子と間違っていたファイル

まず筆者が起こしたエラーは下のものです

＜エラーの様子（gifなので動かない場合は画像をクリックしてご確認ください）＞

言葉で表現すると、仕様としてはsendボタンを押したら、1回だけ「家に帰ってお母さんに報告だ！」が出て（ブラウザ上の）更新が止まる予定でした。（裏では1秒に１度更新する設定にはしていますが、見た目に反映させない仕様を目指していました。）

しかしご覧の通り表面上ループを抜けられずコメントがずっと繰り返されてしまいます。
（これでは永遠にお母さんに報告し続けることとなってしまいます。）

困ったなと思いながら、この表記をするファイルにlinkを組んである「qiitaに聞いた」をクリックするとコメントは１度のみ投稿されたこととなっています（データベースへの取得は一回だけと設定ができ

【Rails】 DataTables 実装方法

# はじめに
RailsアプリケーションでDataTablesを使っている記事を見かけなかったので、まとめることにしました。
やり方がわかっていないと細かい仕様を変更するのに時間がかかってしまいますが、やり方さえ覚えてしまえばとても使いやすい強力なツールです。
Bootstrap や jQuery UI を使うことによって、時間をかけずに多機能&良いレイアウトを提供してくれるため、爆速で開発できるRailsととても相性がいいと個人的には思っています。

# DataTables
DataTables は、HTMLのテーブルに、__ページ切り替え、ページ当たりの件数設定、ソート、フィルタなどの機能を簡単に追加できるjQuery プラグインのライブラリ__。

# 使い方
## 設定
“`Ruby:GemFile
# ページネーションにはkaminariを使用するため
gem ‘kaminari’
gem ‘jquery-datatables-rails’
“`

“`
$ bundle install
“`

“`
$ rails g jquery:datatables:in

Rails6 アプリからGmailのメールサーバからメールを送信する

# 目的

– Rails6で作成したアプリからGmailのメールサーバを利用してメールを送信する方法をまとめる。

# 前提条件

– Googleのアカウントを持っていること。
– Googleの二段階認証の設定がなされていること。
– まだの方→[Google 二段階認証設定をONにする方法](https://qiita.com/miriwo/items/0331e7241710fb4759fe)
– Googleのアプリケーション用パスワードを取得していること。
– まだの方→[Google メールアプリケーション用のパスワードを取得する](https://qiita.com/miriwo/items/833d4189140831c5d039)
– 正常に動作しているRails６のアプリがあること。
– テストメールを送信できるアドレス(メールを送信しても迷惑にならないメールアドレス)を知っていること。
– 二段階認証、アプリケーション用パスワードを取得しているアカウントのメールアドレスでもOK(自分にテストメールを送信して確認する)

# 作業期待値

【テックエキスパート】Rails勉強会良かった点と今後のリクエスト

◆理由・良かった点
(夜間組は普段コミュケーションが取りづらいので)

・進捗シート上の数字だけでなく、実際の同期メンバーの状況が分かる

・上記により、モチベーションアップや、情報交換が出来る

・教室へ行くのが億劫になってしまった場合に、いつもと違う気分で向かえる

・FocusDay以上に、Focus出来る

・単純にたのしい

◆要望

・勉強会などのイベントを、もう少し頻度を増やして惜しい (出来れば2週間に1回など)

・1時間よりも長めにしたい

・今日の形式以外にも、変わった勉強会や、プレゼン方式？など、
色々なイベントを増やして欲しい (気分が変わり、楽しいという気持ちになれる)

取り出した情報（インスタンス変数）をhaml記法を用いてビューで表示させたいです。

初投稿です。初心者なので理解不足点、お見苦しい文面お許し下さい。

コントローラーからモデル経由で取り出したDBのデータを表示させたいのですがうまくいきません。
やりたい事はhaml記法でビューに取り出したデータを一覧表示させたいです。
試したことはデバックを行いデータ@pruducts@imagesは中身があることはわかりました。
hamlの記法においてendがないのでdo抜けやインデントミスが原因だとは思うのですが見つけることができませんでした。回答いただけましたら幸いです。よろしくお願いします。

# products_controller.rb
“`Ruby
class ProductsController < ApplicationController def index @products = Product.includes(:images) @images = Image.includes(:product) end def show end def new end end ``` # content.ht

You don’t have bcrypt installed in your application. と言われた

railsチュートリアル第6章の最後の最後のrails testでエラってハマりまくったので備忘録。

#環境
– Rails 5.1.6
– ruby 2.6.1p33 (2019-01-30 revision 66950) [x86_64-darwin18]

#問題発生

ユーザー作成も認証もできたし一区切り！と、ローカルでの`rails test`はok
しかしマージしてpushしたあと再び`rails test`したところ怒られました

“`railsconsole
You don’t have bcrypt installed in your application. Please add it to your Gemfile and run bundle install:??
“`

bcryptはinstallしてるしGemfileにもGemfile.lockにもあるのになんでだ・・・？
ググると同じようなエラーでハマったという方がいらっしゃって
rails server再起動とかuninstallしてから再インストールやってみたけど解決せず・・

#なんとか解決

【Rails】Colorpickersliderの使い方

# 開発環境
Rails 5.2.4.1
ruby 2.4.0

## 前提
devise導入済み
userにcolorカラムを追加

## 参考URL
[色の指定が自由自在！カラーピッカーを出現させるjQueryプラグイン「Bootstrap Color Picker Sliders」](https://haniwaman.com/bootstrap-color-picker-sliders/)
[Bootstrap Color Picker Sliders]( https://www.virtuosoft.eu/code/bootstrap-colorpickersliders/)

### まとめた経緯
自社内サービスでガントチ

エンジニアのポートフォリオを作ってみた

以前からポートフォリオサイトを作ってみたかったので今回作ってみました。

https://sssttt-maker.github.io/portfolio/

github.ioで公開できる最近まで知りませんでした。

デザイン

デザインは、僕の大好きなブランド会社のTOKYO BASEさんのホームページを参考にさせていただきました。

トップページ

パララックスサイトみたいなのがかっこいいなと思ったので導入。
セクションが次々に動いていてとても気持ちいいです。

cssで

“`
position: sticky;
“`

というのをsection指定にして入れるだけで簡単に再現できちゃいます。

configure IIS with ruby on rails app on windows server

As the title looks strange, RubyOnRails application deploy on Windows Server??? really???

Yes, today I would like to share my experience, how I managed to deploy a Ruby application on the window server(IIS).

Most of the Ruby applications are deploying on a Linux system(cents, ubuntu, AMI) & as the performance perspective, which is also very good and the developer also prefers to develop on Linux systems, because all gems are easily installed on Linux machine in compare to install on the Windo

Rails+WebpackerにVue.jsとReactの両方を入れる

環境：Rails 6.0、Webpacker 4.2、Vue.js 2.6、React 16.12

Webpackerを使ってVue.jsとReactの両方を動かすことに成功したので、メモしておきます。

### コピー元の作成

まず、設定ファイルのコピー元とするだけのアプリケーションを作成します。すでにVueを入れたアプリケーションがある場合は、Reactで作ります。

“`zsh
% rails new reactapp –webpack=react
“`

Reactを入れたアプリケーションがある場合は、Vueを指定します。

“`zsh
% rails new vueapp –webpack=vue
“`

### yarn add

Vueで作ってあるアプリケーションには、Reactのモジュールをインストールします。prop-typesはWebpackerがデフォルトで入れるものですが、必須ではありません。

“`zsh
% yarn add @babel/preset-react babel-plugin-transform-react-remove-pr

Rails Tutorialの知識から【ポートフォリオ】を作って勉強する話 #17.5 MySQL導入編

# こんな人におすすめ
* プログラミング初心者でポートフォリオの作り方が分からない
* Rails Tutorialをやってみたが理解することが難しい

前回：[#17 VPC環境構築編](https://qiita.com/aokyo17/items/405d8eda3b6108c7af05)
次回：準備中

# 今回の流れ

1. SQLite3からMySQLに変更する

この記事は、**動画を観た時間を記録するアプリのポートフォリオ**です。
今回は**RailsアプリのDBをSQLite3からAWSによるRDSのMySQLに変更**します。
**RDSはすでにAWSで作成しているものとします**（詳しくは[#17](https://qiita.com/aokyo17/items/405d8eda3b6108c7af05)をご覧ください）。

# SQLite3からRDSのMySQLに変更する
RailsアプリのDBをSQLite3からRDSのMySQLに変更します。

* Gemfileを編集する
* エンドポイントを確認する
* database.ymlを編集する
* RD

high_voltageで利用規約等の静的ページを作る

#high_voltageで静的ページ（プライバシーポリシー、利用規約など）作成
routesとcontrollerの記述不要
headerやfooterを適用したい場合

`gem high_voltage`
で

“`routes.rb
/pages/*id
“`
を自動生成してくれる。rails routesで確認しよう
routes.rbには記述しないでいい

#つまづいたところ
https://github.com/thoughtbot/high_voltage

Disabling routes
The default routes can be completely removed by setting the routes to false:

“`
# config/initializers/high_voltage.rb
HighVoltage.configure do |config|
config.routes = false
end
“`
※high_voltageのgithub参照

config.routes = false
はhigh_vo

RailsにおけるAjaxの実装（JavaScriptとjQueryのコード比較）

# 1. はじめに
RailsでAjaxを実装するには、jQueryを使うのが便利です。
しかし、ブラックボックスが多すぎて、何をやっているのか、いまいちよく分かりません。

そこで、jQueryで記述したAjax処理を、改めてJavaScriptのみを用いて記述し直してみました。
以下、jQuery及びJavaScriptのコードを比較しつつ、使用したメソッドなどについて記録しておきます。

対象とするHTTPメソッドは、POSTメソッドとDELETEメソッドです。
なお、turbolinksは無効にしています。

誤りなどあれば、ご指摘をいただけると幸いです。

### 実行した環境
– Rails 5.2.4.1
– Ruby 2.5.1
– jQuery 1.12.4
– jquery-rails 4.3.5
– （※ turbolinksは無効にしています）

コードの記載にあたっては、次のような簡易ツールを作って、挙動を確認しています。
Hamlでのlink toの書き方【Rails】

Hamlにおける link to の書き方がいつも迷ってしまうのでメモ。

## Hamlでのlink to の書き方

/profiles のページに飛ばしたい場合
以下どちらかの書き方がある。

“`ruby:sample.html.haml
#以下のどちらでもよい
= link_to “/profiles” do #①
= link_to profiles_path do #②
“`

/profiles/new のページに飛ばしたい場合
以下どちらかの書き方がある。

“`ruby:sample.html.haml
#以下のどちらでもよい
= link_to “/profiles/new” do #①
= link_to new_profile_path do #②
“`

## ②の書き方のpathはどこから取得するのか

ターミナルで $rails routes で出てくる。

例）この `Prefix` の部分

“`console:terminal
$ rails routes
Prefix Ve

Railsチュートリアル 第13章 ユーザーのマイクロポスト – マイクロポストの画像投稿

# 概要

マイクロポストの投稿に関する基本的な機能は、第13章ここまでの学習で一通り実装が完了しました。続いては「画像つきマイクロポストを投稿できるようにする」という項です。

「画像をアップロードしてマイクロポストに関連付ける」という機能を実装するためには、以下のリソースが必要となります。

* 画像をアップロードするためのフォーム
* 投稿された画像そのもの

画像をアップロードするためのフォームには、「Upload Image」というボタンからアクセスすることとします。Railsチュートリアル本文では、[図 13.18](https://railstutorial.jp/chapters/user_microposts?version=5.1#fig-micropost_image_mockup)に、「Upload Image」ボタンと画像つきマイクロポストを含むモックアップが示されています。

まずは開発環境にて、画像アップロード機能のβ版を実装していくこととします。

# 基本的な画像アップロード

長くなりましたので、別記事で解説します。

* [Railsチュートリアル

【Rails】ActionMailer + AWS SES

# はじめに
Rails アプリケーションからユーザーへメールを飛ばす方法としてAWS SESというサービスがあるので、こちらの使い方を説明させていただきます。
設定方法なので知っていればすぐにできるんですが、知らなければやり方を見つけるだけでかなり時間がかかってしまうと思います。
時間短縮の一助になれば嬉しいです。

#### 関連リンク
Gmailを用いたActionMailerの使い方についても下記に載せておくので、必要であれば参考にしてください。。

* Gmailを用いた ActionMailer の使い方
* https://qiita.com/syukan3/items/ed32367b2b6cb78309ac

## アプリケーション作成
以下の項目については、上記の”Gmailを用いた ActionMailer の使い方”と同様となるため、そちらをご参照ください。

* Mailer作成コマンド（rails g mailer ~）
* Mailer
* Controller
* View

## ドメイン関連
下記リンク先をご参照ください。

* AWSだけ

Railsチュートリアル 第13章 ユーザーのマイクロポスト – 本番環境での画像アップロード

# 本番環境での画像アップロードに必要な技術

本番環境に画像をアップロードするためには、以下のような技術が必要となります。

* AWS IAMにおけるグループおよびユーザーの設定
* AWS S3バケットの新規作成およびアクセス権設定
* 本番環境に適用するRails設定の記述
* Herokuの環境変数設定

特に未経験の人にとっては、相応に高度で総合力が試されるパートではないかと思われます。

# 本番環境での画像アップロードに必要な設定

現在までに実装した画像アップローダーは、ローカルのファイルシステムに画像を保存するようになっているため、本番環境での使用には適していません。「ローカルのファイルシステムに画像を保存する」という動作は、`app/uploaders/picture_uploader.rb`内の以下の記述に由来します。

“`ruby:app/uploaders/picture_uploader.rb（抜粋）
# Choose what kind of storage to use for this uploader:
storage :file
# stor

ページ遷移先でリロードしないと非同期通信(ajax)できない

#はじめに
某プログラミングスクールの課題で、Railsを使ってECサイトを作成しています。

#エラー発生時の状況
トップページにて、link_to でページに移動するとリロードしないと非同期通信できない

#エラーの仮説
turbolinksが邪魔してそう…

##turbolinksってなんだっけ？
turbolinksとは、ページ遷移をAjaxに置き換え、JavaScriptやCSSのパースを省略することで高速化するgemで、Rails 4からはデフォルトで使用されるようになります。

##原因
data-turbolinkが働いて遷移したページではイベントが発火しない事があるらしい．

##対策
“`ruby

= link_to new_item_path,data: {“turbolinks” => false}, class: “seller_btn” do
“`
これ→

“`ruby

{“turbolinks” => false},
“`
###data-turbolinkをオフにする
###遷移元のリンクタグにdata属性を追加

#参考記事
R

https(SSL)通信の環境下でjavascriptが動かなくなる場合の原因と解決方法 ( 本番環境(AWS)でjavascriptを読み込む方法 )

#はじめに
某プログラミングスクールの課題で、Railsを使ってECサイトを作成しています。

##発生時の状況
商品出品画面のカテゴリー選択時、javascriptを使ってサブカテゴリーを入力できる機能を実装
本番環境にデプロイすると、カテゴリー選択時にサブカテゴリーが出現せず入力できませんでした。

#エラーの仮説
・javascriptが本番環境で読み込めてない

#エラーの原因
本番環境つまり、httpsによるSSL暗号通信下では、読み込んでない。

#対策
###1,jQuery本体をダウンロードして自分のサーバーで動かす方法。

###2,URLをhttpsに変更する方法。

“`application.html

“`

##3,プロトコルを指定しない方法。

“`application.html