20201009のRailsに関する記事は28件です。

投稿日：2020-10-09T23:19:42+09:00

続・ActiveStorageを使って、画像投稿機能実装までの流れ

はじめに

　ActiveStorageを使った画像保存から表示までの説明。前回の投稿で、ActiveStorageの導入方法については説明している。

リンク↓
ActiveStorageを使って、画像投稿機能実装までの流れ

画像の保存から表示までの流れ

アソシエーションの定義

ストロングパラメーターに画像保存の許可をする

HTMLのimg要素として生成

エラーの解消

画像の大きさ調整

バリデーションの設定

1. アソシエーションの定義

has_one_attachedメソッドを用いて、各レコードと画像ファイルを１対１の関係で紐づける。
紐づけたいモデルファイルに記述
model
class　モデル < ApplicationRecord
 has_one_attached :ファイル名
end
ファイル名には、呼び出す際の名前を設定する。また、パラメーターのキーになる。
ex):image, :file etc
イメージとしては、ファイル名のカラムができて、そこに添付ファイルが入っているような感じ。
このアソシエーションをすることで、
モデル名.ファイル名で添付したファイルにアクセスすることができる。

2. ストロングパラメーターに画像保存の許可をする
controllers
 params.require(:message).permit(:text, :image)
アソシエーションの定義のときにも取り上げたように、パラメーターのキーにファイル名を用いる。このときにも、カラムができているイメージというのは当てはまるだろう。

以上が、保存までの流れ。

以下は、表示するまでの流れ。

3. HTMLのimg要素として生成

image_tagメソッドというヘルパーメソッドを用いて、HTMLにimgタグを生成する。
html.erb
<%= image_tag モデル名.ファイル名 %>
<%= image_tag message.image %>  #例
アソシエーションしているため、モデル名.ファイル名だけの記述で画像を表示させられる。

基本的にはここまでで、画像を表示できる。しかしこのままでは、画像が必ずなければ、エラーになってしまう。

4. エラーの解消

　先のimage_tagメソッドにif文で条件分岐させる。
html.erb
<%= image_tag message.image, if message.image.attached? %>
attached?メソッド で画像が添付されていると、trueを返し、読み込まれる。画像が添付されていないと、falseを返し、読み込まれず、エラーが起きない。

5. 画像の大きさ調整

ActiveStorageを導入していると使えるメソッドのvariantメソッドを使う。
先のコードに付け足すと、
html.erb
<%= image_tag message.image.variant(resize: '500×500'), if message.image.attached? %>
画像の表示サイズを指定すると、それ以上に大きくならない。

6. バリデーションの設定

現状だと、LINEをイメージすると、テキストと画像が必ず両方ないとエラーになる。使い勝手がよくないため、テキストと画像のどちらかが存在すればよい、という仕様にする。
model
validates :message, presence: true, unless: :was_attacher?

def was_attached?
 self.image.attached?
end
メソッドの返り値がfalseならば、バリデーションの検証を行う。（messageが存在しないとダメ）

最後に

アソシエーションするだけで、簡単に画像にアクセスできるのが便利すぎる！！

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-09T23:07:10+09:00

Railsチュートリアル Herokuへのデプロイのエラーを解決したので解決方法をメモ

初めてのqiita投稿です。
Rails-Tutorialの第一章 1.5.2 Herokuへのデプロイでいきなり躓きました。ググってもなかなか解決策が出て来なくて序盤で手こずったので、解決策を覚書。

◆症状

Rails-Tutorialのテキストの通り進めていったところ、
"git push Heroku main"を行い、無事デプロイまで進んだように見えたが、以下の画面となった。
（本当なら「Hello, World!」と表示されるはずであった。）

◆原因

原因は、Heroku上の別のリポジトリへデプロイを行っていたこと。
詳細は分からないけれど、元をたどれば、デプロイ前に一度食事で手を止めたせいで、デプロイ前のherokuコマンド"heroku create"を２回行ってしまっていたことが原因と思われる。

　　デプロイ先　　　　：　１回目に作成したリポジトリ
　　閲覧していたＵＲＬ：　２回目に作成したリポジトリ

上記の通りとなっていた。

◆解決策

①閲覧していた2回目に作成したリポジトリに、push先を変更した。（下記コマンドの実行）
Terminal
git remote set-url heroku ["heroku create"の実行時にターミナルに表示されるgitのリポジトリ ]
②再度pushの実行
Terminal
git push heroku main
※Railsチュートリアルには"main"が"master"と記載されているけれど、githubの仕様変更？で、この記事の作成時点（2020年10月9日現在）ではmainで正となっている。

無事画面が表示された。（"hello, world!"じゃなかった。）

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-09T20:20:12+09:00

[ActiveStorage] ファイルのURLにアクセスしたときに routes.rb 末尾の *path にマッチしてしまうのを避ける

config/routes.rb の末尾に *path などのルーティングがあると、
ActiveStorageのファイルを示すエンドポイント(/rails/active_storage/...)¹よりも先にマッチしてしまう。
config/routes.rb
Rails.application.routes.draw do
  ...

  get "*path" , to: redirect('/')
end
これを回避するためには以下のようにする。
config/routes.rb
Rails.application.routes.draw do
  ...

  get '*path' , to: redirect('/'), constraints: lambda { |req|
    req.path.exclude? 'rails/active_storage'
  }
end
これで rails/active_storage を含むパスがマッチしないように設定できる。

constraints オプションについて

特定のルーティングに制約(constraints)を与えるためのオプションという解釈。
以下のようにして使う。
# match `/users/A12345`, but not `/users/893`
get 'users/:id', to: 'users#show', constraints: { id: /[A-Z]\d{5}/ }

# match port 3000 only
get :users, to: 'users#index', constraints: { port: '3000' }
上述のようにlambdaを指定することもできる。²
get "hi", to: redirect("/foo"), constraints: ->(req) { true }
参考

https://qiita.com/NaokiIshimura/items/0f0e56c159c95b59b11f

https://github.com/rails/rails/issues/31228#issuecomment-352900551

https://y-yagi.tumblr.com/post/92386974040/rails-routing-constraintsについて

https://railsguides.jp/routing.html#セグメントを制限する

定義はこちら https://github.com/rails/rails/blob/v5.2.4.4/activestorage/config/routes.rb#L4 ↩

厳密には request を引数に取る call メソッドが呼び出し可能なオブジェクトを指定すればよさそう。リクエスト毎に呼ばれる call がtrueを返す場合にのみ、対象のルーティングがマッチするといった動作のよう。本投稿では触れていないが matches? でも可。 ( テストコード、実装部分を参照) ↩

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-09T19:30:02+09:00

【Ruby on Rails】RSpec実行時にgem 'chromedriver-helper'は非推奨ですよって警告を受ける。

前書き・編集点

この記事は前回の記事
【Ruby on Rails】RSpec実行時にgemのバージョン違いで警告を受ける。
の続きですが、全く別の警告だったので２つに分けました。

2020.10.10
コメントで、私の解釈の違いについてご指摘をいただきましたのでその点修正を行いました。

環境

Ruby 2.5.7
Rails 5.2.4

gem

gem 'rspec-rails', '~> 3.6'

経緯

RSpecを使ってテストコードを記述し、実行すると下記のような警告文が出ました。
$ rspec spec/models/tag_spec.rb 

