🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Ruby on Rails 6

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

2851閲覧

JavaScriptのinsertAdjacentHTMLを使って画像を挿入した際、本番環境で表示されない

cherry2020

総合スコア10

Ruby on Rails 6

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/02/01 23:02

###実現したいこと

  • JavaScriptのAjaxを使い、非同期通信でチャット風UIでつぶやけるようにしたい
  • ローカル環境ではそれが実現したものの、Herokuにデプロイしたところ、画像が表示されなくなってしまった

###使用しているバージョン等

  • Rails 6.0.3.4
  • ruby 2.6.5
  • heroku/7.47.11 darwin-x64 node-v12.16.2

###起きているエラー
###### ローカル環境
イメージ説明
###### 本番環境
イメージ説明

(補足)ビューが崩れてしまったり見づらいところは機能ができてから直そうと思っているためご容赦ください。

###現在のコード

JavaScript

1function post() { 2 const submit = document.getElementById("submit_message"); 3 submit.addEventListener("click", (e) => { 4 const formData = new FormData(document.getElementById("self_compassion")); 5 const XHR = new XMLHttpRequest(); 6 XHR.open("POST", "/troubles", true); 7 XHR.responseType = "json"; 8 XHR.send(formData); 9 XHR.onload = () => { 10 if (XHR.status != 200) { 11 alert(`Error ${XHR.status}: ${XHR.statusText}`); 12 return null; 13 } 14 const item = XHR.response.trouble; 15 const list = document.getElementById("list_messages"); 16 const formText = document.getElementById("content_worry"); 17 if(document.querySelector("#trouble_message_type_trouble").checked) { 18 const HTML_trouble= ` 19 <li class="message-left-side"> 20 <div class="pic-chat"> 21 <img src="/assets/sad.png" alt="落ち込んでいる画像"> ⭐️この部分が反映されない 22 </div> 23 <div class="text-chat"> 24 <div class="post-content"> 25 ${item.worry} 26 </div> 27 <div class="post-date"> 28 投稿日時:${item.created_at.slice(0,19)} 29 </div> 30 </li>`; 31 list.insertAdjacentHTML("afterend", HTML_trouble); 32 formText.value = ""; 33 return false; 34 } else (document.querySelector("#trouble_message_type_encouragement").checked) 35 const HTML_encouragement= ` 36 <li class="message-right-side"> 37 <div class="pic-chat"> 38 <img src="/assets/kind.png" alt="励ましている画像"> ⭐️この部分が反映されない 39 </div> 40 <div class="text-chat"> 41 <div class="post-content"> 42 ${item.worry} 43 </div> 44 <div class="post-date"> 45 投稿日時:${item.created_at.slice(0,19)} 46 </div> 47 </li>`; 48 list.insertAdjacentHTML("afterend", HTML_encouragement); 49 formText.value = ""; 50 return false; 51 }; 52 e.preventDefault(); 53 }); 54} 55window.addEventListener('load', post);

html

1<div class="form-area"> 2 <div class="form-chat"> 3 <form id="self_compassion" action="/troubles" accept-charset="UTF-8" data-remote="true" method="post"><input type="hidden" name="authenticity_token" value="r0VMxMZxkiq+BUDCMY7pqDHV45CkWwOzimlzSFirCGcH8sa3+Z2GELg74+UpRfe60RPX9/GE6yeEHnXAeI5+Sg==" /> 4 <label for="trouble_trouble">悩みをつぶやく</label> 5 <input type="radio" value="trouble" checked="checked" name="trouble[message_type]" id="trouble_message_type_trouble" /> 6 <label for="trouble_encouragement">励ましの言葉をかける</label> 7 <input type="radio" value="encouragement" name="trouble[message_type]" id="trouble_message_type_encouragement" /> 8 <input id="content_worry" placeholder="メッセージを入力" type="text" name="trouble[worry]" /> 9 <input type="submit" name="commit" value="POST" id="submit_message" data-disable-with="POST" /> 10</form> </div> 11 </div>

###そこから立てた仮説と検証

仮説1

Herokuにデプロイしているので画像が反映されないのではないか?

実証1
  • AWSのS3を実装してみる。
  • バケットに画像情報は反映されず。エラーは解消されず。
  • そもそも画像を投稿する機能ではないため、違った?
  • S3上に、この2枚の画像をアップロードするも上手くいかない状況は変わらず。

イメージ説明

仮説2

画像挿入のコードがよくないのではないか?

実証2

こちらのキータの記事を参考に、

JavaScript

1# 修正前 2 <img src="/assets/kind.png" alt="励ましている画像"> 3# 修正後 4 <img src="<%= asset_path "kind.png" %>" alt="励ましている画像">

上記の通り変更。

すると、

  • ローカル環境で、非同期通信ができなくなってしまった(リロードすれば画像は反映される)

イメージ説明

  • Herokuでのエラーは解消せず。

上記のような状況です。

######聞きたいこと

修正する方向性について

  • デプロイ環境が原因なのか
  • JavaScriptの記述方法なのか

