はてなブログのSSL化に備えて混在コンテンツ対応をユーザースクリプトで効率化する

タグ書き換えはユーザースクリプトで自動化する

　そこで、できるだけ省力化するために、要修正箇所を見つけて書き換えを行う作業を自動化することにしました。基本的な考え方は、2年半前にFlickrが埋め込みコードにお節介なタグを追加したときに、その余計なタグを消す作業を自動化した際ににとった方法と同じです。

　その顚末をまとめたのが↑この記事。ブラウザでブログ編集画面を開いたときにだけ走るスクリプトを作成しました。

　上記記事ではFirefox用としては定番だったGrasemonkeyというユーザースクリプト用のアドオンを使いましたが、最近はマルチブラウザ対応なTampermonkeyというアドオンのほうが人気があるようです。これはFirefoxだけでなく、ChromeやSafariやOperaやMicrosoft Edgeなどでも使えるそうです。

　以下はFirefox版のTampermonkeyを使った場合の例となります。他のブラウザでは細かいUIなどが異なっているかもしれませんが、重要な部分は同じはずです。

　Tampermonkeyをインストールすると、ブラウザのアドレスバー右にTampermonkeyのアイコンが現れます。これをクリックするとこのようなメニューが開くので、まずはダッシュボードをクリックしてみます。

　するとこのような画面になります。最初はユーザースクリプトは何もありませんので、矢印で示した「＋」マークのタブをクリックすると…

　このような新規スクリプトのエディターが開きます。ヘッダー類はデフォルトで用意されているもので、下の方にある「// Your code here…」の部分に、実際にやりたいことをjavascriptで記述していきます。

　今回は「はてなブログ」の編集画面を開いた時に、既に書いた記事内容の中からimgタグのリンクがhttpで記述されている部分を見つけ、それをhttpsに書き換えるか、またはhttpを削除してRelative Reference形式にする、という作業を行うだけなので、こんな感じのシンプルなコードでできそうです。

　書き終えたらTampermonkey 内のファイルメニューから保存をします。

　ということで、ダッシュボードの戻ってみるとこうなりました。なお、このスクリーンショットでは2つのユーザースクリプトがありますが、今回作成したのは二つ目の方です。一つ目は上記で紹介したFlickrのembedコードから余分なコードを削除するため2年半前に作ったスクリプトです。

ユーザースクリプトの内容

　さて、スクリーンショットでちょっとだけお見せしましたが、以下に私がやっつけで作ったhttps化書き換えスクリプトのコードを貼っておきます。

/// ==UserScript==
// @name         Modify img tag link to Relative Reference on Hatena Blog Editor
// @namespace    https://blog.hisway306.jp/
// @version      0.1
// @description  To modify http link of img tag to Relative Reference on Hatena Blog Editor
// @author       hisway306
// @match        http://blog.hatena.ne.jp/hisway306/history.hatenablog.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;
}) ();

　ヘッダー部のコメント行は単なるコメントではなく実は重要なタグになっています。特に「@match」の行はこのスクリプトを実行するURLを指定するフィールドです。この例ではこの私のブログの編集画面のURLを指定しています。移植する場合はこの部分をご自分のアカウント、ブログの編集画面URLに書き換える必要があります。

　また「@name」の行はTampermonkey上からユーザースクリプトを識別するための名前として使われます。それ以外は適当でも良いのではないかと思っています。

　そしてスクリプトの本体はfunction()以下、”var e =”で始まってる行から”e.value =”までの4行だけです。ざっくり内容を説明すると…

• まず1行目（var e…の部分）は、はてなブログの編集画面の入力フィールドであるテキストボックスからエレメント名を取得します。
• 2行目でエレメントの中にあるテキスト（=本文）を取得します。
• 3行目では取得した本文の中から「img src=http:”」という文字列を探し出し「img src=”」に置き換えます。
• その結果を最後にtextboxに書き戻します。

　見て分かるとおり、この例ではhttpをhttpsに置き換えるのではなく、Relative Reference形式に変換しています。httpsと明示したい場合は3行目をそのように書けばOKです。

