人生RPG

2児のパパで今年30歳の冒険者(サラリーマン)が日々の生活を通して勇者(自由を手に入れた者)を目指すサクセスブログです。

人生RPG

独自ドメインのはてなブログをSSL化!10時間の葛藤と5秒の終焉

SPONSORED LINK

f:id:boukenshaLv1:20180618111206j:image

こんにちは!冒険者Lv.1(@boukenshaLv1)です!!

 

 先日、はてなブログの開発ブログが独自ドメインのはてなブログも「HTTPS」で配信できるようになったと発表しました。

 

この発表に伴い、私のブログ「人生RPG」もSSL化に切り替えることにし、成功したので作業工程やその過程で起きた悩みや問題、考え方などをブログ初心者目線で伝えていこうと思います。

 

 

 SSL化?HTTPS?なにそれおいしいの状態

まずブログ初心者にとってSSL化と言われても分からないし、「HTTP」と「HTTPS」の違いとが全くもって意味不明ですよね。

「S」が付いただけじゃん

 

どういった内容なのか、メリットやデメリットってなんなのか、HTTPSには絶対切り替えないといけないのか?

 

そういった難しそうな疑問がどんどん出てきました。

 

そこで私なりに調べて、私なりに解釈したことを紹介しときます。

 

SSL化(HTTPS)とは?

Secure Sockets Layerの頭文字をとった略語で、

「金融機関のWebサイトの様に、自分のブログ(サイト)のWebページをすべて暗号化することです。

SSL化することにより暗号化されたプロトコルを使用した安全なコンテンツ(記事)であることを示す「HTTPS」が表示されます。

 

 

簡単に説明すると自分のブログ(サイト)のセキュリティが高くなって安全になります。

自分のブログを訪問してくれたユーザーにも安全であることを伝えるためにWebページのアドレスバーに「HTTPS」を表示しると共に「保護された通信」という文字も表示されるようになるということです。(下記画像参照)

f:id:boukenshaLv1:20180618114810p:plain

 

 

 SSL化出来ていないと、現在このように「保護されていません」と表示されます。

f:id:boukenshaLv1:20180618115842p:plain

 

セキュリティが上がるのは安心しますが、Web関係に詳しくない一般の方からみると、この表示はあまり気にならないんじゃないかと思います。

全然そんなとこ見てないっす!

 

この時点では、「別に切り替えなくていいかなぁ~」って感じで考えていました。

 

 

SSL化で見込める効果とは?

更に深堀して詳しく調べた結果次のような効果も見込めることが分かりました。

 

・盗難、パケット改ざんの防止

・Webサイトが本物であることが証明できる

・サイトの信頼性が上がる

・検索エンジンからの評価が上がる

 

なるほどなるほど!自分の城を強化出来るってことね

 

各項目の詳細は割愛させてもらいますが、ブロガーやアフィリエイターなどの運営者にとって検索エンジンの評価(SEO)はかなり重要視している部分ではないでしょうか?

 

ただ注意としてHTTPSは高評価されるとありますが、現時点では「強力なSEO」になるような評価システムは採用していないようです。

 

競っている他のサイトも同レベルだった場合、「HTTPS」の方が評価が上がる程度とグーグルも公表しています。

 

 

SSL化していないとどうなるの?

上記までの説明でもまだSSL化するか迷うと思います。

「気持ちはSSL化したいけど、やり方が複雑そう」

「Webやプログラミングの知識が少ないから、作業中に問題があったら対処しきれる自信が無い」

 

こんな風に思って一歩を踏み出せないでいる方も多いと思います。

 

私もこんな状態でかなりビビっていました。

怖いよー怖いよー!おかーさーーん

 

しかし、ある情報を目にして何が何でもSSL化にしないといけない状況になりました。

 

それは

2018年7月からSSL化していないWebページを開くと警告文が画面に表示される

という内容です。

 

つまりせっかく自分のサイトに来てくれた読者のメディア画面に「保護されてないサイト」と警告が表示され、脅かしてしまう。

その結果、読者は「危ないページ(サイト)」と思い込んで一瞬で離脱してしまう。

 

