あべろぐぷらす

元SEが半農半Xな暮らしを目指して頑張る様子を福島から発信するブログ

【はてなブログ】SSL対応第3弾!Mixed Content(混在コンテンツ)修正編レポートです!

f:id:abeshi01:20180729184106j:plain

こんにちは、あべし(@honjituno)です。今日はブログのお話です!

 

ブログSSL対応第3弾!Mixed Content(混在コンテンツ)修正編レポートをお届けします!

 

今回は、前回の調査で見つかった混在コンテンツを修正していきました!

 

最初は意味が分かりませんでしたが、クロームの検証で表示されるエラーを解読し、エラー箇所を特定することが出来ましたよ!

 

クローンサイト上でエラーを修正し、無事に混在コンテンツを解消することが出来ました。

 

今回のレポートでは、エラーメッセージをリスト化して、その修正方法を紹介していきます٩( ''ω'' )و!

 

何かエラーは出ているけど、どうやって修正したらいいのかわからないという方!ぜひ最後まで読んでみて下さい!

  

▼SSL化対応の記録はこちら!

 

www.abelog-plus.com

 

www.abelog-plus.com

 

SSL対応第3弾!Mixed Content(混在コンテンツ)修正編レポートです!

前回のレポートでは、クローンサイト作りが完了し、混在コンテンツが存在していることを確認しました。

 

そんなわけで、今回は混在コンテンツを修正していきたいと思います!

 

最初は本当に訳が分からなかったので、まずエラーのリスト化から進めていきました。

 

もちろんオリジナルのブログではなく、テストのクローンサイトで確認していきます!

 

まずはトップページの調査から初めて、個別記事ページへと進んでいきました!

 

混在コンテンツのエラーメッセージ

まず、混在コンテンツって何なの??というお話なのですが、前回のブログでは自分なりに解釈してこんな風に書いていました。

 

SSL対応した後に、このMixed Contentがブログに存在していると、その箇所を修正する必要があります。

 

これは、何がMixしてしまっているのかというと、どうやら『https』と『http』が混在してしまってますよ!ということみたい。違ったらごめんなさい笑。

 

はい。こんな程度の理解です笑。

 

今回はもう少し踏み込んでエラー箇所をチェックしていきます。

 

エラーの確認方法は『右クリック→検証→エラー(右上のバツ印をクリック!)』で表示されます。

 

よく分からなかったので、試しに表示されているエラーをGoogle翻訳にかけてみました。結果がこちら!

 

【エラーメッセージ】

The page at 'https://abelogplus-test.hatenablog.com/' was loaded over HTTPS, but requested an insecure script 'http://bulldra.github.io/commons.js'. This request has been blocked; the content must be served over HTTPS.

 

【エラーの翻訳】

https://abelogplus-test.hatenablog.com/」のページがHTTPS経由で読み込まれましたが、安全でないスクリプト「http://bulldra.github.io/commons.js」が要求されました。このリクエストはブロックされました。 HTTPS経由でコンテンツを配信する必要があります。

 

おそらく、ブログのURLは『https』のページなのに、ブログのどこかにhttpな箇所(今回の場合は「http://bulldra.github.io/commons.js」)があるよ。httpsに修正しろよ!

 

ということかと思います。

 

なんとなく分かったような、分からないような笑。次の作業に進んでいくことにします。

 

トップページのエラー箇所

 

まずはブログのトップページのエラーをチェックしていきました!

 

エラーは、以下の3つでした!3つ目はどうやら混在コンテンツエラーではなさそうですが一応。

 

①Mixed Content: The page at 'https://abelogplus-test.hatenablog.com/' was loaded over HTTPS, but requested an insecure script 'http://bulldra.github.io/commons.js'. This request has been blocked; the content must be served over HTTPS.


②Mixed Content: The page at 'https://abelogplus-test.hatenablog.com/' was loaded over HTTPS, but requested an insecure script 'http://bulldra.github.io/breadcrumb.js'. This request has been blocked; the content must be served over HTTPS.

 

↓これは混在コンテンツではないけど一応
③Uncaught ReferenceError: categoryHierarchyModule is not defined

 

問題になっているのは以下の2つのjsのようです。

 

  1. http://bulldra.github.io/commons.js
  2. http://bulldra.github.io/breadcrumb.js

 

そして①と②について調べてみると、どうやらパンくずリスト関連のコードのようでした。

 

コードがかかれている場所には、『カスタマイズ→フッター』でたどり着きましたよ!

 

個別記事ページのエラー箇所

トップページと同様に個別記事のエラーもチェックしていきました!

 

トップページに表示されている記事を全て確認していったのですが、見事に同じエラーになっていました( ゚Д゚)!!

 

こちらのエラーは、少し多めで以下の4つでした!個別ページは混在コンテンツエラーのみ抜粋します。

 

①Mixed Content: The page at 'https://abelogplus-test.hatenablog.com/entry/2018/07/26/070000' was loaded over HTTPS, but requested an insecure script 'http://b.st-hatena.com/js/bookmark_button.js'. This request has been blocked; the content must be served over HTTPS.(このエラーが2つ!)


②Mixed Content: The page at 'https://abelogplus-test.hatenablog.com/entry/2018/07/26/070000' was loaded over HTTPS, but requested an insecure script 'http://bulldra.github.io/commons.js'. This request has been blocked; the content must be served over HTTPS.

 

③Mixed Content: The page at 'https://abelogplus-test.hatenablog.com/entry/2018/07/26/070000' was loaded over HTTPS, but requested an insecure script 'http://bulldra.github.io/breadcrumb.js'. This request has been blocked; the content must be served over HTTPS.

 

②と③はトップページと同じエラーメッセージでした!ぱんくずリスト関連のものですね!

 

というわけで①で問題になっているjsは以下の通りです。

 

  1. http://b.st-hatena.com/js/bookmark_button.js

 

①ついて調べてみると、どうやらはてブボタン関連のコードのようでした。

 

コードがかかれている場所には、『カスタマイズ→記事→記事上、記事下』でたどり着きましたよ!

  

コードの修正!!

エラーメッセージの確認と、エラーの原因を特定し終えたので、実際に該当のコードを修正していきます。

 

修正方法はこちらのブログ記事を参考にさせて頂きました。

 

blog.minimal-green.com

 

修正方法といっても難しいことはなく、問題となっているコードの『http://』を『https://』に変えていくだけです。

 

具体的には『s』を追加するだけ。

 

エラーの原因となっている箇所はすでに特定済みですので、さっと『s』を追加して作業は完了でした。簡単でした!

 

そして再度エラーの確認をしてみると…

 

トップページ、個別ページの両方から無事にエラーメッセージが消えていました!

 

トップページに関してはなぜか3つすべて消えていましたよ笑!

 

どうして全てのエラーが消えたのかについては、深追いしないことにします(*´▽`*)。 

 

混在コンテンツの修正はこれで完了したようなので、今回の作業はここで終了にします!お疲れ様でした!

 

まとめ

ブログSSL対応第3弾!Mixed Content(混在コンテンツ)修正編をレポートしてみました!

 

クローンサイト上での作業でしたが、オリジナルでも同じ作業をすればいいだけなのです!

 

次回はブログから少し離れて、サーチコンソールやアナリティクスは何かやる必要があるの??というところを調べていこうと思います。

 

まだまだ分からないことだらけですね。第4回レポートへ続きます!それではー!