カルーセルに画像を読み込む

Kotaro18 / footomo

0 stars 0 forks source link

カルーセルに画像を読み込む #4

Open Kotaro18 opened 3 years ago

Kotaro18 commented 3 years ago

Webサイトにカルーセルを表示したく、 Bootstrapの公式サイトからペーストした。

https://getbootstrap.jp/docs/4.3/examples/carousel/ https://getbootstrap.jp/docs/4.2/components/carousel/

カルーセルをデフォルトから、画像に変更するためにhtmlやcssを修正してみたが上手くいかない。

また、画像の拡張子をsvgやpngで試してみたが表示できなかった。

https://qiita.com/yamamiweb/items/011d6b264a5af568783b こちらを参考に、SVGでの画像表示も試してみたがダメだった。

_carousel.html.erb

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
    <ol class="carousel-indicators">
      <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
      <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
      <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <svg class="bd-placeholder-img" width="100%" height="300px" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/>
        </svg>

        <div class="container">
          <div class="carousel-caption text-start">
            <h1>見出しの例</h1>
            <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
            <p><a class="btn btn-lg btn-primary" href="#" role="button">今すぐサインアップ</a></p>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <svg class="bd-placeholder-img" width="100%" height="300px" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>

        <div class="container">
          <div class="carousel-caption">
            <h1>別の見出しの例</h1>
            <p>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</p>
            <p><a class="btn btn-lg btn-primary" href="#" role="button">もっとみる</a></p>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <svg class="bd-placeholder-img" width="100%" height="300px" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>

        <div class="container">
          <div class="carousel-caption text-end">
            <h1>もう一つの見出しの例</h1>
            <p>しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</p>
            <p><a class="btn btn-lg btn-primary" href="#" role="button">ギャラリーをみる</a></p>
          </div>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">前へ</span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">次へ</span>
    </a>
  </div>

carousel.scss

.carousel-item {
  background-image: url("star.svg");  
}

.bd-placeholder-img {
  background-image: image-url("star.png");  
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}

公式サイトからカルーセルを導入したが、 SVG という見慣れないものへの理解ができていないのか。

masayuki14 commented 3 years ago

Bootstrap を利用するには、本体のCSSとJavascriptをロードする必要がありますが、これはどうなっていますか？

masayuki14 commented 3 years ago

Railsへ組み込む前に、Bootstrap単体で動かしたことはありますか？これはHTML, CSS, JavaScriptの組み合わせなのでブラウザがあれば実行できます。 Bootstrapがどういうものかは理解できていますか？

Kotaro18 commented 3 years ago

ご確認頂き有難うございます。

Bootstrapは、HTMLやCSSにコピペしたりして参照することで、デザインが簡単に作れる、というイメージしかありませんでした。

Bootstrap を利用するには、本体のCSSとJavascriptをロードする必要がありますが、これはどうなっていますか？

こちらについても知りませんでした。 https://www.sejuku.net/blog/124277 こちらの記事を参考に、必要なものをダウンロードしてフォルダに移しました。

まだ画像の反映はできまでんが、 Bootstrapについてはしっかり理解しておきたいと思います。

https://getbootstrap.jp/docs/5.0/getting-started/introduction/ BoostrapはCDNとテンプレートを使ったフレームワークとありました。

CDNについて何か分かっていなかったので下記サイトを参考にしました。 https://www.kagoya.jp/howto/network/cdn/

Bootstrapがどういうものかは理解できていますか？

こちらにつきまして、Masaさんの意図されている、私が理解すべきものは何かご教示頂けますと幸いです。

masayuki14 commented 3 years ago

まず、参照すべきは公式サイトです。 https://getbootstrap.jp/docs/4.2/getting-started/introduction/

最初に必要なことが記載されています。記載の通り、必要なCSSとJavaScriptのロードについて記載されています。ファイル自体は、別サーバーから読み込んでもいいですし、参照しているブログ記事のようにダウンロードして、Railsのアプリケーション内に配置してもかまいません。

CDNはBootstrapと直接関係ないのでどちらでもよいです。

masayuki14 commented 3 years ago

こちらの記事を参考に、必要なものをダウンロードしてフォルダに移しました。

こちらの作業は目的や意味を理解して行っているのなら問題ないですが、ブログに記載があるから真似した、という状態では意味がないと思いますが、いかがでしょう。

Bootstrapがどういうものかは理解できていますか？

こちらにつきまして、Masaさんの意図されている、私が理解すべきものは何かご教示頂けますと幸いです。

Bootstrap は HTML, CSS, JavaScript で動くものなのでRailsを使わない状態で一度動かしてみてどういうものかを理解したほうが良さそうに思います。 htmlファイルを作ってブラウザで開けば動かすことが出来るので、まずそれでCarouselも試してみてはいかがでしょうか。

Kotaro18 commented 3 years ago

ご確認有難うございます。

Bootstrap は HTML, CSS, JavaScript で動くものなのでRailsを使わない状態で一度動かしてみてどういうものかを理解したほうが良さそうに思います。 htmlファイルを作ってブラウザで開けば動かすことが出来るので、まずそれでCarouselも試してみてはいかがでしょうか。

こちらにつきまして、試してみましたがわかりませんでした。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Jekyll v3.8.5">
    <title>Carousel Template · Bootstrap</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/4.2/examples/carousel/">

    <!-- Bootstrap core CSS -->
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>
    <!-- Custom styles for this template -->
    <link href="carousel.css" rel="stylesheet">
  </head>
  <body>
    <header>
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <a class="navbar-brand" href="#">Carousel</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
      <form class="form-inline mt-2 mt-md-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
</header>

<main role="main">

  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" ><rect fill="#777" width="100%" height="100%"/></svg>
        <div class="container">
          <div class="carousel-caption text-left">
            <h1>Example headline.</h1>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" ><rect fill="#777" width="100%" height="100%"/></svg>
        <div class="container">
          <div class="carousel-caption">
            <h1>Another example headline.</h1>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" ><rect fill="#777" width="100%" height="100%"/></svg>
        <div class="container">
          <div class="carousel-caption text-right">
            <h1>One more for good measure.</h1>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
          </div>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

  <!-- Marketing messaging and featurettes
  ================================================== -->
  <!-- Wrap the rest of the page in another container to center all the content. -->

  <div class="container marketing">

    <!-- Three columns of text below the carousel -->
    <div class="row">
      <div class="col-lg-4">
        <svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 140x140"><title>Placeholder</title><rect fill="#777" width="100%" height="100%"/><text fill="#777" dy=".3em" x="50%" y="50%">140x140</text></svg>
        <h2>Heading</h2>
        <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
      </div><!-- /.col-lg-4 -->
      <div class="col-lg-4">
        <svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 140x140"><title>Placeholder</title><rect fill="#777" width="100%" height="100%"/><text fill="#777" dy=".3em" x="50%" y="50%">140x140</text></svg>
        <h2>Heading</h2>
        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
      </div><!-- /.col-lg-4 -->
      <div class="col-lg-4">
        <svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 140x140"><title>Placeholder</title><rect fill="#777" width="100%" height="100%"/><text fill="#777" dy=".3em" x="50%" y="50%">140x140</text></svg>
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
      </div><!-- /.col-lg-4 -->
    </div><!-- /.row -->

    <!-- START THE FEATURETTES -->

    <hr class="featurette-divider">

    <div class="row featurette">
      <div class="col-md-7">
        <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It’ll blow your mind.</span></h2>
        <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
      </div>
      <div class="col-md-5">
        <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 500x500"><title>Placeholder</title><rect fill="#eee" width="100%" height="100%"/><text fill="#aaa" dy=".3em" x="50%" y="50%">500x500</text></svg>
      </div>
    </div>

    <hr class="featurette-divider">

    <div class="row featurette">
      <div class="col-md-7 order-md-2">
        <h2 class="featurette-heading">Oh yeah, it’s that good. <span class="text-muted">See for yourself.</span></h2>
        <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
      </div>
      <div class="col-md-5 order-md-1">
        <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 500x500"><title>Placeholder</title><rect fill="#eee" width="100%" height="100%"/><text fill="#aaa" dy=".3em" x="50%" y="50%">500x500</text></svg>
      </div>
    </div>

    <hr class="featurette-divider">

    <div class="row featurette">
      <div class="col-md-7">
        <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
        <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
      </div>
      <div class="col-md-5">
        <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 500x500"><title>Placeholder</title><rect fill="#eee" width="100%" height="100%"/><text fill="#aaa" dy=".3em" x="50%" y="50%">500x500</text></svg>
      </div>
    </div>

    <hr class="featurette-divider">

    <!-- /END THE FEATURETTES -->

  </div><!-- /.container -->

  <!-- FOOTER -->
  <footer class="container">
    <p class="float-right"><a href="#">Back to top</a></p>
    <p>&copy; 2017-2018 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
  </footer>