2020-10-09 09:13:13 WARN Selenium [DEPRECATION] Selenium::WebDriver::Chrome#driver_path= is deprecated. Use Selenium::WebDriver::Chrome::Service#driver_path= instead.
これはエラーではないのでテストは正常に実行されますが、毎回出るのを放っておくわけにも行かないのでこれも解決していきます。

手順

警告文の内容ですが、
Selenium::WebDriver::Chrome#driver_path= is deprecated.
Chromeクラスのdriver_path=メソッドが非推奨であるため、
Selenium::WebDriver::Chrome::Service#driver_path= instead.
Serviceクラスのdriver_path=メソッドを代わりに使うようにというメッセージです。

こちらに書かれている通り、私のGemfileにもgem 'chromedriver-helper'がありましたので、まずはこれをコメントアウトします。
次に代わりとなる
gem 'webdrivers'を記述します。

最後に
$ bundle install
で解決することができました。

まとめ

質問や解釈の違い、記述方法に違和感ありましたら、コメント等でご指摘いただけると幸いです。

最後まで読んでいただきありがとうございました。

参考サイト

私のGitHubに実際に使っているファイルを公開しているのでそちらも参考にしていただければと思います！
GitHub - MasaoSasaki/matchi

その他
Qiita - サポートが終了したchromedriver-helperからwebdrivers gemに移行する手順
 Qiita - rspec-rails 3.7の新機能！System Specを使ってみた

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-09T19:18:41+09:00

【Rails,JS】コメントの非同期表示を実装する方法

この記事では、コメントを非同期で表示できる実装方法を解説します。

Rails_6.0.0_ を使用しています。

商品が出品・購入できるアプリケーションにコメントをつけます。

それぞれの商品（item）の詳細ページにコメントをする場所があります。

コメントの保存や送信に必要なRubyのコーディングと、保存したコメントを即時に表示させるJavaScriptのコーディングを行います。

すでにコメント投稿機能は完成している体で、非同期機能だけ実装していきます。

実装内容

channelを用いて実装を行う

コメントを非同期で表示

コメントには名前（name）、コメントされた日付（created_at）、コメント内容（text）を表示

channelとは？

channelとは？

チャネルとは、即時更新機能を実現するサーバー側の仕組みのことです。データの経路を設定したり、送られてきたデータをクライアントの画面上に表示させたりします。

channelでどんなことができる？

データの経路を設定したり、送られてきたデータを表示させるJavaScriptを記述すれば、送信したデータが非同期で表示できます。

channelのファイル作成

ターミナルで以下コマンドを実行
% rails g channel comment
(commentには自分が作成するファイルの名前を記述)
いくつかファイルができますが、今回は以下2つのファイルを使用します。

app/channel/comment_channel.rb

クライアントとサーバーを結びつけるためのファイルです。

app/javascript/channels/comment_channel.js

サーバーから送られてきたデータをクライアントの画面に表示させるためのファイルです。

comment_channel.rbの記述
class MessageChannel < ApplicationCable::Channel
  def subscribed
    stream_from "comment_channel"
  end

  def unsubscribed
  end
end
stream_from "comment_channel"を記述することでサーバーとクライアントを結びつけることができます。

comments_controller.rbの記述

コントローラーの記述です。
すでに非同期でないコメント実装機能は済んでいる体なので、非同期に関する記述以外の説明は割愛します。

データベースからJSに渡したいデータを記述する

今回JSで反映させたいデータは以下の通りです

ユーザーのニックネーム

コメントされた時間

コメントのテキスト

アイテムのid(どの商品にコメントするかを判断するために必要)

この3つの情報を、コントローラーでJSに渡してあげる必要があります。
class CommentsController < ApplicationController
  before_action :authenticate_user!
  def create
    @comment = Comment.new(comment_params)
    @item = Item.find(params[:item_id])
    @comments = @item.comments.includes(:user).order('created_at DESC')
    if @comment.valid?
      @comment.save
            ActionCable.server.broadcast  'comment_channel', content: @comment, nickname: @comment.user.nickname, time: @comment.created_at.strftime("%Y/%m/%d %H:%M:%S"), id: @item.id
    else
      render "items/show"
    end
  end

  private
    def comment_params
    params.require(:comment).permit(:text).merge(user_id: current_user.id, item_id: params[:item_id])
    end
end
今回の実装で書き足したのは以下の1文だけです。
ActionCable.server.broadcast 'comment_channel', content: @comment, nickname: @comment.user.nickname, time: @comment.created_at.strftime("%Y/%m/%d %H:%M:%S"), id: @item.id

contentとuserとtimeとidをJSで使用するので、そちらの定義をしてあげました。
content
@commentで定義している:text、Commentテーブルのtextカラム、すなわち入力したコメントのことです。
user
@commentに紐づいているuserのnicknameをとってきています。（commentとuserにアソシエーションを組んでいます。）
time
Commentテーブルのcreated_atカラムです。strftime("%Y/%m/%d %H:%M:%S")と記述することで任意の日付、時刻設定を表示できます。以下の記事を参考にさせていただきました。
strftime を憶えられない (rubyの)
item
自分が今表示しているアイテムのページだけでJSが発火する必要があるので、それを判断するために使用します。

comment_channel.rbの記述(JavaScript)

今回はapp/javascript/channels/comment_channel.jsのreceived()部分に記述していきます。
app/javascript/channels/comment_channel.js
received(data) {
}
()の中にdataと記述してあげることで、コントローラーで定義した値がとってこれるようになります。receivedは、受け取るという意味なので、データを受け取ったら、この中に記述しているJSを実行してね！ということになります。
さあ、これからこの中にJSの記述をしていきます！

今開いているアイテムページだけでコメント表示できるように、条件分岐分を書きます。
app/javascript/channels/comment_channel.js
//現在開いているページのURLをゲット
let url = window.location.href
//スラッシュ(/)ごとに要素を取り出す
let param = url.split('/');
//このアプリの場合、URLの一番最後にアイテムidがきており、それをparamItemとして定義
let paramItem = param[param.length-1]
// パラメータid(URLの中に含まれているid)が、コントローラーから送った`data.id`かどうかを判断する
if (paramItem == data.id) {}
if文で、条件分岐をしてあげます。次は、処理の内容を条件分岐分の中に書いてあげます。
記述する内容は、

div要素を生成する

生成した要素をブラウザに表示させる

表示させるテキストを生成する

といった流れです。

表示させるためのdivを作る
app/javascript/channels/comment_channel.js
    //表示させる場所のdivのIDをとってくる
    const comments = document.getElementById('comments');
    //　すでにあるビューファイルと同じになるようにdivを作成
    const textElement = document.createElement('div');
    textElement.setAttribute('class', "comment-display");

    const topElement = document.createElement('div');
    topElement.setAttribute('class', "comment-top");

    const nameElement = document.createElement('div');
    const timeElement = document.createElement('div');

    const bottomElement = document.createElement('div');
    bottomElement.setAttribute('class', "comment-bottom");
createElementメソッドを使用し、div要素を作成、必要なものにはそれぞれsetAttributeメソッドでclass名を与えてあげます。

