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

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

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

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

0回答

658閲覧

Railsで開発してます。herokuサーバでjQueryのスライドショーが効かない

hoge_nakatani

総合スコア63

Ruby on Rails

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/12/09 01:14

Railsで制作をしてます。
開発環境だと思った通りにjQueryで作ったスライドショーが動いてくれますが、herokuにあげた途端にスライドショーができなくなります。
一体何が原因なのでしょうか?本番環境のみ、下記のようなエラーが出ました。

(index):95 Mixed Content: The page at 'https://herokuname.herokuapp.com/#' was loaded over HTTPS, but requested an insecure stylesheet 'http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css'. This request has been blocked; the content must be served over HTTPS. (index):1 Mixed Content: The page at 'https://herokuname.herokuapp.com/#' was loaded over HTTPS, but requested an insecure script 'http://code.jquery.com/jquery-1.9.1.min.js'. This request has been blocked; the content must be served over HTTPS. (index):1 Mixed Content: The page at 'https://herokuname.herokuapp.com/#' was loaded over HTTPS, but requested an insecure script 'http://code.jquery.com/ui/1.10.3/jquery-ui.min.js'. This request has been blocked; the content must be served over HTTPS. jquery.min.js:5 Uncaught TypeError: b.easing[this.easing] is not a function at init.run (jquery.min.js:5) at u (jquery.min.js:5) at Function.b.fx.timer (jquery.min.js:5) at er (jquery.min.js:5) at HTMLDivElement.a (jquery.min.js:5) at Function.dequeue (jquery.min.js:3) at HTMLDivElement.<anonymous> (jquery.min.js:3) at Function.each (jquery.min.js:3) at init.each (jquery.min.js:3) at init.queue (jquery.min.js:3) (index):1 Mixed Content: The page at 'https://herokuname.herokuapp.com/#' was loaded over HTTPS, but requested an insecure stylesheet 'http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css'. This request has been blocked; the content must be served over HTTPS.

HTMLは以下の通りです

<div class="slideshow"> <div class="slideshow-slides"> <a href="/" class="slide" id="slide-1"><img src="./header-topa.png" alt="" ></a> <a href="/" class="slide" id="slide-2"><img src="./header-topb.png" alt="" ></a> <a href="/" class="slide" id="slide-3"><img src="./header-topa.png" alt="" ></a> <a href="/" class="slide" id="slide-4"><img src="./header-topb.png" alt="" ></a> </div> <div class="slideshow-nav"> <a href="#" class="prev">Prev</a> <a href="#" class="next">Next</a> </div> <div class="slideshow-indicator"></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

CSSは以下の通りです

.slideshow { background-color: rgb(0, 0, 0); height: 500px; overflow: hidden; position: relative; } .slideshow-slides { height: 100%; position: absolute; width: 100%; /* left は JavaScript で指定 */ } .slideshow-slides .slide { height: 100%; overflow: hidden; position: absolute; width: 100%; /* left は JavaScript で指定 */ } .slideshow-slides .slide img { /* left: 67.7%; margin-left: -800px; */ position: absolute; } .slideshow-nav a, .slideshow-indicator a { background-color: rgba(255, 0, 0, 0); /* for IE9 */ overflow: hidden; } .slideshow-nav a:before, .slideshow-indicator a:before { content: url(/sprites2.png); display: inline-block; font-size: 0; line-height: 0; } .slideshow-nav a { position: absolute; top: 50%; left: 50%; width: 72px; height: 72px; margin-top: -36px; } .slideshow-nav a.prev { margin-left: -600px; } .slideshow-nav a.prev:before { margin-top: -20px; } .slideshow-nav a.next { margin-left: 528px; } .slideshow-nav a.next:before { margin-left: -80px; margin-top: -20px; } .slideshow-nav a.disabled { display: none; } .slideshow-indicator { bottom: 30px; height: 16px; left: 0; position: absolute; right: 0; text-align: center; } .slideshow-indicator a { display: inline-block; width: 16px; height: 16px; margin-left: 3px; margin-right: 3px; } .slideshow-indicator a.active { cursor: default; } .slideshow-indicator a:before { margin-left: -110px; } .slideshow-indicator a.active:before { margin-left: -130px; } /* JavsScript 無効時 */ .no-js .slideshow { height: auto; } .no-js .slideshow-slides { height: auto; position: static; } .no-js .slideshow-slides .slide { display: block; height: auto; position: static; } .no-js .slideshow-slides .slide img { margin: auto; position: static; } .no-js .slideshow-nav, .no-js .slideshow-indicator { display: none; } .header-top-img img { width: 100%; } @media screen and (max-width:768px) { .slideshow { height: 250px; overflow: hidden; position: relative; } .slideshow-slides .slide img { width: 100%; height: 100%; } .slideshow-nav a.prev { margin-left: -240px; } .slideshow-nav a.next { margin-left: 168px; } }

jQueryは以下の通りです

$(function () { $('.slideshow').each(function () { var $container = $(this), $slideGroup = $container.find('.slideshow-slides'), $slides = $slideGroup.find('.slide'), $nav = $container.find('.slideshow-nav'), $indicator = $container.find('.slideshow-indicator'), slideCount = $slides.length, // スライドの点数 indicatorHTML = '', // インジケーターのコンテンツ currentIndex = 0, // 現在のスライドのインデックス duration = 500, // 次のスライドへのアニメーションの所要時間 easing = 'easeInOutExpo', // 次のスライドへのアニメーションのイージングの種類 interval = 4500, // 自動で次のスライドに移るまでの時間 timer; // タイマーの入れ物 $slides.each(function (i) { $(this).css({ left: 100 * i + '%' }); indicatorHTML += '<a href="#">' + (i + 1) + '</a>'; }); $indicator.html(indicatorHTML); function goToSlide (index) { $slideGroup.animate({ left: - 100 * index + '%' }, duration, easing); currentIndex = index; updateNav(); } function updateNav () { var $navPrev = $nav.find('.prev'), $navNext = $nav.find('.next'); if (currentIndex === 0) { $navPrev.addClass('disabled'); } else { $navPrev.removeClass('disabled'); } if (currentIndex === slideCount - 1) { $navNext.addClass('disabled'); } else { $navNext.removeClass('disabled'); } $indicator.find('a').removeClass('active') .eq(currentIndex).addClass('active'); } function startTimer () { timer = setInterval(function () { var nextIndex = (currentIndex + 1) % slideCount; goToSlide(nextIndex); }, interval); } function stopTimer () { clearInterval(timer); } $nav.on('click', 'a', function (event) { event.preventDefault(); if ($(this).hasClass('prev')) { goToSlide(currentIndex - 1); } else { goToSlide(currentIndex + 1); } }); $indicator.on('click', 'a', function (event) { event.preventDefault(); if (!$(this).hasClass('active')) { goToSlide($(this).index()); } }); $container.on({ mouseenter: stopTimer, mouseleave: startTimer }); goToSlide(currentIndex); startTimer(); }); }); // ===== フッタースライドショー ===== $(function(){ $('.footer-slideshow').each(function(){ var $slides = $(this).find('img'), slideCount = $slides.length, currentIndex = 0; $slides.eq(currentIndex).fadeIn(); setInterval(showNextSlide, 3500); function showNextSlide(){ var nextIndex = (currentIndex + 1) % slideCount; $slides.eq(currentIndex).fadeOut(); $slides.eq(nextIndex).fadeIn(); currentIndex = nextIndex; } }); });

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問