【rails】オリジナルアプリをレスポンシブデザインにしてみました。（画像がはみでる、heroku上で画像が表示されない）

オリジナルアプリをheroku上で公開したところ、スマホで見るとブラウザで見るのと同じような形になっていたのでレスポンシブデザインにしてみました。

Rails4 レスポンシブデザインについてを参考にし、

以下を　application.html.erb　に記述しました。

（略）
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
（略）

レスポンシブになったけど、画像が収まっていない…

これはレスポンシブ対応になっているようです。

解決方法

(参考)
こちらの質問→Railsで表示画面（ブラウザ）の大きさに合わせて表示画像の大きさをコントロールする方法を教えてください。
にあった、こちらのサイトに解決方法がありました。CSS でイメージをデバイスの幅に合わせて表示する

最初、home.html.erbにこのように記載をしておりましたが、

<!-- First Container -->
<div class="container-fluid bg-1 text-center">
  <%= image_tag 'catchcopy2.png' %>
  <br></br>
  <%= image_tag 'IMG_3573.png',:size => '300x260' %>
  <br></br>
  <%= image_tag 'logo.png'%>
</div>

↓以下のようにCSSに対応できるように修正しました。

<!-- First Container -->
<div class="container-fluid bg-1 text-center">
  <img src='/assets/catchcopy2.png' />
  <br></br>
  <img src='/assets/IMG_3573.png', width="300",height="260" />
  <br></br>
  <img src='/assets/logo.png' />
</div>

そしてCSSに以下を追加。

img {
    max-width: 100%;
    height: auto;
}

ブラウザで見ると画像が表示されていますが、スマホで見ると…
おや（　＾ω＾）・・・レスポンシブにはなってそうですが、なぜか画像が表示されない・・・

解決方法については、まずはこちら：【Rails開発】assets/images以下の画像がHerokuで読み込まれないときの対処法
のサイトから引用

bundle exec rake assets:precompile

という謎のコマンド。

本番環境（production）環境では，これらスタイルファイル（css.scss）を結合して1つの application.css として読み込まれる様に，次のようなコマンドで，事前にコンパイルしておくのです．
この結果，public/assets/ にその結果の application.css が作成されますので，Railsはそこを読み込むようになりますだそうです。

本番環境でも開発環境のassets以下の更新内容を読み込むためには、上のコマンドを実行してコンパイルする必要があるみたいです。

コマンドを実行。herokuへpush!
しかし画像はまだ表示されません…

こちらのサイトに書いてありました！
Herokuに（ちゃんと）デプロイしてみた。

ということで、config/environments/production.rbに設定を追加。

config.assets.compile = true

これで、一応動くようになりました。

結果、表示されました！

今日はただ単にコードを書き写しただけなので、アセットパイプライン等についてのまとめは次のメモで整理しようと思います。
今日のエラーは以上です。