外部サービスが止まっても最低限の動作ができるようなWebページを作る：SyntaxHighlighter編

イントロダクション

以前 SyntaxHighlighter の公式ホスティングサービスへの接続に失敗し、ページが読み込み中のまま表示されないという現象が発生したことがありました。



謎：syntaxhighlighter を導入したページが読み込み中のまま止まる（現在は解消） - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.jp/2014/04/syntaxhighlighter.html


最近は私が知る限りではこの問題は発生していませんが、外部サービスに頼っている以上、同じような現象が発生した場合にも、最低限の動作ができるような対策をとっておく必要があります。（一部の機能が使えなくなっても、動作し続けられるソフトウェア設計の考え方ですね。）

特にこの問題の最大の問題点は、SyntaxHighlighter の読み込みコードを書いてあるページが一切表示できなくなる点です。
そのため、せっかくページを訪れてくれた閲覧者はページを見ることが出来ず、サイト運営者・閲覧者とも損失を被ることになります。

対策

私のページでは以下の対策を行っています。

１．外部サービスが応答を返せない状況でもページを表示できるよう、ページを表示した後に外部サービスへアクセスする

以下の投稿で記載した JavaScript コードを</body>直前に設置し、外部サービスのJavaScriptファイルとCSSファイルをページが表示された後に読み込むようにしました。

ページ表示速度改善:SyntaxHighlighter使用箇所があれば読み込む(完成スクリプトの配布) - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.jp/2014/04/syntaxhighlighter28.html


その効果により、外部サービスが応答を返せない状況でも、ページが表示された後に外部サービスへのアクセス・応答待ちが発生するため、ページが表示されないという最悪の自体は回避できます。

但し、デメリットとして、ページ表示後から外部サービス の読み込み完了までの間は、SyntaxHighlighter で装飾されていないコードが表示されてしまいます。
その点の対策としては、３．の施策の一環として、SyntaxHighlighter で装飾したのと同じようなフォントサイズや行間のスタイルを定義しておき、適応前後で大きな変化が生じないようにしておくとよいでしょう。

２．外部サービスの動作状況に影響を受けないように、外部サービスに依存するページを極力減らす

SyntaxHighlighter の読み込みコードを全ページ共通のテンプレートに記載しておくと、わざわざ個別のページで SyntaxHighlighter の読み込みコードを記載する必要がなくなる反面、外部サービスの応答がない場合には、その障害が全ページに波及してしまいます。

そのため、１．のコードを使用して、SyntaxHighlighter による装飾対象コードがあるページでのみ、SyntaxHighlighter の外部サービスにアクセスするようにしました。

３．SyntaxHighlighter による装飾が機能しなくても、最低限コードが読める程度のスタイルを定義しておく

私の場合、SyntaxHighlighter による装飾対象コードは <pre>タグで囲っています。
そのため、<pre>タグのスタイルシートを定義し、SyntaxHighlighter による装飾が機能しなくても、最低限コードが読めるようにしています。

まとめ

私が行っている対策は以上です。
それらの対策により、万が一外部サービスからの応答が返ってこない状況になったとしても、ページが表示されないという事態は回避できます。

以上の他にも、外部サービスの応答がすぐに返ってこなかったら、読み込み処理を中断することでページが読み込み中のままになることを防いだり、１つ目の外部サービスから応答がすぐに返ってこなかったら、２つ目の外部サービスへアクセスを試みたりといった対策が可能かもしれません。（実現方法は検討していないため、本当にそのようなことができるのかはわかりません。）