SyntaxHighlighterのautoloaderの使い方 Ver 3.0

Ver 3.0からautoloaderが導入されてたんですね。 Ardor(@ArdorOnline)です。 SyntaxHighlighterは、綺麗に表示できるのですが、ページ表示の遅さが気になってました。 必要ないときは読み込まないで欲しいなと考えてたところです。 Ver 3.0を調べていたら動的に必要なファイルを読み込む方法が提供されてました。 今回はautoloaderの使い方をご紹介します。

autoloaderとは

SyntaxHighlighterを導入する際に、必要なCSSやJavascriptファイルを読み込むタグを記述したと思います。
例えば、次のようなコードです。

SyntaxHighlighterは、読み込むライブラリを固定で定義してしまいます。 コアスクリプトの他に対応する言語のライブラリが必要です。 html、css、js、などなど利用する言語が増えれば増えるほど、追加が必要になります。

問題点としては、「不要なライブラリを読み込む場合がある」ということです。 ブログでは、この記事ではjsが必要、他の記事ではhtmlだけが必要、ということが発生します。 全部読み込んでしまえばいいのですが、ロードに時間がかかるのを考えると効率がよくないですね。

そこで、必要なライブラリだけを読む込むという考え方が出てきます。
Dynamic Loading（動的ロード）と呼ばれています。 これができるのが、shAutoloader.jsです。

autoloaderの使い方

使い方は、簡単です。次のコードを実装します。

SyntaxHighlighter.autoloaderの引数に、必要なライブラリを記述して利用します。
このブログでは、html、css、js、textを使うことがあるので、これだけ指定しています。

設置場所ですが、</body>タグの後です。
これは、表示する記事のすべてが読み込み終わってからのタイミングで実行する必要があるからです。

また本家サイトでは、URLのリプレイス処理も紹介されていますが、 URLは変わることが少ないので、すべて記述しておきます。
その方が実行速度は速いハズです。

テンプレートに記述した例は次の通りです。

最後に

SyntaxHighlighterは、ロードに時間が掛かることや、 AmazonアソシエトタグとGoogle Chromeの組み合わせで問題が発生することがあるようですが、 autoloaderを必ず最後に実行させることで問題を解決できるようです。
SyntaxHighlighterが必要ない記事のロード時間短縮もできるので、実装してみてはいかがでしょうか？

最後までお読み頂きありがとうございます。