# リッチテキストで入力した画像を圧縮する方法 **URL:** \ **Category:** bubble\ **Created:** [2022 年 9 月 24 日午前 11:14 UTC](https://www.nocode-faq.com/t/topic/3184 "2022-09-24T11:14:17Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![nisihata](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/nisihata/32/5390_2.png) [@nisihata](https://www.nocode-faq.com/u/nisihata)\ **Post date:** [2022 年 9 月 24 日午前 11:14 UTC](https://www.nocode-faq.com/t/topic/3184/1 "2022-09-24T11:14:17Z")
### 実装したい機能 noteの様に画像とテキストを投稿しており、Rich Text Editorを利用しています。 追加した画像の容量が大きいと容量を圧迫して困る＆表示に時間がかかるので、 何らかの方法でサイズを圧縮したいと思っています。 なにかやり方はありますでしょうか？教えてください。 #### このタイプのRich Text Editor ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/5/5ce77b5b22409b8231819064e44ad7188810b9b4.png) ### 試したこと 画像のURLを正規表現で取得し、pngのURLに対してImage Compressionを使おうとしました。 圧縮指示＆正規表現１つ目(=ログのTEST1) ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/8/846bcb92395fda1e92625d512f7ae6e7ef5bdaf2.png) 正規表現２つ目(=ログのTEST2) ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/e/e67dd79810bd9f3f35b208c183837723a8cfb8f4.png) →実際に取れたURLは以下の画像の"TEST2"の値 画像のURLは取れており、参照は可能。 しかし、「「[https://easivice.bubbleapps.io](https://easivice.bubbleapps.io)」から「[https://s3.amazonaws.com/appforest\_uf/f1663966859861x351902846044619840/richtext\_content.png」でフェッチするためのアクセスは、CORS](https://s3.amazonaws.com/appforest_uf/f1663966859861x351902846044619840/richtext_content.png%E3%80%8D%E3%81%A7%E3%83%95%E3%82%A7%E3%83%83%E3%83%81%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%AF%E3%80%81CORS) ポリシーによってブロックされています」というエラーが発生し、圧縮できませんでした。 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/5/5950c88c831e2b541cef23d7d345d28bf76941fd.png) →圧縮できたら、Rich Text EditorのIMGのURLを書き換えようとしていました。 ### 補足情報 目的は画像容量を小さくすることなので、画像サイズを小さくする解決策でも良いです。 また、例えば「PictureUploaderでアップロードした画像をRich Text Editorの末尾に追加」ができるのでしたら、その方法でも圧縮を挟めるので解決できます。 何か案があれば試してみるので、教えてください！ ---
**Author:** ![NoCodeNinja](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/nocodeninja/32/2115_2.png) [@NoCodeNinja](https://www.nocode-faq.com/u/NoCodeNinja)\ **Post date:** [2022 年 9 月 27 日午後 1:50 UTC](https://www.nocode-faq.com/t/topic/3184/2 "2022-09-27T13:50:28Z")
Rich Text Editorの一機能をカスタマイズする、と同義とすると難しいかなと感じました。 ＞目的は画像容量を小さくすることなので、画像サイズを小さくする解決策でも良いです。 そもそもRich Text Editorの画像アップロードって、サイズいじれませんか？ 選択すると四隅に小さな四角が出てくるおなじみのやり方で。 ---
**Author:** ![nisihata](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/nisihata/32/5390_2.png) [@nisihata](https://www.nocode-faq.com/u/nisihata)\ **Post date:** [2022 年 9 月 27 日午後 9:39 UTC](https://www.nocode-faq.com/t/topic/3184/3 "2022-09-27T21:39:01Z")
返信ありがとうございます。 サイズいじれますよ！ ただ、ユーザーが使う上ではそこは期待出来ないなぁと思ってます💦 今考えている案は、 imagexかCroppieで画像サイズを自動調整するか、 保存後に保存された画像を編集するか、 画像のアップロードボタンはリッチテキストの外につけるか(このFAQのように)で考えています。 上手くいったら、共有します！ ---
**Author:** ![NoCodeNinja](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/nocodeninja/32/2115_2.png) [@NoCodeNinja](https://www.nocode-faq.com/u/NoCodeNinja)\ **Post date:** [2022 年 9 月 27 日午後 11:11 UTC](https://www.nocode-faq.com/t/topic/3184/4 "2022-09-27T23:11:16Z")
＞サイズいじれますよ！ ＞ただ、ユーザーが使う上ではそこは期待出来ないなぁと思ってます💦 確かに、ユーザーは気にせず使いますもんね。。 ＞画像のアップロードボタンはリッチテキストの外につけるか このやり方、一番可能性がありそうだと感じました！ またご共有いただけたら嬉しいです、ふぁいとです🍵 ---
**Author:** ![yukikun](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/yukikun/32/3485_2.png) [@yukikun](https://www.nocode-faq.com/u/yukikun)\ **Post date:** [2022 年 9 月 28 日午後 12:41 UTC](https://www.nocode-faq.com/t/topic/3184/5 "2022-09-28T12:41:44Z")
標準機能ではできない＆プラグインの開発が必要な前提ですが、以下の方法で実現できます。 1. ユーザーが保存完了時にバックエンドワークフローを起動 2. バックエンドワークフローで、保存されたリッチテキストデータから画像URLを取得（正規表現で抽出） 3. 抽出したURLをバックエンドで圧縮し、BubbleS3に再UP 4. 2と3で処理したURLペアを元にリッチテキストデータのURLを置換 5. 置換後、元データを削除 問題はPluginの開発部分ですが、BubbleのPluginEditorではメモリが少ないので、数MBまではギリギリ処理できます。 が、それを超えた量となる場合は別途APIを作成してAPI Connectorで接続するほうが柔軟に使用できておすすめです。 ---
**Author:** ![nisihata](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/nisihata/32/5390_2.png) [@nisihata](https://www.nocode-faq.com/u/nisihata)\ **Post date:** [2022 年 9 月 28 日午後 1:06 UTC](https://www.nocode-faq.com/t/topic/3184/6 "2022-09-28T13:06:31Z")
知見の提供ありがとうございます！ プラグインの開発も連携させるのですね。 対応方法の幅が広がりました。 メモリに関する情報も大変助かります。