ちなみに、コメントを表示するビューは以下の通り
      <div id='comments'>
      </div>
      <% @comments.each do |comment| %>
        <div class='comment-display'>
          <div class='comment-top'>
            <div><%= comment.user.nickname %></div>
            <div><%= l comment.created_at %></div>
          </div>
          <div class='comment-bottom'>
            <p><%= comment.text %></p>
          </div>
        </div>
      <% end %>
div要素を生成しましたが、まだブラウザに表示されていません。ブラウザに表示させ、かつ親子関係を作りましょう。
app/javascript/channels/comment_channel.js
      // 生成したHTMLの要素をブラウザに表示させる
      comments.insertBefore(textElement, comments.firstElementChild);
      textElement.appendChild(topElement);
      textElement.appendChild(bottomElement);
      topElement.appendChild(nameElement);
      topElement.appendChild(timeElement);
insertBefireメソッドと、appendChildメソッドを使用します。
親要素.insertBefore(追加する要素, どこに追加するのか)
親要素.appendChild(追加する要素)
で、insertBefireは任意の場所に、appendChildは親クラスの中の最後のに要素を入れることができます。

もう少し詳しく見たい方は以下をご覧ください
【JavaScript】appendChildとinsertBeforeの違い

div要素が作成できたら、次は表示させる情報をとってきましょう。
app/javascript/channels/comment_channel.js
      const name = `${data.nickname}`;
      nameElement.innerHTML = name;
      const time = `${data.time}`;
      timeElement.innerHTML = time;
      const text = `<p>${data.content.text}</p>`;
      bottomElement.innerHTML = text;
表示させる情報をそれぞれ変数に入れています。dataは、received(data) {}のdataです。コントローラーで定義した値のことです。それぞれcontent,nickname,time,を定義しましたね。
innerHTMLで、既存の要素にHTMLを上書きをします。

ここまでで表示は完了しました！
ですがこのままだと、２つ問題があります。
1. データは表示されたが、コメント入力欄にコメントが残ったままであること
2. HTMLはデフォルトでボタンが１回しか押せない仕様になっていること
これを解決しましょう！

データ送信した後にコメント入力欄のコメントを消す
app/javascript/channels/comment_channel.js
    const newComment = document.getElementById('comment_text');
    newComment.value='';
コメント入力欄のIDをとってきて、そこの値を空にする、という記述です。

何度もコメントボタンを押せるようにする
app/javascript/channels/comment_channel.js
    const inputElement = document.querySelector('input[name="commit"]');
    inputElement.disabled = false;
"コメントする"ボタンの、name属性をとってきて、そこをdisabled = falseとしてあげることで何度もクリック可能になります。

記述をまとめると以下の通りです。
app/javascript/channels/comment_channel.js
import consumer from "./consumer"

consumer.subscriptions.create("CommentChannel", {
  connected() {
  },

  disconnected() {
  },
  // ↓データを受け取ったら実行してね
  received(data) {
    let url = window.location.href
    let param = url.split('/');
    let paramItem = param[param.length-1]
    if (paramItem == data.id) {
      const comments = document.getElementById('comments');
      const comment = document.getElementsByClassName('comment-display');
      //使用する要素の作成
      const textElement = document.createElement('div');
      textElement.setAttribute('class', "comment-display");
      const topElement = document.createElement('div');
      topElement.setAttribute('class', "comment-top");
      const nameElement = document.createElement('div');
      const timeElement = document.createElement('div');
      const bottomElement = document.createElement('div');
      bottomElement.setAttribute('class', "comment-bottom");
      // 生成したHTMLの要素をブラウザに表示させる
      comments.insertBefore(textElement, comments.firstElementChild);
      textElement.appendChild(topElement);
      textElement.appendChild(bottomElement);
      topElement.appendChild(nameElement);
      topElement.appendChild(timeElement);
      // 表示するテキストを生成
      const name = `${data.nickname}`;
      nameElement.innerHTML = name;
      const time = `${data.time}`;
      timeElement.innerHTML = time;
      const text = `<p>${data.content.text}</p>`;
      bottomElement.innerHTML = text;
      //コメントを送った後、コメント欄をからにする
      const newComment = document.getElementById('comment_text');
      newComment.value='';
      //何度もボタンを押せるようにする
      const inputElement = document.querySelector('input[name="commit"]');
      inputElement.disabled = false;
    }
  }
});
おわりに

完成したと思っていましたが、これを書いている時点でいくつもミスや、ちょっとよくわからない記述を発見しました。
リファクタリングがいかに大切かよく分かりました。
正しく無い記述があるかもしれませんが、誰かのお役に立てれば幸いです。

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-09T19:16:54+09:00

【Rails】複数モデルのインスタンスを一覧表示する

したいこと

YouTubeやFacebookのタイムラインのように、投稿と広告を作成降順に同じ画面に表示する機能が必要になった（通常なら広告は作成順の表示ではないかもしれないが、話を簡単にするために作成順で並べると仮定する）。

投稿モデル（Post）と広告モデル（Advertisement）をコントローラーでうまいこと取得して、ビューで並列して処理する方法を考える。

前提

バージョン

Ruby 2.6.3

Rails 5.2.3

それぞれのモデルのカラム
# 投稿モデルと広告モデルはカラムが異なるとする

# 投稿モデル（Post）
  t.integer "user_id"
  t.string "content"
  t.string "image"
  t.datetime "created_at"
  t.datetime "updated_at"

# 広告モデル（Advertisement）
  t.integer "company_id"
  t.string "content"
  t.string "link_url"
  t.datetime "expired_date"
  t.datetime "created_at"
  t.datetime "updated_at"
実装方法
timeline_controller.rb
def index
  posts = Post.all
  ads = Advertisement.all

  # それぞれの複数インスタンスを1つの配列にする
  @instances = posts | ads
  # 作成降順に並び替え
  @instances.sort!{ |a, b| b.created_at <=> a.created_at }
end
index.html.erb
<% @instances.each do |instance| %>
  <% if instance.class == "Post" %>
    <%# Postの表示 %> 
    <%= instance.user_id %>
    <%= instance.content %>
    <%= instance.image %>
  <% else %>
    <%# Advertisementの表示 %> 
    <%= instance.company_id %>
    <%= instance.content %>
    <%= instance.link_url %>
  <% end %>
<% end %>

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-09T18:47:52+09:00

【Ruby on Rails】RSpec実行時にgemのバージョン違いで警告を受ける。

前書き・編集点

2020.10.10
コメントより

環境

Ruby 2.5.7
Rails 5.2.4

gem

gem 'rspec-rails', '~> 3.6'

経緯

RSpecでテストコードを書いて、いざ実行すると、次のようなエラーが発生しました。
$ rspec spec/models/tag_spec.rb

WARN: Unresolved specs during Gem::Specification.reset:
      diff-lcs (< 2.0, >= 1.2.0)
WARN: Clearing out unresolved specs.
Please report a bug if this causes problems.
正確にはエラーではなく、同じgemで複数のバージョンがあるからそれの警告を受けているようで、テスト自体は無事に実行されていました。
しかし、放っておくわけにも行かないので、解決していきます。

手順

解決策はこちらの記事を参考にさせていただきました。
Qiita - RubygemでWARN: Clearing out unresolved specs.が出た時の対応

