Ajaxの実装方法について

[Mutsuki1102]

概要

オリジナルアプリでAjax化の実装

実現したいこと

他人の投稿にイイねをつける機能

困っていること

いいね！ボタンは作成完了。ただし、クリックした際にAjax化がうまくできません。 手順は下記のサイトを参考に実施しました。 https://qiita.com/jaramon/items/248bcb4b56e9fed8fc90

困っていることがバグの場合は事象やログ、エラーメッセージをできるだけそのまま（抜粋などしない）下記に記載してください。

Ajaxのデバック方法がわからず、いいね!ボタンを押した時にコンソールに表示された内容をそのまま記載いたします。

rails-ujs.self-d109d8c5c0194c8ad60b8838b2661c5596b5c955987f7cd4045eb2fb90ca5343.js?body=1:212 POST https://97e0acb27a7e464e84fc67223563ec23.vfs.cloud9.ap-southeast-1.amazonaws.com/likes/1 404
Rails.ajax @ rails-ujs.self-d109d8c5c0194c8ad60b8838b2661c5596b5c955987f7cd4045eb2fb90ca5343.js?body=1:212
Rails.handleRemote @ rails-ujs.self-d109d8c5c0194c8ad60b8838b2661c5596b5c955987f7cd4045eb2fb90ca5343.js?body=1:568
(anonymous) @ rails-ujs.self-d109d8c5c0194c8ad60b8838b2661c5596b5c955987f7cd4045eb2fb90ca5343.js?body=1:169

解決するために行ったこと

Likesコントローラーの確認。

class LikesController < ApplicationController
  before_action :user_signed_in?

  def create
    @post = Post.find(params[:post_id])
    unless @post.iiyome?(current_user)
    @post.iiyome(current_user)
    @post.reload
      respond_to do |format|
        format.html { redirect_to request.referrer || root_url }
        format.js
      end
    end
  end

  def destroy
    @post = Like.find(params[:id]).post
    if @post.iiyome?(current_user)
      @post.uniiyome(current_user)
      @post.reload
      respond_to do |format|
        format.html { redirect_to request.referrer || root_url }
        format.js
      end
    end
  end
end

特に下記の記述のroot_urlが間違っているのかと思い、「respond_to do」で検索し使用例を探すも正しそうな答えを見つけられず。。。

問題となっている箇所の予想

JSへのパスが通ってないと思います。。。

問題となっているアプリケーションのGitHub URL

https://github.com/Mutsuki1102/cloud9_cook_wish

[konchanxxx]

帰宅したら確認します:bow:

[konchanxxx]

思ったことなどつらつら記載していきます:bow:

[konchanxxx]

コードスニペットはバッククォーと3つで囲った方が良いですね https://qiita.com/Qiita/items/c686397e4a0f4f11683d#code---%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E6%8C%BF%E5%85%A5

[konchanxxx]

iiyome

これって iiyo me ってことですか？結構分かりづらい命名な気がします。

[konchanxxx]

ああ、いい嫁なのか。

[konchanxxx]

awsのキーがないので動かせない説

[konchanxxx]

ここのルーティング定義不要そう https://github.com/Mutsuki1102/cloud9_cook_wish/blob/develop/config/routes.rb#L2-L3

[konchanxxx]

[確認] これボタンって表示されてますか？ 下記のcurrent_userがtypoしていてうまく機能して無さそうです https://github.com/Mutsuki1102/cloud9_cook_wish/blob/develop/app/views/likes/_like.html.erb#L1

[konchanxxx]

https://github.com/Mutsuki1102/cloud9_cook_wish/blob/develop/app/views/likes/_like.html.erb#L4

とかのfind_byとかviewでやるのはアンチパターンなのでやめた方が良いっすね

[konchanxxx]

https://github.com/rexitorg/menta/issues/42#issuecomment-468655280

ああ、これ判定しているんじゃなくて代入してるのか。。

