お久しぶりブリーフ。このところ~~ゲーム・オブ・スローンズが楽しくて~~仕事が忙しくて更新が滞っておりましたが、ようやく手が空いてきたのでブログをHTTPS化してみたでござるの巻。

はてなブログのHTTPS化については、昨年9月位から情報が流れていた。 staff.hatenablog.com
実際に一部のサイトでHTTPS化できるようになったのが先月のこと。 staff.hatenablog.com
自分のブログもHTTPSが有効化できるようになったので、さっそくHTTPSにしようと思ったのだが…

HTTPSのページを閲覧するときに、ページ内にHTTPの画像やJavaScriptがある場合は、混在コンテンツ（Mixed Content）と該当箇所をWebブラウザがブロックするため、表示されません。

これは別にはてなブログに限った話ではなく、HTTPSで配信するWebサイト全般の話だ。解決策としてはページ内で読み込まれているリソース（画像やJavaScriptやCSS）のURLをHTTPSに変更するだけである（勿論、配信側がHTTPSに対応している必要がある）。誤解しがちであるが、リンク先のURLは混在コンテンツではないのでそのままで問題ない。
この件はそれなりに問い合わせがあるようなので公式でもいくつかの対応方法がまとめられている。 help.hatenablog.com

ひとつひとつは単純な作業であっても記事が多い場合は気が遠くなる作業であり、前からやらなければいけないと思いつつも中々手を付ける気にならなかったのだ。ところが、実際にやってみたらそこまで大変な作業ではなかったので、今回HTTPS化した時の手順を以下にまとめた。

不要な記事の削除

HTTPS化前の本ブログの総記事数は347。過去1年間の記事ごとのPV数をGoogle Analyticsで調べてみたところ、当該期間の総PV数の

約95%は上位200記事で占められていた。

せっかく頑張って書いたにもかかわらず見られていないのはなんとも寂しい限りであるが、情報自体古いものも多く、HTTPS化したところで誰も見ない可能性が高いのでこれを機会に削除することにしたのだが、150近くの記事を手作業で消すのは流石に面倒である。
幸いにもGoogle AnalyticsにはAPIが用意されており、はてなブログもAtomPubで操作できるのでPythonでスクリプトを書いてPVベースの記事一覧を作成、そのデータを基に要らない記事をピックアップして一括削除した。

混在コンテンツの修正

混在コンテンツの修正は、単純に考えればURLを"http://"形式で提供されたURLから"https://"で公開されているURLに変換するだけなので、スクリプトで自動化できるのでは当初は思っていたのだが、「はてな記法」で編集した記事はAtomPubで取得する内容もはてな記法となるのではてな記法が展開された後のHTMLタグに含まれるURLはスクリプトでは置換できない。また、自動置換したところで最終的に目視での確認は必要となるので（記事数を絞ったこともあり）気合で手動で実施した。

サイトのHTTPS有効後に、混在コンテンツの記事をブラウザ(Chrome)で表示するとURL欄の右端に以下のマークが表示される。
f:id:osa030:20180313175650p:plain

マウスカーソルをマークに合わせると以下のメッセージが表示され、混在コンテンツであることがわかる。 f:id:osa030:20180313182843p:plain

具体的にどの部分が混在コンテンツなのかは、Chromeのコンソールを見るとわかる。後は、URLに該当するコンテンツの内容を修正すればよい。今回、当ブログで実際に修正した部分は以下の3種類のみであった。

ヘッダー画像

これは上記の公式FAQにもあるが、過去にアップロードした画像はURLが"http://"なので、再度アップロードし直す必要がある。但し、これはサイト全体設定なので最大2回で完了（PCとモバイル）。

Amazon製品紹介

記事内にはてなブログの「Amazon製品紹介」で挿入したAmazonアフィリンクは古いものだと"http://"で埋め込まれている。一度削除して張り直すと"https://"になる(もしかしたら貼り直さなくてもページを更新保存するだけでもよかったのかもしれない)。なお、感覚的には2015年前半以前の記事を修正した記憶で最近の記事は修正しなかったのである時期から"https://"で埋め込まれているようだ。

過去記事貼り付け(embed)

2017年7月頃以降はブログパーツ側で対応しているようでリンクが"http://"のままでも混在コンテンツの警告はでないのだが、それ以前のものは展開後のHTML内にリンクURL以外の"http://"が含まれているので混在コンテンツとなってしまう。気づくのが遅かったのでリンクURLをわざわざ"https://"に変更して保存していたが、これもAmazon製品紹介同様に記事更新するだけで良かった可能性が1000％。