まずは問題のgemについて確認していきます。
$ diff-lcs (< 2.0, >= 1.2.0)
diff-lcsというgemのバージョンが複数あるという指摘でしたが、このgemは自分でインストールした覚えはないので、当然ながらGemfileには記載がありません。
となると、何らかのgemをインストールした時にbundlerが依存gemとして自動的にインストールした可能性があるので、Gemfile.lockを確認すると、rspecのgemの依存以外のところにもdiff-lcs (1.4.4)がありました。

rspecでインストールされている依存gemは2箇所あって、どちらもdiff-lcs (>= 1.2.0, < 2.0)という感じで、バージョンは書かれていないので、このgemのバージョンを次のコマンドで調べていきます。
$ gem list -a | grep diff-lcs

diff-lcs (1.4.4, 1.4.2, 1.3)
調べた結果、どうやら(1.4.4, 1.4.2, 1.3)３つのバージョンがインストールされているようです。
依存していない方のdiff-lsc (1.4.4)がこの中で一番最新ということで、rspec依存の他二つをこのバージョンに合わせていきます。

ここで一つ注意ですが、bundlerで依存しているgemをインストールした場合、依存gemのバージョンを安易に変更してしまうと、依存関係にある他のgemに不具合が起きる可能性があります。
今回の場合だと、rspec依存のdiff-lcs (< 2.0, >= 1.2.0)はバージョンが「1.2.0以上、2.0未満」と書かれてあったので(今回の中で)最新の1.4.4ならバージョンアップしても問題ないという結論に至りました。

次に参考サイトにも書かれてあるコマンドを実行していきます。
$ gem cleanup
そして
$ bundle install
これで警告文が消えました。

手順(依存関係でgemが複数バージョン必要な場合)

こちらコメントより抜粋させていただきます。
$ bundle exec rspec (実行ファイル指定)
を行うと、bundlerがGemfileに記述されている依存関係を自動的に認識してくれます。

依存関係が複雑になって、どうしても複数バージョンが必要な時は、前述した最新バージョンにまとめることはできないので、この方法しかなくなります。

まとめ

私の場合は、これ以外にもう一つ警告文が出ていましたので、それについては次の記事をご覧いただければと思いますヽ(；▽；)ノ
Qiita - 【Ruby on Rails】RSpec実行時にgem 'chromedriver-helper'は非推奨ですよって警告を受ける。

質問や解釈の違い、記述方法に違和感ありましたら、コメント等でご指摘いただけると幸いです。

最後まで読んでいただきありがとうございました。

参考サイト

私のGitHubに実際に使っているファイルを公開しているのでそちらも参考にしていただければと思います！
GitHub - MasaoSasaki/matchi

その他
Qiita - RubygemでWARN: Clearing out unresolved specs.が出た時の対応
 YoheiIsokawa - 【Rails】Gemfileのバージョン指定の書き方

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-09T18:38:41+09:00

jQueryの導入〜使用できるまで（非同期通信の準備として実行した記録）haml

導入準備

パッケージ管理システムを使用してjQueryの導入をしていく。
今回使用するパッケージ管理システム（パッケージマネージャー）は「yarn」
インストールする。
ターミナル
% yarn install
jQueryを導入

JavaScriptのライブラリの一つであるjQueryを導入
　

Gemfileの中に記述する。
Gemfile
gem 'jquery-rails'
# 最後尾に記入する
gemを記述したら忘れずバンドルインストールをする。
ターミナル
% bundle install
gemを反映させたらサーバを再起動する。
　

JavaScriptを読み込む準備

JavaScriptを記述するディレクトリを作成

assetsフォルダの中に「javascripts」という名前のファイルを作成する

app
　　 assets
　　　　 config
　　　　 images
　　　　 javascripts
　　　　 stylesheets

　

JavaScriptを記述するファイルを作成

javascriptsフォルダの中にapplication.jsを作成する

app
　　 assets
　　　　 config
　　　　 images
　　　　 javascripts
　　　　　　application.js
　　　　 stylesheets

　

JavaScriptを読み込む

JavaScriptのファイルをビューファイルから呼び出してあげる必要がある。
cssと同じ容量。
「= javascript_include_tag 'application'」を９行目に追加。
app/views/layouts/application.html.haml
!!!
%html
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %title Sample app
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application'
    -# = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
    -# 上の行はWebpackerという技術に関する記述。不要なら削除。
  %body
    = yield
　
application.jsのファイルを呼び出せるようにする。
「//= link_directory ../javascripts .js」を2行目に記述する。
app/assets/config/manifest.js
//= link_tree ../images
//= link_directory ../javascripts .js
//= link_directory ../stylesheets .css
これでJavaScriptが読み込まれているはず！
　

JavaScriptが正常に読み込まれているか確認する

application.jsに以下の記述をする。
コンソールログで確認。
app/assets/javascripts/application.js
console.log("JavaScriptは正常に読み込まれています");
ページをリロードして、
コンソールに「JavaScriptは正常に読み込まれています」と出ればオッケー。

正常なのが確認できたら、先ほど記述した
application.jsの中の「console.log("JavaScriptは正常に読み込まれています");」を削除しておく。
　

jQueryを使えるようにする

以下の2行をapplication.jsに追記。
jquery-railsという先ほど記載したgemを使うための記述。
app/assets/javascripts/application.js
//= require jquery
//= require rails-ujs
jQueryの読み込み・・・//= require jquery
RailsでJavaScriptを使用する・・・//= require rails-ujs

備考

この後application.js直下にJavaScriptのファイルを作成して記述してく際は
application.jsが存在するディレクトリのJavaScriptファイルを全て読み込む必要が出てくるので「//= require_tree .」を最後に追加する
app/assets/javascripts/application.js
//= require jquery
//= require rails-ujs
//= require_tree .
例えば sample1.js sample2.js sample3.jsというJavaScriptのファイルを
application.js直下に作成すれば
先ほどの記述で全て読み込んでくれるということです。

app
　　 assets
　　　　 config
　　　　 images
　　　　 javascripts
　　　　　　 application.js
　　　　　　 sample1.js
　　　　　　 sample2.js
　　　　　　 sample3.js
　　　　 stylesheets

　

jQueryが動くか確認する

動作テスト用に先ほどの例のようにapplication.jsの直下に
sample1.jsのみ実際にファイルを作成する。
次作成するファイル名が決まっていればその名前でも大丈夫。

sample1.jsのファイル内に以下を記述する。
app/assets/javascripts/sample1.js
$(function(){
  console.log("jQueryは正しく使えます")
});
記述できたら、
またページをリロードして「jQueryは正しく使えます」とコンソールに出ていれば正常に動いています。

確認できたらsample1.jsの中身は削除する。
このファイルを使用する際は名前を変えてつかう。

　

Memo

jQueryを導入する際に、パッケージ管理システム「yarn」を使用しています。
hamlで記載しています。

パッケージ管理システムを利用しないとどのようになるのかまた調べたいです。

　

最後にひとこと

非同期通信を実装するために、
JavaScriptを読み込み、jQueryを導入する必要がありました。
JavaScriptはjQueryというライブラリを使用することでコードがシンプルにかけます。
上記で書いたコードはjQueryがなければかなり長くなります。

