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

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

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

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

jQuery

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

HTML

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

Q&A

解決済

1回答

3718閲覧

jQuery 一部本番環境で動作しない

raven

総合スコア6

JavaScript

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

jQuery

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

HTML

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

0グッド

0クリップ

投稿2020/06/19 05:13

##問題と状況
ECサイトのランディングページで、同じデザインのページで複数モール運営しています。
なぜか、一つのモールで本番環境にアップロードすると一部動作しません。

jQuery 3.4.1で、動かないのが、Slick.jsスライダー1.8.0です。

ローカル環境では動作しており、Chromeのデベロッパーツールでエラーは一つも出ていません。
jQueryでajax loadも使用していますが、こちらは問題なく動作しています。
他のモールの本番環境でも問題なく動作していますが、一つのモールのみ動作しませんでした。
モールのテクニカルサポートでは、特にjavascriptに対しての制限はなく、技術的なサポートは出来ないということで、問い合わせの旅に熟読したマニュアルPDFを送ってきます。

複数モール間で一番大きな違いは、この問題の本番環境では、絶対パス指定が出来ません。
モールのドメインすら含むとエラーとなります。全て相対パス。
javascriptライブラリを、外部のcdnから持ってくる場合のみ//から始まるドメイン指定は通ります。

テクニカルサポートでは、多くも問題はパス指定が正しくないということですが、サーバからエラーが返ってきていない上、ajax loadで呼んだjsも操作していることから、パス間違えが原因とは考えにくいと思っています。

slickは、このモールの他の店舗もつかっており、動作していたのでいくつかの店舗さんのソースも参考にさせていただきましたが、なぜか動作しません。

ご助言よろしくお願いします。

index.html

HTML

1<!DOCTYPE html> 2<html> 3<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#"> 4<meta charset="utf-8"> 5 6<!--viewport--> 7<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 8 9<link rel="apple-touch-icon" sizes="180x180" href="icon.png"> 10<title>ページのタイトル</title> 11 12<link rel="stylesheet" href="./css/reset.css"> 13<link rel="stylesheet" href="./css/style.css"> 14 15<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 16 17<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.min.js"></script> 18 19</head> 20 21<body> 22 23<main> 24 25<div class="slide"></div> 26 <script> 27 $(function(){ 28 $(".slide").load("./demo/slide_dm.html .inner", function (){ 29 $.getScript("./js/cal_slide_dm.js"); 30 }); 31 }) 32 </script> 33 34</main> 35 36</body> 37</html>

slide_dm.html ajax loadされる外部ファイルです。

HTML

1<div class="LPS-inner"> 2 <!--ローディング待機--> 3 <div class="loader-wrap"> 4 <div class="loader">Loading...</div> 5 </div> 6 7 <div class="slide_dm"> 8 9 <div class="topslider"> 10 <div class="bannerlist" class="slicik-slide"> 11 12 <div class="main1"> 13 <a href="#" target="_parent"> 14 <img src="img/img1.jpg" alt="画像1" class="pc"> 15 <img src="img/img1_sp" alt="画像1" class="sp"> 16 </a> 17 </div> 18 19 <div class="main2"> 20 <a href="#" target="_parent"> 21 <img src="img/img2.jpg" alt="画像2" class="pc"> 22 <img src="img/img2_sp.jpg" alt="画像2" class="sp"> 23 </a> 24 </div>

cal_slide_dm.js ajaxで読み先で動かしたいスクリプト

JS

