#3 Rails × Vue.jsで動的なページをSPAさせる

class Api::UsersController < ApplicationController
  def show
    @user = User.find(params[:id])
    @drinks = @user.drinks.order('created_at DESC').includes(image_attachment: :blob)
  end
end

<% @drinks.each do |drink| %>
<%= image_tag drink.image%>
<% end %>

json.array! @drinks, :id ,:name , :price , :explain ,
                     :image , :region_id , :body_id , 
                     :acidity_id , :processing_id ,
                     :likes_count , :user_id

    def image=(image)
      if image.present?
        prefix = image[/(image|application)(\/.*)(?=\;)/]
        type = prefix.sub(/(image|application)(\/)/, '')
        data = Base64.decode64(image.sub(/data:#{prefix};base64,/, ''))
        filename = "#{Time.zone.now.strftime('%Y%m%d%H%M%S%L')}.#{type}"
        File.open("#{Rails.root}/tmp/#{filename}", 'wb') do |f|
          f.write(data)
        end
        image.detach if image.attached?
        image.attach(io: File.open("#{Rails.root}/tmp/#{filename}"), filename: filename)
        FileUtils.rm("#{Rails.root}/tmp/#{filename}")
      end
    end

  # Base64形式でうけとったimageデータをエンコードし、
  # 一時的にtmp配下に画像ファイルを作成、作成した画像ファイルをアタッチ
  # その後画像ファイルを削除
    def image=(image)
      if image.present?
        # もし、imageがあったら？
        prefix = image[/(image|application)(\/.*)(?=\;)/]
        # ???
        type = prefix.sub(/(image|application)(\/)/, '')
        # この正規表現にマッチしたものを空文字にする
        data = Base64.decode64(image.sub(/data:#{prefix};base64,/, ''))
        # 画像のデータをこの文字列にマッチしたものは、空にして,
        # 残った文字列をデコード
        filename = "#{Time.zone.now.strftime('%Y%m%d%H%M%S%L')}.#{type}"
        # 画像のファイルネームを定義
        File.open("#{Rails.root}/tmp/#{filename}", 'wb') do |f|
          f.write(data)
          # ファイルにデータを書き込み
        end
        image.detach if image.attached?
        image.attach(io: File.open("#{Rails.root}/tmp/#{filename}"), filename: filename)
        FileUtils.rm("#{Rails.root}/tmp/#{filename}")
      end
    end

  def show
    post = Post.find(params[:id]).as_json #JSON形式にしておく

    eyecatch = post.eyecatch #eyecatchは添付した画像ファイル

    if eyecatch.present?
      post['image'] = encode_base64(eyecatch) # 画像ファイルを1.で定義したメソッドでBase64エンコードし、renderするデータに追加する
    end

    render json: post
  end

  def show
    @user = User.find(params[:id])
    @drinks = @user.drinks.order('created_at DESC').includes(image_attachment: :blob)

  end

``


何がやっかいかと言うと、
こっちは投稿(drink)を複数取得して、配列だから、
配列一つ一つに対して処理をしていかないといけない。。。
eachとか使えるけど、それでうまくいくのだろうか。。。


配列だと扱いが難しいから、まずは画像一枚一枚を非同期的に表示させていく。

つまり、  @drinks = @user.drinks.order('created_at DESC').includes(image_attachment: :blob)

これだと複数枚画像があるけど、

drinks#showだったら、一枚しか画像がないから、それをうまいこと表示させていきたい

# ってことで、drinks#showのSPA化を一旦目指す。
配列データのSPA化は一応できたけど、画像の扱いが今は難しかったから、
一旦単一データのSPA化をしてみたいと思う。
ってことでブランチを一旦削除、、、ピエン

画像が入ってる配列データは俺には早かったっていう
考えられる原因第4に当てはまってしまった！リベンジかますで！！！