[konchanxxx]

current_uerにpost.userを代入してるのでnilじゃない限りは動作するか。 本来は current_user == post.user としたい??

[konchanxxx]

ちょっと問題切り分けのために確認して欲しいのですが、

def create
  binding.pry

とかしてデバッグを仕込んでlikeした時にアクションにルーティングされているか確認して欲しいです。

pry-railsと言うgemを使います。

https://qiita.com/silmisilon/items/8e08435204d8d08d09ff

[Mutsuki1102]

レビューありがとうございます！ 誰かにコードを見ていただいたことがほぼなかったのでどのご指摘も勉強になって助かります！！

コードスニペットはバッククォーと3つで囲った方が良いですね https://qiita.com/Qiita/items/c686397e4a0f4f11683d#code---%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E6%8C%BF%E5%85%A5

使いなれてなくてすみません、修正しました！

ああ、いい嫁なのか。

わかりづらくてすみません。。。「いい嫁」というアクションでした。

awsのキーがないので動かせない説

この辺りの知識もまだ浅いのですが、環境変数を設定する時に.gitignoreしてます。セキュリティ問題ない形で共有できる方法があれば教えていただけると嬉しいです。

ここのルーティング定義不要そう https://github.com/Mutsuki1102/cloud9_cook_wish/blob/develop/config/routes.rb#L2-L3

確認漏れでした。削除しました。

[確認] これボタンって表示されてますか？ 下記のcurrent_userがtypoしていてうまく機能して無さそうです https://github.com/Mutsuki1102/cloud9_cook_wish/blob/develop/app/views/likes/_like.html.erb#L1 current_uerにpost.userを代入してるのでnilじゃない限りは動作するか。 本来は current_user == post.user としたい??

タイポとcurrent_user == post.userの修正をしたところ、ボタンが表示されなくなりました。意図していた表示と違ったので、<% if current_uer = post.user %>を削除しました。

[Mutsuki1102]

binding.pryを使用したところ、Cannot render consoleが表示されました。

Started POST "/likes" for 175.177.5.84 at 2019-03-01 16:27:02 +0000
Cannot render console from 175.177.5.84! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
Processing by LikesController#create as JS
  Parameters: {"utf8"=>"✓", "post_id"=>"32", "button"=>""}
  User Load (0.3ms)  SELECT  `users`.* FROM `users` WHERE `users`.`id` = 2 ORDER BY `users`.`id` ASC LIMIT 1
  ↳ /usr/local/rvm/gems/ruby-2.5.1/gems/activerecord-5.2.2/lib/active_record/log_subscriber.rb:98

From: /home/ec2-user/environment/cook_wish/app/controllers/likes_controller.rb @ line 6 LikesController#create:

     4: def create
     5:   binding.pry
 =>  6:   @post = Post.find(params[:post_id])
     7:   unless @post.iiyome?(current_user)
     8:   @post.iiyome(current_user)
     9:   @post.reload
    10:     respond_to do |format|
    11:       format.html { redirect_to request.referrer || root_url }
    12:       format.js
    13:     end
    14:   end
    15: end

下記記事を参考にして、config.web_console.whitelisted_ips = '10.0.2.2' を追加しました。 https://qiita.com/pugiemonn/items/f7956ba61012ca9fc16c すると下記の表示になりました。

Started POST "/likes" for 175.177.5.84 at 2019-03-01 16:41:06 +0000
Processing by LikesController#create as JS
  Parameters: {"utf8"=>"✓", "post_id"=>"31", "button"=>""}
  User Load (0.3ms)  SELECT  `users`.* FROM `users` WHERE `users`.`id` = 2 ORDER BY `users`.`id` ASC LIMIT 1
  ↳ /usr/local/rvm/gems/ruby-2.5.1/gems/activerecord-5.2.2/lib/active_record/log_subscriber.rb:98

