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

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

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

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

jQuery

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

Active Record

Active Recordは、一つのオブジェクトに対しドメインのロジックとストレージの抽象性を結合するデザインパターンです。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

1回答

1118閲覧

Ajaxを使い非同期で画像投稿を行いたい(ActiveStorage,rails-ujs)

widget11

総合スコア221

Ruby on Rails

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

jQuery

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

Active Record

Active Recordは、一つのオブジェクトに対しドメインのロジックとストレージの抽象性を結合するデザインパターンです。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2019/08/22 04:38

編集2019/08/29 06:02

Rails5.2.1
rails-ujs
jQuery-ujs

行いたい事としては掲示板でコメントを投稿した時にコメントを非同期で投稿すると共に
コメントしたユーザーの名前と画像も載せたいということです。
現状ユーザーの名前とコメントは反映できているのですが、ActiveStorageを用いて保存している画像を
サーバー側で引っ張ってきて非同期で投稿する方法が分からないということです。

#コントローラー class CommentsController < ApplicationController def create @comment = Comment.new(params_comment) #① @comment.save!    #② ajax_post = Comment.joins(:account).select('name, comment') .where(work_id: 8, account_id: 1).last render :json => ajax_post end def params_comment params.require(:t_workcomment).permit(:work_id, :account_id, :comment) end end
//Javascript function set_ajax() { { $('#ajax_sample').on('ajax:success', function(event) { data = event.detail[0]; $('#t_workcomment_comment').val(''); $(data).each(function(i, obj){       //④ $('#comments').append('<li>' + obj.name + obj.comment + '</li>') }); }); $('#ajax_sample').on('ajax:error', function(event) { alert("失敗!"); }); } } $(document).on('turbolinks:load', set_ajax);

行っている事は
①コントローラー側に送られたコメントを保存
②保存が成功したらコメントモデルに対して、アカウント(ユーザー)モデルをjoinし、whereメソッドでユーザーが投稿した一番新しい
投稿を絞り込み、selectでコメントとそのユーザーの名前を取得
③絞り込んだ内容をjsonにしてjs側に渡す
④変数dataにサーバー側から渡されたコメント、名前があるのでappendメソッドでhtmlに要素として付け加える
というものです。

しかしActiveStorageを用いてアカウントモデルにアタッチしている画像をどのように持ってきたらいいかが分かりません。
普通にrailsでActiveStorageを用いる場合は

class Account < ApplicationRecord has_one_attached :image end

のようにすれば特に何もしなくても
@account = Account.find(params[:id])
@accountの中にActiveStorageを用いて保存した画像が入っていると思います。
しかしjsと組みあわせると途端に勝手が分からないです。

まず②の部分でaccountモデルをjoinした際にActiveStorageオブジェクトも入ってきているのかが分からないのと
またjs,jquery側でどう扱えばよいかが分かりません。

#imageを取ってこれていないみたいです Comment.joins(:account).select('name, comment, image') .where(work_id: 8, account_id: 1).last
//detail[0]の中に画像は入ってくるのか data = event.detail[0]; //どのようにしてappendすればよいか $('#comments').append('<li>' + obj.name + obj.comment + '</li>')

説明不足の点が多々あると思いますが、よろしくお願い致します。

追記 schema.rb

ActiveRecord::Schema.define(version: 2019_04_25_165918) do create_table "active_storage_attachments", options: "ENGINE=InnoDB DEFAULT CHARSET=utf8", force: :cascade do |t| t.string "name", null: false t.string "record_type", null: false t.bigint "record_id", null: false t.bigint "blob_id", null: false t.datetime "created_at", null: false t.index ["blob_id"], name: "index_active_storage_attachments_on_blob_id" t.index ["record_type", "record_id", "name", "blob_id"], name: "index_active_storage_attachments_uniqueness", unique: true end create_table "active_storage_blobs", options: "ENGINE=InnoDB DEFAULT CHARSET=utf8", force: :cascade do |t| t.string "key", null: false t.string "filename", null: false t.string "content_type" t.text "metadata" t.bigint "byte_size", null: false t.string "checksum", null: false t.datetime "created_at", null: false t.index ["key"], name: "index_active_storage_blobs_on_key", unique: true end create_table "accounts", options: "ENGINE=InnoDB DEFAULT CHARSET=utf8", force: :cascade do |t| t.string "email", default: "", null: false t.string "encrypted_password", default: "", null: false t.string "reset_password_token" t.datetime "reset_password_sent_at" t.datetime "remember_created_at" t.string "confirmation_token" t.datetime "confirmed_at" t.datetime "confirmation_sent_at" t.string "unconfirmed_email" t.datetime "created_at", null: false t.datetime "updated_at", null: false t.string "name" t.integer "postaclcode" t.text "address" t.string "handlename" t.text "profile" t.bigint "m_rank_id" t.boolean "delflg" t.index ["email"], name: "index_accounts_on_email", unique: true t.index ["m_rank_id"], name: "index_accounts_on_m_rank_id" t.index ["reset_password_token"], name: "index_accounts_on_reset_password_token", unique: true end create_table "comments", options: "ENGINE=InnoDB DEFAULT CHARSET=utf8", force: :cascade do |t| t.bigint "work_id" t.bigint "account_id" t.text "comment" t.boolean "delflg" t.datetime "created_at", null: false t.datetime "updated_at", null: false t.index ["account_id"], name: "index_comments_on_account_id" t.index ["work_id"], name: "index_comments_on_work_id" end add_foreign_key "active_storage_attachments", "active_storage_blobs", column: "blob_id" add_foreign_key "comments", "accounts" add_foreign_key "comments", "works" end

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

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

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

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

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

widget11

2019/08/26 01:26

ご返信ありがとうございます。 コメントモデルとアカウントモデルの関連付けはされております。 コメントに belongs_to:account アカウントに has_many:comments といった具合です。
8zca

2019/08/27 14:21

ありがとうございます。 一応scheme.rbも追記していただいてよろしいでしょうか?
widget11

2019/08/29 06:08 編集

ご返信ありがとうございます。 schemaを全て書いていると非常に冗長になる為、関連しているところをピックアップし追記しました。 お手数をおかけしますがご確認よろしくお願い致します。
guest

回答1

0

ベストアンサー

②の部分ですが、

c = Comment.joins(:account).where(work_id: 8, account_id: 1).last

でとってあげたあとにAPIでレスポンスする内容を整形してあげるとよいんじゃないでしょうか。
コメントは c.comment で、アカウント名は c.accout.name でとれます。
同様に画像も c.account.image でとれます。
ただ、c.account.imageはActiveStorage::Attachedのオブジェクトのため、APIでそのまま返してもJS側で画像を表示できるわけではありません。

公式ドキュメントに画像のURLに変換するメソッドがあるようですので、url_forを使ってURLを生成してクライアントに返却、JSの④でimgタグを作成してAPIで受け取ったURLを設定してあげればいけそうですね。
https://railsguides.jp/active_storage_overview.html

※url_forは5分の期限付きURLになるので、長時間表示する場合はconfigで上書きできるようです。
https://stackoverflow.com/questions/52571555/how-do-you-change-the-active-storage-service-url-expires-in-timeout

投稿2019/08/31 03:23

8zca

総合スコア559

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

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

widget11

2019/09/03 04:05

ありがとうございます! url_forという便利メソッドがあったんですね! 重ねてですがありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問