分からなくなってしまいました。
そもそもinsertAdjacentHTMLを使って、Railsで画像を挿入しようとしていたことに無理があったのでしょうか?

ローカルと本番環境で上手くいかない違いは何でしょうか?

ヒントでもいいので、こういうところが原因では?とご教授いただけたら幸いです。

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

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

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

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

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

guest

回答3

0

仮説はあくまで仮説なのでエラーの原因追及を探す前に、
何が起こっているのかの状況確認をしてみるのが良いかと思います。

状況を確認してからそれに対する有効な対策を絞り込んでいきます。
その段階になってから、対策を立てる時に仮説と検証がより有効に働いてきます。

とりあえずなんですが、この/asset/*.pngファイルへのアクセスした時に、
通信的にはどういう応答が返ってきているのでしょうか?(404とか500とか、単にtimeoutとか)

参考:chromeディベロッパーツール>Networkタブ
イメージ説明

また、画像リクエストの通信がサーバ側に到達している場合、どんなアクセスログが残っているでしょうか?

直接解決につながる話ではないのですがそこからだと思いました。

投稿2021/02/01 23:58

編集2021/02/02 06:00
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

cherry2020

2021/02/02 15:28

mahnyさん、回答ありがとうございます。 お恥ずかしながら、chromeディベロッパーツール>Networkタブから状況確認ができることを知りませんでした。画像まで貼ってくださり、とても分かりやすく、今後の役にも立つことを知れました。 ありがとうございます。 確認してみたところ、 現状は、「404エラー」が本番環境において発生していることが分かりました。
退会済みユーザー

退会済みユーザー

2021/02/02 20:12 編集

それは何よりです。 インフラやネットワーク系の人間ならパケットキャプチャツールで本気モードで調べたりもしますが、 プログラマでもせめて開発者ツール等の簡易的に調査できるものくらいは押さえておくといいでしょうね。 ちなみにHTTPステータスとかレスポンスコードとか言われるコードにはこんな意味があるので、 今後もWEB系で進むならよく見るコードだけでも覚えておくといいです(後は都度調べる) 個人的にはこの辺か。【200、301、302、400、401、403、404、500、502、503】 https://developer.mozilla.org/ja/docs/Web/HTTP/Status 今回だと、【404エラー】ということでそんな画像はない!って言っている訳なので ・画像は本番環境に上がっているのか? ・画像は正しい位置に置いているのか? ・画像パスの指定方法は正しいのか? のような仮説や推測を元に次の手を打つわけですね。 では失礼します。
cherry2020

2021/02/02 21:45

mahnyさん、さらに詳しく教えてくださってありがとうございます。 本気モードで調べるときは「パケットキャプチャツール」というツールを使うのですね。 レスポンスコードから、次の手を打つ方法を考える過程を丁寧に教えてくださって、本当に助かりました。 ありがとうございました。
guest

0

ベストアンサー

アセットのコンパイルはしましたか?
それをしないと表示が崩れることがあるようです。

https://techtechmedia.com/asset-compile-aws/

https://railsguides.jp/asset_pipeline.html

「productionモードでは、Railsはプリコンパイルされたファイルをpublic/assetsに置きます。プリコンパイルされたファイルは、Webサーバーによって静的なアセットとして扱われます。app/assetsに置かれたファイルがそのままの形でproduction環境で使用されることは決してありません。」

https://qiita.com/hogehoge1234/items/9a94ebc93c5f937502cd

https://qiita.com/shockdayukio/items/d535630c91c1817355f3

投稿2021/02/02 02:15

ppin

総合スコア58

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

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

cherry2020

2021/02/02 16:05

ppinさん、回答ありがとうございます。 RailsやAWS、Herokuそれぞれのアセットコンパイルに関する分かりやすいリンクを貼ってくださり、大変みやすく助かりました。 そして、アセットコンパイルしていませんでした。 教えてくださったURLを元に、 ①アプリのディレクトリで`rake assets:precompile RAILS_ENV=production`を実行。 ② `config/application.rb`に、`config.assets.initialize_on_precompile = false`とかく。  `config/production.rb`に、`config.assets.compile = true`とかく。 ③マスターへ反映させる ④`heroku run bundle exec rake assets:precompile RAILS_ENV=production -a アプリ名`の実行。 を行なったところ、画像を表示させることができました!!!!!!! めちゃくちゃ嬉しいです・・・!!! ppinさんのおかげです。 本当にありがとうございました。
guest

0

単純に公開パスからの絶対位置に画像ファイルが存在しない可能性が高いと思います

投稿2021/02/02 00:14

yambejp

総合スコア116661

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

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

cherry2020

2021/02/02 15:58

yambejpさん、前回に引き続いて回答ありがとうございます。 画像の位置について「絶対パス」「相対パス」を意識していませんでした。 そして、現在の方法は「相対パス」であることと、「絶対パス」から指定するのであれば「http://〜」のような形で、公開パスから指定していくことがおすすめであることも知ることができました。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問