気楽に生きよう!

うつ病、野球、エンタメ 色々喋るよ

はてなhttps化に向けてjqueryの記述方法の書き直し

f:id:nuruta:20170312013233j:plain

はじめに

クロームがhttpページに対して警告表示を出すということで、大変なことになってますね。
これに対応する形で、はてなブログもようやく段階的にhttps化に移行すると発表しました。

staff.hatenablog.com

そこで我々が対応しないといけないのが、混在コンテンツについてです。


<img src="http://...">

@import url('http://...' .....

<script src="http://..." ...>

これらが記載されているとダメということですね。

記事で使われてるか調べるのは簡単です。
リンクも修正する必要はないでしょう。
問題は、デザイン設定でCSSなどを弄ってる場合ですね。

Jqueryの記載方法

なかでも問題となりそうなのが、jqueryを導入しているブログです。
色々なブログを回って、自分のブログをカスタマイズしている人の殆どは、jqueryを導入してるんじゃないでしょうか。

かくいう僕もjquery使ってます。
その記述部分を変えないとダメっぽいです。
例えば、こんな感じの記述在りませんか?

<!--[if lt IE 9]>
<script src="http//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="http//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>
<!--<![endif]-->

このままだと、httpページで動作しても、httpsページでは動作しなくなるようです。

例:<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script>
で記述していた場合、https 通信下では jQuery 本体がブロックされて反映されません。
上記は jQuery ですが、同じ状況かつ記述だと CSS も反映されません。
www.j-cool.co.jp

なので、https環境下でもhttp環境下でも動くように記述を今のうちに変えることをお勧めします。

<!--[if lt IE 9]>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>
<!--<![endif]-->

こんな感じに。
頭のhttpを抜いちゃう。
これでhttpsページでもhttpページ(現在)でも、jqueryが動くようです。

分からん

ところで、外部CSSのインポート(ブログテーマね)が思いっきりhttpなんですが、これは…
問題無いのか、初期段階でブログテーマのcssもhttps環境になるのか。
分からないですね。
誰か詳しい人が記事を挙げるのを待ちましょう。

追記

テーマのインポートも頭のhttpを抜いて記述しても問題無さそうですね。
@import url("//hatenablog.com/theme/8599973812283894169.css");
こんな具合に。