当はてなブログをHTTPS化したのでそのご報告など。
はてなブログのHTTPS配信（常時SSL化）対応がアナウンスされたのが昨年の9月末のこと。翌月から三段階で順次行われるとの話でしたが、対応は遅れに遅れ、はてなドメイン下（サブドメイン）のブログ全てがHTTP配信可能になったのは先月4月半ばでした。
ちなみに現時点では独自ドメイン運用のブログは、HTTPS配信の対象となっていません（「2018年6月末までの提供開始を予定」とのこと）。
私も昨年のアナウンスからそれとなくHTTP化に向けて、主に混在コンテンツ（Mixed Content）の解消にぼんやりと手を付けていましたが、なにぶん記事数が多いので（現時点で1243本）全ての作業に手が付いてない状態が長く続いておりました…。
- このブログをHTTPS配信に切り替えてみた
- 混在コンテンツの対応について
- 混在コンテンツ解消のために行った作業など
- HTTP配信切り替え後にアドセンス広告が表示されなくなる件
- こんな感じです
- 関連のありそうな記事
このブログをHTTPS配信に切り替えてみた
数日前、ふとこのブログと同じテーマで運用しているサブブログを切り替えてみたところ、「これなら行けそうかな」と感じたので、昨日になって思い切って当ブログ「I AM A DOG」もHTTPS配信に切り替えてみました。
切り替え作業は至って簡単で、ダッシュボードの［設定］→［詳細設定］→［HTTPS配信／HTTPS配信の状況を確認する］から［変更する］を選ぶだけ。ただし、一度HTTPS配信に変更すると元には戻せないので事前の準備は怠りなく。
この後で説明しますが、混在コンテンツのチェックは切り替え前に2015年頃分の記事まで遡って手を付けていたので、昨日半日かけて残りの2012〜2014年分の400本ほどをチェック… といっても基本的には「記事の更新」でした。
まだ全ての記事の配信状況をチェックできた訳ではありませんが、主要な記事の大半は「保護された通信」になっていると思います。
混在コンテンツの対応について
HTTPS化に際しての混在コンテンツ（Mixed Content）の解消については、下の「はてなブログヘルプ」にそれなりに詳しくまとめられています。
それぞれの作業は手動で行うか、スクリプトやツールを自分で作る、または有志の方が公開されてるものを使うといった方法があります。
私のブログの場合、当初そこまで大がかりな作業にはならないと考え（HTTPS切り替え前のFlickrもそこまで多様していなかったので）基本的にあ手動で行いました。
正直かなり面倒臭かった気もしますし、サブブログの方は混在コンテンツ対応はほぼ手付かずな状況ではありますが（過去記事にあまり重視してないブログなので）、喉元過ぎればなんとやらで、このブログに関してはほっとしたというのが正直なところです。
混在コンテンツ解消のために行った作業など
当ブログの混在コンテンツ解消に私が行った作業について、簡単に書き残しておきます。正しい作業については公式のヘルプや詳しいブログを当たっていただくのがいいかと思いますが、WEBに詳しくない素人でもなんとかなったとという報告程度のものです。
公式のヘルプが出る以前に行った作業は、こちらのブログ記事を参考にさせて貰いました。
アフィリエイトのコードを修正
このブログはそれ程アフィリエイト（所謂ASP経由のもの）を貼っていなかったので、上のブログ記事を参考に「検索して当該箇所を置換」の繰り返しで、数十分の作業で終わったかと思います。
Amazonのリンクはほぼ公式のはてな記法（ASIN記法）で貼っていて、一部でカエレバを使っている程度です。2016年以前のカエレバのコードが殆どなかったのが幸いしました。ASIN記法で助かったようで、これはこれで厄介な点については後述します。
Flickr画像のコード修正
写真系のブログを運営している方が一番頭を悩ませていると思われるのが、Flickr経由でブログに貼っている写真の存在。FlickrがHTTPS化されたのは2014頃のようなので、それ以前からFlickrを使っている方はimgタグを修正する必要があります。
これについては、いつもお世話になっているHi（id:hisway306）さんのブログ記事を参考に… というか、記事中で紹介されているスクリプトをそのまま使わせて貰いました。
そもそも私がはてなブログにFlickr画像を貼るようになったのはHi氏の影響が大きいので、フォロワーの技術フォローまで完璧で大変有り難いことです（笑）
どちらにせよ、はてなブログの場合「1記事ごとに更新」という作業が増えるので（次項目参照）、合わせて上記のユーザースクリプトを走らせておくと楽チンです（アフィリエイトのコードが多い人は、同様のスクリプトを作るといいかもしれませんね）。
はてなフォトライフ画像の更新
これは公式のヘルプが出るまで気付いてなかった件。はてなフォトライフにアップした画像がHTTPS化されたのは比較的最近のことで（フォトライフのサービス自体は未だHTTPですし）、恐らく2016年中頃以前のものは以前は全てHTTP配信です。
それ以前の記事でフォトライフの画像を貼り付けている場合は、ひたすら記事の「編集画面を開いて更新」を行う地味な作業が必要になります。
結局はこの作業が最も面倒だった気がしますが、これって技術的にはてな側でまとめて対応できないことなのでしょうかね…？ 何だか腑に落ちない気もします（はてなダイアリー時代からのサブブログもまだあるので、今後対応可能ならぜひお願いしたい）。
ASIN記法で貼ったAmazonの商品画像を確認
これは実際にブログをHTTPS配信に切り替えてから気付いたこと。はてな記法（ASIN記法）で貼っているAmazonの商品画像の中に、AmazonがHTTP配信していた頃の画像が混ざっていることがあります。
シンプルな形のASINコード（Amazon独自の商品コード）だけに検索で探せないのですが、一通りの作業が済んでいるのにブラウザのアドレスバーが「保護された通信」に切り替わってない場合はたいていこれが原因でした。
当該画像はブラウザのデベロッパーツール等で探すか、編集画面のアイキャッチ画像でもHTTPコードのものを目視可能なので、AmazonからASINコードを再取得または既に取り扱いのない商品な場合は消せばOKでしょう。
ブログテーマのHTTPS対応状況を確認
何気にこれは重要。公式テーマ以外のブログデザインを選んでいる場合は、そのテーマがHTTPSしているか、確認しておいた方がよいでしょう。このブログで使っているテーマ「Innocent」は無事対応してくれていたようです。
人気テーマの対応状況はこちらの記事などが参考になるかと思います。
切り替え後にデザイン画面のプレビュー表示が崩れてしまう件
これはテーマに依存したものかは分かりませんが、HTTPS配信に切り替えた直後からダッシュボードのデザイン画面のプレビュー表示が崩れるようになってしました。サブブログもメインブログも同様の状況…。
これについてTwitterで呟いたところ、ろんすた (id:lonestartx) さんから「インストール済みのテーマを読み直す」ことを教えて貰い、試したところめでたく解決しました。
再インストールしたテーマを見ると、CSSの冒頭が変化していたようです。
再インストールの前には必ず現在のCSSをバックアップして行うか、別のブログで試して当該行をコピペしてもいいと思います。
自分も悩んで…CSSかな？って思って直したけどレイアウト崩れたままで…インストールしたテーマから自分が使ってるテーマをもう1回選び直したら直りました。（試すならCSSバックアップしてからやってくださいね） pic.twitter.com/8Hcy3aOIpI
— ろんすた＠変デジ研究所 (@monestar) 2018年5月23日
タイトル、サイドバーの画像も確認
その他、タイトル部分に貼っている背景画像や、サイドバーに貼っているバナー広告の画像なども要確。必要に応じて再アップするなり、コードを再取得しましょう。
私のサブブログもタイトル画像が引っかかってトップページが混在コンテンツとなってしまったので、このブログと合わせて新しいものに入れ替えました。
追記：【混在コンテンツ】ブログカード他、結構見逃しがあったみたい…
後から気付いたのですが、比較的最近の記事（ここ1〜2年のもので、個別記事の更新作業はしてなかった）でも、記事中に貼ったブログカード（はてな記法「:embed」で埋め込んだ記事）が表示されてないケースが結構残っていたようです。
さらに厄介なのはアドレスバーが「保護された通信」に切り替わっているのに、記事中のブログカードが表示されてないケースがあること。
当初は過去の記事を引っ張っていることが原因（カード上のアイキャッチが以前のFotolife経由など）かと疑ったのですが、比較的新しい記事を貼り付けている場合や、よそのはてなブログ記事を貼っている場合にも発生しているのでよく分かりません（笑）
他にも1記事1記事見て行くと結構混在コンテンツのチェック漏れが見つかって、結局はHTTPS配信に切り替え後、デベロッパーツールを開きつつ全記事チェックするのが必要な気がしてきました。
こうなった昨日個別に更新してない2015年から最新記事まで全てチェックしてやろうと思います（笑）→ やりました。さすがに疲れた（苦笑）
HTTP配信切り替え後にアドセンス広告が表示されなくなる件
そうそう、切り替え直後からしばらく、ブログ内に貼ったGoogle AdSense広告のいくつかが表示されなくなる現象が見られました（下のキャプチャーのような状況）。
当初、貼っているAdSenseのコードに問題があるのかと考えましたが（古いコードの場合はその可能性もあるかもしれません？）、どうやら時間と共に解消されていくようです。
切り替えから1日たった今も、古い記事のいくつかではAdSenseが表示されていないものもありますが、主立った記事は全て表示されるようになっているので特に気にしていません。気になる方はご自身で調べるなりした上で、判断してください。
こんな感じです
以上、こうして書き出してみると結構面倒そうですし、実際に諸々の作業全てを換算すると丸1日以上かかってそうな気もしますが、記事数が少なければもっと簡単に済むでしょう。
実際に手を付けてみて思ったのは、事前に混在コンテンツを潰す作業より、切り替え後にブラウザを見ながら潰していく作業の方が、分かりやすかったなと。一度切り替えたらもう放置…という訳にはいきませんし、やるべき作業が明確でスムーズでした。もちろん、オススメできることではありませんけども（笑）
今後、独自ドメイン向けのHTTPS配信が始まれば、効率のいい作業手順などが次々に紹介されていくかと思いますが、何やかんやで先に済ませてしまったことで気が楽になりました。
はてながそれに併せてボタン1つで全ての置換作業を行ってくれる機能などを付けてしまったら、それはちょっと歯ぎしりものではありますが…（笑）
肝心のHTTPS化後の検索アクセスの変化などですが、現時点ではまだなんとも言えません。数週間後、目に見える変化があればまたこの記事にでも追記したいと考えています。
かつて記事に付いたはてなブックマークがそのまま引き継がれているのは、はてな公式の切り替え機能だけに有り難いことですね。
- 作者: JOE AOTO
- 出版社/メーカー: ソーテック社
- 発売日: 2016/07/22
- メディア: 単行本
- この商品を含むブログ (1件) を見る
追記：既にはてなブログをHTTPS化した手順を記事にされてる方のブログ記事です。Googleアナリティクスの設定などご参考にどうぞ（片方しかやってなかった…）。