という状況になってしまう可能性が高くなります。

やっべ!これやっべ!人来なくなるじゃん!!

 

アドレスバーの表示方法やWebページの暗号化などどうでもよかったけど、警告文が表示されてしまうとかなりマイナスイメージになってしまうということで、私もSSL化を急いですることにしました。

 

 

SSL化作業開始

私が作業開始し始めたのが6月16日午前8時から。

とりあえず「作業手順」「作業で起こりうる問題」「問題の対処法」「SSL化を失敗した人の記事」等をまず片っ端から調べました。

 

特に「成功の方法」より「失敗の例」や「失敗の対処法」などを優先的に調べました。

俺みたいな無知には必ずトラブルが発生するって決まってんだよ!

 

ここで新たに分かったことは、「はてなブログで使われているテーマ(テンプレート)によってもSSL化に対応しているのとしていないものがある」

ということです。

 

SSL化にしてもテンプレートが対応していない場合混在コンテンツというエラーが発生してしい、SSLの恩恵を受けれないという状況が発生してしまうというもの。

 

どのテーマがHTTPS化に対応しているのか調査している記事があったのでこちらを参考にしてください。

www.foxism.jp

 

私の利用させてもらっているテーマ「DUDE」は対応していないと結果が出ていました。

これにより私はSSL化実装に色んな悩みが発生して身動きが出来ない状態で10時間試行錯誤しまくるという状況に陥ってしまいました。

 

(結果的には対応してたんですけど、その過程は後述します。)

 

色んな方の情報を見ることでSSL化の手順は理解し、起こりうる問題の対処法も把握できたのですが、テーマが対応してないと思っていたのでこれを機会にテーマの引っ越しをしようとしました。

 

まず上のSSL対応テーマを調べてテーマを決めて実験用のブログを立ち上げてそっちで新テーマに変えてと作業をしていたのですがいままでのカスタマイズデザインが崩れる!コードを変えたりしてちょっとずつ直していくも完全にセッティングできずに断念。

 

この時点で勤務時間(8時間)が過ぎ、一旦帰宅しました。

 

あ、勤務中に作業してました。はい

仕事はちゃんとやることやってます。はい。

 

 

《第2戦目》

子供を寝かしつけて22時から再開しました。

気持ちは「カスタマイズは諦めて、とりあえずSSL化だけでもしよう」というのが強かったです。

 

しかし、まだ今使っているテーマに未練があった私は最後に「本当にこのテーマは対応できていないのか?」というのを自分の目で確認するべく、同じテーマを使っているブログを探しました。

 

すると、数人ですが「独自ドメイン+HTTPS化」のブログがあるじゃないですか!!

 

上記で紹介した対応テーマ表では×でしたが、実際は対応しているみたいです。

 

それが分かったことで「テーマの引っ越し」はしないで大丈夫ということで、SSL化だけに集中できるようになりました。

 

こうなると1日かけて集めた情報が爆発します。

 

SSL化の前の準備作業をし、設定でSSL化ボタンをオン!!

エラーなどの問題なく正常にHTTPSに切り替わりました。

 

10時間の葛藤の末、5秒でSSL化完了というあっけない結末でした。

 

 

 

参考資料

blog.minimal-green.com

こういう系の作業で絶大な信頼をしているミニマルグリーンさんの記事を参考にさせてもらいました。

おかげさまで、エラー一つでず完了しました!ありがとうございます。

 

 

www.mutant-tetsu.com

 

SSL化後の作業も丁寧に説明してくれているので、すごい助かりました。

ありがとうございます。

 

《作業前に読んでおくと参考になる資料はこちら》

 

www.notitle-weblog.com

 

www.foxism.jp

 

この作業を行っていたことでSSL化した直後に起こりうるエラーを回避できたと思います。

ありがとうございました。

 

 

《色んな方の体験談や考えが分かる資料はこちら》

 

happylife-tsubuyaki.hatenablog.com

 

www.cocoro-quest.net

 

www.pojihiguma.com

 

SSL化に対しての考え方や、失敗談、作業内容がとても分かりやすく勇気をもって作業することが出来ました。