　なお置換元に”:”を含めるところは結構重要です。そうしないと”httpss”とか”//s”みたいな異常が起きる可能性がありますので、テストは十分に行ってください。

Flickr以外のimgタグにも全てに働くので注意！

　なお、このスクリプトはそのimgタグがFlickrを呼んでいるものかどうかに関わらず、httpで書かれたimgタグ全てを書き換えてしまいます。ですから、写真以外にimgタグが使われている場合は注意が必要です。

　しかし逆に言えば、ブログがSSL化された際にhttpで指定されたimgタグは中身がなんであれ動作しないので、そのまま残しておく意味はありません。なので、現状httpとなっているimgタグは、とりあえず全てRelative Referenceに書き換え、SSL化した際にもしFlickr以外から読み込んでいる画像で、そのホストがSSL配信出来すに表示されない場合があるなら、それはその時個別に対応を考えた方が良いと思います。

実行結果

　さて、一応実行結果を示しておきます。

　Tampermonkeyはアドオンとしてブラウザ起動時に同時にロードされています。12インチMacbook 2015でも特に動作が重くなるとか不安定になるみたいな弊害は体感しません。

　左のGoogleのように関係ないサイトを開いているときは、今回作成したユーザースクリプトは実行されず、右のように「@match」で指定したブログの編集画面を開いたときだけ実行され、その状態はアドレスバー右端のアイコンで認識できるようになっています。

　そして、このスクリプトを用いて、FlickrがSSL化される前の2013年12月に書いた記事を編集モードで開いてみました。

　まずはこちらがスクリプトを実行する前のをオリジナル。赤線を引いた部分で分かるとおり、imgタグはhttpリンクで写真データを呼び出しています。

　こちらはスクリプト実行後。赤線部分で示したとおりimgタグのhttpが削除されRelative Reference形式に書き換わりました。

　便宜上Before / Afterを示しましたが、スクリプトは設定した編集画面を開いた瞬間に自動的に動作するので、開いたと思ったら既にAfterの状態になっているはずです。確認ダイアログなどは表示されず問答無用で動作しますので、注意が必要です。

　なお上記例で示した約4年前の記事がこちら。ページソースを見て頂けると分かりますが、imgタグはRelative Referenceとなっていて、画像もちゃんと表示されているはずです。

　現在はまだこのブログは非SSLですので、ブラウザ自体はhttpで呼び出していますが、SSL化した暁には混在コンテンツエラーになることなく、自動的にhttpsで画像が読み込まれるはずです。

やはりTampermonkeyでユーザースクリプト！

　その手段はやはりFlickrの場合と同様でユーザースクリプトを書きます。新たにもう一つユーザースクリプトを作っても良いのですが、今回は先ほどFlickr用に作成したスクリプトにもう一行追加することで、対応しようと思います。

　手順と考え方はimgタグの場合と同じなので色々省略して、完成品はこんな感じになりました。

/// ==UserScript==
// @name         Modify img tag link to Relative Reference on Hatena Blog Editor
// @namespace    https://blog.hisway306.jp/
// @version      0.1
// @description  To modify http link of img&iframe tag to Relative Reference on Hatena Blog Editor
// @author       hisway306
// @match        https://blog.hatena.ne.jp/hisway306/history.hatenablog.com/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="');
var textB = textA.replace(/iframe src="http:/g,'iframe src="');
e.value = textB;
}) ();

　imgタグを置換する作業のあとに、同じようにiframeタグを置換する処理を一行追加しました（下から3行目）。imgタグを書き換えた後のtextAに対してiframeをさらに書き換え、その結果であるtextBを編集画面に書き戻しています。

結果はSSL化されてから要確認

　さて、これで大丈夫なはずですが、色々調べてみるとAmazon商品紹介のリンクは、iframeタグからhttpsで呼び出しても、それに付いてくる画像ファイルがhttpのままだったりする場合もあるようで、その場合はやはり正常に動作しなくなります。

　そうなったら新しくコードを取得し直して（現在取得できるコードは全てRelative Reference形式になっている）貼り直すか、あるいは商品リンク自体を消してしまうか考えたいと思います。

　Flickr画像と違ってAmazon商品紹介はなくても記事内容に影響はほとんどありませんから…。