ハトネコエ Web がくしゅうちょう

プログラミングやサーバー・Web制作、チームマネジメントなど得た技術のまとめ

ブログをMixed Content対応しつつHTTPS化しました 🎉

今年の4月から、はてなブログドメインを使用している全ブログが HTTPS 化に対応しました。
(2月の時点ではまだ段階的に提供開始というステータスだった)

対応したいなと思いつつも、
「Mixed Content 対応のためには記事をひとつずつ保存し直してね、てへぺろ(ノ≧ڡ≦)」
という公式アナウンスだったので、「いや、きついっしょ……」と思い、
はてなブログの方で Mixed Content 対応のためのツールを出してくれるのではと期待していたのですが、
まだまだそんなものは出なさそうな気配でした。

しょうがないので、今日は時間もあったのでがんばって対応することにしました。

ブログの詳細設定 から行ける
エクスポートページ で、記事の一覧をテキストファイルでダウンロードできるので、
http://nekonenene.hatenablog.com」で全文検索したりして、地道にがんばりました。

最後に mcdetect という npm のパッケージを使って、 Mixed Content が残っていないか確認しました。

npm install -g mcdetect

でインストールした後、例えば Mixed Content を含むサンプルページ
https://googlesamples.github.io/web-fundamentals/fundamentals/security/prevent-mixed-content/passive-mixed-content.html を調べてみると、以下のようにWarningsが表示されます。

mcdetect https://googlesamples.github.io/web-fundamentals/fundamentals/security/prevent-mixed-content/passive-mixed-content.html

Checking https://googlesamples.github.io/web-fundamentals/fundamentals/security/prevent-mixed-content/passive-mixed-content.html ...
    Optionally Blockable: http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/puppy.jpg
    Optionally Blockable: http://googlesamples.github.io/web-fundamentals/samples/discovery-and-distribution/avoid-mixed-content/sleep.mp3
    Optionally Blockable: http://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm
    Optionally Blockable: http://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm

Targets checked: 1
Errors (blockable content): 0
Warnings (optionally blockable content): 4

ブログのURL一覧を、先ほどのエクスポートしたテキストファイルの
「BASENAME: 2018/09/09/160814」のように BASENAME: の右側に書かれている部分を用い、
正規表現の置換でいい感じにURLの一覧にします。

で、以下のようなブログURL一覧のjsonファイル blog_urls.json を作って

{
  "targets": [
    "https://nekonenene.hatenablog.com/2018/09/09/184352",
    "https://nekonenene.hatenablog.com/2018/09/09/160814",
    "https://nekonenene.hatenablog.com/2018/09/07/090818",
    "https://nekonenene.hatenablog.com/2018/09/02/215152",
    "https://nekonenene.hatenablog.com/2018/09/02/202115",
〜中略〜
    "https://nekonenene.hatenablog.com/2015/03/30/131915",
    "https://nekonenene.hatenablog.com/2015/03/30/125724",
    "https://nekonenene.hatenablog.com/"
  ]
}

mcdetect で全件チェックしました。

mcdetect --config ~/Documents/backup/blog_urls.json

Checking https://nekonenene.hatenablog.com/2018/09/09/184352 ...
Checking https://nekonenene.hatenablog.com/2018/09/09/160814 ...
Checking https://nekonenene.hatenablog.com/2018/09/07/090818 ...
Checking https://nekonenene.hatenablog.com/2018/09/02/215152 ...
Checking https://nekonenene.hatenablog.com/2018/09/02/202115 ...
〜中略〜
Checking https://nekonenene.hatenablog.com/2015/03/30/131915 ...
Checking https://nekonenene.hatenablog.com/2015/03/30/125724 ...
Checking https://nekonenene.hatenablog.com/ ...

Targets checked: 134
Errors (blockable content): 0
Warnings (optionally blockable content): 0

全件大丈夫そうですね。よかったよかった。

というわけで 今日から HTTPS でお届けいたします。最高ですね!