MVCの概念やRubyにおける7つのアクションを学習後、
実際にアプリ作成を行ってみました！
特にサーバーサイド実装で苦戦することが多いだろうな。。と思っていた私ですが、
まさかのビューファイルのレイアウト調整で苦戦するということに。。。
ということで！
今回学んだことの振り返りを記録していこうと思います！

今回、本をテーマにした投稿アプリを作ってみました！

以下トップページの画像です。

共有したい本を投稿すると、
このページにどんどんアップされていく仕様になっています♪

ここからリセットCSSにて苦戦したことを挙げていきます！

リセットCSSの導入

※今回はYahoo! (YUI 3) Reset CSSを導入しています。

そもそも何故リセットcssを導入する必要があるのか？
→各ブラウザ毎にデフォルトでかかっているcssがあり、
その作用を打ち消すコードを実装しておかないと、自身が想定する表示とならずレイアウト崩れが起きてしまいます。それを防ぐためのものなんですね！

仮にリセットCSSをなくすと、こんな感じになります↓

変な余白が生まれたりして、レイアウト崩れが起きています。
これを防ぎ、まっさらな状態に戻して実装していく必要があるんですね！

ということで実装。
app>views>layouts>application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>BookTalk</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

これまで習っていたことを参考に、

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">

このコードでリセットCSSを読み込ませるようにしました。

よし！では進めていこうとカタカタ実装していた所、
妙な不具合に遭遇。
ローカル環境では問題なくリセットcssが適応されているものの、
herokuへデプロイするとリセットcssが読み込まれずレイアウト崩れが起きていることに気づく。。

ローカル環境では適応されているので、
記述が誤っているということではないな。。何が要因？？。。ハマりました泣

本番環境画面のコンソールにてエラーがどうなっているかを確認。
記載したhttp~のURLが読み込めていないというエラーになっていました。

そこで調べてみると、
http通信はいわゆる暗号化されていない通信(セキュリティ上安全でないページ)となるため、
そこで引っ掛かり読み込めず、
結果リセットCSSが適応されないといった事象になっていることが分かりました。
これに対しhttps通信は暗号化された通信(セキュリティ保護されたページ)として認識されるとのこと。

ということで、そもそもURLを読み込むのではなく、
stylesheetsフォルダにリセットcssファイルを作成し、
直接コードを打ち込んでいく方法に変えました。

すると、、、
heroku上のレイアウトにも適用されました！！！

ここ躓く所ではないだろ！っとツッコミたくなる内容だなと感じましたが。。。

参考にする教科書通りのコードで進めようとすると、
思わぬエラーにぶつかることもあるんだと痛感しました。

シンプルな解決方法から複雑な解決方法まで様々あると思いますが、
常に広い視点で問題を解決していけるように、癖づけていこうと思いました！！

ここまで読んでいただき、ありがとうございます！
内容でおかしな点、誤っている点等あればご指摘いただけると幸いです！