ガジェレポ！@gadgerepoです。こんにちわ。
先日、こんな記事を書きまして。
2018年中には対応されるであろう『はてなブログにおける独自ドメインのHTTPS化』ですが、“ユーザーが独自に対処するべし” となっている混在コンテンツの解消について筆者は、
「700以上の過去記事を最初から一記事一記事チェック＆更新、1日10記事を目標に2〜3ヶ月で完了させる！」
と言っていました。が……
ガンバったら三日で終わりました。
参考になるかどうか分かりませんが、自身への備忘録も兼ねて『混在コンテンツのチェック＆解消方法』をシェアしたいと思います。
先ずは混在コンテンツチェックのためにテスト用ブログを作成
独自ドメインで運営する はてなブログは現状 HTTPS化されていないため、混在コンテンツをチェックする術がありません。
そこで先ずはHTTPSに対応済みの「はてなが提供するドメイン」でのコピーブログをテスト用に作成します。
※既にテストブログとして、メインブログのコピーがある場合はこの工程はすっ飛ばしてもらって構いません。
はてなブログを独自ドメイン運用している、ということは現状「はてなブログPro」を利用しているはずですから、1アカウントに付きブログを10個まで開設できるはず。
はてなブログ管理画面の「ダッシュボード」→「マイブログ」の「新しいブログを作成」から、はてな提供のドメインで新規にブログを作成。設定の「詳細設定」から「HTTPS配信」を有効にしましょう。
ブログのデザインや機能のカスタマイズ関連での混在コンテンツ洗い出し
そして、新設したテストブログをメインブログと同じ状態にするために管理画面の「デザイン」の各設定をテストブログにコピーしていきます。
そして、その工程の中で以下の項目
- 「デザイン」→「スパナマーク」→「ヘッダ」の「タイトル下」
- 「デザイン」→「スパナマーク」→「記事」の「記事上」「記事下」
- 「デザイン」→「スパナマーク」→「サイドバー」内の各HTMLモジュール
- 「デザイン」→「スパナマーク」→「フッタ」
- 「デザイン」→「スパナマーク」→「デザインCSS」
- 「デザイン」→「スマホ版」→「ヘッダ」の「タイトル下」
- 「デザイン」→「スマホ版」→「記事」の「記事上」「記事下」
- 「デザイン」→「スマホ版」→「フッタ」の「ページャ下」「フッタ」
にある、混在コンテンツの要素である「http://〜」といった文字列が含まれる部分を修正していきます。
筆者の場合は「script src="http：//code.jquery.com/〜」といったjQueryの読み込みコードやValuecommerce の「おまかせ広告」の script コードに含まれる「http://〜」を「https://〜」に修正いたしました。
サイドバーにHTMLモジュールで画像を貼っている場合も注意ですね。
またヘッダー画像や背景に設定した画像も、以前のものは混在コンテンツの原因となりますので再度貼り直します。
さらに、はてなブログでの「テーマ」もHTTPSに対応していないものを使用していると混在コンテンツとなってしまいます。
主に検索モジュールに含まれる虫眼鏡アイコンの画像が原因となっているようですので（すべてが、とは言い切れませんが）以下の記事を参考に対処いたしました。
そして、はてなブログ管理画面→「設定」→「詳細設定」→「headに要素を追加」もチェックします。
基本的に、問題のあるコード・構文についての対応は
- 新たに、httpsに対応するコードを再取得し書き換え
- コード中の「http://◯◯◯」を「https://◯◯◯」に書き換え
- コード中の「http://◯◯◯」の「http:」を削除し、「//◯◯◯」に修正
のいずれかで大丈夫だと思います。
だいたいのチェックが終わったら、この段階でテストブログにChromeでアクセスし、「保護された通信」になっていれば d(^_^o)
メインブログから過去記事をエクスポートしてバックアップ＆修正
続いて、メインブログから過去記事をエクスポートします。
管理画面の「設定」→「詳細設定」→「エクスポート」から「記事のバックアップと製本サービス」をクリックし「ダウンロード」を選択。
以前、エクスポートを利用したことがあり、作成日時が以前の日付になっている場合は「エクスポートしなおす」を押して最新のデータをダウンロードしましょう。
エクスポートしたデータは必ずコピーを取り、万が一のためのバックアップ用として別途保存しておきましょう。
そしてもう一方で混在コンテンツを修正していきます。
はてなフォトライフやブログカードは「インポート」で更新
はてなフォトライフの画像やブログカードなど、「修正はしなくても更新が必要」なものに関しては、このエクスポートしてから修正したデータをインポートすれば更新したことになり、混在コンテンツは解消されます。
これはラッキー！嬉しい誤算でした。
「カエレバ」「ヨメレバ」「アブリーチ」は新たに置き換えが必要
では、エクスポートしたテキストファイルをエディターで開きましょう。
Mac なら有名な多機能エディター「CotEditor」がオススメ。
記事中で混在コンテンツとして引っかかるのは、大体が「img src="http://〜」で始まる画像データです。
筆者の場合、「カエレバ」「ヨメレバ」、「アブリーチ」といったブログパーツの商品やアプリ画像が軒並み引っかかっていました。
そこで、HTTP構文で書かれたデータから「カエレバ」や「ヨメレバ」、「アブリーチ」の適当な文字列を検索してピックアップしていきます。
検証してみたところ、「http://〜」の部分を「https://〜」に置き換えるだけではリンク切れ等が起こってしまいました。
またこの手のブログパーツは、単純に「img src="http://〜」の画像データ部分を書き換えるだけというわけにはいかず、一括変換ツールやエディターの置換を使って一気に！といかないのが難点。
結局、面倒ではありますがそれぞれ新たに取得したものに置き換えていくことに。
やはりそれなりの手間はかかりますが、効率よく出来るため時間はかなり短縮できるはずです。
修正が終われば、このデータをテストブログの方にインポートし、混在コンテンツが解消されているか検証しましょう。
「カエレバ」「アブリーチ」共に、無事混在コンテンツが解消されました。
記事データをインポートする際の注意点
テストブログを Chrome で開いて記事をチェックし、問題なければ最終的にはメインブログの「デザイン」もテストブログで修正したものに書き換え。
そして各種変更を加えたエクスポートデータをメインにもインポートすれば完了です。
ここで注意ですが、メインブログにインポートする際には記事が重複してしまうため、一旦過去記事を全て消去しなくてはなりません。
管理画面「記事の管理」からすべての記事にチェックを入れ、「チェックした記事を削除」をクリック。
くれぐれも、記事のバックアップを取ってから削除してください！
また記事を削除してからインポートするまでの間、ブログの各記事にはアクセスできなくなってしまうので、影響の少ない夜間に作業するのがオススメです。
エクスポートデータから記事をインポートした場合、これまで記事作成を「はてな記法モード」や「Markdownモード」で行っていても過去記事はすべて「 見たままモード」か「 HTMLモード」での編集へと変換されてしまいます。ご留意ください。
さらに、大事な注意事項。
管理画面の「設定」→「詳細設定」の「ブログ削除」は絶対やらないこと！
「ブログそのもの」が無くなってしまう上に、URLも使えなくなって復元することが出来なくなってしまいます。ご注意を。
この方法で筆者は、混在コンテンツが解消された「完全HTTPS化」への準備＆チェックができたわけですが、独自ドメイン運営の場合は二度手間になるかもしれないので、はてなブログが独自ドメインのHTTPS化に対応してからやったほうがいいかもしれないですね。
お試しになる場合は、各自自己責任でお願い致します。
まとめ
と、いうわけで
運営、いつでもいいぞ！
追記（2018.04.17）
「はてなブログ開発ブログ」より公式発表がありました。
独自ドメインのHTTPS化は2018年6月末までの提供開始を予定している、とのことです。
さらに追記（2018.06.13）
2018年6月13日、独自ドメインのHTTPS化が実装されました。
