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

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

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

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

Ruby on Rails

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

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

Q&A

1回答

3690閲覧

【Rails】フォームのプレビュー画面で、CarrierWave経由でS3に保存する前の選択中の画像も表示させたい

jusco

総合スコア80

Ruby

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

Ruby on Rails

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

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

0グッド

3クリップ

投稿2015/08/10 17:15

Postモデルの作成・編集画面で、以下のようにプレビュー機能を実装しました。

Ruby

1#posts_controller.rb 2class PostsController < ApplicationController 3 4 def preview 5 @post = Post.new(post_params) 6 end 7 8end 9 10 11 12#config/routes.rb 13Rails.application.routes.draw do 14 resources :posts do 15 collection do 16 post :preview 17 end 18 end 19end

ruby

1#app/views/posts/edit.html.erb, app/views/posts/`new.html.erb フォーム 2<%= form_for @post do |post| %> 3 <tr> 4 <th><%= post.label :post_title %></th> 5 <td><%= post.text_field :post_title %></td> 6 </tr> 7 <tr> 8 <th><%= post.label :post_body %></th> 9 <td><%= post.text_area :post_body %></td> 10 </tr> 11<tr> 12 <th><%= post.label :shop_img , '写真1' %></th> 13 <td><%= image_tag @post.shop_img.url if @post.shop_img? %><br /> 14 <%= post.file_field :shop_img %></td> 15</tr> 16<tr> 17 <th><%= post.label :goods_img , '写真2' %></th> 18 <td><%= image_tag @post.goods_img.url if @post.goods_img? %><br /> 19 <%= post.file_field :goods_img %></td> 20</tr> 21 <%= link_to 'プレビュー', preview_posts_path(id: current_shop.id) ,target: '_blank',class: 'Btn preview_btn'%> 22<%= post.submit %> 23<% end %>

javascript

1$ -> 2 $preview_btn = $ '.preview_btn' 3 $preview_btn.on 'click', (evt)-> 4 evt.preventDefault() 5 $target = $ evt.target 6 $form = $target.closest('form') 7 8 9 $form.find('textarea').each (index, node)-> 10 $node = $ node 11 $node.text $node.val() 12 13 $preview_form = $form.clone().hide().attr({ 14 action: $target.attr('href'), 15 target: '_blank' 16 }) 17 18 $preview_form.find('[name=_method]').val 'post' 19 $('body').append $preview_form 20 $preview_form.submit() 21 $preview_form.remove() 22 $preview_form = null

これらの記述は、このサイトを参考にしました。
上記の記述によって、うまくフォームの文章はプレビュー表示が可能になりました。

しかし、画像についてはDBに保存をしていないため、現状ではプレビュー画面での画像確認ができません。
対処法としては、

1.edit,new画面で選択した画像をjavascriptを使ってプレビュー画面に渡す
2.previewアクションで画像をアップロードしてしまう

このどちらかになってしまうのでしょうか。
2.のアプローチだと、previewしている間に実際にPostの見え方が変わってしまうので、preview用の画像カラムを持つ必要が出るなど、問題も多そうかなと思っており、1.が出来ればベストかなと想像しています。

上記について、アプローチに加え、具体的な記述の仕方を教えて頂けないでしょうか。
よろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

  1. プレビュー処理をサーバーを介さずにJavaScriptだけで行う

というやり方の方が 1, 2 と比べて楽そうに思うのですがどうでしょうか。
プレビューボタンを押したら、画面遷移はせずに、ボタンのさらに下のほうにプレビューを表示すればよいと思います。

投稿2015/08/11 01:23

hello-world

総合スコア1342

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

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

jusco

2015/08/11 04:59

ご回答ありがとうございます! そのやり方だと他よりは楽そうですね! ただ、今回実は、フォーム画面や投稿画面が比較的縦に長くなってしまう予定でして…。 同ページでのプレビューは厳しいのですm(__)m なので、別タブを開いてのプレビューを実装したいと考えています。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問