ありがとうございました。

 

実際の作業内容・手順

私はSSL化にめっちゃ時間がかかりましたが、まだの方がスムーズに進められるように簡潔に作業手順を説明します。

 

①事前に記事をバックアップ

 まずはデータをバックアップです。

はてなブログの

[ダッシュボード]

  ↓

[設定]

  ↓

[詳細設定]でスクロールして下に行くと『エクスポート』という項目があります。

f:id:boukenshaLv1:20180618143351p:plain

「記事のバックアップと製本サービス」というリンクがあるのでクリックします。

 

「エクスポートしなおす」をクリックし作成日が今日の日付になったことを確認し「ダウンロードする」をクリックして、保存しときましょう。

f:id:boukenshaLv1:20180618144135p:plain

 

②実験用のブログを作っておく

次に新しく実験用のブログを開設しましょう。

無料ユーザーの場合は3個、有料ユーザーの場合は10個開設できます。

 

公開は自分だけに設定することで他の人からは見られません。

 

テーマ(テンプレート)を引っ越したい時、カスタマイズをする時などメインブログで失敗しないように練習用で役に立つので一つ作っておくと後々便利ですよ。

 

 

③自分の使っているテーマがSSL化に対応しているか調べる

先程の記事を参考にするか

はてなドメインのブログがHTTPS化できるようになったので人気テーマの対応状況を再調査 - FOXISM

 

[ダッシュボード]→[デザイン]から「テーマ ストアでテーマを探す」に入り、自分のテーマの紹介ページにいきます。

 

そこでそのテーマを使っているユーザーが紹介されているので何人かのブログに行き、アドレスバーでHTTPS化になっていて「保護された通信」と表示されているかを確認できます。

 

④SSL化の前にHTMLやCSSコードを変更しておく

上記で紹介した記事にやり方は詳しく載っていますので素人の私は割愛しますね。

 

このコード変更をしていたことで、SSL化後のエラーが一つも起こりませんでした。

 

SSL化にした後でも作業はできますが、私はめんどくさがらずに先にしておいた方が楽だと思います。

 

 

⑤SSL化実装

いよいよHTTPSに切り替えます。

切り替えは簡単で[ダッシュボード]→[設定]→[詳細設定]の『HTTPS配信』という項目を有効にするだけです。

f:id:boukenshaLv1:20180618151727p:plain

 これだけで完了です。

 

 

⑥ブログ(サイト)確認

あとはブログ内の各ページ(記事やフォローボタンやシェアボタン)を一つ一つ見て回ってアドレスバーにちゃんと「保護された通信」という表示になっているか確認します。

 

この表示がされていないページがあるとSSLの効果が激減してしまい意味がない状態なので修正してください。

 

修正方法も上記の先人の方たちが説明しているので必ずできます。

 

 

⑦グーグルツールの設定変更

SSL化したらブログのURLも「http~」から「https~」に変更になるのでアナリティクスとサーチコンソールも変更・追加しないといけません。

 

上記で紹介した「MUTANT」さんの記事で作業方法が説明されているので、そちらを参考にしてください。

 

⑧SSL化作業完了

お疲れ様でした!

以上が私が行った作業内容になります。

 

数日経った今もエラーは出ず安全に運営できてます。

 

 

SSL化についてまとめ

ブログって大変ですね!

ただ記事を書くだけではなく、こういった変化にも対応していかないと置いていかれちゃいます。

 

知識がまだ浅い初心者にとっては重労働です。

今回上手くいってよかった!多くの方の情報のおかげです。

本当にありがとうございました。

 

他には変化する予定のものがなさそうなので少しは落ち着いて記事を書けるかなとおもいます。

 

まだHTTPSにしていない方はなるべく今月(2018.6月)中に切り替えておいた方が焦らないで済むかなと思います。

 

自分でするのがどうしても不安な方は「ココナラ」などで依頼するという方法もあります。

お金で解決するなら安全な道もある!

 

ブログ運営での良い経験になりました。

 

これからもSSL化した当ブログ「人生RPG」を宜しくお願いします。