Q&A
コードではなくブラウザに出力されたhtmlを比べれば分かるのでは？
前提・実現したいこと
いつも大変お世話になっております。
ruby on rails６でブログを投稿できるポートフォリオサイトを制作中です。
Bootstrap4を使用しているのですが、ユーザーがログアウトするとレイアウトが崩れてしまいます。
その表示の差をなくしたいと思いこちらに質問させて頂きました。
Bootstrap4はbootstrapのgemを追加する方法で導入しました。
ログアウトすると表示が崩れるだけで機能は正常に動きます。
Railsアプリで Bootstrap 4 を利用するの記事を参考にしました。
ブログの記事を入力する部分にActionTextを使用しています。
発生している問題
ユーザーがログアウトするとグリッドシステムを使用している部分の表示が崩れてしまう。
該当のソースコード
view/posts/index.html/erb
<%= render partial: 'layouts/flash' %> <div class="bg-sample"> <h3 class="text-lg-center mt-5">地球と人のつながりをもっと身近なものに。</h3> <p class="text-lg-center text-muted">みんなの投稿で普段の生活をもっと未来につなげよう</p> </div> <br> <br> <hr> <% breadcrumb :root %> <div class="container"> <div class="row"> <div class="col-lg-8"> <% @posts.each do |post| %> <div class="card mb-4"> <%= image_tag post.image.variant(resize:'300x400').processed, class: "card-img-top "%> <div class="card-body"> <h2 class="card-title"><%= post.title %></h2> <p class="card-text"><%= strip_tags(post.content.to_s).gsub(/[\n]/,"").strip.truncate(20)%></p> <div class="m-2"> <%= render partial: 'posts/posts', locals: { post: post }%> </div> <div class="col"> <a href="/users/<%= post.user.id %>", class="d-flex justify-content-start align-items-center", style="text-decoration: none"> <% if post.user.image.attached? %> <%= image_tag post.user.image, class:"avatar m-1"%> <% else %> <%= image_tag ("defo.jpg"), class:"avatar m-1"%> <% end %> <div class="flex-column"> <p class="h4 text-bold text-muted "><%= post.user.nickname %></p> <span class="text-muted small">投稿日時：<%= post.created_at.to_s(:datetime_jp) %></span> </div> </a> </div> </div> <div class="card-footer text-muted"> <div class="field"> <%= link_to '詳細ページ', post, class: "btn btn-outline-secondary form-control " %> </div> </div> </div> <% end %> </div> <div class="col-lg-4"> <div class="card"> <div class="card-body"> <h5 class="card-title">タグ一覧</h5> <h6 class="card-subtitle mb-2 text-muted">クリックで関連した記事が見れます</h6> <% @tags.each do |tag| %> <span class="badge badge-pill badge-info m-1 p-2"> <%= link_to tag.name, posts_path(tag_name: tag.name), class: "text-white"%> </span> <% end %> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div> </div> </div> </div> </div> <%= paginate @posts %> <div class="container" style="margin-bottom:100px;"></div>
view/posts/show.html/erb
<hr> <% breadcrumb :post %> <div class="container"> <div class="row"> <div class="col-md-7 offset-3"> <%= image_tag @post.image.variant(resize:'700x500').processed %> <br> <br> <h2 class="font-weight-bold mb-1"> <%= @post.title %> </h2> <%= render partial: 'posts/posts', locals: { post: @post }, class:"m-2"%> <a href="/users/<%= @post.user.id %>", class="d-flex", style="text-decoration: none"> <% if @post.user.image.attached? %> <%= image_tag @post.user.image, class:"avatar m-1"%> <% else %> <%= image_tag ("defo.jpg"), class:"avatar m-1"%> <% end %> <div class="flex-column "> <p class="h4 text-bold text-muted "><%= @post.user.nickname %></p> <span class="text-muted small">投稿日時：<%= @post.created_at.to_s(:datetime_jp) %></span> </div> </a> <div class="card"> <%= @post.content %> </div> </div> </div> </div> <div class="container col-md-7 offset-3"> <hr> <div class="text-center text-muted mb-4"> <h4>タグ</h4> <%= @comments_count %> </div> <div class=""> <%= render 'posts/tag_list', tag_list: @post.tag_list %> </div> <hr> <div class=" text-center text-muted mb-4"> <h4>コメント</h4> <%= @comments_count %> </div> <div class=" mx-auto"> <% if @comments %> <% @comments.each do |comment| %> <% if user_signed_in? %> <div class="row"> <p> <div class="col-10"> <strong><%= link_to comment.user.nickname, "/users/#{comment.user_id}" %>：</strong> <%= comment.text %> <% if current_user.id == comment.user_id %> </div> <div class="col-2"> <%= link_to "削除", post_comment_path(@post, comment), method: :delete , class: "btn btn-outline-secondary btn-sm "%> </div> <% end %> </p> </div> <% else %> <p> <strong> <%= comment.user.nickname %>：</strong> <%= comment.text %> </p> <% end %> <% end %> <% if current_user %> <div class="container "> <hr> <%= form_with(model: [@post, @comment], local: true) do |form| %> <div class="form-group mt-3"> <%= form.text_area :text, placeholder: "コメント", rows: "2", class: "form-control" %> <div class="text-right"> <%= form.submit "SEND", class: "btn btn-outline-secondary "%> <% end %> </div> </div> <% else %> <strong><p class="text-center">※※※ コメントするにはログインしてください ※※※</p></strong> <% end %> <% end %> </div> </div> </div> <div class="container" style="margin-bottom:200px;">
view/users/show.html/erb
<div class="container" style="margin-top:20px;"> <%= render 'userhed' %> <hr> <div class="album py-5 bg-light"> <% breadcrumb :user %> <div class="container"> <div class="row"> <% @posts.each do |post| %> <div class="col-md-4"> <div class="card text-center h-100"> <td><%= image_tag post.image.variant(resize:'300x200'), class: "card-img-top" %></td> <h4 class="card-text"><%= post.title %></h4> <div class="card-body "> <%= strip_tags(post.content.to_s).gsub(/[\n]/,"").strip.truncate(20)%> <%= render partial: 'posts/posts', locals: { post: post } %> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group mt-3 mx-auto"> <% if user_signed_in? && current_user.id == post.user_id%> <%= link_to '編集', edit_post_path(post.id), method: :get, class: "btn btn-sm btn-outline-primary" %> <%= link_to '削除', post, method: :delete, data: { confirm: 'Are you sure?' } , class: "btn btn-sm btn-outline-primary"%> <% else %> <%= link_to '詳細', post, class: "btn btn-sm btn-outline-primary" %> <%= link_to 'トップページ', posts_path, class: "btn btn-sm btn-outline-primary" %> <% end %> </div> </div> <hr> <small class="text-muted mt-4"><%= post.created_at.to_s(:datetime_jp) %></small> </div> </div> </div> <% end %> </div> </div> </div> <%= paginate @posts %> <div class="container" style="margin-bottom:200px;">
試したこと
一度Bootstrap 4のgemをアンインストールしてみてCDNで表示しようとやってみたのですが、アンインストールする前よりもレイアウトが崩れてしまいました。そしてログアウトしようとするとエラーが出るなど他の機能にも支障が出たために元に戻しました。
BootstrapのCDNのみの設定でも同じように表示の崩れは治りませんでした。
どうやら表示が崩れている部分はeach文の部分のようですが、ログインの有無によって表示が変わる原因はわかりません。
できることならば現状のやり方のままで修正を加えてログインしていない状態でもうまく表示したいです。
初心者ゆえ説明や理解が足りない部分もあると思いますが解決法を教えてもらえるとありがたいです。
どうかよろしくお願いします。
補足情報（FW/ツールのバージョンなど）
ruby_version 2.6.5
Rails 6.0.3.4
Bootstrap 4.1.1
返信ありがとうございます。
確かにコードにばかり気を取られていました。
デベロッパーツールでログインとログアウトの違いを調べてみます！
posts#indexやusers#showのコードを掲載していますが、これらのページはログアウト後に見れるのでしょうか？
もしログアウト後にrenderやredirectしているページがあるなら、そちらを掲載ください。
また下記は何を書いているかちょっとわからないですが、require_treeは、ざっくりと説明するとそのディレクトリのファイルを自動でまとめてくれる便利な基本機能（アセットパイプラインと言います）です。
Railsを理解している人であれば、よほどの理由がない限りrequire_treeを消すことはないはずです。
https://railsguides.jp/asset_pipeline.html
> /assets/stylesheets/application.scssの中の*= require_tree .の記述はどのサイトを見ても削除するようになっているのですが、削除してしまうとActionTextの表示がリッチテキストのレイアウトが崩れてしまうため消していないです。
no1knows様、修正依頼ありがとうございます。
ログアウト後もレイアウトが崩れるだけで全てのページは閲覧可能です。
ログアウト後に遷移するページはposts#indexになっております。後念の為にルートパスのコードも追記して質問修正致しました。
またrequire_treeに関しては恥ずかしながらおっしゃるとおり私の理解不足でした。
もう一度、添付していただいたRailsガイドの内容をしっかりと読んでみたいと思います。
ありがとうございます。
m.ts10806様、頂いたアドバイスの通りにデベロッパーツールを使いながらビューの調整をしてみました。
ある程度までは修正できるのですがやはりビューの崩れの原因は掴むことができませんでした。
コードも同じで表示だけが崩れるという事はログインの有無で表示するページの読み込み方が違うのか？と思いdeviseでのログインでの表示崩れなどで調べてみたのですが、めぼしい情報は見つかりませんでした。
よろしければ他に原因となりそうな箇所を教えて頂けると幸いです。
ありがとうございます。
あと表示の崩れとはどのようなことを指しているのでしょうか？
崩れているキャプチャ画像（できれば崩れていないものも）を貼り付けていただくことなどはできますか？
またこういうのはm.ts10806さんのおっしゃるとおり、画面を見ながらディベロッパーツールで確認するとすぐに解決できることが多いです。
テスト的にHerokuなどにデプロイしてもらえると解決までは早いと思います。
ただデプロイはということであれば、下記のような手順で検証を進めるのは適切なアプローチだと思っています。
①画面が崩れているページを表示する。
②右クリック⇒ページのソースを表示するで、ソースを表示。
③ソースをコピーし、下記に貼り付け。
https://validator.w3.org/#validate_by_input
④CheckボタンでHTMLが適切かどうか（＝閉じタグ忘れなどがないか）確認する。
⑤④がOKなら、HTML側（つまりRails）には問題がないということでCSS側を確認していく
削除しました。
ご対応ありがとうございます。
小規模な修正かと思っていたら、そもそものところで躓いているようなので、下記にてグリッドシステムについて一度学んでみることをおすすめします。（じゃないと今後困ることになるので）
http://websae.net/twitter-bootstrap-grid-system-21060224/
https://tonari-it.com/bootstrap_multicolumn_generator/ （こっちは少しわかりにくいかも）
上記を踏まえて、ご自身のコードを検討・修正してもうまくいかないなら、質問を編集していただければ回答します！
ありがとうございます。
もっと根本的な問題だったのですね、、
早速教えて頂いたサイトで勉強して、自分で修正してみます。
no1knows様、紹介していただいたサイトも参考にしながら自分なりに試行錯誤してみたのですがどうしても表示の修正ができませんでした。
シンプルにサイトのとおりに記述してみるとその通りの配置になるのですが、each文などが出てくるとどうしても思ったように表示できません。
またログイン、ログアウトどちらかにビューを合わせるとやはり表示が崩れます。
質問内容も編集しましたのでどうか力を貸してください。
今回得たことは必ず今後の糧にしますので、どうかよろしくお願いします。
ちなみにエディターは何を使っていますか？
Visual Studio Codeを使用しております。
回答1件
0
ベストアンサー
修正箇所が多そうなので、ひとまず直接的な回答ではないですが・・・
まず自動整形機能のプラグインを導入していただくと良いかと思います。
VS Codeは使ったことがないのですが、たぶん下記の記事内にあるAuto Close Tagで良いかと思います。
https://teratail.com/questions/113840
自動整形機能を利用するとタグの利用間違いを自動で見つけて教えてくれるので、まずはビューを1つずつ修正していくことをおすすめします。
ちなみに下記ソースはHerokuのトップページで、右クリック⇒ページのソースを表示するで、ソースを表示し、それをコピペして自動整形したものです。
1分もかからずに</nav>までの間で2つのタグの利用間違いを確認できています。
適切なタグを利用していれば、eachを利用しても期待通りの結果は簡単に実現できるかと思いますので一度お試しください。
シンプルにサイトのとおりに記述してみるとその通りの配置になるのですが、each文などが出てくるとどうしても思ったように表示できません。
<!DOCTYPE html> <html> <head> <title>Tiisana</title> <meta name="csrf-param" content="authenticity_token" /> <meta name="csrf-token" content="qe4HqFzhuA8VOYAwUQmPL6upZUmK0RkffWrGaqCrKBGf5+7knzL8d/S1fcUisD5JS7MFa4KIMU675ipXk6KbSg==" /> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css"> <link rel="stylesheet" media="all" href="/assets/application-853939b2a6026f47ba12094476cf576e4ad29be7ee10730daae44597d521ace9.css" /> <script src="/packs/js/application-da7a9daff82f73ecae4b.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> </head> <body> <nav class="navbar navbar-light navbar-expand-md "> <a class="navbar-brand text-primary" href="/"> <div class="h1">Tiisana</div> </a> <div class="collapse navbar-collapse"> <ul class="navbar-nav ml-auto"> <div class="navbar-item d-flex justify-content-end align-items-center"> <form class="search-form" action="/posts/search" accept-charset="UTF-8" method="get"> <div class="input-group"> <input class="search-form navop form-control" type="text" name="keyword" id="keyword" /> <button name="button" type="submit" class="btn btn-light mr-1"><i class="fa fa-search"></i></button> </div> </form></div> <li class="nav-item mr-2 "> <a class="nav-alink btn btn-light " href="/posts/new">新規投稿</a> </li> <li class="nav-item dropdown"> <div class="btn-group"> <button class="nav-alink btn btn-light dropdown-toggle" data-toggle="dropdown" href="/" aria-haspopup="true" aria-expanded="false">koneko </button> <div class="dropdown-menu dropdown-menu-right"> <a><a class="dropdown-item" type="button" href="/users/21">マイページ</a></a> <a><a class="dropdown-item" type="button" href="/users/edit">プロフィール編集</a></a> <a><a class="dropdown-item" type="button" rel="nofollow" data-method="delete" href="/users/sign_out">ログアウト</a></a> </div> </div> </li> </ul> <ul> <!-- このulは必要ないはず --> </div> </nav> </nav> <!-- この/navは必要ないはず -->
投稿2020/11/05 10:59
総合スコア3365
ありがとうございます！
色々と調べてくださり感謝します。
早速インストールして使用してみます。
解決致しました。教えていただいたサイトでエラー箇所を修正していき最終的には表示できました。
そしてその修正の過程で一番表示崩れの原因になっていたのは非同期で実装したいいね機能の
部分だと判明しました。
パーシャルで各ページに渡しているいいね機能の記述の中に余計な閉じタグが紛れ込んでいまし。本当に丁寧にご指導いただきありがとうございました。
今後ともよろしくお願いします。
それは良かったです！
あなたの回答
tips
プレビュー
