勢いで「はてなブログ」をSSL配信（HTTPS化）してチェックで地獄を見た話

ブログ

f:id:karaage:20180616015232p:plain:w640

はてなブログのSSL配信（HTTPS化）

　ブログをHTTPSにするとかSSL配信するとかいう話、全然詳しくないですし、アクセス数が減るくらいなら別にどうでも良いかなーと思ってたのですが、酔っ払った勢いで、はてなブログのHTTPS化するボタンを押してしまったのであら大変！

　2006年から12年分、1700以上の記事があって、動画、写真等のあらゆるサービスをブログで使っている自分には地獄でした…というかまだ地獄終わってないです。絶対酔った勢いでやっちゃダメ！

　HTTPS化に関しては、色々な人が詳しい手順書いていますが、自分ほど大変な人もそういない気もするので簡単にメモとして残しておきます。

参考にすべきサイト

　私がめちゃめちゃ参考にしたサイトは以下2つです。この2つをブラウザに穴があくほど読んでおけば大丈夫でしょう。

SSL配信（HTTPS化）のチェック方法

　元々HTTPS化する流れを作ったのはGoogleなので（余計なことしやがって）、GoogleのChromeブラウザでチェックするのが良いと思います。

　Chromeブラウザで、自分のページをチェックして、アドレスの左に以下のように「保護された通信」が表示されればOKです。

f:id:karaage:20180616022547p:plain:w640

　以下のように、丸にiのマークで「保護されていません」と表示されたらGoogle曰く「激ヤバ」らしいです（どうでもいいのに）。

f:id:karaage:20180616015232p:plain:w640

　どこに問題があるか調べる時は、Chromeのデベロッパーツールを使いましょう。Chromeでどこかのページを表示した状態でWindowsだと「F12」キー。Macの場合は「Command＋Option＋Iキー」を押すと、デベロッパーツールが表示されます。

f:id:karaage:20180616022512p:plain:w640
　こんな感じね

　Consoleというタブを開くと、いろいろエラーが表示されますが、そのうち「Mixed Content」というやつがHTTPS化関係のエラーです。しっかり読めばなんとなくどこを直せばよいかわかると思います。

自分が対応した項目

　ここからが私の地獄です。主に対応した内容の一覧です。

ロゴ修正

　トップ画像のロゴ、削除して読み込み直す必要があります。私の場合削除したは良いけど、元画像がどこかにいってしまったのでロゴはHTTPS化の尊い犠牲になりました（誰か新しいロゴ書いて！）。

Feedly

　Feedlyの購読のアイコンもまずいようだったので、以下からリンクを取得し直しました。

デザイン画面のプレビュー表示崩れ対応

　事前にブログ狂のロンスタさんから以下情報得ていたので余裕でした。

　以下のような表示が

f:id:karaage:20180616022523p:plain:w640

　読み直すだけで以下のようになおりました。

f:id:karaage:20180616022534p:plain:w640

　もちろん、テーマがHTTPS化対応してないとダメなので、そこは確認しておきましょう。私が使っている「Innocent」は大丈夫でした。

Twitpic地獄

　なつかしのTwitpicの画像とかブログに貼っていました。潔くあきらめました（いきなり意識低い）

フォト蔵地獄・Flickr地獄

　これも地獄でした。ただ、以下のスクリプトのおかげで、開いて更新するだけに手間が減るので劇的に楽になります。これは絶対つかうべきです、Hi (id:hisway306)さんに感謝！

　スクリプトは自分の環境に合わせて修正しましょう。自分の場合は以下でOKでした。特に @matchの部分はkaraage.hatenadiary.jpのところが、自分のドメインによって変わるので注意しましょう。はてなブログの記事の管理画面のアドレスを参考にしましょう。

/// ==UserScript==
// @name         Modify img tag link to Relative Reference on Hatena Blog Editor
// @namespace    https://karaage.hatenadiary.jp/
// @version      0.1
// @description  To modify http link of img tag to Relative Reference on Hatena Blog Editor
// @author       karaage
// @match        https://blog.hatena.ne.jp/karaage/karaage.hatenadiary.jp/edit*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
  var e = document.getElementById('body');
  var text = document.getElementById('body').value;
  var textA = text.replace(/img src\=\"http\:/g,'img src\=\"');
  e.value = textA;
}) ();

ニコニコ動画（Youtube動画）108個地獄

　ニコニコ動画にハマっていた2010年、何故かニコニコ動画をブログで108個紹介するという暴挙に出ていました。

　これ全部リンク貼り直しでした…自動化しようか迷ったのですが、もう2度と使うこともないので結局マニュアルでやってしまいました。もしタイムマシンがあれば、あのときの自分を全力で止めに行きたいです。

iPhoneアプリ リンク地獄

　iPhoneアプリのリンクとかも地味に面倒くさいです。というか公開終了しているアプリが多いのでリンクを消して記事を修正するの繰り返しでした。流行り物に手を出すとこういうことになります…

Amazonリンク地獄

　はてなブログのAmazon商品紹介のリンクも、記事を開いて保存する必要があります。たまに、開いて保存するだけでダメなときもあります。どうも画像がダメなようなので私は以下のようなAmazonリンクを

[asin:xxxxxx:detail]

　以下のようにして文字リンクに変えました。

[asin:xxxxxx:title]

　こだわる人は、Amazonからリンクを取得しなおすなり、カエレバなどのサービスを使えば良いと思います。

Twitter地獄

　Twitterの埋め込みも、昔のものは貼り直す必要があります…つらい

インスタグラム地獄

　インスタグラムの画像も昔のものは全部リンク貼り直しでした…つらい

はてなフォト・はてなブログカード地獄

　はてなフォト、昔のやつは何故か一度開いて保存しなおさないといけない地獄。なんたること…

　ブログカード（以下みたいなリンクね）。も古いやつは、表示されなかったりするので、開いて保存しなおす必要があります。

まさかのウクレレ記法

　以下の記事が、どうしてもひっかかってしまってよくよく調べたら、まさかのウクレレ記法がひっかかっているという落ちでした。

　しかたないので、以下のように画像化して貼り付けました。

f:id:karaage:20180624205841p:plain:w480

　はてなさん！ウクレレ記法のSSL配信は急務ですよ！

まとめ

　「はてなブログ」のSSL配信（HTTPS化）が地獄でしたという話でした。というか現在進行形で地獄です。これを書いている時点で2014年の4月くらいまでは終わったのですが、2017年の6月頃までは1記事ずつチェックして、開いては閉じるという地道な作業を繰り返す必要があります。

　ただ、自分の場合「もういいかな」という気分になっています。別に全部対応しなくても自分の場合は、大して影響ないだろうと踏んでいます。これだけやっておいてなんですが、SSL配信ってブログの検索順位が1つ上がるかどうかが生活に直結するような人以外には、ほとんど関係ないのじゃないのかなぁと思っています（あくまで個人の想像です）。

　気になる人は、エイヤーとHTTPS化してトップ画面＋αくらいをチェックしておけば良いのじゃないかなくらいに思っています。あと、昔からブログやっている人は、自分の昔の記事と向き合うことになり中々趣深い行為になると思います（笑）

　またそのあたりの昔の記事は、気が向いたら別途紹介したいと思います。

　追記：1ヶ月以上かかって8/15にようやく一通りチェックできました。もう2度とやりたくない（笑）

関連記事