ライブラリのことやそれぞれの単語が何なのか。
また、yarnのようなパッケージ管理システムが何をしてくれているのか理解したいので、
また調べて記事にできたらと思います。

この後、非同期通信を実装するためにAjaxというのに入っていくのですが
こうして導入単体の記事にしたのは他に応用できるのかもという期待からです。
この段階から別の実装ができるのかはまだわかっていないけど、
もっと他のこともやってみたいと思いました。

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-09T18:22:30+09:00

CircleCIのシステムスペックをselenium dockerを利用する

今回が初投稿ですので、ミスや分かりにくいなどは多めに見てください

環境

・Ruby 2.7.1
・Rails 6.0.2.1

やりたいこと

・CircleCIでselnium dockerを利用してシステムテストを実行
・system js: trueをCircleCIでも利用できるようにする

docker-compose.yml

システムスペックで利用するseleniumのイメージを取得し、depens_onで連携とportの指定も忘れずに

docker-compose.yml

version: "3"
services:
  web:
    build: .
    volumes:
      - .:/myapp
    ports:
      - "3000:3000"
    tty: true
    stdin_open: true
    depends_on:
      - db
      - chrome
  db:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABE: db
    ports:
      - "3306:3306"
    volumes:
      - mysql-data:/var/lib/mysql
    command: --default-authentication-plugin=mysql_native_password
  chrome:
    image: selenium/standalone-chrome-debug:latest
    ports:
      - "4444:4444"
volumes:
  mysql-data:
    driver: local

database.ymlを修正

このままではデータベースがｄｂコンテナが利用されないのでdatabase.ymlを修正します。

database.yml

default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password: password
  host: db

development:
  <<: *default
  database: myapp_development

test:
  <<: *default
  database: myapp_test

production:
  <<: *default
  database: myappp_production
  username: myapp
  password: <%= ENV['MYAPP_DATABASE_PASSWORD'] %>

$ docker-compose build
$ docker-compose up
$ docker-compose run web rake db:create

spec/rails_helper

テストに必要なGemを追加

Gemfile

group :test do
  gem 'capybara'
  gem 'selenium-webdriver'
  gem 'rspec-rails'
end

systemテストはselenium dockerを使うようにrails_specを変更する

rails_spec.rb

Capybara.register_driver :remote_chrome do |app|
  url = 'http://chrome:4444/wd/hub'
  caps = ::Selenium::WebDriver::Remote::Capabilities.chrome(
    'goog:chromeOptions' => {
      'args' => [
        'no-sandbox',
        'headless',
        'disable-gpu',
        'window-size=1680,1050'
      ]
    }
  )
  Capybara::Selenium::Driver.new(app, browser: :remote, url: url, desired_capabilities: caps)
end

RSpec.configure do |config|
  #省略

  config.before(:each, type: :system) do
    driven_by :rack_test
  end

  config.before(:each, type: :system, js: true) do
    driven_by :remote_chrome
    Capybara.server_host = IPSocket.getaddress(Socket.gethostname)
    Capybara.server_port = 4444
    Capybara.app_host = "http://#{Capybara.server_host}:#{Capybara.server_port}"
  end
end

これでローカルのシステムスペックは問題なく動くはずです

.circleci/config.yml

CircleCIの設定です
- run: mv ./config/database.yml.ci ./config/database.ymlでCI環境ではデータベースの設定を変更しています。
name: chromeと設定しておかないと
Errno::EADDRINUSE:Address already in use - bind(2) for "172.27.0.3" port 4444のエラーが発生する

config.yml

version: 2.1
jobs:
  build:
    docker:
      - image: circleci/ruby:2.7.1-node-browsers
          RAILS_ENV: test
          DB_HOST: 127.0.0.1
      - image: mysql:8.0
        environment:
          MYSQL_ALLOW_EMPTY_PASSWORD: "true"
          MYSQL_ROOT_HOST: "127.0.0.1"
          MYSQL_DATABE: db
        command: --default-authentication-plugin=mysql_native_password
      - image: selenium/standalone-chrome-debug:latest
        name: chrome
    working_directory: ~/coffee
    steps:
      - checkout
      - run:
          name: bundleをインストール
          command: bundle check || bundle install --jobs=4
      - run:
          name: yarnを追加
          command: yarn install
      - run:
          name: webpackを追加
          command: bundle exec bin/webpack
      - run:
          name: rubocop
          command: bundle exec rubocop
      - run: mv ./config/database.yml.ci ./config/database.yml
      - run:
          name: データベースを作成
          command: bundle exec rails db:create || bundle exec rails db:migrate
      - run:
          name: rspec test
          command: |
            mkdir /tmp/test-results
            TEST_FILES="$(circleci tests glob "spec/**/*_spec.rb" | \
              circleci tests split --split-by=timings)"
            bundle exec rspec \
              --format RspecJunitFormatter \
              --out /tmp/test-results/rspec.xml \
              --format progress \
              $TEST_FILES
      - store_test_results:
          path: /tmp/test-results
      - store_artifacts:
          path: /tmp/test-results
          destination: test-results

これでCircleCIでのrspec systemテストが正常に動くはずです

参考

・Rails on DockerでRSpecのSystem testをSelenium Dockerを使ってやってみた。
・既存のRails6アプリをDocker化しつつCircleCIでシステムスペックも実行できる環境を作る

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-09T18:00:19+09:00

【復習】RailsでWebアプリを作っている時にsyntax error, unexpected ')', expecting => ...]}%", "%#{params[:content]}%"]) ...

どうもshirakabaです。

今回はRailsの復習をしていきたいと思います。

以前オンラインスクールで作っていた作品を消してしまったので、もう一度復習も兼ねて作っていこうと思っています。

とはいっても今回書く内容は、アプリを作っていく過程で出たエラーを解決したよっ！ていうことを書いていきたいと思います。

余談なんですが、ずっと別のことに追われていて、自分の大切なことや本来の目的などや楽しかったことなどを忘れていたので、もう一度原点に戻ってそのタスクと、プログラミングの学習並行で行いながらやっていきたいと思います！

もう好き勝手学んでいきますよ！

※注意点
未経験で、今は独学で勉強中の初心者です。
あくまで学習したことをアウトプットする目的で書いております。
ですので、間違いなどがあるかと思いますが、その際は生暖かい目で見ていただければ幸いです。

解決したこと

何をしようとしたか？

検索機能を作成しようとしてコントローラーにsearchアクションを作ろうと以下の記述をしたところ下記エラーが出てしまいました。
def search
  if params[:content].present?
     @book = Book.where(user_id: current_user.id,['title LIKE ? OR author LIKE ? OR label LIKE ?',"%#{params[:content]}%", "%#{params[:content]}%", "%#{params[:content]}%"])
  else
    @book = Book.none
  end
end
エラー文

URLにアクセスするといつものエラー画面が...
SyntaxError syntax error, unexpected ')', expecting => ...]}%", "%#{params[:content]}%"]) ... ^ @book = Book.where(user_id: current_user.id,['title LIKE ? OR author LIKE ? OR label LIKE ?',"%#{params[:content]}%", "%#{params[:content]}%", "%#{params[:content]}%"])
ターミナルだと
SyntaxError (/ファルダ名/フォルダ名/controllers/books_controller.rb:6: syntax error, unexpected ')', expecting => ...]}%", "%#{params[:content]}%"]) ... ^ ):

