らいちのヒミツ基地

公然のひみつ基地です

当ブログをHTTPS化した手順

Introduction

こんにちは。阿豆らいち(@AzuLitchi)です。

この度、当ブログ「らいちのヒミツ基地」をHTTPS化したので、ここまでのあらすじと手順、準備しておいたことを解説します。

当ブログ「らいちのヒミツ基地」をHTTPS化しました

HTTPS化までのあらすじ

「2017年10月までにHTTPS化しないとブログが見られなくなっちゃう!」という不安がブロガーの皆様によぎったのは半年ほど前。

azulitchi.hatenablog.jp

ちょっと騒ぎすぎな様相もあったので、私は「よくわからなければ落ち着いて待つように」という意見を記事にしました。

 

はてな公式の対応

2017年9月25日、はてなブログ開発ブログからユーザー向けの記事が発表されました。

はてなブログへの接続をすべてHTTPSにできる機能の実装予定と、利用を検討するユーザー様に準備いただきたいこと - はてなブログ開発ブログ

第二段階:はてなが提供するドメインのブログをHTTPSで配信できるようにします

(中略)2017年11月ごろの実施を予定しており、詳細については実施前に改めてお知らせいたします。

 

そして2018年2月22日についにHTTPS配信提供の開始!

はてなが提供するドメインのブログで、HTTPSで配信できる仕組みの提供を開始しました(追記あり) - はてなブログ開発ブログ

ダッシュボードから設定画面にアクセスしてご確認ください。ご利用いただける場合は、「HTTPS配信が利用いただけます」というメッセージが表示されます。

・・・提供は開始するけど、順次提供なのでしばし待て!とのこと。

 

設定画面をブックマークして毎日チェックする日々…

 

f:id:AzuLitchi:20180313232505j:plain

 

本日2018年3月ごろですが未だに来ねぇ・・・長い2017年11月ごろだなあと思っていたらついに3月13日に!

 

f:id:AzuLitchi:20180313232645j:plain

HTTPS配信の利用可が!

f:id:AzuLitchi:20180314005649j:plain

浮いて待ってた甲斐がありました。はてなブログ開発陣の皆様ありがとうございます。

 

HTTPS化の手順

HTTPS配信に変更するボタンを押しちゃった!

 

f:id:AzuLitchi:20180313232808p:plain

確認ダイアログも出ます。迷わず「OK」!

 

数秒後・・・

f:id:AzuLitchi:20180313232937j:plain

これでHTTPS化完了・・・あっけない。

 

HTTPS化で発生した不具合(デメリット)

はてな公式からの予想される混在コンテンツによる不具合記事はこちら。

【よくある質問】HTTPS配信時の混在コンテンツ(Mixed Content)対応について - はてなブログ ヘルプ

 

あらかじめ予想はしていた通りですが、当ブログでも記事上下に設置していたこちらのはてブボタン

f:id:AzuLitchi:20180313233338j:plain

の、ブックマーク数の取得ができなくなりました。

f:id:AzuLitchi:20180313233410j:plain

仕様上このぐるぐるのままになります。

 これは上記はてな公式記事によると

はてなブックマーク件数取得APIは、現状HTTPでのみご利用いただけます。

とのことで、httpsでの利用ができないからです(2018年3月13日現在)

このAPIがhttpsに対応するまではやはりこれ。

f:id:AzuLitchi:20180313234517j:plain

こないだ自由ネコ (id:gattolibero)先輩がやってた、数字が入る部分に「hatebu」と入れるアイデアをパク・・・採用させて頂きました。

表示が速いSNSシェアボタンを作ってみた(はてなブログのカスタマイズ)+追記 - 自由メモ

 

不具合出たのは上記カスタマイズした部分だけで、2017年7月から開始したこちらのブログでは画像などもすべて混在コンテンツは発生していないようです。

ブクマやスターも問題なく移行できていました。

 

HTTPS化のメリット

アクセス数が増えた?!

なんか今日120%くらいアクセス数多めですけど、半日で変わるわけないので多分気のせい。

 

表示が速くなった!

HTTPS向けサーバがまだ空いてるのかな?まあこれも気のせいかも…はてブ取得のAPI読みに行かなくした分は確実に速くなりましたね。

 

検索しようとしても「保護されてない通信」が出なくなった

f:id:AzuLitchi:20180313235413p:plain

Chromeで記事検索しようとすると出てたこの表示は出なくなりました。めちゃくちゃ気にしてたんですよ!スッキリ!・・・ええ。

 

逆に「保護された通信」が表示されるようになった

f:id:AzuLitchi:20180313235620p:plain

保護されてるって感じがして嬉しいです!

 

HTTPS化してから独自ドメイン設定したらどうなる?

f:id:AzuLitchi:20180314005250j:plain

「ひょっとして、この状態で独自ドメインを設定すれば、はてなブログでも独自ドメインでHTTPS運用できるんじゃね?!」と思って、手持ちのドメインでテスト用ブログに設定して試してみたところ・・・

f:id:AzuLitchi:20180314005312j:plain 

しれっとHTTPに戻りました。

 

HTTPS化で準備しておくことは?

私は特に何も準備せずに更新ボタンを押して問題ありませんでした。このブログの記事へリンクしてくださっている方も特に修正する必要はありません。自動的にhttpsにリダイレクトされます。

 

リンク先がhttpにしか対応してない 

勘違いする方が多いのですが、記事内からリンクしているリンク先がhttpsに対応していなくてもいわゆる「混在コンテンツ」の扱いにはなりません。混在コンテンツとは画像やスクリプト、iframe、外部cssファイルなど、ページを表示させるために読み込んでいる要素がセキュア対応していないことを指します。

 

詳しくは丸投げ

2016年以前からはてなブログを利用している方は修正の準備が必要な箇所があるそうです。詳しくはシロマさんの記事をどうぞ。

www.notitle-weblog.com

記事中の一括置換ツール、とても良くできてるようですね。先述の通り私は使ってませんが

はてなブログ用の一括置換ツールを作りました - NO TITLE

このツールでうっかり「http」→「https」と置換すると、既に「https」だったものが「httpss」に置換されるのでご注意を・・・。

 

テーマのせいでエラー出ることも

使っているテーマによっては検索アイコンが混在コンテンツに引っかかるそうです。

【よくある質問】HTTPS配信時の混在コンテンツ(Mixed Content)対応について - はてなブログ ヘルプ

サイドバーモジュールの「検索」をご利用の方で、デザインテーマによっては虫眼鏡のアイコン画像がHTTPで配信されている場合があります。はてなブログユーザーが投稿したテーマの場合は、テーマが修正されるのをお待ちください。

もしこれで混在コンテンツエラーが出るようなら、テーマそのものを変更することも検討してイイと思います。

 

まとめ

はてなが提供するドメインのブログで設定画面を見て、HTTPS化の開放が来てたら更新ボタン→OKを押すとHTTPS化。不具合出たらその都度修正。

 


 

それではまた…さよならいち!・∀・)ノ