はてなブログのHTTPS化を勢いでやってしまったんだけど
昨日の、はてなブログのHTTPS化に関するこちらのお知らせ。遂に独自ドメインのはてなブログでもHTTPSでの配信が行えるようになったとの事！
本記事では、事前調査もせずに勢いでHTTPS化してしまった本ブログの状況をお伝えします。
あらかじめ申しておきますが、我々のこういったことに関する知識はほぼ皆無でございます。「HTTPよりもHTTPSの方がなんか良いらしい！」くらいの知識です。
HTTPSにはしてみたかった
実際、グーグルアドセンスのマイページには、「最適化案」ということで、このようにHTTPS化が推奨されています。
そういったわけで、なんとなくではありますが「HTTPSの方が良い」という認識でした。
HTTPS化、早速やってしまいました！
HTTPS化は一度してしまうと後戻りが出来ません。
その点が引っ掛かったので、まずはアドセンス申請用に開設していたサブブログで実験してみました。
実験が上手くいったので、そのままの流れで本ブログもやってしまったわけです。
変更に係る作業自体は、はてなブログの「設定」→「詳細設定」→「HTTPS配信」をポチポチと押していけばアッという間に終わります。
HTTPS後のパッと見の変化
まず、HTTPS化直後にブログにアクセスすると、こんなエラー画面が出てアクセスが出来ません。
だいぶ焦りましたが、数分間後にはちゃんとアクセスできるようになりました。特にこれといった対策としての作業はしていません。
続いて、ブログに設置していたアドセンスの広告もしばらくの間、このように空白になっていました。
ただこれも数分後にはちゃんと表示されるようになりました。
これに関してはHTTPS化の影響かもしれませんし、他の要因があるのかもしれません。
加えて、はてなブログのテーマについて、
本ブログははてなテーマストアの「DUDE」を使わせていただいているのですが、これもHTTPS前と後では見た目上の変化は特にありません…よね？
混在コンテンツ？
見た目上はこれといった変化が見られなかったので安心していましたが、
ツイッターを眺めていると、HTTPS化は安易に行わない方が良いとの見解を示す先輩方が多く、その要因として「混在コンテンツ」への対策を挙げられていました。
混在コンテンツとは
最初の HTML が安全な HTTPS 接続で読み込まれ、その他のリソース（画像、動画、スタイルシート、スクリプトなど）が安全ではない HTTP 接続で読み込まれると、混合コンテンツが発生します。 これが混合コンテンツと呼ばれるのは、同じページを表示するために HTTP と HTTPS 両方のコンテンツが読み込まれているためで、最初のリクエストは HTTPS で保護されています。 最新のブラウザでは、この種のコンテンツに関する警告が表示され、このページに安全でないリソースが含まれていることがユーザーに示されます。
引用元：
…ということで我々素人には良く分かりませんが、httpとhttpsが混在コンテンツしているとなんか良くない、ということですね？
はてなブログ側でも混在コンテンツへの対策法が掲載されています。が、ちょっと我々素人が読んでも良く分からない部分が多いです。勉強勉強ですね。
混在コンテンツの確認方法
こちらのはてなブログヘルプページより、混在コンテンツの確認方法が掲載されていましたので、早速本ブログでも確認をしてみました。開発者ツールを使うんですね。
使用ブラウザはchromeなので、「デベロッパーツール」内の「Console」タブよりエラー内容が確認できるとのことで、早速試してみました。
ありましたね。混在コンテンツ。
本ブログの場合、どうやら目次の表示/非表示のHTMLで使われている「jQuery」が原因のようでした。
ものは試しで、HTMLのURLをhttpからhttpsに書き換えてみたところ、一応エラーは表示されなくなりました。
※正しい対処方法なのかどうかは分かりません。
混在コンテンツではないと思うのですが、その他にもこのようなエラーが確認できました
どうやら広告関連のエラーのようなのですが、ググってもヒットしませんでしたので良く分かりません。
先輩方のはてなブログを見てみると結構同じようなエラーを拝見しているので、「まいっか」という感じで今はほうっておくことにしました。
※正しい対処方法とは限りません。
先ほどのこちらのヘルプ内に、「HTTP配信時に混在コンテンツになりうるもの」が色々と掲載されています。
【よくある質問】HTTPS配信時の混在コンテンツ（Mixed Content）対応について - はてなブログ ヘルプ
その中で、テーマや画像の扱いが沢山書かれており、要注意次項となっていると思います。
テーマに関して、
HTTPS有効時の混在コンテンツ対応のため、テーマストアに投稿されたテーマ内の一部URLを書き換えました - はてなブログ開発ブログ
はてなブログユーザーが投稿したテーマの場合、上記のみでは対応が不完全なことがあります。その場合はテーマが修正されるのをお待ちください。公式テーマでは、HTTPSへの対応を完了しています。
とのことで、良く分かりませんがHTTPS化を待つしかないテーマもあるとのことです。
画像に関して、多くは画像を再アップロードすることで解消しますという何とも面倒な回答が掲載されています。
本ブログの場合、画像に関しての混在コンテンツエラーは特に見られませんでした。多分。
ですので、今回本ブログで修正した部分は上記のjqueryの部分のみになります。
大丈夫かな？
一応、本ブログでもchoromeのURL欄に「保護された通信表示」と、「盾マーク非表示」が確認できたので、HTTPS化は大丈夫なのかな…？と思っています。
勢いでやってしまいましたが、情報提供をしていただける諸先輩方には感謝の言葉もございません。
記事数が少なく、カスタム控えめな本ブログですので、何か問題があったとしても軽傷で済めば良いなと願うばかりです。
もう少し勉強して、細かい部分の修正に努めたいと思いました。残りのエラー表示も気になりますし…。
現場からは以上です！