From: /home/ec2-user/environment/cook_wish/app/controllers/likes_controller.rb @ line 6 LikesController#create:

     4: def create
     5:   binding.pry
 =>  6:   @post = Post.find(params[:post_id])
     7:   unless @post.iiyome?(current_user)
     8:   @post.iiyome(current_user)
     9:   @post.reload
    10:     respond_to do |format|
    11:       format.html { redirect_to request.referrer || root_url }
    12:       format.js
    13:     end
    14:   end
    15: end

createアクションした時にDBにもLikeが登録されておりました。更新ボタンと実行すると、いいねカウンターも正常に作動しました。ただし、Ajaxにはなっていない状況です。

[konchanxxx]

わかりづらくてすみません。。。「いい嫁」というアクションでした。

これは表示名はいい嫁で良いと思うのですが動作としてはlikeなのかなと思っており、あまり日本語は使わない方が一般的で良いかなと思いました。likeとunlikeとか？

[konchanxxx]

この辺りの知識もまだ浅いのですが、環境変数を設定する時に.gitignoreしてます。セキュリティ問題ない形で共有できる方法があれば教えていただけると嬉しいです。

これってS3の設定してfogとか利用している感じですよね？環境変数を共有するのではなくてローカル環境ではローカルストレージを参照するような設定にして動くようにするのが良いかなと思いました。 https://qiita.com/syou007/items/98842179e83c03e5f882 とかが環境ごとに切り替えているかもです。

[konchanxxx]

タイポとcurrent_user == post.userの修正をしたところ、ボタンが表示されなくなりました。意図していた表示と違ったので、<% if current_uer = post.user %>を削除しました。

記事のオーナーだけに表示したいなら

Post#owner?(user) みたいなインスタンスメソッドを用意してあげると可読性上がるかもですね。

[konchanxxx]

authorか。

[konchanxxx]

binding.pryを使用したところ、Cannot render consoleが表示されました。

あー、これってCloud9で開発してますか？それが影響しているかもですね。

[konchanxxx]

createアクションした時にDBにもLikeが登録されておりました。更新ボタンと実行すると、いいねカウンターも正常に作動しました。ただし、Ajaxにはなっていない状況です。

なるほど、JSでレンダリングする部分がうまくいってない感じがしますね もうちょっと見てみます:bow: Chromeならブラウザの検証とかを使うと良いかもです https://ferret-plus.com/1880

[Mutsuki1102]

わかりづらくてすみません。。。「いい嫁」というアクションでした。

これは表示名はいい嫁で良いと思うのですが動作としてはlikeなのかなと思っており、あまり日本語は使わない方が一般的で良いかなと思いました。likeとunlikeとか？

確かにそうですね。。。likeとunlikeで修正します。

[Mutsuki1102]

この辺りの知識もまだ浅いのですが、環境変数を設定する時に.gitignoreしてます。セキュリティ問題ない形で共有できる方法があれば教えていただけると嬉しいです。

これってS3の設定してfogとか利用している感じですよね？環境変数を共有するのではなくてローカル環境ではローカルストレージを参照するような設定にして動くようにするのが良いかなと思いました。 https://qiita.com/syou007/items/98842179e83c03e5f882 とかが環境ごとに切り替えているかもです。

本番環境のみS3の設定とfogを利用している認識でした。開発環境では、/cook_wish/app/assets/imagesの配下に画像が保存されていくように設定してます。

[Mutsuki1102]

タイポとcurrent_user == post.userの修正をしたところ、ボタンが表示されなくなりました。意図していた表示と違ったので、<% if current_uer = post.user %>を削除しました。

記事のオーナーだけに表示したいなら

Post#owner?(user) みたいなインスタンスメソッドを用意してあげると可読性上がるかもですね。

ありがとうございます。やってみます！！

[Mutsuki1102]

binding.pryを使用したところ、Cannot render consoleが表示されました。

あー、これってCloud9で開発してますか？それが影響しているかもですね。

