Google Driveのホスティングサービス終了によるSyntaxHighlighter周りの修正

3か月くらい前にSyntax Highlighterが正常に動作しなくなっていたため、その修正をした旨の記事を書きました。

そして、昨日久々に記事を書いて、いくつか自分の過去記事を巡回していたら

ま　た　動　か　な　く　な　っ　て　る　じ　ゃ　ね　え　か

ちきしょーめ、なんかウェブページを開くとダイアログが出てきてソースコードが正常に表示されねえぞ！
こういうことで時間を取られるのは本当に面倒ですが、正常に動作しないブログはいろいろと問題ですので原因の究明と対応が必要になってくるわけです。

いろいろ調べていると、どうもGoogle Drive側に問題があるようです。

Google ドライブでウェブページをホストする

ああ、なんということでしょう。3か月前にドヤ顔で「Bloggerがhttps以外を締め出したからSyntaxHighlighter作った人のホスティングサービスが使えなくなった！だからGoogle Driveに置くことで解決してやったぜ！」って言っていたのに、その2か月後にそのサービスが終了してしまうとは…。どうもホスティングサービスの終了は結構前から予告されていたようで、それに気づかなかった私が情弱だったようですね…。

代替サービスをいろいろ調べましたが、どうもDropboxやOneDriveなどの他のクラウドストレージサービスのホスティングサービスはイマイチのようですね。うーん…。

というわけで行きついたのがFirebaseでした。
ウェブ関係にはめっきり弱い私ですから、明らかに私の手に余りそうなサービスですが、とりあえずホスティングに関してまとまった記事がちらほら見当たりましたので、それに従って挑戦してみることにしました。

というわけで、10分くらいいろいろ戦いながらやってみましたが、比較的簡単にできました。
詳細はググっていただくとして、Node.jsをインストールしてからnpmでFirebaseのクライアントをインストールし、ローカルの適当なフォルダをFirebaseのフォルダに指定した後でpublicフォルダにSyntaxHighlighter周りのファイルを入れてデプロイすれば、そのフォルダがインターネット上に公開されるようになります。そして、FirebaseのサイトからホスティングのURLを確認し、BloggerのテンプレートのURLをGoogle Driveからこちらに変更してやれば完了です。めでたくコードがハイライト表示されるようになりましたとさ。言うまでもなく、Firebaseはhttpsに対応しております。


ふぅ。また3か月後に、今度はFirebaseのサービス終了みたいなお知らせ見たら私は泣くぞ…。

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

Syntax Highlighterテスト

ブログにソースコードのハイライトを表示するツールにSyntax Highlighterっていうのがあるらしいですが、全然プレビューしてもハイライトしてくれません。

int main(void)
{
 printf("Hello, world!\n");
 return 0;
}

って思ったら、これ公開したらちゃんと表示してくれるのね…。