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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails 5

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

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

JavaScript

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

Amazon EC2

Amazon EC2は“Amazon Elastic Compute Cloud”の略称です。Amazon Web Services(AWS)の一部であり、仮想化されたWebサーバーのコンピュータリソースをレンタルできるサービスです。

Q&A

解決済

1回答

2570閲覧

RailsとJavaScriptの本番環境での不具合

退会済みユーザー

退会済みユーザー

総合スコア0

Ruby on Rails 5

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

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

JavaScript

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

Amazon EC2

Amazon EC2は“Amazon Elastic Compute Cloud”の略称です。Amazon Web Services(AWS)の一部であり、仮想化されたWebサーバーのコンピュータリソースをレンタルできるサービスです。

0グッド

1クリップ

投稿2018/10/27 11:58

編集2018/10/27 15:36

こんにちは、RubyとRailsを独学で勉強している者です。
今回は、RailsとJavaScriptの本番環境での不具合について質問があります。

本番環境 プラットホーム:AWS 仮想サーバー:EC2(t2.small) データベース:RDS(db.t2.micro)

ローカルの開発環境では正確に動いている以下のpJavaScriptのコードが上記の本番環境では不具合のように動きます。(動かないのではなく、不具合のような挙動になります。)

function Fileviewbegin() { var postimg_0 = document.getElementById('post_article_photos_attributes_0_image'); var postimg_1 = document.getElementById('post_article_photos_attributes_1_image'); var postimg_2 = document.getElementById('post_article_photos_attributes_2_image'); if (postimg_0 != null) { function Filepreview(evt) { var file = evt.target.files[0]; document.getElementById('preview_0').innerHTML = "" var reader = new FileReader(); reader.onload = (function() { return function(e) { var span = document.createElement('span'); span.innerHTML = "<img src='" + e.target.result + "'>"; document.getElementById('preview_0').insertBefore(span, null); document.getElementById('image-upload').classList.add('delete-upload'); }; })(file); reader.readAsDataURL(file); }; postimg_0.addEventListener('change', Filepreview, false); }; if (postimg_1 != null) { function Filepreview(evt) { var file = evt.target.files[0]; document.getElementById('preview_1').innerHTML = "" var reader = new FileReader(); reader.onload = (function() { return function(e) { var span = document.createElement('span'); span.innerHTML = "<img src='" + e.target.result + "'>"; document.getElementById('preview_1').insertBefore(span, null); document.getElementById('image-upload').classList.add('delete-upload'); }; })(file); reader.readAsDataURL(file); }; postimg_1.addEventListener('change', Filepreview, false); }; if (postimg_2 != null) { function Filepreview(evt) { var file = evt.target.files[0]; document.getElementById('preview_2').innerHTML = "" var reader = new FileReader(); reader.onload = (function() { return function(e) { var span = document.createElement('span'); span.innerHTML = "<img src='" + e.target.result + "'>"; document.getElementById('preview_2').insertBefore(span, null); document.getElementById('image-upload').classList.add('delete-upload'); }; })(file); reader.readAsDataURL(file); }; postimg_2.addEventListener('change', Filepreview, false); }; }; window.addEventListener('load', Fileviewbegin, false);

上記のコードは写真の投稿フォームで
inputのidがpost_article_photos_attributes_0_imageのタグに写真が入ったらフォームの#preview_0の場所に<img>タグを挿入するというネイティブJSです。
同じようにpost_article_photos_attributes_1_imageのタグに写真が入ったらフォームの#preview_1の場所に<img>タグを挿入、post_article_photos_attributes_2_imageのタグに写真が入ったらフォームの#preview_2の場所に<img>タグを挿入します。
ローカルの開発環境では正確に動きますがAWSの本番環境では、post_article_photos_attributes_0_imageのタグに写真が入ったらフォームの#preview_2の場所に<img>タグが挿入されるなど不具合の挙動になります。

ちなみに、以下のコマンドで正確にアセットのプリコンパイルは行われております。

bundle exec rake assets:precompile RAILS_ENV=production

何故でしょうか?
アドバイスなど、宜しくお願い致します。

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

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

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

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

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

guest

回答1

0

ベストアンサー

ローカルの開発環境にアクセスしてブラウザが受信するhtmlとjavascriptをテキストに保存し、
AWSにアクセスしてブラウザが受信するhtmlとjavascriptをテキストに保存し、
winmergeでdiffを確認すれば何か分かるのではないでしょうか

投稿2018/10/29 01:02

kaba

総合スコア314

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

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

退会済みユーザー

退会済みユーザー

2018/10/29 05:07 編集

コメント、ありがとうございます! 初心者で大変申し訳ありませんが、「ローカルの開発環境にアクセスしてブラウザが受信するhtmlとjavascriptをテキストに保存し、AWSにアクセスしてブラウザが受信するhtmlとjavascriptをテキストに保存」のやり方はどのようにして行うのでしょうか? よろしくお願い致します。
kaba

2018/10/29 05:15

ブラウザで「ソースの表示」をして、ファイルに保存すればいいです。
退会済みユーザー

退会済みユーザー

2018/10/29 08:15

ありがとうございます! やってみます!
退会済みユーザー

退会済みユーザー

2018/10/29 14:56

差分ではあまりよく分からなかったため、 JavaScriptのコードの場所をapp/assets/javascript/~.jsから _form.html.erbに直接記述したら正確に動きました。 原因はよく分かりませんが、とりあえず動いて良かったです! アドバイス、ありがとうございました!!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問