Bloggerのhttps強化によるSyntaxHighlighter周りの修正

(2016/9/22追記)Google Driveのホスティングサービス終了により、この記事の方法では正常に動作しなくなりました。対策として、Firebaseのホスティングサービスを使用する方法があります。詳しく？はこちらへ。


どうも久しぶりです。

最近、自分のブログにアクセスしようとするとやたら重たいなということに気づき、いろいろ探ってみるとSyntaxHighlighterが怪しいということになりました。

SyntaxHighlighterはソースコードの予約語などをハイライトするツールで、多くの言語にも対応していたためこのブログでも使用していたのですが、どうやら最近そのソースコードのハイライトがされなくなっているようでした。

なぜだかわからないまま試行錯誤していたのですが、ようやく原因がわかりました。

Bringing HTTPS to all blogspot domain blogs 

どうも今年の5月の頭にblogspotドメインからありとあらゆるドメインへのhttpsリダイレクトがデフォルトでONになったようで、当ブログも例外ではありませんでした。
このブログではSyntaxHighlighter公式のホスティングサービスを用いて必要なjsファイルなどを読み込んでいましたが、そのホスティング サービスはhttpsに対応しておらず、そのリダイレクトで読み込みに時間がかかった挙句失敗するという非常に残念な状態になっていたようです。

上記のブログにはこのようなセンテンスもありました。

Please be aware that mixed content may cause some of your blog's functionality not to work in the HTTPS version. Mixed content is often caused by incompatible templates, gadgets, or post content. While we're proactively fixing most of these errors, some of them can only be fixed by you, the blog authors.

（筆者拙訳）混在コンテンツ（HTTPSとHTTPが混在したコンテンツ）はブログの一部機能が正常に動作しなくなる原因となりうる点に注意して下さい。テンプレートやガジェット、投稿コンテンツがHTTPSに対応していない場合、混在コンテンツになりえます。我々はそれらの問題の多くを積極的に修正しているところですが、一部はブログ著者のあなたでなければ修正できないものもあります。

ということで、今回の問題はその「ブログ著者じゃないと修正できない問題」に該当するようです。


問題がわかれば対処はどうにかなります。

まずは、SyntaxHighlighterをDLし、自分のGoogle Driveに保存して公開します。
そして、下記のコードをテンプレートのHTMLのヘッダー要素の一番最後にコピペします。

<!-- Begin SyntaxHighlighter-->
<link href='https://googledrive.com/host/[ID]/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='https://googledrive.com/host/[ID]/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='https://googledrive.com/host/[ID]/scripts/shCore.js' type='text/javascript'/> 
<script src='https://googledrive.com/host/[ID]/scripts/shBrushCpp.js' type='text/javascript'/> 
<script src='https://googledrive.com/host/[ID]/scripts/shBrushCSharp.js' type='text/javascript'/> 
<script src='https://googledrive.com/host/[ID]/scripts/shBrushCss.js' type='text/javascript'/> 
<script src='https://googledrive.com/host/[ID]/scripts/shBrushJava.js' type='text/javascript'/> 
<script src='https://googledrive.com/host/[ID]/scripts/shBrushJScript.js' type='text/javascript'/> 
<script src='https://googledrive.com/host/[ID]/scripts/shBrushPowerShell.js' type='text/javascript'/> 
<script src='https://googledrive.com/host/[ID]/scripts/shBrushPython.js' type='text/javascript'/> 
<script src='https://googledrive.com/host/[ID]/scripts/shBrushXml.js' type='text/javascript'/> 
<script type='text/javascript'>
window.setTimeout(function() {
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.defaults['toolbar'] = false;
    SyntaxHighlighter.all();
}, 20);
</script>

[ID]の部分にはGoogle Driveの共有フォルダのアクセスIDを入力します。

IDとはGoogle Driveで共有設定したときに出てくる画面のid=の文字列です。上の画像のモザイクを掛けた部分です。
もちろん、テーマや読み込むスクリプトなどは必要に応じて変更すると良いでしょう。

また、最後に

SyntaxHighlighter.defaults['toolbar'] = false;

の一文を設けていますが、これを置くことでソースコード画面の右上の「?」マークが消えます。最初は消さなくてもいいかな～って思っていましたが、1行目に横長のコードを書くと鬱陶しくて仕方ないんですよね、これ。


というわけで、無事SyntaxHighlighterの問題を解決し、ブログの読み込みも早くなりましたとさ。めでたしめでたし。

P.S. ついでにブログのデザインも変えてみました。自分で目がチカチカするな～とか思ったらまた別のデザインにするかもしれません。