</main>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <script>window.jQuery || document.write('<script src="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script></body>
</html>

masayuki14 commented 3 years ago

こちらにつきまして、試してみましたがわかりませんでした。

何がわからなかったのでしょうか？スクリーンショットが貼り付けられている意図はなんですか？何を見せたいのですか？

CSSや JavaScriptは読み込まれないと効果が出ないものです。 ChromeであればデベロッパーツールのNetworkタブで、それらのファイルが読み込まれているか確認できます。上記のHTMLをそのまま保存してブラウザで表示すると、いくつか読み込めていないCSS、JavaScriptがあります。まずはこれを解消しましょう。

Kotaro18 commented 3 years ago

ご確認ありがとうございます。 networkで確認したところ、いくつかエラーが出ていました。

test.html Access to CSS stylesheet at 'file:///docs/4.2/dist/css/bootstrap.min.css' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

bootstrap.min.css Failed to load resource: net::ERR_FAILED

test.html Access to script at 'file:///docs/4.2/dist/js/bootstrap.bundle.min.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

bootstrap.bundle.min.js Failed to load resource: net::ERR_FAILED

carousel.css Failed to load resource: net::ERR_FILE_NOT_FOUND

困った時は、「検証/network」を見る癖をつけたいと思います。また、上記のエラーについて、ひとつひとつ見ていってみます。

masayuki14 commented 3 years ago

まずは、ちゃんとファイルを読めるようにしましょう。

Kotaro18 commented 3 years ago

まずは、ちゃんとファイルを読めるようにしましょう。

承知しました。まずはそこを目指していきたいと思います。

まず、こちらのエラーに対応しました。 test.html Access to CSS stylesheet at 'file:///docs/4.2/dist/css/bootstrap.min.css' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

こちらの記事を参考にして、ローカルサーバーを立ち上げ、 localhostからアクセスしました。 https://qiita.com/terufumi1122/items/39b2a3659bc585c07f64

すると、エラーが全て同じ表記になりました。

続いて、こちらのエラーを解決していきたいと思います。 net::ERR_ABORTED 404 (Not Found)

masayuki14 commented 3 years ago

ローカルサーバーをたてる必要は全くありません。 CSSやJavaScriptをCDNからロードするのであれば、URLを正しく指定してください。ローカルから読み込むのであれば、test.html との相対パスを正しく指定し、その場所にファイルを置いてください。

masayuki14 commented 3 years ago

https://github.com/Kotaro18/footomo/issues/4#issuecomment-869237887

たとえばこのHTMLを test.html に保存してブラウザで表示すると以下のようになります。

この場合

bootstrap.min.css
carousel.css
bootstrap.bundle.min.js

の３つのファイルが読み込めていません。ソースコードを見るとどれも /docs/... と絶対パスになっています。であれば、そのパスの場所にこれらのファイルを置いてください。もしくはファイルがある場所へのパスを正しく指定してください。絶対パスでも相対パスでも良いです。

もしくはCDNのURLを指定してください。

Kotaro18 commented 3 years ago

それぞれに相対パスを指定しました。

bootstrap.min.css
carousel.css
bootstrap.bundle.min.js

エラーは無くなりました。

しかし、carousel.cssは元々無かったため、カルーセルを実装するにあたり　作成しました。

Kotaro18 commented 3 years ago

引き続き、メンターから教えて頂いた手順を実行していく。

BootstrapのJavascriptを読み込む必要がある。
BootstrapのCSSを読み込む必要がある。
それらを読み込んだ上で、各コンポーネントのHTMLを実行することができる。 コンポーネントはこちらのものです https://getbootstrap.jp/docs/4.3/components/alerts/

まずはjavascriptの導入から始める。下記のサイトをもとに、</body>の直前に追記する。 https://getbootstrap.jp/docs/4.3/getting-started/introduction/

application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Footomo</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <%# # initial-scaleでズーム倍率の初期値を設定する。initial-scale=1にすると拡大や縮小せずに見せる %>

    <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => "reload" %>
    <%= javascript_include_tag "application", "data-turbolinks-track" => "reload" %>
  </head>

  <body>
    <div id="wrapper">
      <%= render 'partial/navbar' if current_user %>

      <% if flash[:notice] %>
        <div class="alert alert-info">
          <%= flash[:notice] %>
        </div>
      <% end %>
      <% if flash[:alert] %>
        <div class="alert alert-danger">
          <%= flash[:alert] %>
        </div>
      <% end %>

      <div class="container">
        <%= render 'partial/carousel' %>
      </div>

      <div class="container">
        <%= yield %>
      </div>

      <%= render 'partial/footer' %>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Kotaro18 commented 3 years ago

次に、CSSの読み込みを設定する。上記と同様に、以下の公式サイトを参考に導入する。 https://getbootstrap.jp/docs/4.3/getting-started/introduction/

ここでは、記載の通り、 <head>の内側に、他のスタイルシートよりも先に追記する。

application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Footomo</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <%# # initial-scaleでズーム倍率の初期値を設定する。initial-scale=1にすると拡大や縮小せずに見せる %>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => "reload" %>
    <%= javascript_include_tag "application", "data-turbolinks-track" => "reload" %>
  </head>

  <body>
    <div id="wrapper">
      <%= render 'partial/navbar' if current_user %>

      <% if flash[:notice] %>
        <div class="alert alert-info">
          <%= flash[:notice] %>
        </div>
      <% end %>
      <% if flash[:alert] %>
        <div class="alert alert-danger">
          <%= flash[:alert] %>
        </div>
      <% end %>

      <div class="container">
        <%= render 'partial/carousel' %>
      </div>

      <div class="container">
        <%= yield %>
      </div>

      <%= render 'partial/footer' %>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Kotaro18 commented 3 years ago

javascriptsとcssの挙動を確認するため、 Dockerを起動しようとしたが、エラーが発生した。

ターミナル

Kotaro18:footomo kotaro18$ docker-compose up --build
Building local-rails
[+] Building 2.2s (4/4) FINISHED                                                                                
 => [internal] load build definition from Dockerfile                                                       0.0s
 => => transferring dockerfile: 37B                                                                        0.0s
 => [internal] load .dockerignore                                                                          0.0s
 => => transferring context: 2B                                                                            0.0s
 => ERROR [internal] load metadata for docker.io/library/ruby:2.7.2                                        2.1s
 => [auth] library/ruby:pull token for registry-1.docker.io                                                0.0s
------
 > [internal] load metadata for docker.io/library/ruby:2.7.2:
------
failed to solve with frontend dockerfile.v0: failed to create LLB definition: failed to authorize: rpc error: code = Unknown desc = failed to fetch oauth token: unexpected status: 401 Unauthorized
ERROR: Service 'local-rails' failed to build : Build failed

こちらの記事を参考に、Docker Engineの記述を確認したが、整合性がなく、修正の仕方がわからなかった。 https://qiita.com/go_new_innov/items/9739892231fcdc77228f https://community.toradex.com/t/docker-failure-when-attempting-create-c-c-application/12428

自分の Docker Engineのデフォルトの記述

{
  "builder": {
    "gc": {
      "defaultKeepStorage": "20GB",
      "enabled": true
    }
  },
  "debug": true,
  "experimental": false
}

Kotaro18 commented 3 years ago

メンターの方より、Docker自体に原因があると教えて頂いた。 Dcokerを一度アンインストールして、再度インストールを試みた。

https://docs.docker.com/desktop/mac/release-notes/ 上記のページで、"Mac wit Intel Chip"の方を選択し実行した。（Mac with Apple Chipではうまくインストールできなかった）

インストール後、dockerでビルドを実行した。

Kotaro18:footomo kotaro18$ docker-compose up --build
bash: docker-compose: command not found
Kotaro18:footomo kotaro18$ docker-compose up --build
Creating network "footomo_default" with the default driver
Creating volume "footomo_mysql-data" with default driver
Pulling local-redis (redis:)...
latest: Pulling from library/redis
e1acddbe380c: Pull complete
a31098369fcc: Pull complete
4a49b0eba86d: Pull complete
fddf1399efac: Pull complete
5c6658b59b72: Pull complete
0b88638a5b77: Pull complete
Digest: sha256:66ce9bc742609650afc3de7009658473ed601db4e926a5b16d239303383bacad
Status: Downloaded newer image for redis:latest
Building local-rails
[+] Building 704.5s (17/17) FINISHED                                                                            
 => [internal] load build definition from Dockerfile                                                       0.1s
 => => transferring dockerfile: 844B                                                                       0.0s
 => [internal] load .dockerignore                                                                          0.1s
 => => transferring context: 2B                                                                            0.0s
 => [internal] load metadata for docker.io/library/ruby:2.7.2                                              4.6s
 => [ 1/12] FROM docker.io/library/ruby:2.7.2@sha256:1dd0106849233fcd913b7c4608078fa1a53a5e3ce1af2a55e4  179.5s
 => => resolve docker.io/library/ruby:2.7.2@sha256:1dd0106849233fcd913b7c4608078fa1a53a5e3ce1af2a55e4d726  0.0s
 => => sha256:5d6f1e8117dbb1c6a57603cb4f321a861a08105a81bcc6b01b0ec2b78c8523a5 7.83MB / 7.83MB             8.9s
 => => sha256:825f3b5230df07ce77d03718c76a8f5bcfec648ebaed637efb5b2b6069f15b9b 2.00kB / 2.00kB             0.0s
 => => sha256:e6c92ed2f03be9788b80944e148783bef8e7d0fa8d9755b62e9f03429e85a327 7.23kB / 7.23kB             0.0s
 => => sha256:004f1eed87df3f75f5e2a1a649fa7edd7f713d1300532fd0909bb39cd48437d7 50.43MB / 50.43MB          89.3s
 => => sha256:1dd0106849233fcd913b7c4608078fa1a53a5e3ce1af2a55e4d726b0d8868e2f 1.86kB / 1.86kB             0.0s
 => => sha256:48c2faf66abec3dce9f54d6722ff592fce6dd4fb58a0d0b72282936c6598a3b3 10.00MB / 10.00MB          20.9s
 => => sha256:234b70d0479d7f16d7ee8d04e4ffdacc57d7d14313faf59d332f18b2e9418743 51.84MB / 51.84MB          69.8s
 => => sha256:6fa07a00e2f029c4b2c7f177a2b696f1b3510040cde4f5bb06ddbca98e7fbf76 192.35MB / 192.35MB       163.8s
 => => sha256:eaa60f1cb67e2445bd02786d2511bc7b95d242b8a0f5d98fe3370c010765938c 199B / 199B                71.6s
 => => sha256:d7754810970922117227aff354e227e640a46528512f4444670dc98dbd248a76 22.89MB / 22.89MB          93.0s
 => => sha256:d9985c49676162d33670600e1f458e2ebe3cf01e53faa4d5c67603bfe4c1d039 175B / 175B                91.3s
 => => extracting sha256:004f1eed87df3f75f5e2a1a649fa7edd7f713d1300532fd0909bb39cd48437d7                  5.1s
 => => extracting sha256:5d6f1e8117dbb1c6a57603cb4f321a861a08105a81bcc6b01b0ec2b78c8523a5                  0.7s
 => => extracting sha256:48c2faf66abec3dce9f54d6722ff592fce6dd4fb58a0d0b72282936c6598a3b3                  0.5s
 => => extracting sha256:234b70d0479d7f16d7ee8d04e4ffdacc57d7d14313faf59d332f18b2e9418743                  5.1s
 => => extracting sha256:6fa07a00e2f029c4b2c7f177a2b696f1b3510040cde4f5bb06ddbca98e7fbf76                 13.6s
 => => extracting sha256:eaa60f1cb67e2445bd02786d2511bc7b95d242b8a0f5d98fe3370c010765938c                  0.0s
 => => extracting sha256:d7754810970922117227aff354e227e640a46528512f4444670dc98dbd248a76                  1.1s
 => => extracting sha256:d9985c49676162d33670600e1f458e2ebe3cf01e53faa4d5c67603bfe4c1d039                  0.0s
 => [internal] load build context                                                                         30.8s
 => => transferring context: 322.62MB                                                                     30.5s
 => [ 2/12] RUN curl -sL https://deb.nodesource.com/setup_12.x | bash -                                   16.5s
 => [ 3/12] RUN apt-get install -y nodejs                                                                 20.3s
 => [ 4/12] COPY ./ /var/www/footomo                                                                      15.5s
 => [ 5/12] WORKDIR /var/www/footomo                                                                       0.0s
 => [ 6/12] COPY Gemfile /var/www/footomo                                                                  0.0s
 => [ 7/12] COPY Gemfile.lock /var/www/footomo                                                             0.0s
 => [ 8/12] RUN apt-get update                                                                             2.7s
 => [ 9/12] RUN apt-get upgrade -y                                                                        29.9s
 => [10/12] RUN gem update bundler                                                                        10.0s
 => [11/12] RUN apt-get install build-essential patch ruby-dev zlib1g-dev liblzma-dev -y                  12.8s
 => [12/12] RUN bundle install                                                                           384.3s
 => exporting to image                                                                                    28.2s
 => => exporting layers                                                                                   28.2s
 => => writing image sha256:088550c3a555a6c9e6e386c751a33b8f754db502a837adc908fc2f30caa467f0               0.0s
 => => naming to docker.io/library/footomo_local-rails                                                     0.0s

Use 'docker scan' to run Snyk tests against images to find vulnerabilities and learn how to fix them
Pulling db (mysql:)...
latest: Pulling from library/mysql
e1acddbe380c: Already exists
bed879327370: Pull complete
03285f80bafd: Pull complete
ccc17412a00a: Pull complete
1f556ecc09d1: Pull complete
adc5528e468d: Pull complete
1afc286d5d53: Pull complete
6c724a59adff: Pull complete
0f2345f8b0a3: Pull complete
c8461a25b23b: Pull complete
3adb49279bed: Pull complete
77f22cd6c363: Pull complete
Digest: sha256:d45561a65aba6edac77be36e0a53f0c1fba67b951cb728348522b671ad63f926
Status: Downloaded newer image for mysql:latest
Creating footomo_db_1 ... done
Creating rails-redis3 ... done
Creating rails-rails3 ... done
Attaching to rails-redis3, footomo_db_1, rails-rails3
db_1           | 2021-09-02 00:02:02+00:00 [Note] [Entrypoint]: Entrypoint script for MySQL Server 8.0.26-1debian10 started.
db_1           | 2021-09-02 00:02:02+00:00 [Note] [Entrypoint]: Switching to dedicated user 'mysql'
db_1           | 2021-09-02 00:02:02+00:00 [Note] [Entrypoint]: Entrypoint script for MySQL Server 8.0.26-1debian10 started.
db_1           | 2021-09-02 00:02:02+00:00 [Note] [Entrypoint]: Initializing database files
db_1           | 2021-09-02T00:02:02.871702Z 0 [System] [MY-013169] [Server] /usr/sbin/mysqld (mysqld 8.0.26) initializing of server in progress as process 41
db_1           | 2021-09-02T00:02:02.883999Z 1 [System] [MY-013576] [InnoDB] InnoDB initialization has started.
db_1           | 2021-09-02T00:02:03.827801Z 1 [System] [MY-013577] [InnoDB] InnoDB initialization has ended.
db_1           | 2021-09-02T00:02:06.036118Z 0 [Warning] [MY-013746] [Server] A deprecated TLS version TLSv1 is enabled for channel mysql_main
db_1           | 2021-09-02T00:02:06.037727Z 0 [Warning] [MY-013746] [Server] A deprecated TLS version TLSv1.1 is enabled for channel mysql_main
db_1           | 2021-09-02T00:02:06.121657Z 6 [Warning] [MY-010453] [Server] root@localhost is created with an empty password ! Please consider switching off the --initialize-insecure option.
rails-redis3   | 1:C 02 Sep 2021 00:02:02.515 # oO0OoO0OoO0Oo Redis is starting oO0OoO0OoO0Oo
rails-redis3   | 1:C 02 Sep 2021 00:02:02.515 # Redis version=6.2.5, bits=64, commit=00000000, modified=0, pid=1, just started
rails-redis3   | 1:C 02 Sep 2021 00:02:02.515 # Warning: no config file specified, using the default config. In order to specify a config file use redis-server /path/to/redis.conf
rails-redis3   | 1:M 02 Sep 2021 00:02:02.517 * monotonic clock: POSIX clock_gettime
rails-redis3   | 1:M 02 Sep 2021 00:02:02.519 * Running mode=standalone, port=6379.
rails-redis3   | 1:M 02 Sep 2021 00:02:02.519 # Server initialized
rails-redis3   | 1:M 02 Sep 2021 00:02:02.522 * Ready to accept connections
db_1           | 2021-09-02 00:02:11+00:00 [Note] [Entrypoint]: Database files initialized
db_1           | 2021-09-02 00:02:11+00:00 [Note] [Entrypoint]: Starting temporary server
db_1           | 2021-09-02T00:02:12.283554Z 0 [System] [MY-010116] [Server] /usr/sbin/mysqld (mysqld 8.0.26) starting as process 88
db_1           | 2021-09-02T00:02:12.352414Z 1 [System] [MY-013576] [InnoDB] InnoDB initialization has started.
db_1           | 2021-09-02T00:02:13.037051Z 1 [System] [MY-013577] [InnoDB] InnoDB initialization has ended.
db_1           | 2021-09-02T00:02:14.235300Z 0 [Warning] [MY-013746] [Server] A deprecated TLS version TLSv1 is enabled for channel mysql_main
db_1           | 2021-09-02T00:02:14.235685Z 0 [Warning] [MY-013746] [Server] A deprecated TLS version TLSv1.1 is enabled for channel mysql_main
db_1           | 2021-09-02T00:02:14.262934Z 0 [Warning] [MY-010068] [Server] CA certificate ca.pem is self signed.
db_1           | 2021-09-02T00:02:14.263501Z 0 [System] [MY-013602] [Server] Channel mysql_main configured to support TLS. Encrypted connections are now supported for this channel.
db_1           | 2021-09-02T00:02:14.287422Z 0 [Warning] [MY-011810] [Server] Insecure configuration for --pid-file: Location '/var/run/mysqld' in the path is accessible to all OS users. Consider choosing a different directory.
db_1           | 2021-09-02T00:02:14.452781Z 0 [System] [MY-011323] [Server] X Plugin ready for connections. Socket: /var/run/mysqld/mysqlx.sock
db_1           | 2021-09-02T00:02:14.455777Z 0 [System] [MY-010931] [Server] /usr/sbin/mysqld: ready for connections. Version: '8.0.26'  socket: '/var/run/mysqld/mysqld.sock'  port: 0  MySQL Community Server - GPL.
db_1           | 2021-09-02 00:02:14+00:00 [Note] [Entrypoint]: Temporary server started.
db_1           | Warning: Unable to load '/usr/share/zoneinfo/iso3166.tab' as time zone. Skipping it.
db_1           | Warning: Unable to load '/usr/share/zoneinfo/leap-seconds.list' as time zone. Skipping it.
db_1           | Warning: Unable to load '/usr/share/zoneinfo/zone.tab' as time zone. Skipping it.
db_1           | Warning: Unable to load '/usr/share/zoneinfo/zone1970.tab' as time zone. Skipping it.
db_1           | 2021-09-02 00:02:30+00:00 [Note] [Entrypoint]: Creating database app_development
db_1           | 2021-09-02 00:02:30+00:00 [Note] [Entrypoint]: Creating user blago18
db_1           | 2021-09-02 00:02:30+00:00 [Note] [Entrypoint]: Giving user blago18 access to schema app_development
db_1           | 
db_1           | 2021-09-02 00:02:30+00:00 [Note] [Entrypoint]: Stopping temporary server
db_1           | 2021-09-02T00:02:30.315175Z 13 [System] [MY-013172] [Server] Received SHUTDOWN from user root. Shutting down mysqld (Version: 8.0.26).
db_1           | 2021-09-02T00:02:31.596520Z 0 [System] [MY-010910] [Server] /usr/sbin/mysqld: Shutdown complete (mysqld 8.0.26)  MySQL Community Server - GPL.
db_1           | 2021-09-02 00:02:32+00:00 [Note] [Entrypoint]: Temporary server stopped
db_1           | 
db_1           | 2021-09-02 00:02:32+00:00 [Note] [Entrypoint]: MySQL init process done. Ready for start up.
db_1           | 
db_1           | 2021-09-02T00:02:32.878134Z 0 [System] [MY-010116] [Server] /usr/sbin/mysqld (mysqld 8.0.26) starting as process 1
db_1           | 2021-09-02T00:02:32.915327Z 1 [System] [MY-013576] [InnoDB] InnoDB initialization has started.
db_1           | 2021-09-02T00:02:33.541924Z 1 [System] [MY-013577] [InnoDB] InnoDB initialization has ended.
db_1           | 2021-09-02T00:02:33.976244Z 0 [Warning] [MY-013746] [Server] A deprecated TLS version TLSv1 is enabled for channel mysql_main
db_1           | 2021-09-02T00:02:33.976594Z 0 [Warning] [MY-013746] [Server] A deprecated TLS version TLSv1.1 is enabled for channel mysql_main
db_1           | 2021-09-02T00:02:33.981981Z 0 [Warning] [MY-010068] [Server] CA certificate ca.pem is self signed.
db_1           | 2021-09-02T00:02:33.982357Z 0 [System] [MY-013602] [Server] Channel mysql_main configured to support TLS. Encrypted connections are now supported for this channel.
db_1           | 2021-09-02T00:02:33.993144Z 0 [Warning] [MY-011810] [Server] Insecure configuration for --pid-file: Location '/var/run/mysqld' in the path is accessible to all OS users. Consider choosing a different directory.
db_1           | 2021-09-02T00:02:34.054678Z 0 [System] [MY-011323] [Server] X Plugin ready for connections. Bind-address: '::' port: 33060, socket: /var/run/mysqld/mysqlx.sock
db_1           | 2021-09-02T00:02:34.054893Z 0 [System] [MY-010931] [Server] /usr/sbin/mysqld: ready for connections. Version: '8.0.26'  socket: '/var/run/mysqld/mysqld.sock'  port: 3306  MySQL Community Server - GPL.
rails-rails3   | => Booting Puma
rails-rails3   | => Rails 6.1.3.2 application starting in development 
rails-rails3   | => Run `bin/rails server --help` for more startup options
rails-rails3   | Puma starting in single mode...
rails-rails3   | * Version 4.3.8 (ruby 2.7.2-p137), codename: Mysterious Traveller
rails-rails3   | * Min threads: 5, max threads: 5
rails-rails3   | * Environment: development
rails-rails3   | * Listening on tcp://0.0.0.0:3000
rails-rails3   | Use Ctrl-C to stop

取り敢えず、ビルドには成功した。引き続き、挙動を確認していく。

Kotaro18 commented 3 years ago

ご確認頂きまして、有難うございます。

引き続き、本題の「カルーセルへの画像表示」、すなわちBootstrapの正常な反映に向けて取り組んでいきます。

まず、以前メンターにご指示頂いた通り、こちらの記事を参考に、javascriptとcssの導入を試みた。 https://getbootstrap.jp/docs/4.3/getting-started/introduction/

application.htmlに、それぞれ以下の通りにコードを挿入した。

Javascript 必要なコードを、の直前に追記する。
CSS 必要なコードを、の内側に、他のStyle Sheetよりも先に追記する。

追記した後のコードは以下の通り。

<!DOCTYPE html>
<html>
  <head>
    <title>Footomo</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <%# # initial-scaleでズーム倍率の初期値を設定する。initial-scale=1にすると拡大や縮小せずに見せる %>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => "reload" %>
    <%= javascript_include_tag "application", "data-turbolinks-track" => "reload" %>
  </head>

  <body>
    <div id="wrapper">
      <%= render 'partial/navbar' if current_user %>

      <% if flash[:notice] %>
        <div class="alert alert-info">
          <%= flash[:notice] %>
        </div>
      <% end %>
      <% if flash[:alert] %>
        <div class="alert alert-danger">
          <%= flash[:alert] %>
        </div>
      <% end %>

      <div class="container">
        <%= render 'partial/carousel' %>
      </div>

      <div class="container">
        <%= yield %>
      </div>

      <%= render 'partial/footer' %>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

上記のapplication.html.erbから、partial/containerを通して、 _container.html.erbを参照している。

この_container.html.erbに、表示したい画像の挿入を試みる。挿入前のデフォルトのコードは以下の通り。

  <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
    <ol class="carousel-indicators">
      <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
      <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
      <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <svg class="bd-placeholder-img" width="100%" height="300px" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/>
        </svg>

        <div class="container">
          <div class="carousel-caption text-start">
            <h1>見出しの例</h1>
            <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
            <p><a class="btn btn-lg btn-primary" href="#" role="button">今すぐサインアップ</a></p>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <svg class="bd-placeholder-img" width="100%" height="300px" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>

        <div class="container">
          <div class="carousel-caption">
            <h1>別の見出しの例</h1>
            <p>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</p>
            <p><a class="btn btn-lg btn-primary" href="#" role="button">もっとみる</a></p>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <svg class="bd-placeholder-img" width="100%" height="300px" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>

        <div class="container">
          <div class="carousel-caption text-end">
            <h1>もう一つの見出しの例</h1>
            <p>しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</p>
            <p><a class="btn btn-lg btn-primary" href="#" role="button">ギャラリーをみる</a></p>
          </div>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">前へ</span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">次へ</span>
    </a>
  </div>

また、現在のカルーセルのcssも記載しておく。

app/assets/stylesheets/layouts/carousel.scss

.carousel-item {
  background-image: url("star.png");  
}

.bd-placeholder-img {
  background-image: image-url("star.png");  
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}

取り急ぎ、現状の整理として上記を記載。引き続き、「カルーセルへの画像表示」を試みる。

masayuki14 commented 3 years ago

上記のapplication.html.erbから、partial/containerを通して、 _container.html.erbを参照している。

この_container.html.erbに、表示したい画像の挿入を試みる。

読み込んでいるのは以下の通り

<%= render 'partial/carousel' %>

ファイル名が違いますが、大丈夫ですか？

masayuki14 commented 3 years ago

画像が出ない、というのは

    <svg class="bd-placeholder-img" width="100%" height="300px" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>

このSVGの部分ですか？

Kotaro18 commented 3 years ago

失礼致しました。 containerではなく、carouselです。ファイル名はcarouselになっています。

また、画像表示につきましては、ご提示頂いたコードはデフォルトのもので、グレーの画像は表示されています。

ここでは、carousel.scssが反映されていないことが、問題ではないかと思います。

この場合、どの辺りを確認して、 Masaさんに共有すれば宜しいでしょうか。宜しくお願い致します。

masayuki14 commented 3 years ago

この_container.html.erbに、表示したい画像の挿入を試みる。挿入前のデフォルトのコードは以下の通り。

しかし、画像は表示されませんでした。今後の取り組みとして、どの辺りを修正していけば良いのでしょうか。 from slack

画像表示を試みた、というのはコードで言うとどの部分でを指していますか？「画像は表示されませんでした」という状態の時、

Railsのログ（docker compose up したときのターミナルへの出力）
ブラウザのWebコンソールの出力でエラーのようなメッセージは出ていますか？

masayuki14 commented 3 years ago

「画像が表示されない」時の状況をコミットして共有してもらえますか？

Kotaro18 commented 3 years ago

ご確認頂き、有難うございます。

承知しました。 railsのログの共有、およびWebコンソールのエラー確認を実施致します。

併せて、svgについても調べてみたいと思います。宜しくお願い致します。

Kotaro18 commented 3 years ago

「画像が表示されない」時の状況をコミットして共有してもらえますか？

まずコードを共有させて頂きたいと思います。

_carousel.html.erb

  <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
    <ol class="carousel-indicators">
      <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
      <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
      <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <svg class="bd-placeholder-img" width="100%" height="300px" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/>
        </svg>

        <div class="container">
          <div class="carousel-caption text-start">
            <h1>見出しの例</h1>
            <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
            <p><a class="btn btn-lg btn-primary" href="#" role="button">今すぐサインアップ</a></p>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <svg class="bd-placeholder-img" width="100%" height="300px" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>

        <div class="container">
          <div class="carousel-caption">
            <h1>別の見出しの例</h1>
            <p>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</p>
            <p><a class="btn btn-lg btn-primary" href="#" role="button">もっとみる</a></p>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <svg class="bd-placeholder-img" width="100%" height="300px" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>

        <div class="container">
          <div class="carousel-caption text-end">
            <h1>もう一つの見出しの例</h1>
            <p>しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</p>
            <p><a class="btn btn-lg btn-primary" href="#" role="button">ギャラリーをみる</a></p>
          </div>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">前へ</span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">次へ</span>
    </a>
  </div>

carousel.scss

.carousel-item {
  background-image: url("star.png");  
}

.bd-placeholder-img {
  background-image: image-url("star.png");  
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}

application.scss

// @import '~bootstrap/scss/bootstrap';
@import "bootstrap";

// @import "layouts/navbar";
@import "./layouts/navbar";
@import "./layouts/carousel";

// @import "common";
@import "../stylesheets/common";

@import "users/devise";
@import "users/show";
// users/show.scssファイルのコードを読み込めるようになる。
@import "users/edit";
// users/edit.scssファイルのコードを読み込めるようになる。
@import "posts";
// posts.scssファイルのコードを読み込めるようになる。

現状、カルーセル自体は表示されている。

しかし、carousel.scssに記述している、 star.pngという画像が反映されていない。

以下に、メンターからご指示頂いた、 railsのログ、及びブラウザのコンソール出力を共有する。

railsのログ

Kotaro18:footomo kotaro18$ docker-compose up --build
Creating network "footomo_default" with the default driver
Building local-rails
[+] Building 416.9s (17/17) FINISHED                                                                            
 => [internal] load build definition from Dockerfile                                                       0.1s
 => => transferring dockerfile: 37B                                                                        0.0s
 => [internal] load .dockerignore                                                                          0.0s
 => => transferring context: 2B                                                                            0.0s
 => [internal] load metadata for docker.io/library/ruby:2.7.2                                              4.1s
 => [ 1/12] FROM docker.io/library/ruby:2.7.2@sha256:1dd0106849233fcd913b7c4608078fa1a53a5e3ce1af2a55e4d7  0.0s
 => [internal] load build context                                                                         10.3s
 => => transferring context: 17.15MB                                                                      10.0s
 => CACHED [ 2/12] RUN curl -sL https://deb.nodesource.com/setup_12.x | bash -                             0.0s
 => CACHED [ 3/12] RUN apt-get install -y nodejs                                                           0.0s
 => [ 4/12] COPY ./ /var/www/footomo                                                                      18.9s
 => [ 5/12] WORKDIR /var/www/footomo                                                                       0.0s
 => [ 6/12] COPY Gemfile /var/www/footomo                                                                  0.0s
 => [ 7/12] COPY Gemfile.lock /var/www/footomo                                                             0.0s
 => [ 8/12] RUN apt-get update                                                                             4.2s
 => [ 9/12] RUN apt-get upgrade -y                                                                        25.2s
 => [10/12] RUN gem update bundler                                                                         7.6s
 => [11/12] RUN apt-get install build-essential patch ruby-dev zlib1g-dev liblzma-dev -y                  10.8s
 => [12/12] RUN bundle install                                                                           291.5s
 => exporting to image                                                                                    43.8s
 => => exporting layers                                                                                   43.7s
 => => writing image sha256:2ddafb94bfecb58fe7c74d90b4ffe58b66130c8eb6abb4e63582a8306bf27bb6               0.0s
 => => naming to docker.io/library/footomo_local-rails                                                     0.0s

Use 'docker scan' to run Snyk tests against images to find vulnerabilities and learn how to fix them
Creating footomo_db_1 ... done
Creating rails-redis3 ... done
Creating rails-rails3 ... done
Attaching to rails-redis3, footomo_db_1, rails-rails3
db_1           | 2021-09-11 10:08:37+00:00 [Note] [Entrypoint]: Entrypoint script for MySQL Server 8.0.26-1debian10 started.
rails-redis3   | 1:C 11 Sep 2021 10:08:37.291 # oO0OoO0OoO0Oo Redis is starting oO0OoO0OoO0Oo
rails-redis3   | 1:C 11 Sep 2021 10:08:37.291 # Redis version=6.2.5, bits=64, commit=00000000, modified=0, pid=1, just started
rails-redis3   | 1:C 11 Sep 2021 10:08:37.291 # Warning: no config file specified, using the default config. In order to specify a config file use redis-server /path/to/redis.conf
rails-redis3   | 1:M 11 Sep 2021 10:08:37.292 * monotonic clock: POSIX clock_gettime
rails-redis3   | 1:M 11 Sep 2021 10:08:37.298 * Running mode=standalone, port=6379.
rails-redis3   | 1:M 11 Sep 2021 10:08:37.298 # Server initialized
rails-redis3   | 1:M 11 Sep 2021 10:08:37.300 * Ready to accept connections
db_1           | 2021-09-11 10:08:37+00:00 [Note] [Entrypoint]: Switching to dedicated user 'mysql'
db_1           | 2021-09-11 10:08:37+00:00 [Note] [Entrypoint]: Entrypoint script for MySQL Server 8.0.26-1debian10 started.
db_1           | 2021-09-11T10:08:38.510788Z 0 [System] [MY-010116] [Server] /usr/sbin/mysqld (mysqld 8.0.26) starting as process 1
db_1           | 2021-09-11T10:08:38.547717Z 1 [System] [MY-013576] [InnoDB] InnoDB initialization has started.
db_1           | 2021-09-11T10:08:39.324335Z 1 [System] [MY-013577] [InnoDB] InnoDB initialization has ended.
db_1           | 2021-09-11T10:08:39.921546Z 0 [Warning] [MY-013746] [Server] A deprecated TLS version TLSv1 is enabled for channel mysql_main
db_1           | 2021-09-11T10:08:39.921927Z 0 [Warning] [MY-013746] [Server] A deprecated TLS version TLSv1.1 is enabled for channel mysql_main
db_1           | 2021-09-11T10:08:39.938524Z 0 [Warning] [MY-010068] [Server] CA certificate ca.pem is self signed.
db_1           | 2021-09-11T10:08:39.938992Z 0 [System] [MY-013602] [Server] Channel mysql_main configured to support TLS. Encrypted connections are now supported for this channel.
db_1           | 2021-09-11T10:08:39.969990Z 0 [Warning] [MY-011810] [Server] Insecure configuration for --pid-file: Location '/var/run/mysqld' in the path is accessible to all OS users. Consider choosing a different directory.
db_1           | 2021-09-11T10:08:40.054291Z 0 [System] [MY-011323] [Server] X Plugin ready for connections. Bind-address: '::' port: 33060, socket: /var/run/mysqld/mysqlx.sock
db_1           | 2021-09-11T10:08:40.055588Z 0 [System] [MY-010931] [Server] /usr/sbin/mysqld: ready for connections. Version: '8.0.26'  socket: '/var/run/mysqld/mysqld.sock'  port: 3306  MySQL Community Server - GPL.
rails-rails3   | => Booting Puma
rails-rails3   | => Rails 6.1.3.2 application starting in development 
rails-rails3   | => Run `bin/rails server --help` for more startup options
rails-rails3   | Puma starting in single mode...
rails-rails3   | * Version 4.3.8 (ruby 2.7.2-p137), codename: Mysterious Traveller
rails-rails3   | * Min threads: 5, max threads: 5
rails-rails3   | * Environment: development
rails-rails3   | * Listening on tcp://0.0.0.0:3000
rails-rails3   | Use Ctrl-C to stop
rails-rails3   | Started GET "/users/sign_in" for 172.19.0.1 at 2021-09-11 10:10:34 +0000
rails-rails3   | Cannot render console from 172.19.0.1! Allowed networks: 127.0.0.0/127.255.255.255, ::1
rails-rails3   |    (16.9ms)  
rails-rails3   |        SELECT
rails-rails3   |                sqlite_version (*)
rails-rails3   |    (3.0ms)  
rails-rails3   |        SELECT
rails-rails3   |                "schema_migrations"."version"
rails-rails3   |        FROM
rails-rails3   |                "schema_migrations"
rails-rails3   |        ORDER BY
rails-rails3   |                "schema_migrations"."version" ASC
rails-rails3   | Processing by Devise::SessionsController#new as HTML
rails-rails3   |   Rendering layout layouts/application.html.erb
rails-rails3   |   Rendering devise/sessions/new.html.erb within layouts/application
rails-rails3   | DEPRECATION WARNING: [Devise] `DeviseHelper#devise_error_messages!` is deprecated and will be
rails-rails3   | removed in the next major version.
rails-rails3   | 
rails-rails3   | Devise now uses a partial under "devise/shared/error_messages" to display
rails-rails3   | error messages by default, and make them easier to customize. Update your
rails-rails3   | views changing calls from:
rails-rails3   | 
rails-rails3   |     <%= devise_error_messages! %>
rails-rails3   | 
rails-rails3   | to:
rails-rails3   | 
rails-rails3   |     <%= render "devise/shared/error_messages", resource: resource %>
rails-rails3   | 
rails-rails3   | To start customizing how errors are displayed, you can copy the partial
rails-rails3   | from devise to your `app/views` folder. Alternatively, you can run
rails-rails3   | `rails g devise:views` which will copy all of them again to your app.
rails-rails3   |  (called from block in _app_views_devise_sessions_new_html_erb__4466859887907362617_23860 at /var/www/footomo/app/views/devise/sessions/new.html.erb:8)
rails-rails3   |   Rendered devise/sessions/new.html.erb within layouts/application (Duration: 109.9ms | Allocations: 1834)
rails-rails3   |   Rendered partial/_carousel.html.erb (Duration: 4.4ms | Allocations: 126)
rails-rails3   |   Rendered partial/_footer.html.erb (Duration: 4.7ms | Allocations: 82)
rails-rails3   |   Rendered layout layouts/application.html.erb (Duration: 5641.0ms | Allocations: 76421)
rails-rails3   | Completed 200 OK in 5936ms (Views: 5769.3ms | ActiveRecord: 10.7ms | Allocations: 120780)
rails-rails3   | 
rails-rails3   |

コンソールElements

コンソールNetwork

現状、エラーの様なものは見られなかった。

共有する箇所が間違っていないか、他に共有するべき箇所がないか、メンターの方に確認する。

masayuki14 commented 3 years ago

しかし、carousel.scssに記述している、 star.pngという画像が反映されていない。

これは、具体的には

.carousel-item {
  background-image: url("star.png");  
}

.bd-placeholder-img {
  background-image: image-url("star.png");  
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

の部分だと認識しています。まず、この認識は同じですか？

masayuki14 commented 3 years ago

　次に確認すべきことは、

このSCSSが正しく読み込まれているか
star.png が正しく読み込まれているか

の2点です。

scssはデベロッパーツールの Source タブで確認できます。 Scssはここで1つのファイルにバンドルされるのでそれを確認します。 application-xxxxxxxx.css というファイル名になっているかと思います。そのファイルから該当のCss Classが既述されているか確認しましょう。

https://github.com/Kotaro18/footomo/blob/7af917f7bce256a2b938343e6aba69104d0e591a/app/views/layouts/application.html.erb#L12

star.png はNetworkタブで確認できます。このタブでは画像やCSS、Javascriptなどの通信の記録が表示されます。 star.png もあるはずです。Statusは200になっていますか？

これらを確認してください。

Kotaro18 commented 2 years ago

上記で提示頂いている部分だと認識しています。

また、ご教示頂いた2点について確認する。

このSCSSが正しく読み込まれているか

Sourceタブ carousel.item

/* line 29, ../../../usr/local/bundle/gems/bootstrap-5.0.1/assets/stylesheets/bootstrap/_carousel.scss */
.carousel-item {
  position: relative;
  display: none;
  float: left;
  width: 100%;
  margin-right: -100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transition: transform 0.6s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  /* line 29, ../../../usr/local/bundle/gems/bootstrap-5.0.1/assets/stylesheets/bootstrap/_carousel.scss */
  .carousel-item {
    transition: none;
  }
}

/* line 39, ../../../usr/local/bundle/gems/bootstrap-5.0.1/assets/stylesheets/bootstrap/_carousel.scss */
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block;
}

/* rtl:begin:ignore */
/* line 46, ../../../usr/local/bundle/gems/bootstrap-5.0.1/assets/stylesheets/bootstrap/_carousel.scss */
.carousel-item-next:not(.carousel-item-start),
.active.carousel-item-end {
  transform: translateX(100%);
}

/* line 51, ../../../usr/local/bundle/gems/bootstrap-5.0.1/assets/stylesheets/bootstrap/_carousel.scss */
.carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start {
  transform: translateX(-100%);
}

star.pngなど、imageについての記述はなさそうです。

.bd-placeholder-img については見つけきれませんでした。恐れ入りますが、検索手段などはありますでしょうか。

star.png が正しく読み込まれているか

star.pngのStatusは200になっていました。

masayuki14 commented 2 years ago

star.pngなど、imageについての記述はなさそうです。

提示していただいているscssのコードを見ると

/* line 29, ../../../usr/local/bundle/gems/bootstrap-5.0.1/assets/stylesheets/bootstrap/_carousel.scss */

とソースファイルについて既述があります。これは、先のコメントで掲載している carousel.scss ファイルとあっていますか？行数も書いてありますが、そのあたりも合っていますか？その上で、

imageについての記述はなさそうです。

という判断ですか？

原因としてはいかが考えられます。

見ているファイルがそもそも違うから既述がない
アセットパイプラインのプリコンパイルが実行されてなくて、反映されていない

どちらの状況でしょうか？

masayuki14 commented 2 years ago

.bd-placeholder-img については見つけきれませんでした。恐れ入りますが、検索手段などはありますでしょうか。

Source たぶでファイルを選んだら Command+F で検索できます。

もしくは下半分にある Console タブと同じ並びにSearch タブがあるので、それも利用できます。ない場合は縦の3点リーダーメニューから追加できます。

Kotaro18 commented 2 years ago

ご確認頂きありがとうございます。ご提示頂いた点について、確認していきたいと思います。

これは、先のコメントで掲載している carousel.scss ファイルとあっていますか？行数も書いてありますが、そのあたりも合っていますか？

ファイルが違うと思います。似てる名前のファイルだからといって、ファイルの場所や行数を確認できていませんでした。

見ているファイルがそもそも違うから既述がないアセットパイプラインのプリコンパイルが実行されてなくて、反映されていない

上記につきましては、まず「見ているファイルがそもそも違う」は、前述の通り、違っていたのだと思います。

次に、「プレコンパイルが実行されていない」については、カルーセル自体はブラウザに表示されているので、違う場所にあるcarousel.scssを含むアセットはコンパイルされているのではないかと思います。

/* line 29, ../../../usr/local/bundle/gems/bootstrap-5.0.1/assets/stylesheets/bootstrap/_carousel.scss */

ここで、2点ご質問したいのですが、

上記の_carousel.scssについては、どこから確認すれば良いでしょうか。初歩的な質問で申し訳ありません。cdコマンドで検索しましたが見つけきれませんでした。
私が作成しているアプリ「Footomo」の方のassetに含まれる、 carousel.scssをブラウザに表示するためには、どこで修正すれば良いのでしょうか。 application.scssでは./layouts/carouselを指定しています。

masayuki14 commented 2 years ago

上記の_carousel.scssについては、どこから確認すれば良いでしょうか。初歩的な質問で申し訳ありません。cdコマンドで検索しましたが見つけきれませんでした。

/* line 29, ../../../usr/local/bundle/gems/bootstrap-5.0.1/assets/stylesheets/bootstrap/_carousel.scss */

このファイルがどこにあるか、ということですか？これはGemの中にあるファイルです。 gemはコンテナにインストールされているので、コンテナ内にあります。コンテナの、 /usr/local/bundle/gems/bootstrap-5.0.1/assets/stylesheets/bootstrap/_carousel.scss にあると思います。

masayuki14 commented 2 years ago

私が作成しているアプリ「Footomo」の方のassetに含まれる、 carousel.scssをブラウザに表示するためには、どこで修正すれば良いのでしょうか。 application.scssでは./layouts/carouselを指定しています。

https://github.com/Kotaro18/footomo/blob/master/app/assets/stylesheets/layouts/carousel.scss

このファイルでよいですか？動かしてみて確認しますので、お時間いただきます。

masayuki14 commented 2 years ago

https://github.com/Kotaro18/footomo/blob/7af917f7bce256a2b938343e6aba69104d0e591a/app/views/layouts/application.html.erb#L12

スクリーンショット_2021-09-20_15_22_59

アセットパイプラインの出力はこちらですね。 Sourceタブでこのファイルの内容を確認できます。

masayuki14 commented 2 years ago

Command +F で検索できます。 carousel-item を検索すると添付画像のようにヒットしますので、カルーセル用に追加したCSSはブラウザに読み込まれています。

スクリーンショット_2021-09-20_15_26_48

masayuki14 commented 2 years ago

ElementタブでCSSクラスで検索すると <div class="carousel-item"> があります。 StylesタブにもCSSクラスが表示されているので、 HTML, CSS ともに問題ありません。

スクリーンショット_2021-09-20_15_30_22

masayuki14 commented 2 years ago

ここで、Stylesタブで表示されているCSSの star.svg を開いてみます。右クリックで Open in new tab を選ぶと開くことができます。ここでエラーがでています。

指定されているSVGファイルに正しくアクセスできていません。

masayuki14 commented 2 years ago

同様に star.png にもアクセスできていません。

こちらはRailsのログにも以下のように出力されています。

rails-rails3   | Started GET "/images/star.png" for 172.19.0.1 at 2021-09-20 06:17:25 +0000
rails-rails3   | Cannot render console from 172.19.0.1! Allowed networks: 127.0.0.0/127.255.255.255, ::1
rails-rails3   |
rails-rails3   | ActionController::RoutingError (No route matches [GET] "/images/star.png"):
rails-rails3   |

Kotaro18 commented 2 years ago

Masaさん、ご確認頂きありがとうございます。

https://github.com/Kotaro18/footomo/blob/master/app/assets/stylesheets/layouts/carousel.scss このファイルでよいですか？動かしてみて確認しますので、お時間いただきます。

はい、そちらのファイルで間違いありません。恐れ入りますが、宜しくお願い致します。

また、私もデベロッパーツールから確認してみましたが、 star.pngを右クリックし、Open New Tabでエラーが出ました。

この機会に、デベロッパーツールについて学習しました。 https://qiita.com/d-dai/items/0b580b26bb1d1622eb46

Elements
- DOM（ドキュメントオブジェクトモデル）の確認、編集 ※（Webページを表すHTMLの様に）文書の構造を表現することで、Webページとプログラミング言語を接続するもの
- DOM要素の変更タイミングにブレイクポイントを設定
- styleの確認、編集
Console
- 任意のJSの実行
- JSエラーの確認
Network
- 通信内容の確認
Sources
- デバッガーの使用　※デバッグ（バグを探して修正する）作業を支援するコンピュータープログラム）
Application
- CookieやWeb Storageの確認、編集

しかしながら、star.pngが表示されない理由はわかりませんでした。これまでご教示頂いた点以外に、調べるべきことはありますでしょうか。宜しくお願い致します。

masayuki14 commented 2 years ago

しかしながら、star.pngが表示されない理由はわかりませんでした。これまでご教示頂いた点以外に、調べるべきことはありますでしょうか。宜しくお願い致します。

逆に、この指定の方法で表示されると思っていたからこうしているわけですよ。それはどのような理解だったのでしょう？現状の理解を教えて下さい。

Kotaro18 commented 2 years ago

Masaさん、ご返信遅くなり申し訳ございません。現状の私の理解につきまして、ご報告します。

今回、特定の画像がカルーセルに表示されない現象が起きています。そこで、デベロッパーツールでの確認の方法を教えて頂いたと思っています。

その中で、その特定の画像の部分で、 Open New Tabを開くとエラーが出ることが判明しました。しかし、私の方でもエラーが画面になるだけで原因が分かりませんでした。

その上で、Masaさんにお尋ねしたかったのは以下の2点です。

上記のエラーの原因はどこを見れば確認できるのか？またはできないのか？
Masaさんのご経験から、この様な画像表示エラーの要因として他に考慮すべきものは何か。

以上でございます。ご質問が抽象的で申し訳ありません。

もしくは、開発にあたり、一度この画像エラーを無視して進めてみるのはいかがでしょうか。宜しくお願い致します。

masayuki14 commented 2 years ago

ブラウザ（http）での画像表示について基本的なことは、

指定したURLに画像ファイルがあれば表示される

ということです。

したがって、エラー云々ではなく

URLの指定してる箇所に画像ファイルを置けば良い
画像ファイルがある場所のURLを指定するのいずれかをすればよいです。

masayuki14 commented 2 years ago

現状でサインインフォームのロゴ画像は正しく表示されているので、まずはそこを確認しましょう。

https://github.com/Kotaro18/footomo/blob/7af917f7bce256a2b938343e6aba69104d0e591a/app/assets/stylesheets/users/devise.scss#L22-L29 https://github.com/Kotaro18/footomo/blob/master/app/assets/images/footomo_logo.png

CSSにファイル名をそのまま指定すれば、 app/assets/images/ の下にあるファイルが表示されています。これと比較します。

https://github.com/Kotaro18/footomo/blob/7af917f7bce256a2b938343e6aba69104d0e591a/app/assets/stylesheets/layouts/carousel.scss#L5-L12

ここでは star.png ファイルをしています。これを表示するには、app/assets/images/ にファイルが有ればよいですが、現状ではありません。 https://github.com/Kotaro18/footomo/tree/master/app/assets/images

https://github.com/Kotaro18/footomo/blob/7af917f7bce256a2b938343e6aba69104d0e591a/app/assets/stylesheets/layouts/carousel.scss#L1-L3

こちらは star.svg がありますが表示されていません。ファイルを確認すると以下のようになります。 https://github.com/Kotaro18/footomo/blob/master/app/assets/images/star.svg

私はVSCodeを使っているのですが、これでファイルを開いても表示できません。

ファイルが壊れていませんか？

Kotaro18 commented 2 years ago

@masayuki14 さんご確認頂きまして、ありがとうございます。

承知しました。取り急ぎ、ファイルが壊れていないか確認致します。ありがとうございます。

Kotaro18 commented 2 years ago

画像が壊れていないか確認しました。

結論から申し上げますと、壊れてはいませんでしたが、私の指定がpngになっていたり、svgになっており、またファイル名も同様に統一されていませんでした。

Pushしましたので、念の為共有いたします。 https://github.com/Kotaro18/footomo/commit/8422d8e0613437e2d3985d98d2fbfa2d928a4a3b

すると、デベロッパーツールからOpen New Tabで画像を開くことができました。

ブラウザ（http）での画像表示について基本的なことは、

指定したURLに画像ファイルがあれば表示される

URLの指定してる箇所に画像ファイルを置けば良い

画像ファイルがある場所のURLを指定する

imagesの中にstar.pngという画像を設置しましたが、やはりカルーセルには画像が表示されません。

masayuki14 commented 2 years ago

画像の設置とURLは正しいので、そのあたりの問題は解決しましたね。

imagesの中にstar.pngという画像を設置しましたが、やはりカルーセルには画像が表示されません。

ということは、CSSの書き方が間違っているのでしょう。正しい書き方は Bootstrap のドキュメントを参照しましょう。 https://getbootstrap.com/docs/4.0/components/carousel/

HTML、CSSの理解が不十分なのかもしれませんが、試行錯誤しましたか？まずCSSではなく、HTMLタグだけでも画像指定はできますし、それを実現してからCSSに移す、という順番でやってみても良いと思います。

Kotaro18 commented 2 years ago

@masayuki14 さんご確認頂き、ありがとうございます。 Masaさんのご教示のおかげで、エラーは解決できました。

引き続き、CSSを自分でいじって試行錯誤してみたいと思います。公式サイトからコピペしただけなので、仰る通り、私の環境設定や他のファイルと噛み合ってないかもしれません。

また改めて経過をご報告致します。宜しくお願い致します。

Kotaro18 commented 2 years ago

@masayuki14 さん

SVGやSVG名前空間宣言について、いまいち理解できていないので、 SVGを使わず、シンプルなhtmlに修正を試みました。

これまでBootstrapの公式サイトからコピペしてましたが、上記の通り、SVGを使わないでカルーセルを作成されている下記のサイトを参考にしました。 https://qiita.com/kibinag0/items/f2cf7aade8170f60badd

_carousel.html.erb

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="2500" data-pause="hover">
  <div class="carousel-inner">
    <div class="carousel-item active" style="background-color: red;">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item"  style="background-color: yellow;">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item"  style="background-color: blue;">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

carousel.scss

.carousel-item {
  background-image: url("star.png");  
  font-size: 15.0rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

// .bd-placeholder-img {
//   background-image: image-url("star.png");  
//   font-size: 1.125rem;
//   text-anchor: middle;
//   -webkit-user-select: none;
//   -moz-user-select: none;
//   user-select: none;
// }

// @media (min-width: 768px) {
//   .bd-placeholder-img-lg {
//     font-size: 3.5rem;
//   }
// }

すると、下記のように画像を表示することができました。

gitも最新に更新しております。 https://github.com/Kotaro18/footomo/commit/b133b77b8e9c7b187eed3551591d817204b39614

Kotaro18 commented 2 years ago

@masayuki14 さん現在、下記サイトを参考に検索機能の実装を試みています。 https://qiita.com/japwork/items/e6ee225970b50ea5d796

しかし、検索箇所が表示されません。

変更したコードは以下の通りです。

application.html.erb: 36行目に<%= render 'searchs/form' %>を追記しました。

<!DOCTYPE html>
<html>
  <head>
    <title>Footomo</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <%# # initial-scaleでズーム倍率の初期値を設定する。initial-scale=1にすると拡大や縮小せずに見せる %>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => "reload" %>
    <%= javascript_include_tag "application", "data-turbolinks-track" => "reload" %>
  </head>

  <body>
    <div id="wrapper">
      <%= render 'partial/navbar' if current_user %>

      <% if flash[:notice] %>
        <div class="alert alert-info">
          <%= flash[:notice] %>
        </div>
      <% end %>
      <% if flash[:alert] %>
        <div class="alert alert-danger">
          <%= flash[:alert] %>
        </div>
      <% end %>

      <div class="container">
        <%= render 'partial/carousel' %>
      </div>

      <div class="container">
        <%= render 'searchs/form' %>
      </div>

      <div class="container">
        <%= yield %>
      </div>

      <%= render 'partial/footer' %>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

_form.html.erb

<% if @user == current_user %>
  <%= form_tag(search_path, method: :get) do %>
    <%= text_field_tag 'content' %>
    <%= select_tag 'model', options_for_select({ "User" => "user", "Post" => "post" }) %>
    <%= select_tag 'method', options_for_select({ "完全一致" => "perfect", "部分一致" => "partial" }) %>
     <%= submit_tag '検索' %>
  <% end %>
<% end %>

search.html.erb

  <% if @model == 'user' %>
    <h3>【Usersモデルの検索結果】検索ワード：<%= @content %></h3>
    <%= render 'users/index', users: @records %>
  <% else @model == 'posts' %>
    <h3>【Postsモデルの検索結果】検索ワード：<%= @content %></h3>
    <%= render 'posts/index', posts: @records %>
  <% end %>

Gitは最新のcodeに更新しております。 https://github.com/Kotaro18/footomo/commit/766b5868e3215f7d20ee10148ed7c1b65a2a45a2

renderしている_form.html.erbのhtml構造に問題があるのか、 modelの構成に問題があるのか、その他の原因なのか判断できておりません。

恐れ入りますが、宜しくお願い致します。