質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

595閲覧

【JavaScript・Rails】非同期のメッセージ送信機能で、送信者のプロフィール画像を表示させたい

kumamin

総合スコア12

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/08/15 04:30

前提・実現したいこと

今Ruby on Railsでチャットアプリを作っており、その中でJavaScriptのajax機能を使った、非同期のメッセージ送信機能を実装してます。
このアプリではrefileというGemを使い、ユーザーのプロフィール画像を登録できるようにしています。
そしてLINEのようなイメージで、メッセージを送った時に送信者のプロフィール画像を表示させたいのですが、エラーが起きてしまいます。
ちなみにajaxを実装する前にhtml形式で実装していたときは正常に送れていました。
解決方法がわかる方がいらっしゃれば、教えていただけると助かります。

発生している問題・エラーメッセージ

SyntaxError in MessagesController#index

イメージ説明

該当のソースコード

message.js.erb

js

1$(function(){ 2 function buildHTML(message){ 3 let html = 4 `<div class="Message_box"> 5 <a href="/posts_g/${message.user_id}"> 6 <%= attachment_image_tag ${message.user}, :profile_image, class: "Message_box__User_image" %> 7 </a> 8 <div class="Message_box__Content"> 9 <a class="Link Text Message_box__Content__Name" href="/posts_g/${message.user_id}">${message.user_name}</a> 10 <div class="Message_box__Text Text"> 11 <p>${message.text}</p> 12 </div> 13 </div> 14 </div>` 15 return html; 16 } 17 $('.Main__form__Form').on('submit', function(e){ 18 e.preventDefault(); 19 let formData = new FormData(this); 20 let url = $(this).attr('action'); 21 $.ajax({ 22 url: url, 23 type: 'POST', 24 data: formData, 25 dataType: 'json', 26 processData: false, 27 contentType: false 28 }) 29 .done(function(data){ 30 let html = buildHTML(data); 31 $('.Main__content').append(html); 32 $('.Main__content').animate({ scrollTop: $('.Main__content')[0].scrollHeight}); 33 $('form')[0].reset(); 34 $('.Main__form__contents__btn').prop('disabled', false); 35 }) 36 .fail(function() { 37 alert("メッセージ送信に失敗しました"); 38 }) 39 }); 40});

create.json.jbuilder

jbuilder

1json.user @message.user 2json.user_id @message.user.id 3json.user_image_id @message.user.profile_image_id 4json.user_name @message.user.name 5json.text @message.text

index.html.haml

haml

1.Main 2 .Main__Header 3 .Title1 4 = "#{@user.name}さんとのトークルーム" 5 .Main__content 6 = render @messages 7 .Main__form 8 = form_with model: [@group, @message], html: {class: "Main__form__Form"}, local: true do |f| 9 .Main__form__contents 10 .Main__form__contents__input 11 = f.text_area :text, class: 'Main__form__contents__input__text' 12 = f.label :image, class: 'Main__form__contents__input__image' do 13 = icon('far', 'image', class: 'Main__form__contents__input__icon') 14 = f.attachment_field :image, class: 'Main__form__contents__input__image__file' 15 = f.submit '送信', class: 'Main__form__contents__btn'

_message.html.haml

haml

1.Message_box 2 = link_to posts_g_path(message.user) do 3 = attachment_image_tag message.user, :profile_image, fallback: "no-image.jpg", class: "Message_box__User_image" 4 .Message_box__Content 5 = link_to "#{message.user.name}", posts_g_path(message.user), class: "Link Text Message_box__Content__Name" 6 .Message_box__Text.Text 7 - if message.text.present? 8 = simple_format(message.text) 9 - if message.image.present? 10 = attachment_image_tag message, :image, class: 'Message__image'

messages_controller.rb

ruby

1class MessagesController < ApplicationController 2 before_action :set_group 3 4 def index 5 @user = User.find_by(id: params[:user_id]) 6 @message = Message.new 7 @messages = @group.messages.includes(:user) 8 end 9 10 def create 11 @message = @group.messages.new(message_params) 12 @user = @group.users.last 13 if @message.save 14 respond_to do |format| 15 format.json 16 end 17 @user = @message.user 18 else 19 @messages = @group.messages.includes(:user) 20 render :index 21 end 22 end 23 24 25 private 26 27 def message_params 28 params.require(:message).permit(:text, :image).merge(user_id: current_user.id) 29 end 30 31 def set_group 32 @group = Group.find(params[:group_id]) 33 end 34end

user.rb

ruby

1class User < ApplicationRecord 2 devise :database_authenticatable, :registerable, 3 :recoverable, :rememberable, :validatable 4 5 validates :name, presence: true, uniqueness: true 6 7 has_many :post_gs 8 has_many :post_cs 9 has_many :group_users 10 has_many :groups, through: :group_users 11 has_many :messages 12 13 attachment :profile_image 14end

試したこと

  • refileのjsファイルでの埋め込み方について検索してみたのですが、なかなか出てきませんでした。
  • "message.js.erb"のファイル名を"message.js"に変えて、attachment_image_tagの行を以下のように編集してみたのですが、それでもうまくできませんでした。
<img class="attachment user profile_image Message_box__User_image" src="/attachments/71e8db8f4967b47af0144ed4033b0fac4fcae0f9/store/${message.user_image_id}/profile_image">

補足情報(FW/ツールのバージョンなど)

refileのGitHubのURLはこちらです。
https://github.com/refile/refile

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

解決が難しそうだったので、refileは諦め、carrierwaveのgemを使うことにしました。

投稿2020/08/16 13:55

kumamin

総合スコア12

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問