はじめに
記事「ページ表示速度改善:SyntaxHighlighter使用箇所があれば読み込む(完成スクリプトの配布)」にて行った作業内容を記載します。作業内容
前回までに作成したコンセプトコードを全ブラシ(*1)に対応させるため、以下の修正を加えました。*1
SyntaxHighlighter - Bundled Brushes
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
１．全ブラシのページに記載されているブラシ一覧をプログラム中で扱うためのデータ構造の作成
いままでのプログラムでは、手動でブラシ名と、そのブラシのJavaScriptファイルの対応付けを以下のように作成していました。いままでのプログラムのブラシ名・JSファイル対応付け
var brushURLs = new Array(); // 各ブラシ用 URL
brushURLs["js"] = scriptURL + 'shBrushJScript.js';
brushURLs["xml"] = scriptURL + 'shBrushXml.js';
brushURLs["csharp"] = scriptURL + 'shBrushCSharp.js';
brushURLs["cpp"] = scriptURL + 'shBrushCpp.js';
brushURLs["css"] = scriptURL + 'shBrushCss.js';
brushURLs["java"] = scriptURL + 'shBrushJava.js';
brushURLs["perl"] = scriptURL + 'shBrushPerl.js';
brushURLs["plain"] = scriptURL + 'shBrushPlain.js';
brushURLs["vb"] = scriptURL + 'shBrushVb.js';
/* --- 省略 --- */
// 各ブラシに対応するスクリプトの読み込みを行う
function addScriptFromBrush(brush) {
switch (brush) {
case "js":
case "jscript":
case "javascript":
addScriptFirst("js", brushURLs);
break;
case "xml":
case "xhtml":
case "xslt":
case "html":
case "xhtml":
addScriptFirst("xml", brushURLs);
break;
case "csharp":
case "c-sharp":
addScriptFirst("csharp", brushURLs);
break;
case "cpp":
case "c":
addScriptFirst("cpp", brushURLs);
break;
case "css":
addScriptFirst("css", brushURLs);
break;
case "java":
addScriptFirst("java", brushURLs);
break;
case "perl":
case "pl":
addScriptFirst("perl", brushURLs);
break;
case "plain":
case "text":
addScriptFirst("plain", brushURLs);
break;
case "vb":
case "vbnet":
addScriptFirst("vb", brushURLs);
break;
default:
}
}
しかし全ブラシをこのように手動で作成するのは、非常に面倒くさいです。
しかも、手動で作成している途中で作業ミスがあればバグを埋め込んでしまいます。
そこで次のような構造を作成して、機械的にブラシ名とそのブラシのファイルを対応付けられるようにしました。
修正後のプログラムのブラシ名・JSファイル対応付け(コンセプト）
// ブラシの関連付け配列
var brushRelations = [
new CBrushRelation("ActionScript3", ["as3", "actionscript3"], "shBrushAS3.js"),
/* --- ブラシの数だけ続ける --- */
];
// 各ブラシ用の URL を関連付けから作成
var brushURLs = new Array(); // 各ブラシ用 URL
for (var i = 0; i < brushRelations.length; i++) {
brushURLs[brushRelations[i].name] = scriptURL + brushRelations[i].file;
}
/* --- 省略 --- */
// 各ブラシに対応するスクリプトの読み込みを行う
function addScriptFromBrush(brush) {
// ブラシの関連付けからブラシに対応するブラシの URL を特定する
for (var i = 0; i < brushRelations.length; i++) {
for (var brushNameCount = 0; brushNameCount < brushRelations[i].brushNames.length; brushNameCount++) {
if (brush == brushRelations[i].brushNames[brushNameCount]) {
// 初回のみスクリプトの読み込みを実施
addScriptFirst(brushRelations[i].name, brushURLs);
return;
}
}
}
}
brushURLs を完全に削除することも考えましたが、そうすると他の処理部も変更を加えねばならず、新たなバグを埋め込む可能性を考えて、既存の構造をそのまま使用できる手段を採用しました。
機械的に変換するためのブラシ名・ブラシファイル関連付けテーブル作成は次の手順で行いました。
(1) (*1)よりブラシ一覧をコピー
(*1) よりコピーしたブラシ一覧をテキスト形式で張り付けると次のようになります。ActionScript3 as3, actionscript3 shBrushAS3.js Bash/shell bash, shell shBrushBash.js ColdFusion cf, coldfusion shBrushColdFusion.js C# c-sharp, csharp shBrushCSharp.js C++ cpp, c shBrushCpp.js CSS css shBrushCss.js Delphi delphi, pas, pascal shBrushDelphi.js Diff diff, patch shBrushDiff.js Erlang erl, erlang shBrushErlang.js Groovy groovy shBrushGroovy.js JavaScript js, jscript, javascript shBrushJScript.js Java java shBrushJava.js JavaFX jfx, javafx shBrushJavaFX.js Perl perl, pl shBrushPerl.js PHP php shBrushPhp.js Plain Text plain, text shBrushPlain.js PowerShell ps, powershell shBrushPowerShell.js Python py, python shBrushPython.js Ruby rails, ror, ruby shBrushRuby.js Scala scala shBrushScala.js SQL sql shBrushSql.js Visual Basic vb, vbnet shBrushVb.js XML xml, xhtml, xslt, html, xhtml shBrushXml.js
(2) 正規表現による置換1 - 「new CBrushRelation("名前", [ブラシ名のリスト], "ブラシファイル名"),」 の形式に整形
正規表現による置換は Visual Studio 2010 にて行いました。
検索する文字列：^{[^\t]+}\t*{(.*,)*.*}:b{[^:b]+}$
置換後の文字列：new CBrushRelation("\1", [\2], "\3"),
置換結果
new CBrushRelation("ActionScript3", [as3, actionscript3], "shBrushAS3.js"),
new CBrushRelation("Bash/shell", [bash, shell], "shBrushBash.js"),
new CBrushRelation("ColdFusion", [cf, coldfusion], "shBrushColdFusion.js"),
new CBrushRelation("C#", [c-sharp, csharp], "shBrushCSharp.js"),
new CBrushRelation("C++", [cpp, c], "shBrushCpp.js"),
new CBrushRelation("CSS", [css], "shBrushCss.js"),
new CBrushRelation("Delphi", [delphi, pas, pascal], "shBrushDelphi.js"),
new CBrushRelation("Diff", [diff, patch], "shBrushDiff.js"),
new CBrushRelation("Erlang", [erl, erlang], "shBrushErlang.js"),
new CBrushRelation("Groovy", [groovy], "shBrushGroovy.js"),
new CBrushRelation("JavaScript", [js, jscript, javascript], "shBrushJScript.js"),
new CBrushRelation("Java", [java], "shBrushJava.js"),
new CBrushRelation("JavaFX", [jfx, javafx], "shBrushJavaFX.js"),
new CBrushRelation("Perl", [perl, pl], "shBrushPerl.js"),
new CBrushRelation("PHP", [php], "shBrushPhp.js"),
new CBrushRelation("Plain Text", [plain, text], "shBrushPlain.js"),
new CBrushRelation("PowerShell", [ps, powershell], "shBrushPowerShell.js"),
new CBrushRelation("Python", [py, python], "shBrushPython.js"),
new CBrushRelation("Ruby", [rails, ror, ruby], "shBrushRuby.js"),
new CBrushRelation("Scala", [scala], "shBrushScala.js"),
new CBrushRelation("SQL", [sql], "shBrushSql.js"),
new CBrushRelation("Visual Basic", [vb, vbnet], "shBrushVb.js"),
new CBrushRelation("XML", [xml, xhtml, xslt, html, xhtml], "shBrushXml.js"),
(3) 正規表現による置換2 - ブラシ名を"で囲む
(2) の正規表現による置換により大体の形は完成しましたが、ブラシ名だけは"で囲むことができませんでした。そこで、ブラシ名を"で囲むべく、次の正規表現で置換を行いました。
検索する文字列：{(\[|:b)}{[^,:b\[\]\"]+}{(\]|,)}
置換後の文字列：\1"\2"\3
置換結果
new CBrushRelation("ActionScript3", ["as3", "actionscript3"], "shBrushAS3.js"),
new CBrushRelation("Bash/shell", ["bash", "shell"], "shBrushBash.js"),
new CBrushRelation("ColdFusion", ["cf", "coldfusion"], "shBrushColdFusion.js"),
new CBrushRelation("C#", ["c-sharp", "csharp"], "shBrushCSharp.js"),
new CBrushRelation("C++", ["cpp", "c"], "shBrushCpp.js"),
new CBrushRelation("CSS", ["css"], "shBrushCss.js"),
new CBrushRelation("Delphi", ["delphi", "pas", "pascal"], "shBrushDelphi.js"),
new CBrushRelation("Diff", ["diff", "patch"], "shBrushDiff.js"),
new CBrushRelation("Erlang", ["erl", "erlang"], "shBrushErlang.js"),
new CBrushRelation("Groovy", ["groovy"], "shBrushGroovy.js"),
new CBrushRelation("JavaScript", ["js", "jscript", "javascript"], "shBrushJScript.js"),
new CBrushRelation("Java", ["java"], "shBrushJava.js"),
new CBrushRelation("JavaFX", ["jfx", "javafx"], "shBrushJavaFX.js"),
new CBrushRelation("Perl", ["perl", "pl"], "shBrushPerl.js"),
new CBrushRelation("PHP", ["php"], "shBrushPhp.js"),
new CBrushRelation("Plain Text", ["plain", "text"], "shBrushPlain.js"),
new CBrushRelation("PowerShell", ["ps", "powershell"], "shBrushPowerShell.js"),
new CBrushRelation("Python", ["py", "python"], "shBrushPython.js"),
new CBrushRelation("Ruby", ["rails", "ror", "ruby"], "shBrushRuby.js"),
new CBrushRelation("Scala", ["scala"], "shBrushScala.js"),
new CBrushRelation("SQL", ["sql"], "shBrushSql.js"),
new CBrushRelation("Visual Basic", ["vb", "vbnet"], "shBrushVb.js"),
new CBrushRelation("XML", ["xml", "xhtml", "xslt", "html", "xhtml"], "shBrushXml.js"),
完成したデータ構造と処理
以上の置換結果を用いて、データ構造と処理を完成させました。
修正後のプログラムのブラシ名・JSファイル対応付け(完成コード）
// ブラシの関連付け配列
var brushRelations = [
new CBrushRelation("ActionScript3", ["as3", "actionscript3"], "shBrushAS3.js"),
new CBrushRelation("Bash/shell", ["bash", "shell"], "shBrushBash.js"),
new CBrushRelation("ColdFusion", ["cf", "coldfusion"], "shBrushColdFusion.js"),
new CBrushRelation("C#", ["c-sharp", "csharp"], "shBrushCSharp.js"),
new CBrushRelation("C++", ["cpp", "c"], "shBrushCpp.js"),
new CBrushRelation("CSS", ["css"], "shBrushCss.js"),
new CBrushRelation("Delphi", ["delphi", "pas", "pascal"], "shBrushDelphi.js"),
new CBrushRelation("Diff", ["diff", "patch"], "shBrushDiff.js"),
new CBrushRelation("Erlang", ["erl", "erlang"], "shBrushErlang.js"),
new CBrushRelation("Groovy", ["groovy"], "shBrushGroovy.js"),
new CBrushRelation("JavaScript", ["js", "jscript", "javascript"], "shBrushJScript.js"),
new CBrushRelation("Java", ["java"], "shBrushJava.js"),
new CBrushRelation("JavaFX", ["jfx", "javafx"], "shBrushJavaFX.js"),
new CBrushRelation("Perl", ["perl", "pl"], "shBrushPerl.js"),
new CBrushRelation("PHP", ["php"], "shBrushPhp.js"),
new CBrushRelation("Plain Text", ["plain", "text"], "shBrushPlain.js"),
new CBrushRelation("PowerShell", ["ps", "powershell"], "shBrushPowerShell.js"),
new CBrushRelation("Python", ["py", "python"], "shBrushPython.js"),
new CBrushRelation("Ruby", ["rails", "ror", "ruby"], "shBrushRuby.js"),
new CBrushRelation("Scala", ["scala"], "shBrushScala.js"),
new CBrushRelation("SQL", ["sql"], "shBrushSql.js"),
new CBrushRelation("Visual Basic", ["vb", "vbnet"], "shBrushVb.js"),
new CBrushRelation("XML", ["xml", "xhtml", "xslt", "html", "xhtml"], "shBrushXml.js")
];
// 各ブラシ用の URL を関連付けから作成
var brushURLs = new Array(); // 各ブラシ用 URL
for (var i = 0; i < brushRelations.length; i++) {
brushURLs[brushRelations[i].name] = scriptURL + brushRelations[i].file;
}
/* --- 省略 --- */
// 各ブラシに対応するスクリプトの読み込みを行う
function addScriptFromBrush(brush) {
// ブラシの関連付けからブラシに対応するブラシの URL を特定する
for (var i = 0; i < brushRelations.length; i++) {
for (var brushNameCount = 0; brushNameCount < brushRelations[i].brushNames.length; brushNameCount++) {
if (brush == brushRelations[i].brushNames[brushNameCount]) {
// 初回のみスクリプトの読み込みを実施
addScriptFirst(brushRelations[i].name, brushURLs);
return;
}
}
}
}
※ 後で「javascript: Closure Compilerにて「IE8 (and below) will parse trailing commas inarray and object literals incorrectly」というエラーが出力されたときの対処方法」の問題が発生したため、置換時には存在した new CBrushRelation("XML", ["xml", "xhtml", "xslt", "html", "xhtml"], "shBrushXml.js") の最後の , は手動で削除しました。
コメントを投稿 （ここをクリックしてコメント投稿フォームを表示）
コメント投稿機能について