C#と諸々

ソースコードの装飾を行うためのJavaScriptクラスライブラリを作ってみました。

概要
動作環境
試してみる
使い方
DecorationContextについて
Download


【 概要 】
ソースコードの装飾を行います。
ソースコードの装飾が動的に行われるため、Webサイトにソースコードを掲載する際に、わざわざ手作業で装飾する必要がなくなります。
現在の所、C#コードの装飾、JavaScriptコードの装飾、XMLの装飾をサポートしています。
また、自分で装飾の規則を作成することもできます。 ( 指定した正規表現にマッチする箇所に対して、文字色・背景色の着色，太字指定，下線指定，フォントサイズ指定，フォントファミリ指定ができます。 )


【 動作環境 】
動作確認済みのブラウザは以下のブラウザになります。その他のブラウザでの動作は未確認です。

• Internet Explorer 6.0
• Internet Explorer 7.0
• FireFox 1.5

【 試してみる 】
テストページを用意しました。
入力エリアにソースコードを入力し、装飾タイプを設定後、実行ボタンをクリックしてみてください。
TextDecoration.js テストページ


【 使い方 】
[ HtmlDecoratorのインスタンス化 ]
まず、YokoKen.TextDecoration.HtmlDecoratorクラスを引数なしでインスタンス化します。

var decorator = new YokoKen.TextDecoration.HtmlDecorator();

[ DecorationContextの生成 ]
DecorationContextについてを参照してください。


[ HtmlDecoratorオブジェクトにDecorationContextオブジェクトを設定 ]
HtmlDecoratorオブジェクトのsetDecorationContextメソッドを使って、DecorationContextオブジェクトを設定してやります。

decorator.setDecorationContext(context);

[ 装飾 ]
装飾したい文字列を引数に指定してdecorateメソッドを使うと、装飾されて戻ってきます。

var textbox1 = document.getElementById("textbox1");
var text = textbox1.value;
var decorationText = decorator.decorate(text);

decorateメソッドに渡す文字列は、HTML化された文字列ではなく、純粋な文字列を渡してください。（ようするに、実体参照とか改行タグとかダメです。）
YokoKen.TextDecoration.HtmlDecorator クラスのparseHtmlToTextという静的メソッドを使えば、実体参照や改行タグを含んだ文字列を純粋な文字列に変換してくれます。（改行タグ以外のタグは含めないで下さい。改行タグ以外は無視します。）

var div1 = document.getElementById("div1");
var text = YokoKen.TextDecoration.HtmlDecorator.parseHtmlToText(div1.innerHTML);
var decorationText = decorator.decorate(text);

【 DecorationContextについて 】
DecorationContextクラスは、装飾規則を表すクラスです。
現在の所、このDecorationContextの生成方法には、以下の方法があります。

[ 予め用意されている着色規則を利用する ]
YokoKen.TextDecoration.Specialized.DecorationContextFactoryオブジェクトのメソッドを使用して、予め用意されているDecorationContextオブジェクトを生成することができます。
現状、このオブジェクトには、以下の３つのメソッドが用意されています。

• createCSharpDecorationContextメソッド ( C#コード装飾用のDecorationContextオブジェクトを生成 )
• createJavaScriptDecorationContextメソッド ( JavaScriptコード装飾用のDecorationContextオブジェクトを生成 )
• createXMLDecorationContextメソッド ( XML装飾用のDecorationContextオブジェクトを生成 )

var context = YkoKen.TextDecoration.Specialized.DecorationContextFactory.createCSharpDecorationContext();

[ XMLファイルに記述する ]
独自の装飾規則を、XMLファイルに記述して利用することができます。
XMLファイルには、装飾する箇所を示す正規表現の指定、文字色・背景色の着色，太字指定，下線指定，フォントサイズ指定，フォントファミリ指定ができます。 (  もう少し詳しい解説が欲しいという方は、この記事にコメントしてください。 )
XMLファイルに記述する際は、 DecorationContext XMLスキーマ に従う必要があります。( アップローダの都合でファイル名の末尾に".txt"が付加されています。ローカルに保存後、ファイル名末尾の".txt"を削除してください。 )

以下、参考までに。( ローカルに保存後、ファイル名末尾の".txt"を削除してください。 )
C#コードの装飾規則 XMLファイル
JavaScriptコードの装飾規則 XMLファイル
XMLコードの装飾規則XMLファイル

作成したXMLファイルを利用するには、YkoKen.TextDecoration.DecorationContext.createInstanceFromXmlメソッドを使用します。

var context = YkoKen.TextDecoration.DecorationContext.createInstanceFromXml("CSharp.xml");
decorator.setDecorationContext(context);

【 DownLoad 】
TextDecoration.js

※ 使用する際は、直リンクせず、自分のWebサイトにTextDecoration.jsを配置して使用してください。

【 蛇足 】
ちょっと装飾に時間がかかるのが難点・・・。 ( JavaScriptを使いこなせていないせい？ )
試しに、C#ソースコード約300行を装飾してみたら0.6秒かかりました・・・。
C#で実装した （ ほぼ ） 同等のクラスライブラリだと、同じコードを20分の１の時間 （ 0.03秒 ） で装飾できるのに・・・。