- Introduction
- 当ブログ「らいちのヒミツ基地」をHTTPS化しました
Introduction
こんにちは。阿豆らいち（@AzuLitchi）です。
この度、当ブログ「らいちのヒミツ基地」をHTTPS化したので、ここまでのあらすじと手順、準備しておいたことを解説します。当ブログははてなブログが提供するドメインで独自ドメインではありません。
当ブログ「らいちのヒミツ基地」をHTTPS化しました
HTTPS化までのあらすじ
「2017年10月までにHTTPS化しないとブログが見られなくなっちゃう！」という不安がブロガーの皆様によぎったのは半年ほど前。
ちょっと騒ぎすぎな様相もあったので、私は「よくわからなければ落ち着いて待つように」という意見を記事にしました。
はてな公式の対応
2017年9月25日、はてなブログ開発ブログからユーザー向けの記事が発表されました。
はてなブログへの接続をすべてHTTPSにできる機能の実装予定と、利用を検討するユーザー様に準備いただきたいこと - はてなブログ開発ブログ
第二段階：はてなが提供するドメインのブログをHTTPSで配信できるようにします
（中略）2017年11月ごろの実施を予定しており、詳細については実施前に改めてお知らせいたします。
そして2018年2月22日についにHTTPS配信提供の開始！
はてなが提供するドメインのブログで、HTTPSで配信できる仕組みの提供を開始しました（追記あり） - はてなブログ開発ブログ
ダッシュボードから設定画面にアクセスしてご確認ください。ご利用いただける場合は、「HTTPS配信が利用いただけます」というメッセージが表示されます。
・・・提供は開始するけど、順次提供なのでしばし待て！とのこと。
設定画面をブックマークして毎日チェックする日々…
本日2018年3月ごろですが未だに来ねぇ・・・長い2017年11月ごろだなあと思っていたらついに3月13日に！
HTTPS配信の利用可が！
浮いて待ってた甲斐がありました。はてなブログ開発陣の皆様ありがとうございます。
HTTPS化の手順
HTTPS配信に変更するボタンを押しちゃった！
確認ダイアログも出ます。迷わず「OK」！
数秒後・・・
これでHTTPS化完了・・・あっけない。
追記：Googleアナリティクスの設定は二箇所
Googleアナリティクスを利用している方は下記二箇所のURLをhttp→httpsに変更しておいた方が良さそうです。
プロパティ＞プロパティ設定＞デフォルトのURL
ビュー＞ビュー設定＞ウェブサイトのURL
SearchConsoleの方は新しくプロパティ作り直さないとhttpsとして表示されないようです。httpのものと確認キーは同じだったのであまり関係無さそうな気もしますが、気になるなら対応した方が良いでしょう。
HTTPS化で発生した不具合（デメリット）
はてな公式からの予想される混在コンテンツによる不具合記事はこちら。
【よくある質問】HTTPS配信時の混在コンテンツ（Mixed Content）対応について - はてなブログ ヘルプ
あらかじめ予想はしていた通りですが、当ブログでも記事上下に設置していたこちらのはてブボタン
の、ブックマーク数の取得ができなくなりました。
仕様上このぐるぐるのままになります。
はてなブックマーク件数取得APIは、現状HTTPでのみご利用いただけます。
とのことで、httpsでの利用ができないからです（2018年3月13日現在）
追記：はてブ数取得の裏技がありました
参考にしたエントリ：
はてなブックマークAPIをSSLなサイトに使う | ぴんくいろにっき
おそらくはてブボタンで混在コンテンツになるカスタマイズにはほぼ必ず下記のコードが含まれていると思います。
http://api.b.st-hatena.com/entry.count?callback=?
上記コードを下記に書き換えるだけでhttps化完了、はてブ数取得できます。
https://b.hatena.ne.jp/entry.count?callback=?
はてなブックマークエントリー情報取得API - Hatena Developer Center
こっちの「https://b.hatena.ne.jp」はhttps化されてるんですなどうやら。はてなブログにはアイコンといい、こういう公式で紹介されていない裏技が多い…。
不具合出たのは上記カスタマイズした部分だけで、2017年7月から開始したこちらのブログでは画像などもすべて混在コンテンツは発生していないようです。
ブコメやスターは維持される？
ブクマやスターも問題なく移行できていました。ただしブクマからTwitterへのリンクが切れるようで、HTTP化前のブコメからは全てTwitterリンクボタンが消えます。
HTTPS化のメリット
検索しようとしても「保護されてない通信」が出なくなった
Chromeで記事検索しようとすると出てたこの表示は出なくなりました。めちゃくちゃ気にしてたんですよ！スッキリ！・・・ええ。
逆に「保護された通信」が表示されるようになった
保護されてるって感じがして嬉しいです！
HTTPS化してから独自ドメイン設定したらどうなる？
「ひょっとして、この状態で独自ドメインを設定すれば、はてなブログでも独自ドメインでHTTPS運用できるんじゃね？！」と思って、手持ちのドメインでテスト用ブログに設定して試してみたところ・・・
しれっとHTTPに戻りました。
HTTPS化で準備しておくことは？
私は特に何も準備せずに更新ボタンを押して問題ありませんでした。このブログの記事へリンクしてくださっている方も特に修正する必要はありません。自動的にhttpsにリダイレクトされます。
リンク先がhttpにしか対応してなくても混在コンテンツにはならない
勘違いする方が多いのですが、記事内からリンクしているリンク先がhttpsに対応していなくてもいわゆる「混在コンテンツ」の扱いにはなりません。混在コンテンツとは画像やスクリプト、iframe、外部cssファイルなど、ページを表示させるために読み込んでいる要素がセキュア対応していないことを指します。
HTTPで参照されているコンテンツを一括でHTTPSに置換する方法（2018/05/13追記）
Upgrade Insecure Requestsをheaderのmetaタグで指定する方法が公式に追記されていました。
この方法
- HTTPのみで配信されているコンテンツは表示されなくなる
- 一部ブラウザには未対応
といった問題点もありますが、これで解決できることも多いようです。
HTTPで参照されている画像を一括でHTTPSに置換する方法（2018/05/13追記）
表示が遅くなるのであまりオススメできませんが、こんなjQueryを記事上などに記載する方法でも対応できるようです。
<script>
$(function () {$('img').each(function(){
var url = $(this).attr('src');
if (url) {if (url.match(/^http:\/\//)) {$(this).attr('href', url.replace(/^http/, 'https'));}}
});
});
</script>
その他詳しくは丸投げ（2018/05/13追記）
混在コンテンツの見つけ方など詳しく書かれています。
いつもお世話になっております。
2016年以前からはてなブログを利用している方は修正の準備が必要な箇所があるそうです。詳しくはシロマさんの記事をどうぞ。
記事中の一括置換ツール、とても良くできてるようですね。先述の通り私は使ってませんが。
はてなブログ用の一括置換ツールを作りました - NO TITLE
このツールでうっかり「http」→「https」と置換すると、既に「https」だったものが「httpss」に置換されるのでご注意を。
テーマのせいでエラー出ることも
使っているテーマによっては検索アイコンが混在コンテンツに引っかかるそうです。
【よくある質問】HTTPS配信時の混在コンテンツ（Mixed Content）対応について - はてなブログ ヘルプ
サイドバーモジュールの「検索」をご利用の方で、デザインテーマによっては虫眼鏡のアイコン画像がHTTPで配信されている場合があります。はてなブログユーザーが投稿したテーマの場合は、テーマが修正されるのをお待ちください。
https化でデザインが崩れた場合も、テーマの再インストールで直ることがあるようです。その際はcssのバックアップを忘れずに。
まとめ
はてなが提供するドメインのブログで設定画面を見て、HTTPS化の開放が来てたら更新ボタン→OKを押すとHTTPS化。不具合出たらその都度修正。
それではまた…さよならいち！・∀・)ノ
