メモってないと忘れそうなので、備忘録がてら、どんな対応をしたか書いておきます。
利用させていただいてるボタンカスタマイズ
PC版の方はHTTPS化に伴いすべてを一新しました。CSSがゴチャゴチャして良く分からなくなったからです。
新しいデザインにはシロマ (id:shiromatakumi) さんのBrooklynを使わせていただきました。シェアボタンも、下記の記事の物をコピペして使わせていただいてます。
スマホの方はゆきひー (id:ftmaccho) さんのカスタマイズをコピペさせてもらってます。
はてなブックマークAPIをHTTPSでも使えるように
上記の記事からコピペしただけだと、HTTPS環境でははてブ数を取得できません。
ただ、はてブAPI自体は結構前からSSL対応しているらしく、ちょっとコードを書き換えるだけで、はてブカウントを使えるようになります。
具体的な手順としては、下記URLの置き換えです。
url:'http://api.b.st-hatena.com/entry.count?callback=?'
上のURLの、entry以前のところを変更します。
url:'https://b.hatena.ne.jp/entry.count?callback=?'
これではてブ数は取得できます、が…スマホ表示の方はmixed contentになっちゃいました。
jQueryのHTTPS対応
スマホの方はjQueryを使っていて、これが悪さしてそうでした。(よく分かっていない)
http://から始まるところを、http, httpsのどちらも記載しないことで、どちらでも動くようになると、どこかで見かけました。
こういうことですね。
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.min.js"></script>
これでjQueryも解決です。しかし、まだまだmixed contentです。
LINEシェアボタンの画像URL
よくよくコードを覗いてみると、LINEのシェアボタンは画像を読み込んでいることが分かりました。で、その画像がhttp://から始まるURLだったわけです。
そんなわけで、先ほどのように先頭の記載を省いてみます。
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/f/ftmaccho/20150905/20150905143148.png" width="18px" height="18px" alt="LINEで送る" />
これでようやく、mixed contentが解消しました。
記事書いてる途中にmixed content扱いになってるけど…
いま編集中のこの記事、mixed content扱いになってます。何でですかね…
公開しているページは、大体の物が「保護された通信」になっているんですが、編集中の記事は別なんでしょうか。けど、他の記事は編集に入っても「保護された通信」ですし。うーん。
ま、ともかくシェアボタンのmixed content扱いは解消でき、普通にシェアボタンが使えるようになりました。(という、認識です。)
シェアボタンもデザイン面も、SSL配信にすることで色々と崩れてリカバリーに工数取られちゃいました。やらなくてもよかったんじゃないかなと後悔もしてますが、一先ず平穏な状態に戻せてひと安心です。
