独自ドメインを使用したはてなブログでSSL配信がようやく可能になった！

各ブラウザの表示を確認する

　まずはブログトップと最近の記事を確認してみましょう。

　macOS版のFirefoxで見るとこんな感じです。アドレスバーにはグリーンの鍵マークが表示されるとともに、ちゃんとプロトコル表示が”https”になっています。そして表示内容も概ね問題なさそう。アドセンスの広告もちゃんと表示されました。トップページや比較的最近の記事は何もしなくても問題なさそうです。

　ちなみにアドレスバーの鍵マーク付近をクリックすると、こうして小さなダイアログが開き「安全な接続」というお墨付きをさらに確認できます。

　ただし、今やパソコン上のWEBブラウザとしてもシェアが10%しかないというFirefoxだけでは不安なので、他のブラウザでも確認してみましょう。

　まずはシェアNo.1のGoogle Chromeです。アドレスバーには何もしなくても「保護された通信」と緑色の文字で表示されてわかりやすいです。

　さらにmacOS標準のSafariでも確認しました。Safariは表示がシンプルでグレーの鍵マークがアドレスバーに表示されるだけです。このスクリーンショットは、さらにその鍵マークをクリックし、詳細情報を表示させてみた場合です。ちゃんと「接続は暗号化されています」となっています。「証明書を表示」ボタンを押すと、認証局の情報などが確認できます。

　なお「はてなブログ」の独自ドメインは、フリーの認証局であるLet’s Encryptを使用しているそうです。

　あと、Safariと言えば今はmacOS版よりもiOS版のほうがシェア的にはメジャーではないかと思います。一応iPhone/iPadでも確認してみました。モバイル版では詳細情報を確認できませんが、ちゃんと鍵マークが出てるので大丈夫なはず。

　その他Android版のChromeとかWindows標準のIEまたはEdgeなどもありますが、ここまで問題がなかったので省略しました。

混在コンテンツがありブロックされる場合

　さて、基本的な部分とここ1年くらいに公開した最近の記事は大丈夫そうなことが分かりましたが、問題はそれ以前の過去記事です。遡れば遡るほど、混在コンテンツによる問題が残っているページが見つかります。まず一つ目のケースは、一部コンテンツがブロックされて表示されなくなるケースです。

　Firefoxの場合、緑の鍵マークは出ているのでSSLは有効になっているようなのですが、クリックして詳細を表示させてみると「一部のコンテンツをブロックした」と表示される場合です。これが所謂「混在コンテンツ問題」で起こる典型的な現象と思われます。

　具体的に記事表示がどうなるかというと、この例では真ん中辺りにぽっかりと不自然に改行したかのような空白が空いています。ここには本来過去記事へのリンクがブログカード形式で挿入してあるはずでした。

　この場合は、単に一度編集画面を開いて何もせずに「更新」するだけで修正できます。そうすると「はてな記法」から実際に配信されるHTMLコードへの再変換が行われるようです。このブログカードのhttps化は比較的最近まで行われていなかったようで、少なくとも2016年中の記事はダメなものがほとんどでした。

　古い記事に挿入したさらに古い記事のブログカードは、当然HTTP表記のURLでかかれていますが、url自体は修正することなくそのままにしておいても、とにかく「再更新」さえしてしまえば動作上問題ありません。

　つまりこういうことです。私のブログの場合は、独自ドメインを取る前のはてなドメインURLでかつhttpプロトコル指定の内部リンクがほとんどです。それでも表示およびリンクとしての機能は問題なく、はてなのサーバー側で良きに計らってくれます。

　もちろん気持ち悪いという場合は、HTTPSに書き換えた方が良いですが、その分手間になります。

混在コンテンツがありSSLが機能しない場合

　もう一つのケースは、2014年3月以前、FlickrがSSL化される前に取得した埋め込みコードで画像が貼られている場合です。この件は上に貼った前回記事で詳しく書きましたので、そちらもご参照ください。

　この場合どうなるかというと、こんな感じで写真自体は問題なく表示されていますが、アドレスバーを見ると非SSLになってしまいます。このように古いimgタグがhttpプロトコルで画像ファイルを読み込んでる場合、写真自体がブロックされるのではなくSSLが有効にならないという動作をします。FirefoxだけでなくChromeも同じでした。

　この場合の対処方法は前回記事で書いたとおり、事前準備として作成しておいたTampermonkeyによるユーザースクリプトが役立ちます。

　この記事も編集画面を開き、ユーザースクリプトによって自動的に対象のタグを書き換えたのち、再度更新すればこの通り写真も表示されて、SSLも有効化されます。私は”http”を”https”に書き換えるのではなく、Relative Referenceに書き換えるようにしています。

　修正の結果、記事内容の見た目には変化がありませんが、アドレスバーはちゃんと緑の鍵マークが表示されるようになりました。めでたしめでたし。

混在コンテンツの場所を確認する方法

　さて、記事内のどこに混在コンテンツの問題があるのか確認するには、Gppgle Chromeの「検証」モードを使うのが一番わかりやすいのではないかと思います。Console部にエラーやワーニングが表示されますが、混在コンテンツものその中で確認できます。

　例えばこんな感じです。この例だとWarningになっているのがAmazonの商品紹介リンク。どうやらhttpから商品画像を読み込んでいるようです。さらに赤字でError表示されているのは、どうやらhttpで作成された古いブログカードのようです。

　こうして、いくつか問題のあるページを確認して直していれば、直すべき傾向とポイントは分かってくるので、いちいち全ての記事をこうやって確認する必要はなく、記事を見れば要修正点が分かるようになってきます。そしてごく希にどうしても混在コンテンツが解消できない謎の記事が現れた場合に、確認手段として使えると思います。

はてなブックマーク数取得コードの変更

　しかしまず最初は、はてなブックマークのカウント数を取得するAPIです。これまで使用していたAPIはhttpのみで、httpsは使えずそのままでは混在コンテンツになってしまう状態でした。公式にはブックマーク数取得APIはhttps対応しないとのことだったので、ブックマーク数表示を削除するしかないと思っていたのですが、どうやらhttps化できる方法があったようです。

　具体的には、はてなブックマーク数を取得するscript内で呼び出されていた以下のurlを…

http://api.b.st-hatena.com/entry.count?callback=?

　↓こっちに書き換えるだけです。

https://b.hatena.ne.jp/entry.count?callback=?

　はてなブックマークは使ってないし、ほとんどブックマークはつかないので特に必要はないんですけどね… (A^^;

FlickrExのSSL対応

　あともう一つ問題あったのが、Flickrから貼った写真のExif情報を自動的に写真の下に表示する、FlickrExというスクリプトです。

　これは外部サイトからスクリプトファイルを読み込んでいたのですが、その読み込み元のサイトはSSL対応しておらず、そのままでは動作しなくなります。

　これは無かったことにするには非常に惜しい機能で、どうするか悩んだのですが、結局のところスクリプトファイルの中身をそのまま記事ページのヘッダに書くという力業で対処しています。こうすれば外部スクリプトではなく、このブログ内で完結するので問題なく動作するようになっています。

　その結果この通り、HTTPS化したあともFlickrにアップした写真の下には、撮影データが表示されるようになっています。