1/*ローディング*/ 2$(function(){ 3 var loader = $('.loader-wrap'); 4 5 //ページの読み込みが完了したらアニメーションを非表示 6 $(window).on('load',function(){ 7 loader.fadeOut(); 8 }); 9 10 //ページの読み込みが完了してなくても3秒後にアニメーションを非表示にする 11 setTimeout(function(){ 12 loader.fadeOut(); 13 },3000); 14}); 15 16/*スケジュール 必ず、対象の要素の後にスクリプトを入れる*/ 17var startday = []; 18var endday = []; 19 20startday[1] = new Date('');/**/ 21endday[1] = new Date('2020/05/05 23:59'); 22 23startday[2] = new Date('');/**/ 24endday[2] = new Date(''); 25 26startday[3] = new Date('');/**/ 27endday[3] = new Date(''); 28 29startday[4] = new Date('');/**/ 30endday[4] = new Date(''); 31 32startday[5] = new Date('');/**/ 33endday[5] = new Date('2020/05/05 23:59'); 34 35var today = new Date(); 36 37for (i = 1; i <= 5; i++) { 38if (startday[i] > today || today > endday[i]) { 39 $('.main' + i).remove(); 40 } 41} 42 43/*slickオプション*/ 44$(document).ready(function () {  45 $('.bannerlist').slick({  46 accessibility: true, 47 autoplay: true, 48 adaptiveHeight: true, 49 arrows: true, 50 dots: true, 51 centerMode: true, 52 centerPadding: '10%', 53 responsive: [ 54 { 55 breakpoint: 768, //767px以下のサイズに適用 56 settings: { 57 slidesToShow:1, 58 centerMode: true, 59 centerPadding: '20px', 60 } 61 } 62 ] 63 }); 64}); 65

###jsの内容
ローディング待機で、開始前終了後のキャンペーンバナーが見えないようにローディングされるまで要素を隠す部分です。これは問題なく動きました。

スケジュールは、バナーの表示期間設定。
こちらも、終了したバナーの要素はちゃんと消えました。

slickオプション ローカルのライブプレビューでは問題なく動いていますが、本番環境にアップすると、動作しません。
このオプション以前にslick.min.jsが動作しているのかというところです。

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

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

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

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

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

yuki84web

2020/06/19 05:19

ブラウザの開発者ツールの、コンソールやネットワークのタブで何かエラーが出ていたら、それも記載をお願いします。
raven

2020/06/19 06:25 編集

ローカル環境でも、本番環境でも、コンソールとネットワークのタブには何もエラーは出ていませんでした。
yuki84web

2020/06/19 06:31

「このオプション以前にslick.min.jsが動作しているのか」については、ブラウザのデバッガでブレークポイントを付けて読み込んでみると分かりませんか
raven

2020/06/19 08:46

ブレークポイントの使い方がいまいちわかりませんでした。 ローカル環境では、 <div class="bannerlist" class="slicik-slide"> この部分の class="slicik-slide" がなくなり、 class="slicik-slide eventlist slick-initialized slick-slider slick-dotted"に変わっていて、 スクロールするたびに、要素内で transformのパラメータが動いていますが、 本番環境になると <div class="bannerlist" class="slicik-slide"> class="bannerlist"  がなくなり、class="slicik-slide"だけになって 要素内でなにも動いていない状態でした。
yuki84web

2020/06/19 08:54

スライド部分にクラスの付与が無いということは実行されていない、しかしコンソールにエラーに何もないということであれば、jsがロードされていないと推測出来ますが、開発者ツールのネットワークタブでslick.min.jsのリクエストのHTTPステータスはどうなっていますか?
raven

2020/06/19 09:17

200が出ています。
yuki84web

2020/06/20 01:43

200というこては読み込みは出来ていると思うので実行されないのが不明ですが、CDNではなくサーバー内に設置して利用してみてはどうでしょうか。
raven

2020/06/20 02:30

サーバーに設置も試してみましたが結果は同じでした
yuki84web

2020/06/20 02:36

あとは、サーバーのログ(関係なさそうだけどWAFがあるならそれも)見るとかくらいですかね。お力に慣れず、すみません。
raven

2020/06/22 01:20

ありがとうございました。 時間を置いて本番環境のページをみたら正常に動いていました。 原因は何かわかっていませんが、クラス要素を見直して不要なdiv要素を削減してみました。 それでもローカルでは動いていたというのは不可解ですが、 slicik-slideのクラス名が間違いで、正しくはslick-slideでした。 CDNからで問題なく動いています。 お手数おかけしました。
guest

回答1

0

自己解決

時間を置いて本番環境のページをみたら正常に動いていました。
原因は何かわかっていませんが、クラス要素を見直して不要なdiv要素を削減してみました。
それでもローカルでは動いていたというのは不可解ですが、
slicik-slideのクラス名が間違いで、正しくはslick-slideでした。

投稿2020/06/22 01:21

raven

総合スコア6

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問