たねやつの木

Photos and Programming

たねやつの木をHTTPS化(常時SSL化)する。

どうもたねやつです。こんな時間にリアルタイム更新です。

ついにこの時がやってきました。 見かけ上たった一つの's'を取得するためになぜこれだけめんどくさいのでしょうか(笑)

参考にした記事

偶然にも新しく使用しているテーマの作者の方が独自ドメインにおけるSSL化の手順について詳しく解説されているので、それをも参考にして進めていきます。

かなり面倒な作業になっていきますが、これから記事が増えていけばさらにめんどくささは増えていく一方なので見切りをつけてここらでSSL化しておきます。モダンなブラウザだと警告が常に表示されますし、エンジニアの端くれとしてもこれを放置するわけにはいきませんね(笑)

作業

バックアップの作成

設定 > 詳細設定 > エクスポートのリンクをクリック。以前にバックアップ用のファイルを作成している場合は、作成日時に前回の日付が表示されます。このまま[ダウンロードする]ボタンを押しても、最新の状態のブログのバックアップファイルを取得できないので、[エクスポートしなおす]を押して再作成しましょう。記事の多さにもよりますが、10秒ほどで作成されます。

txt形式なので、そこまでファイルサイズは大きくならないですね。何なら定期的にバックアップを作成しておいてgit管理でもしておけばいつか役に立ちそうです。。( 一一)

記事内のリンクのhttps化

画像の埋め込み

一番大変な作業です。記事の中に埋め込んでいるリンクをhttps化していきます。参考記事の方ははてなフォトライフの埋め込みを修正するのが大変であったとのことですが、幸いにもこのブログにはひとつも存在していなかったです!

理由としては早々にMarkdown形式へ移行したためと思います。見たまま記法やHTML記法で作成している場合、HTMLタグが直に埋め込まれるためこのような問題が発生するのだと思います。

Markdown記法とはてな記法の場合は。[f:id:ibuquicallig:20180821231008g:plain]というようなタグが生成されるため、記事内に直接URLの記載はされなくなります。

Flickrの埋め込みスクリプト内のものも、(自分の確認できる限り)2017年以降のものはHTTPS化されているようです。実際はもっと昔からそうなっているのかもしれません。

その他全リンク

記事内に埋め込んでいるリンクをすべてHTTPS化していきます。自分のブログ内へのリンクを結構張っていたりするのでこれは結構大変です。

記事の管理 > 検索からhttp://と入力して対象となるものをすべて変更していきます。 リンク先がHTTPS化されていない場合はそのまま残しておかないと、リンク切れとなってしまいますので確認しつつ修正していきましょう。

アマゾンへの短縮リンク(http://amzn.to/2wL7Fr6みたいな)は、そのままsを追加するだけで大丈夫です。

<a href="...">内のhttpリンクはそのままでも大丈夫なようです。

自分のブログへのリンクは、この段階でhttpsに変更してしまっても問題ありません。リンクの変更 → https化の間にアクセスされたとしても、httpのほうへ飛ぶようにはてなブログで放っているのでリンク切れにはならないです! ここで引っかかる大半は私の場合はブログカード形式([https://example.com:embed]みたいな)で埋め込んでいるものでした。気のせいかもしれませんが最近ブログカード形式で埋め込んだものがうまくカード形式にならず、 そのままアンカーリンクとして表示されてしまうことが多々あるのですが、はてなブログの不具合ですかね?

CSSなどの部分

CSSで読み込んでいるURLやスクリプト内で読み込んでいるソースなどもすべて変更します。基本CDN配信しているようなコンテンツはすべて大丈夫だと思いますが。。。

ボタン押下

可能な限り置換・排除が完了したらいよいよHTTPS化します。設定 > 詳細設定 > HTTPS配信 > HTTPS配信の状況を確認するのリンク先の[変更する]ボタンを押します。

一度有効にしてしまうと、あとには戻れなくなります!

問題発生?

無事に成功して、自分のブログにすぐにアクセスしてみるとNot Secureの文字が!!!

慌てすぎてスクショを撮るのを忘れてF5連打ですよ。ええ。リロードするとすぐに解消しましたが心臓に悪い。。。おそらく証明書がうまいこと取得できていなかったのでしょう。

Search Consoleとサイトマップの更新

これでブログ内部の修正は完了しているのですが、Googleのクローリングがよりうまいこと行くように、新しくなったURLで再度登録してあげましょう。

以下の記事を参考に進めました。効果が出てくるのは後程となりますので気長に待ちましょう。しばらくの間はOrganic Searchからの閲覧者が減少しそうですね。

最後に

この記事を書きながら約1時間半ほどで、大半はリンクの修正となってしまいました。これからもこのブログを大きくしていくつもりなので、「思い立ったらすぐ行動!」でこの暇な三連休に実施しました(笑)

テスト環境を作ってまったく同じ手順で本番化するのが鉄則なのですが、なかなかそうもいかないこの感じで進めるのはヒヤヒヤしますね( 一一)