解決方法

結論から言うとwhereを二つにしてつなげて書くことで解決しました。
@book = Book.where(user_id: current_user.id).where('title LIKE ? OR author LIKE ? OR label LIKE ?',"%#{params[:content]}%", "%#{params[:content]}%", "%#{params[:content]}%")
今回記述ミスによりエラーではありましたが、なかなか見つけるに苦労してしまいました...
ちゃんと原因を調べて落ち着いて考えればこんなにも時間がかかることはなかったかもしれないです。

復習とはいえ、まだまだ修行が足りないことを痛感させれられます。
それに、これ自体綺麗な書き方ではないのかもしれないので、もっとちゃんと調べようと思います。

最後に

今後はどんな些細なことでも、恥ずかしいことでもこうやってアウトプットして行けたらいいなと思っています。
それでは〜

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-09T17:02:14+09:00

既存のRails,MySQLアプリの開発環境とテスト環境にDockerを導入する

はじめに

タイトルの通り既存のRails,MySQLアプリの開発環境にDockerを導入します。
またrspecによるテストもDocker内で実行できるようにします。
既に同じような記事がたくさんありますが、結構エラー発生したので自分がうまくいった方法をまとめます。
間違いがあれば教えていただけると幸いです。

環境

MacOS

Ruby 2.6.5

Rails 5.2.3

MySQL 5.7

Railsのversionが6,MySQLのversionが8だとこの方法ではうまくいきません。

手順

Dockerfile作成

docker-compose.yml作成

既存のdatabase.ymlを変更

起動

1. Dockerfile作成

既存のプロジェクトのディレクトリにDockerfileを新規作成します。
ファイル構成
 test_app#既存プロジェクト
    ├──略
    ├── Dockerfile #作成
    ├── docker-compose.yml #作成
    ├── Gemfile
    ├── Gemfile.lock
    ├── .env #使用
    ├── config
         └──database.yml #変更
中身を記述していきます。
以下test_appは各々のアプリ名に合わせてください。
Dockerfile
FROM ruby:2.6.5

