JSモジュール：leafletの地図表示がローカル(http)では上手くいくけどデプロイ時(https)になると非表示になるエラー解決法

今回の解決策はJSモジュール全般の同じ症状に効く可能性があります。

症状

JavaScriptはたまにしかいじらないのでノウハウ少なめの私ですが、今回はジオコーディングがやりたくなり、OpenStreetMapを表示してピンとかも簡単に実装できるLeaflet.jsというJSモジュールを使ってwebページを作り、ローカルではちゃんと動いているのを確認。

なお今回のキモにあたるCDNの設定部分はこう

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> #←ポイント
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> #←ポイント
<div id="map" style="width: 600px; height: 400px"></div>
<script>
・
・
・
(マップ操作)
・
・
・
</script>

これでデプロイして本番環境で運用開始・・・アレッ・・・地図が表示されない・・・

解決編

JavaScriptの場合のデバッグのためのエラーログはブラウザのconsoleに表示される事が多いためチェックすると・・・ありましたね、

http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css'. This request has been blocked; the content must be served over HTTPS.

ブロックされている・・・　httpsが問題・・・またapacheいじるのか　嫌だなァ・・・と思ってとりあえずググる。

ドンピシャの解説を見つけた^^v Apacheいじらなくて良さそうラッキー gis.stackexchange.com

この解説によると、https環境の場合は指定するCDNの配布元の参照アドレスをhttps版にしないといけない。もしくはソースコード全部ダウンロードしてきて参照できるようにしとくか・・・ということで、https版のCDN配布元のURLを確認して切り替えてみる。なお、配布元は、グーグル、マイクロソフト、と、このcdnjsという組織でやっているというアドバイスでした・・・ CDNはまあ他にも色々ありそうだね・・・ cdnjs.com
OK!じゃあ早速参照先を変更しよう。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.css" /> #変えた
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.js"></script> #変えた
<div id="map" style="width: 600px; height: 400px"></div>
<script>
・
・
・
(マップ操作)
・
・
・
</script>

デプロイすると・・・おお！無事https環境でも表示された！と、いうことでCDNとhttpsの関係性がちょっとわかった瞬間でした。