[初心者向け]jQueryなどを読み込む時に困った話〜httpとhttpsと省略〜

自分のホームページでjQueryを読み込もうとしたらエラーがでた。

普通にjQueryを読み込もうとしました。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

これだと、ローカルでは普通に動くんですが、サーバーに上げてみるとjQueryが読み込まれていない!コンソールを開いてみたら

Mixed Content: The page at 'https://XXX/index.html' was loaded over HTTPS, 
but requested an insecure script 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js'. 
This request has been blocked; the content must be served over HTTPS.

と怒られてしまいました。
要は何を言っているかというと、「このページは暗号化された安全なhttpsなのにさ、jQueryを外部のhttpのサイトから読み込むの?それはダメ!httpsにしてくれ!」ってことらしいです。

ちょっと調べてみたところ、「http」「https」は省略できるらしい。

「https」を省略したみたけど…

こんなことを防ぐために、こうやって書けるらしいことがわかりました。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

こうすると、そのページを
httpで開いている→jQueryのサイトにhttpでアクセス
httpsで開いている→jQueryのサイトにhttpsでアクセス
という風に自動で割り振ってくれるんです!
これで一件落着と思ったんですが…

省略するとローカルで動かん!!

そうなんです。当たり前ですけどローカルで動かしてる分には「ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js」って何?って話な訳ですから、jQueryが動きません。
しかもhttpsなどの省略はgoogle的には非推奨とのこと。詳しいことはわかりませんが、とにかくローカルで動かないのは不便ですよね。

結論:httpsを使おう

そうです。最初からhttpsを使用すれば全てが丸く収まります。表にしてみるとこんな感じ

ローカル サーバー
http ×
省略 ×
https

なのでgoogleさんも奨励しているhttpsを使っていくことにしました。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.