RUN apt-get update \
    && apt-get install -y --no-install-recommends nodejs mariadb-client build-essential \
    && apt-get clean && rm -rf /var/lib/apt/lists/*

WORKDIR /test_app

COPY Gemfile /test_app/Gemfile
COPY Gemfile.lock /test_app/Gemfile.lock

RUN gem install bundler
RUN bundle install
COPY . /test_app
まずFROMでrubyのimageを取得。versionはご自身の環境に合わせます。

次に必要なパッケージをinstallしています。mariadb-clientがmysql-clientの記事もありますがエラーになったので注意。mysql-clientはmariadb-clientに統合されたようです。

次は作業ディレクトリを指定。RUN mdirはなくてもWORKDIRで作成されるそうです。

以下はgemfile等をローカルからコンテナ上にコピーしています。COPYがADDとされている記事もありますがCOPY推奨らしいです。

2.docker-compose.yml作成
docker-compose.yml
version: '3'

services:
  db:
    image: mysql:5.7
    command: mysqld --character-set-server=utf8 --collation-server=utf8_unicode_ci
    ports: 
      - '3306:3306'
    environment:
      MYSQL_DATABASE: test_app_development
      MYSQL_ROOT_PASSWORD: ${DATABASE_DEV_PASSWORD}
      MYSQL_USER: ${DATABASE_DEV_USER}
      MYSQL_PASSWORD: ${DATABASE_DEV_PASSWORD}

  test-db:
    image: mysql:5.7
    command: mysqld --character-set-server=utf8 --collation-server=utf8_unicode_ci
    environment:
      MYSQL_DATABASE: test_app_test
      MYSQL_ROOT_PASSWORD: ${DATABASE_DEV_PASSWORD}
      MYSQL_USER: ${DATABASE_DEV_USER}
      MYSQL_PASSWORD: ${DATABASE_DEV_PASSWORD}
    ports:
      - '3307:3306'

  web:
    build:
      context: .
      dockerfile: Dockerfile
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    tty: true 
    stdin_open: true
    depends_on:
      - db
      - test-db
    ports:
      - "3000:3000" 
    volumes:
      - .:/test_app
      - bundle:/usr/local/bundle

volumes:
  bundle:
ポイントだけ書きます。

command行はdatabaseの文字コードをutf8に設定しています。これがないとdb:create時にエラーになりました。

enviromentではユーザー名やパスワードを設定しています。もちろん直接書いても動きますがここでは環境変数を展開しています。docker-composeファイルはデフォルトで.envファイルを読み込むようなので下記のように.envファイルに定義します。定義した環境変数は${}で展開できます。.envファイルはコミットしないように.gitignoreファイルに追加します。
.env
DATABASE_DEV_USER = 'hoge'
DATABASE_DEV_PASSWORD = 'password'
3. database.ymlを変更
database.yml
default: &default
  adapter: mysql2
  encoding: utf8
  charset: utf8
  pool: 5
  port: 3306

development:
  <<: *default
  database: test_app_development
  username: <%= ENV['DATABASE_DEV_USER'] %>
  password: <%= ENV['DATABASE_DEV_PASSWORD'] %>
  host : db

test:
  <<: *default
  database: test_app_test
  username: <%= ENV['DATABASE_DEV_USER'] %>
  password: <%= ENV['DATABASE_DEV_PASSWORD'] %>
  host : test-db

production:
  <<: *default
  database: <%= ENV['DB_NAME'] %>
  username: <%= ENV['DB_USERNAME'] %>
  password: <%= ENV['DB_PASSWORD'] %>
  host: <%= ENV['DB_HOSTNAME'] %>
usernameとpasswordはdocker-composeと同じものです。

hostで作成したdbコンテナに接続するように設定しています。

productionは各々の環境に合わせてください

環境変数の管理にはdotenv-railsのgemを利用しています。

4. 起動

最後にdockerを起動できれば成功です。
1. docker-compose buildでimageを作成
2. docker-compose up -dでコンテナを立ち上げる。-dはバックグラウンドで起動するオプションです。
3. docker-compose run web rails db:createでデータベース作成

これでhttp://localhost:3000/ に表示されれば成功です。
あとはdb:migrateやdb:seedをすれば完了です。

参考記事

Dockerを使用して既存のRailsプロジェクト開発環境構築してみた（Rails+Mysql）
既存のRailsアプリをDockerコンテナで動かす方法+sequel proによるDBコンテナ可視化
 Rails x Docker環境にテストDBを構築する

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-09T16:39:19+09:00

Rails書き方

# ダメな書き方
@incorrect_questions = session[:incorrect_question_ids].map { |n| Question.find(n.to_i) }

# なぜダメ？
# これだと件数ごとにQuestionを呼び出すクエリが発行されてしまって仮に100件あったら100件クエリが発行されてしまうのでこちらの方が良いかと。

# 良い書き方
@incorrect_questions = Question.where(id: session[:incorrect_question_ids].map(&:to_i))

Railsの考え方

・デフォルトに存在しないactionは別のcontrollerにした方が良い、というのがDHHの意見で、僕もそう思います。
・RESTとは?
・オブジェクトが自分自身の状態を持つのがオブジェクト指向の考え方の一つだよ。
・sessionを使うのは危険で、その人の状態をテーブルで用意しておけばいいのでは?
・Test◯◯という名前はrspecのファイルと勘違いされる可能性があるので避ける
・callback系(before_saveなど)は意図せずメソッドが走ったりするから、そこにロジックを書くのはあまり好ましくない。

# ダメな書き方
def index
  @questions = Question.all
end

#なぜダメ?
# 今の件数だと問題ないと思いますが、実際のサービスでallを使うとメモリが足りなくて落ちることがあるので気をつけた方が良いです。
基本的には動的に変わるデータ（例えばユーザーが追加するもの）はselect/pluckなどで必要なカラムを制限するように癖付けた方が良いかなと思います。

#ダメな書き方
<%= form_for(@question_similar, url: { controller: 'question_similar', action: 'create' }) do |f| %>

#ダメな理由
url: {〜〜〜} は xxx_path で書けそうですね

#ダメな書き方
 def cancel_save
    question_similars.each do |question_similar|
      if question_similar.similar_word == ""
        question_similar.delete
      end
    end
  end

#.blank使え
#トランザクション大丈夫?
#delete_all の方がパフォーマンスは良いと思います

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-09T16:11:46+09:00

質問箱のクローンをリプレイスする

これはなに？

GMOペパボさんが運営するオートスケール機能がついたコンテナサービスにRails製アプリをデプロイするまでのメモです。

アプリはこちらの質問箱のクローンをさらにクローンさせてもらっています。

作者の方はHerokuで運用されているみたいだったので、他の人が作ったアプリからRailsの組み方を学ばせてもらうとともに、Lolipop!マネージドクラウド(以下マネクラ)へのデプロイの練習を目的として進めてみました。

大元の情報

Masato oda さんのリポジトリ

Lolipop!マネージドクラウドのRailsアプリのデプロイガイド

事前の準備

ロリポップ!マネージドクラウドの会員登録とssh,各種鍵の登録までしておく

rbenvを入れていろんなバージョンのrubyを使ったリポジトリを扱えるようにしておく

git やエディタを設定しておく

マネージドクラウド側の設定

プロジェクト(専用コンテナ)をつくる

コンテナにsshができるか確かめる

なんだかんだ一つのコンテナあたり10日間無料で使えるのは太っ腹です。
難しい設定をしらなくても、チェックツールさえ通って入ればコンテナ上で本番環境に対してdb:migrate かけてくれたりするのも魅力ですね。

macに当該リポジトリをcloneしてくる
git clone git@github.com:seiyatakahashi/peing-questionbox-clone.git
ローカルリポジトリのRuby および　Railsのバージョンをロリポップと揃える

マネージドクラウドではRubyが2.5.8、railsが5.2だったので、ローカルでruby -v rails -vしてバージョンを確かめました。
ここでバージョンがあって揃ってなかったため、
rbenv install 2.5.8
および、
rbenv local 2.5.8 && rbenv rehash してあげてバージョンを揃えてあげました。
(railsは変えた記憶(history)がない...)

チェックツール

公式で用意されているチェックツールを入れましょう。(github)

gem install lolipop-mc-starter-rails

ここでRailsのプロジェクトをマネクラにPushするための必要事項を適宜チェックしてくれる(スゴイ)。

私の場合はここでdatabase.ymlがなんか変だぞと教えたもらったので、

./config/database.yml
の内容をみてみます。
database.tmlの内容
# SQLite version 3.x
#   gem install sqlite3
#
#   Ensure the SQLite 3 gem is defined in your Gemfile
#   gem 'sqlite3'
#
default: &default
  adapter: sqlite3
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  timeout: 5000

development:
  <<: *default
  database: db/development.sqlite3

# Warning: The database defined as "test" will be erased and
# re-generated from your development database when you run "rake".
# Do not set this db to the same as development or production.
test:
  <<: *default
  database: db/test.sqlite3

production:
  database: my_database_production
  adapter: postgresql
  encoding: unicode
  pool: 5
ここでRailsの各環境におけるSQLの選択ができます。
クローン元のリポジトリでは、Herokuのproduction環境のPostgreSQLに合わせてあるので、
マネクラの本番環境(production)のMySQLに合わせないといけないですね。

というわけでこんな感じで書き換えます。
database.ymlを変更
production:
  <<: *default
  adapter: mysql2
  encoding: utf8
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: <%= ENV["MC_DB_USERNAME"] %>
  password: <%= ENV["MC_DB_PASSWORD"] %>
  database: <%= ENV["MC_DATABASE"] %>
  host:     <%= ENV["MC_DB_HOSTNAME"] %>
MC_DB_USERNAME などなどは、ブラウザからマネクラのコントロール画面を開いて環境変数として設定してあげます。
もちろんそのまま直書きもできますが、危険なのでやめましょう。
(ちなみにローカル環境でも直書きしたくないよ〜ってひとはenvdir とかで設定してあげるといいかも)

gem install mysql2 ローカルリポジトリにgemを入れてあげて、
./gemfileにgem mysql2 と追記。

新たにgemを入れたので bundle install してあげて、これでSQL周りは大丈夫なはず。

マネクラの環境変数を設定していく。

続いてブラウザでマネクラのコントロールパネルを開きつつ、マネクラ側の環境変数を設定していきます。
上記MC_DB_USERNAMEなどを読み込むようにします。

今回は他の人が作成したRailsのプロジェクトを使っているので、./config/master_keyを作り直しました。

EDITOR="vi" bin/rails credentials:editを打ち込むと上書き作成されます。

これをRAILS_MASTER_KEYとしてマネクラの環境変数に登録。

また、ローカルで、mc-rails databaseしてデータベースのURLを作成します。
データベース名、ユーザ名、パスワードの入力を求められるので、マネクラのコンソールにあるものをそれぞれ入力すると、
URLが表示されるのでこれをDATABASE_URLとして同様に環境変数として設定。

また、公式の手順に則り、RAILS_SERVE_STATIC_FILESも環境変数に入力し、値としてtrueを与えておきましょう。

Twitterの各種認可キーを取得する。

Tiwtterのデベロッパー向けサイトにいき、APIキーの発行を行いました。

Developer portal に移動し、会員登録をしていなければ、会員登録およびSign in後、右上のアカウント名のメニューより作成したAPIキー一覧のページに飛びます。

Create an APPs の項目を適宜埋めてAPIキーを作成したら、Details > Keys and tokensより、
- API Key
- API serect key
- Access token
- Access token secret
を手元に控えておきます。

これをそれぞれ、

環境変数名値

API_KEY "API Key"

API_SECRET "API serect key"

TOKEN "Access token"

SECRET "Access token secret"

としてマネクラに登録しておきます。

なお、クローン元のアプリではさらに、

APP_NAME="アプリの名前"

APP_NAME_EN="アプリの英語の表記名"

CURRENT="自分ののツイッターのID"

DESCRIPTION="サイトの情報"

KEYWORDS="サイトのキーワード"

GOOGLE_ANALYTICS="Google アナリティクスのID"

といった情報もコンテナの環境変数として登録できるように設定されています。(README.mdより)

マネクラにPush

改めて
git add .
git commit
mc-rails check
なにも怒られななかったはずなので、これでローカルの
git push lolipop master
してマネクラにpush。

無事にデプロイできました?

リモートリポジトリ(コンテナ)からエラーを拾う。

上記で無事に、といってはいますが、実際には当初、Twitterアカウントでの認証画面への遷移の際にエラーが吐かれていました。
そこで、リモートリポジトリの中に何かエラーログはないか探索してみました。

リモートリポジトリは以下のようになっていて、
僕のリモートリポジトリのホームディレクトリ:~$ ls -a
.   .bash_history  .cache    .ssh  .viminfo      1597471676557237  projrepo
..  .bundle    .lolipop  .vim  0000000000000000  current           shared
このcurrentの中がPushしたRailsのプロジェクトになっています。
また、currentディレクトリ内にlogディレクトリが存在しており、この中にコンテナのログが蓄積されていくことになります。

Haconiwaのログが出るのでこれを掘る

logの中身は
gitpush.log
production.log
{プロジェクト名}.lolipop.io-{ハッシュ値} みたいなディレクトリがたくさん
という感じでした。

ややエスパーではありますが、ここでduして重そうなログが格納してあるディレクトリを探しました。
普通のディレクトリの容量が、4KBのところ、40KBくらいのディレクトリを見つけたのでここをcatしてみると、

Started GET "/auth/twitter"のあとに、
...OAuth::Unauthorized (401 Authorization Required)...
みたいな怒られが発生しているのを発見。

どうやらTwitter APIの認可がうまくいってないっぽい。参考

なので再度Callback用のURLなどTwitterのDevサイトにバッチリ登録し直してみるとうまく画面遷移するようになりました。

ちなみにHaconiwaはRuby製のコンテナです。

おわりに

VPSとか手持ちのオンプレ環境にRailsを動かしたあとだったこともあって、とても手軽にアプリを作成できるようになるのはめちゃくちゃ体験としてよかったです。

また、他の人の作った質問箱様アプリを触ってみて、「僕だったらこの機能とこの機能に絞って作るかも！」とか、「テーブル構造はどうなってるんだろう」みたいな感想が浮かんだのもいい収穫だった様に思います。

Dockerもですが、デプロイ先としてコンテナを設けて置くのはちょっとしたアプリをシャッと作りたいときに便利そうですよね。

先に触れたHaconiwaに関連する宣伝ではありますが、mRubyの本が2020年11月に刊行されるみたいです。買いましょう。

おわり。

環境変数名	値
API_KEY	"API Key"
API_SECRET	"API serect key"
TOKEN	"Access token"
SECRET	"Access token secret"

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-09T15:57:24+09:00

[Rails] Couldn't find with 'id'=:id　でupdateアクションが実行されない

解決方法

@を消すと解消される

修正前
def update @gear = find_gear_by_id @gear.update(gear_params) redirect_to gears_path flash[:notice] = "編集が完了しました" end
⇓
修正後
def update gear = find_gear_by_id gear.update(gear_params) redirect_to gears_path flash[:notice] = "編集が完了しました" end

詳しい理由がわからない。。。

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-09T15:57:16+09:00

Ruby on rails学習記録 -2020.10.09

ログイン時だけの機能を持つ掲示板

1行掲示板の作成
$ cd bbs_users $ rails g scaffold article user_id:integer content:string $ rails db:migrate

初期データの投入

db/seeds.rb

Article.create(user_id: 1, content: 'hello world')
Article.create(user_id: 1, content: 'hello paiza')
Article.create(user_id: 2, content: '世界の皆さん、こんにちは')

データベースに反映

$ rails db:seed

ログイン時に、特定のアクションだけ実行できるようにする

articles_controller.rb

before_action :authenticate_user!, only: [:new, :create, :edit, :update, :destroy]
before_action :set_article, only: [:show, :edit, :update, :destroy]

ArticlesモデルとUserモデルの関連付け

model/article.rb

class Article < ApplicationRecord
    belongs_to :user
end

投稿者のメールアドレスの表示

views/articles/index.html.erb

<table>
  <thead>
    <tr>
      <th>User</th>
      <th>Content</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @articles.each do |article| %>
      <tr>
        <td><%= article.user.email %></td>
        <td><%= article.content %></td>
        <td><%= link_to 'Show', article %></td>
        <td><%= link_to 'Edit', edit_article_path(article) %></td>
        <td><%= link_to 'Destroy', article, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

ナビゲーションを共通で表示

app/views/layouts/application.html.erb

<body>
  <% if user_signed_in? %>
    Logged in as <strong><%= current_user.email %></strong>.
    <%= link_to "Settings", edit_user_registration_path %> |
    <%= link_to "Logout", destroy_user_session_path, method: :delete %>
  <% else %>
    <%= link_to "Sign up", new_user_registration_path, :class => 'navbar-link' %> |
    <%= link_to "Login", new_user_session_path, :class => 'navbar-link' %>
  <% end %>
  <p class="notice"><%= notice %></p>
  <p class="alert"><%= alert %></p>
  <%= yield %>
</body>

Userモデルにカラムを追加
$ rails g migration AddNameToUser name:string $ rails db:migrate

サインアップ画面に「name」カラムを追加

app/views/devise/registrations/new.html.erb

<div class="field">
  <%= f.label :name %><br />
  <%= f.text_field :name %>
</div>

ユーザー情報の変更画面に「name」カラムを追加

app/views/devise/registrations/edit.html.erb

<div class="field">
  <%= f.label :name %><br />
  <%= f.text_field :name %>
</div>

Userモデルのユーザー名の変更

コントーローラで、nameカラムを保存

app/controllers/application_controller.rb

before_action :configure_permitted_parameters, if: :devise_controller?

protected

def configure_permitted_parameters
  devise_parameter_sanitizer.permit(:sign_up, keys: [:name])
  devise_parameter_sanitizer.permit(:account_update, keys: [:name])
end

ナビゲーションのログイン情報に、ユーザー名を表示

app/views/layouts/application.html.erb

<% if user_signed_in? %>
  Logged in as <strong><%= current_user.name %></strong>.
  <%= link_to "Settings", edit_user_registration_path, :class => "navbar-link" %> |
  <%= link_to "Logout", destroy_user_session_path, method: :delete, :class => "navbar-link" %>
<% else %>
  <%= link_to "Sign up", new_user_registration_path, :class => 'navbar-link' %> |
  <%= link_to "Login", new_user_session_path, :class => 'navbar-link' %>
<% end %>

投稿一覧に、nameカラムを表示

views/articles/index.erb.html

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Content</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @articles.each do |article| %>
      <tr>
        <td><%= article.user.name %></td>
        <td><%= article.content %></td>
        <td><%= link_to 'Show', article %></td>
        <td><%= link_to 'Edit', edit_article_path(article) %></td>
        <td><%= link_to 'Destroy', article, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

投稿の詳細画面に、nameカラムを表示

views/articles/show.erb.html

<p>
  <strong>User:</strong>
  <%= @article.user.name %>
</p>

新規投稿フォームを修正して、user_idを削除

app/views/articles/_form.html.erb

<%= form_with(model: article, local: true) do |form| %>
  <% if article.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(article.errors.count, "error") %> prohibited this article from being saved:</h2>

      <ul>
      <% article.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= form.label :content %>
    <%= form.text_field :content, id: :article_content %>
  </div>

  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>

createメソッドの修正