常連

注目の的

社会貢献

質問力

質問者

模範生

自己紹介

・できていること
CanvasのtoDataURL()メソッドでimageタグに画像を表示しています。imageタグをJavascriptのimageオブジェクトに変換しています。

・その後にやりたいこと
作成したimgeをサーバーにPOSTして、画像ファイルとして保存するということをしようとしています。

・聞きたいこと
ブラウザ側で画像ファイルを生成して、サーバにPOSTすることは可能でしょうか？

どなたかご存知の方、ご教授願います。

ブラウザ側でimageタグないしcanvasタグから画像ファイルを生成して、サーバにPOST送信したいです

#前提・実現したいこと
Rails5で開発をしています。
以下の記事や以前いただいた回答を参考に、ビューでユーザーがトリミングした画像をアップロードできる機能を実装中です。
[canvasの画像をtoDataURL()を使ってRailsのcarrierwaveで保存するまで](http://herikutu.hatenablog.com/entry/2014/11/25/225205)
[Canvasで描画した画像を送信してサーバに保存する](https://qiita.com/0829/items/a8c98c8f53b2e821ac94)

#発生している問題
トリミング済みの画像データを、toDataURL()を使ってサーバーサイドに送っても、そこからCarrierwaveにアップすることができません。
結果として、作成されたPostインスタンスのimage_nameメンバがnilになってしまいます。
何卒お力添えをお願いします。

#該当のソースコード
```ruby
class PostsController < ApplicationController
...
  def new
    @post = Post.new
  end

 def create
    post = params.require(:post).permit(
      :designer_id,
      :image_name,
      :remote_image_url,
      :detail
    )
    post[:image_name]= post[:remote_image_url]
    post[:remote_image_url] = "" #この段階でpostには全て適切な値が入っています
    @post = Post.new(post)
    if @post.save #しかし、ここで@postのimage_nameがnilになってしまいます。
     ...
    end
  end

 ...
end
```
carrierwaveは、carrierwave-base64と言うgemを使用して、base64を受け取れるようにしています。

```Ruby
class Post < ApplicationRecord
  mount_base64_uploader :image_name, ItemImageUploader
  attr_accessor :remote_image_url

  validates :image_name, {presence: true}
 ...
end
```

クライアントサイドは以下のように処理し、サーバー側でimage_nameとremote_image_urlをスワップしています。
```javascript
$('#_submit').on('click', function(){
   var canvas = $('#crop_img').cropper('getCroppedCanvas');
   var canvas_data = canvas.toDataURL().replace(/^.*,/, '');

   $("#post_image_name").val(""); //画像データを二重に送信するのを防ぐ
   $("#post_remote_image_url").val(canvas_data);
   $("#myform").submit();

});
```

#試してみたこと
以下のような、base64で保存する他の方法も試してみましたが、同様にcarrierwaveがうまく動作せず、image_nameがnilになってしまいます。
[shrikanthkr/carrierwave-base64.md](https://gist.github.com/shrikanthkr/10097999)
[timsly /carrierwave-data-uri](https://github.com/timsly/carrierwave-data-uri)

#使用している環境
Ruby on Rails 5
Carrierwave
[carrierwave-base64](https://github.com/lebedev-yury/carrierwave-base64)
トリミングにはcropper.jsを使用しています。

Base64でエンコードされた文字列からCarrierwaveに画像をアップできない

###前提・実現したいこと
rails の create メソッドで配列の数に応じて、複数のレコードを生成したいのですが、配列の最初の１つ目しか save されていません


やりたいこととしては、
type に2つの要素が入っているなら

- :name 
- :about
- type :[１つ目の要素] 

- :name 
- :about
- type :[2つ目の要素] 
と、 nameとaboutは同じ値で、typeだけをそれぞれ繰り返して
データベースに保存したいと考えています

現状のコードでもできると思ったのですが、うまくいかないので、
わかる方がいらっしゃいましたら、ご教授お願い致します。

```
#パラメーター
params.require(:product).permit(:name,:about, type: [])

# create メソッド
 def create

    lists = []

    product = Product.new
    product.name = product_params['name']
    product.about = product_params['about']
    product_params['type'].each do |t|
      product.type = t
      lists << product
    end


    respond_to do |format|
      if lists.size > 0
        lists.each do |list|
          list.save
        end
        format.html { redirect_to admin_shop_banners_path, notice: 'success' }
      else
        format.html { render :new }
      end
    end
  end





```

rails 配列の要素の数に応じて、複数のレコードを生成したい

Railsアプリケーション内で、Devise と omniauth-twitter を用いて User のTwitterログイン機能を実装しました。
Userはアプリケーション内で Postモデルを投稿出来るのですが、
その投稿したPostをログインで使用したアカウントに自動投稿させる仕組みを用意したいです。

TwitterのAPIドキュメント等は読んでみたのですが、Twitter:REST::Clientの認証には
・consumer_key
・consumer_secret
・access_token
・access_token_secret
の4つが必要で、 omniauth でのログイン時に取得できる情報にはこれらの情報が無いため、特定のUserからのツイートができずに困っています。

Twitterの権限に、「Read and write」とあるため、Railsアプリケーション内から「write（ツイート）」が出来るのではないかと推察しているのですが、そもそもこちらは出来ない仕様なのでしょうか。

Rails内で、Twitterログインしたユーザーのアカウントでツイートさせたい

railsで
userある決まった商品のなかからどの商品を扱うかを決めて、その商品に値段をつけるとします。
モデルは

userモデル・user_product_categoryモデル・product_categoryモデル

という３つのモデルが有り、user_product_categoryモデルはpriceというカラムを持っています。

そしてuser_product_categoryコントローラのcreateではproduct_categoryモデルの一覧があり、そこにチェックボックスをつけて値段を入れるとユーザープロフィールページに表示されるようにしたいです。


条件としては
1・どの商品を取り扱うか、取り扱わないかをユーザープロフィール編集ページではない１ページで更新したい。（中間テーブルのみを一括更新したい。）

２・値段もそのページで変更可能にしたい。


この時どのようにformを作ったりコントローラを書けばよいでしょうか。

調べて、

```
<% ProductCategory.all.each do |product_category| %>
<%= check_box_tag "user[product_category_ids][]", product_category.ids, f.object.product_categories.include?(product_category) %>
```

とやることでチェックボックスがついたものだけparamsに入れられるのはわかってきたのですが、これだと複数一括で登録する場合バリデーションが一括出できない気がして・・・
また、ユーザーモデルとひも付けて
```
def user_params
      params.require(:user).permit(:name,{product_category: [] })
end
```

でユーザーごとsaveすればいいとも書いてあったのですが、これだとpriceカラムをどのように入れればいいのかわからないというのがありまして・・・


何解決策はないか教えて下さい。お願いします。


追記
Userモデルははusernameカラムを持ち
```ここに言語を入力
has_many :user_product_category
has_many :product_category through: :user_product_category
```

user_product_categoryは
```ここに言語を入力
belongs_to :users
belongs_to :product_category
```
でカラムとしては
```ここに言語を入力
user_id, :integer
product_category_id, :integer
price, :integer
```

product_categoryはnameカラムをもっていて
```ここに言語を入力
has_many :user_product_category
has_many :users through: :user_product_category
```
を持っている状態です

createメソッドについてやりたいことは

１・まず、ProductCategories.allで手に入る全製品カテゴリ名をチェックボックスで表示

２・checkboxの横に数字を入れるテキストフィールドがありpriceを入力する

３・更新を押すとuser_product_categoryコントローラにparamsが飛んで
checkboxがついてる製品カテゴリの中間テーブルを生成。
checkboxがあったが外れたものについては削除。
さらにpriceフィールドのバリデーションをする

例えば
user_id=1のユーザーAがおり

製品カテゴリ１(id=1)
製品カテゴリ２(id=2)
製品カテゴリ３(id=3)
があるとして

ユーザーAは最初に製品カテゴリ1にチェックし、1000円と入力する
↓
user_product_categoryテーブルで

id=1
user_id=1
product_categories_id=1
price=1000

というレコードが生成される

次にユーザーAは製品カテゴリ１のチェックを外し、製品カテゴリ２と製品カテゴリ３のチェックを付け、両方共にprice=1200を入力し更新ボタンを押す
↓
user_product_categoryテーブルで

id=1のレコードはチェックが外れたので削除

id=2
user_id=1
product_categories_id=2
price=1200

id=3
user_id=1
product_categories_id=3
price=1200

というレコードが生成される


こんな感じにしたいです。

ただこの時strong parameterはどのように書くのかとかどうやって一括でpriceフィールドのバリデーションするかとか全く思いつきませんでした。
いい方法があったら教えて頂きたいです。