久しぶりにパソコンと格闘した気がする。
こんばんは、緑色サイ太です。
やらねば、やらねばと思ってたhttps化。
Google Chromeのアップデートで「保護されていません」の警告が出て、そのうち検索結果とかにも影響とか出てくるんだろうなー。と思いつつ、なかなかめんどくさくてやってませんでしたが、ちょっと時間ができたので、重たい腰を上げ、ちゃちゃっとやっちゃいました。
まぁ、過去の「埋め込みリンク」で予定もよりもちょっと時間がかかりましたけど・・・。
しかし、先人の知恵は偉大でした、基本、検索すればわかります。
- https化（SSL化）した時にやったことのリスト
- そのあとの混在コンテンツ（Mixed Content）をチェック、対応した方法
忘れないうちに自分用のメモとして残します。
参考とされる場合は、他のソースも調べた上で自己責任でお願いします。
はてなブログを常時SSL化する
基本的にはてなブログの場合は、「サーバーが対応しているか」とか、「SSLサーバー証明書の取得」の事とか気にする必要はありません。
（僕もあんまり詳しく知りません）
ボタン、ポチっで、https化は完了します。
問題は完了後で、
- Googleアナリティクスやサーチコンソールの再設定
- httpで書かれているソースの修正
- 混在コンテンツ（Mixed Content）のチェック
が必要になってきます。
ちなみにこのブログは、
- はてなプロ、独自ドメイン
- 編集は見たままモード
- 2016年10月頃から開始
- 記事数は100ちょっと程度
というような運用、規模でした。
同じような方は参考になるかもしれません。
準備とhttps化
情報集め
なんの知識もないまま、いきなりやるのは怖いのでまずは、情報集め。
まず、公式のヘルプを読みました。
あとは、先人の知恵をお借り。
こちらをメインに読んで進めさせてもらいました。
バックアップ
まずhttps化する前に、何が起こるかわからないので、念のため、バックアップを取ります。
ダッシュボード > 設定 > 詳細設定 > エクスポート 記事のバックアップと製本サービス
一度、「エクスポートしなおす」をクリックして、最新の状態から「ダウンロードする」をクリック。
記事数が少ないので、ほぼ一瞬で終わりました。
https化
ダッシュボード > 設定 > 詳細設定 > HTTPS配信 HTTPS配信の状況を確認する
「変更する」をクリック。
「一度有効にしたらもう取り消せません」みたいなが表示されるので、「OK」をクリック。
もうこれでブログ自体のhttps化は完了です。
Googleアナリティクスとサーチコンソールの再設定
アナリティクスその１
「管理」をクリック
アカウント、プロパティ、ビューの3つが並んでいる画面の
プロパティの下、「プロパティ設定」をクリック
［デフォルトのURL〕を「http://」から「https://」に変更
ビューの下、「ビューの設定」をクリック
［ウェブサイトのURL〕を「http://」から「https://」に変更
サーチコンソールその１
サーチコンソールへ移動。
「プロパティを追加」をクリックし、https://～から始まるサイトのURLを入力、「追加」をクリック。
所有権の確認画面は、「別の方法」、「HTMLタグ」を選択して「確認」をクリック。
アナリティクスその２
プロパティの下、「プロパティ設定」をクリック。
Search Consoleの下、「Search Consoleを調整」をクリック。
http://～のアドレスが関連付けられてたら、一度削除し、https://～のアドレスを関連付け直して「保存」。
サーチコンソールその２
該当のhttps://～サイトをクリックして、ダッシュボードへ。
「クロール」 > 「サイトマップ」 > 「サイトマップの追加テスト」
「sitemap.xml」と入力して、「送信」をクリック。
httpで書かれているソースの修正
とりあえず記事内を探す前にブログの基本的な部分を探します。
具体的な修正方法は、http://～で始まる箇所をhttps://～に修正します。
また、外部リソース（WebフォントやjQueryなど）は、配信元がHTTPSに対応していれば、http://～で始まるのを、//～といったようなhttps部分を省略した記述も可能です。
僕は下記の7箇所をチェックしました。
- ダッシュボード > 設定 > 詳細設定 > 検索エンジン最適化 headに要素を追加
- ダッシュボード > デザイン > カスタマイズ > ヘッダ > タイトル下
- ダッシュボード > デザイン > カスタマイズ > 記事 > 記事上
- ダッシュボード > デザイン > カスタマイズ > 記事 > 記事下
- ダッシュボード > デザイン > カスタマイズ > サイドバー > URLを設定している箇所
- ダッシュボード > デザイン > カスタマイズ > フッタ
- ダッシュボード > デザイン > カスタマイズ > デザインCSS
また、タイトルの画像はhttpのままになっていると思うので、
ダッシュボード > デザイン > カスタマイズ > ヘッダ > 画像をアップロード
からアップロードし直せば、httpsに修正されます。
このブログはスマートフォン表示をレスポンシブデザインモードに設定してあるため必要ありませんでしたが、スマートフォン独自の設定がある場合は、
ダッシュボード > デザイン > スマートフォン > ヘッダ、記事、フッタ、詳細設定
もチェックした方が良いと思います。
あと、デザイン画面でレイアウトが崩れて表示される場合は、CSSの読み込み箇所等が正しく更新されていないと思うので、テーマを再インストールすれば直ると思います。（僕はそれで直りました！）
ただ、再インストールする前に念のため、CSSのバックアップ等は取るように！
これで基本的な部分はhttps化が完了したはずです。
あとは、個別に記事の中で問題がある箇所を修正していきます。
記事内の修正
まずは該当箇所の洗い出しから。
- img src="http://
- @import url('http://
- <script src="http://
- background:url('http://
- <iframe src="http://
こちらの5項目を検索かけてヒットしたところを修正すれば良いはず。
リンク先がhttps化してなくても大丈夫なので、「a href="http://」のようなものは修正する必要はないです。
検索方法ですが、
ダッシュボード > 記事の管理 > 記事を検索
の部分から検索をかけても見たままモードで編集している人はヒットしません。
なので、ブログのサイドバーに「検索ボックス」を設置してください。
ない場合は、
ダッシュボード > デザイン > カスタマイズ > サイドバー > モジュールを追加
から「検索」を追加してください。
検索をかけた結果、このブログの場合は、
すでにSSL化されたあとだったのか、画像（はてなフォトライフ）で引っかかることもなく、アフィリエイトで使わせてもらっているカエレバ・ヨメレバもSSL対応済み以降に利用していたので、問題なし。
埋め込みリンク（2017年6月より前のもの）だけが引っかかりました。
一括で置き換えしてくれるツールなどもあったみたいですが、そんなに数もなかったので、素直にリンクを貼り直しました。（1時間ぐらい）
これで一応、すべての修正が完了。常時SSL化されたはずです。
混在コンテンツ（Mixed Content）が残っていないかチェック
一応、混在コンテンツが残っていないか確認しました。
僕はChromeを使用しているので、アドレスバーのところの左が鍵マークになっていれば混在コンテンツはなし。
！マークになっていれば、混在あり、ということが確認できます。
もし発見した場合は、どこにhttpが紛れているのか、探します。
Chromeの場合は、ページ内で右クリック → 「検証」をクリック
「Security」から探すと見つけやすと思います。
混在コンテンツ チェックツール
このブログぐらい記事数が少なければ全記事ぽちぽちクリックしてチェックすることも可能ですが、めんどくさい。
自動でチェックしてくれるツールはないかと探したら、ありました。
結構すぐに見つかったのは、こちらの記事
しかしPythonとかjupyterとかよくわからん。。。ぐぬぬ・・・
と思って、さらに探すこと数分。すぐに使えるのがありました！
サイト内200項目までオンラインでチェックしてくれます。
一応、こちらを使ってチェックしました！
あと、僕は使ってないですが、ローカル環境にダウンロードして使用するものもありました。
こちらは500ページまでチェックしてくれるようです。
はてなブログに限って言えば、サイドバーの検索でほぼ間違いなく混在コンテンツはなくなってると思いますが、念のため。
まとめ
なかなかめんどくさいhttps化（SSL化）ですが、いつかやらねばなりません。
で、やってしまったからにはメモを残しておこうかと。
そのうちボスのボス（社長の身内）からブログhttps化して。とか突然言われそうなので。。。
（僕ははてなブログやってない設定だけど、ちょうど良い何でも屋だと思われてる）
割とバーっと突貫的に書いたので、もし間違っていれば教えてください。