すみません、cloud9です。。。最初にお伝えしておくべきでしたね。。。

[konchanxxx]

@Mutsuki1102 こちら自分の方で調査しましたー やっぱりajaxのレンダリングに指定しているIDが一致してないみたいでした 参考にした記事が誤っていて動かなさそう？？ 自分の方で処理も修正してみて動くようにしました。 コードをGitHubにpushしてPR作成したいと思うので https://github.com/Mutsuki1102/cloud9_cook_wish に権限付与してもらって良いでしょうか？settingsからできると思います。

[Mutsuki1102]

@rexitorg おおお、、そこまでやっていただいてすみません。ありがとうございます。 権限付与しました。 ご確認よろしくお願いいたします。

[konchanxxx]

@Mutsuki1102 いけてないかもです:cry:

ERROR: Permission to Mutsuki1102/cloud9_cook_wish.git denied to rexitorg.
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

[konchanxxx]

write権限も必要そう？

[konchanxxx]

あ、inviteが届いているのかな？確認しますmm

[konchanxxx]

いけました:bow:

[Mutsuki1102]

良かったです！よろしくお願いいたします🙇

[konchanxxx]

@Mutsuki1102 PR作成しました:bow: コメント入れているのでご確認をお願いしますー:smile: https://github.com/Mutsuki1102/cloud9_cook_wish/pull/9

[Mutsuki1102]

@rexitorg ありがとうございます！初めてPR頂いたのでわからないとこだらけですが、調べながら確認してみます！

[Mutsuki1102]

ありがとうございました🙇コメントもとても丁寧で初心者の私でわかりやすかったです。mergeさせていただき、無事解決出来ました。

[Mutsuki1102]

git push heroku masterした際に、

NameError: uninitialized constant CarrierWave::Storage::Fog

が発生してPrecompiling assets failed.となってしまいました。以前の設定との差分確認して自分で対応してみます！

[konchanxxx]

なるほど！ Carrierwaveのinitializerで環境変数に応じてfogをadapterにするかどうか切り替えたのでそれが影響してるかもですね〜

$ heroku run bundle exec rails r "puts Rails.env.production?"

とかでherokuの環境がproductionになっているかどうかまず確認してみるのはありかもと思いました

[konchanxxx]

結果がfalseなら

$ heroku config:set RAILS_ENV="production"

とかして環境変数を設定してあげると良いのかなと。 あくまで予想です:bow:

https://qiita.com/colorrabbit/items/18db3c97734f32ebdfde

[Mutsuki1102]

ありがとうございます。 昨日悩んだ挙句、元の設定に戻してしまいました。

その状態で下記を実行してみました。

$ heroku run bundle exec rails r "puts Rails.env.production?"

すると下記の結果が返ってきました。

ec2-user:~/environment/cook_wish (master) $ heroku run bundle exec rails r "puts Rails.env.production?"
 ›   Warning: heroku update available from 7.20.1 to 7.22.2
Running bundle exec rails r "puts Rails.env.production?" on ⬢ cookwish... up, run.1083 (Free)
true

この場合、一般的には環境変数は問題ないと判定しても良いのでしょうか？それともfogの設定を変更した時に、環境変数を再設定が必要なのでしょうか。 一旦heroku上では問題なく動いているので勉強は先に進もうとは思っているのですが、もしご存知でしたら教えていただきたいです。

[konchanxxx]

おお、production環境になっているっぽいですね なんでだろう。ちょっと同じ環境を作って検証してみないとわからないかもです:cry: これとかかな？うーむ http://euglena1215.hatenablog.jp/entry/2017/01/07/134802

環境変数さえ設定されていれば本番もローカルも同様に動くはずなので一旦それで学習進めて頂ければと思います:bow:

[konchanxxx]

こちらのissueはcloseしておきます:bow: @Mutsuki1102

[Mutsuki1102]

ご対応ありがとうございました！