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

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

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

WYSIWYGとは、ディスプレイに表示されたものが見た通りの状態でプリンターなどに出力できる技術、およびその概念です。HTMLがなくても容易にWebページのレイアウトなどができます。

Ruby on Rails 5

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

jQuery

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

Q&A

0回答

933閲覧

Rails Cloudinaryにある画像をhttps状態でプレビューしたい

keiiti

総合スコア29

WYSIWYG

WYSIWYGとは、ディスプレイに表示されたものが見た通りの状態でプリンターなどに出力できる技術、およびその概念です。HTMLがなくても容易にWebページのレイアウトなどができます。

Ruby on Rails 5

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

jQuery

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

0グッド

0クリップ

投稿2020/09/22 10:35

前提

現在、Rails Carrierwave Cloudinary Medium-editorを使用し、
ユーザーがある程度レイアウトを操作できるようなブログサイトのような物を作成しています。

Medium-editorで画像を扱うことは実装済みでCloudinaryとの連携もできております。
Medium-editorで作られたフォームに画像をいれるとプレビューもできています。

###実現したいこと
Medium-editorで作られたフォーム中に画像をいれると
Cloudinaryに保存されている画像のhttpsのリンクで引っ張って来たい。
※現在はhttpのリンクを引っ張って来ている。

関わりのありそうなコード

ImagesController.rb

def upload files = params.require(:files) @image = Image.new @image.file = files[0] respond_to do |format| if @image.save format.html { redirect_to @image, notice: 'Image was successfully created.' } format.json do render json: { files: [ { url: @image.file.metadata['url']+"?id=#{@image.file.model.id}", thumbnail_url: @image.file.metadata['url']+"?id=#{@image.file.model.id}", size: 0, delete_url: "/images/delete", delete_type: "DELETE" } ] } end else format.html { render :new } format.json { render json: @image.errors, status: :unprocessable_entity } end end end def destroy file = params.require(:file) split_file = file.split('/') tmp = split_file[-1].split('.') filename = tmp[0] url = URI.parse(file) url = Rack::Utils.parse_nested_query(url.query) id = url['id'] Cloudinary::Api.delete_resources(filename) Image.destroy(id) respond_to do |format| format.json { head :no_content } end end

image_uploader.rb

include Cloudinary::CarrierWave

cloudinary.yml

production: cloud_name: <%= ENV['CLOUDINARY_CLOUD_NAME'] %> api_key: <%= ENV['CLOUDINARY_API_KEY'] %> api_secret: <%= ENV['CLOUDINARY_API_SECRET'] %> enhance_image_tag: true static_file_support: true  secure: true #https化のために追加 cdn_subdomain: true

cloudinary.rb

if Rails.env.production? Cloudinary.config do |config| config.secure = true #https化のために追加 end end

views/posts/_form.html.erb

<%= f.text_area :text, placeholder: "本文", class: 'editable' %> ・・・ ・・・ ・・・ <script> var editor = new MediumEditor('.editable', { placeholder: { text: 'ここに本文を入力してください', hideOnClick: true }  }); </script> <script> $('.editable').mediumInsert({ editor: editor, addons: {  images: { fileUploadOptions: { url: '/images/upload', type: 'post', acceptFileTypes: /(.|/)(gif|jpe?g|png)$/i  }, fileDeleteOptions: { url: '/images/delete', }, }    } }); </script>

試したこと

色々調べ、上記のコードの状態になりました
ちなみに、UserはDeviseで作成しており、Carrierwave + Cloudinaryで管理しております。
そちらのUserのアバター用に作成したuploaderの方はhttps化は上記のコードで動いています。
なので、medium-editor、jquery-fileuploaderの

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

rails 5.1.7
ruby 2.5.8

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

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

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

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問