Step By Work

大阪のホームページ制作会社

Jqueryがテストサーバーで動いていたけど、本番環境で動かない場合

Date: 2016.07.06
Update: 2023.05.28

執筆・監修

上杉 洋 Hiroshi Uesugi

1991年生まれ。 株式会社ステップバイワーク代表。 2013年に株式会社n.uを設立。 2015年にStep by workとして独立。 2021年株式会社ステップバイワークとして法人化。 HP制作/SEO対策/コンテンツ制作/動画制作/YouTube運用/写真撮/WordPressを全て一人でやります。

Jqueryが動かないこと、よくあります。
私も先日Jqueryが動かなくて困ったので原因と解決法を備忘録として残します。
解決法は一番下です。

テストサーバーでは動いていたのに本番環境で動かない

状況としてはお客様のWebサイトを製作中、弊社テストサーバーで構築した後、お客様本番サーバーにアップロードしました。
しかし、テストサーバーでは動いていたのに本番サーバーではJqueryが動かない。

ファイルはまるまるコピーなのでパスが間違っていたり、他のJqueryと競合していることが原因だとは考えにくい。

エラーメッセージを見よう

最近のブラウザだと大体エラー状況を見ることができます。
下の画像はChoromeのコンソールです。

5c5e01707323c53aa14836eeaa1925d1-600x336

Jquery is not definedとは?

文字通りJqueryが定義されていませんということです。
このメッセージがでる場合はJqueryのパスが間違っていたりして読み込めていないことが多いです。

その事については1行目にも書いてあります。

Failed to load resource: the server responded with a status of 404 (Not Found)

簡単に言うとJqueryが読み込めませんでした、ということです。

HTTPSサーバーからJqueryを読み込もうとしていることが原因だった

弊社のテストサーバーはHTTPサーバーだったのですが、本番環境はHTTPSでした。
HTTPSの環境からhttp://ajax.googleapis.com/ajax/libs/jquery/◯◯/jqueryを読み込むとHTTPS経由で読み込まれます。

HTTPSというのは本来セキュアな通信なので、セキュアではないHTTPから操作できるようにすると問題が発生するみたいです。

Jquery読み込み部分の先頭「http:」の部分をけして「//ajax.goo~」とすれば無事Jqueryが読み込まれました。

この記事へのコメント 0件

オールインワンで集客できる
格安ホームページ制作会社です!

株式会社ステップバイワークに関する資料をご希望の際は、
以下公式LINEお問い合わせフォームからご連絡ください。