WebSocket WiFiデバッグ改良ポイント（１）を 改良

@tomorrowkeyさんのサイトで紹介されているWebSocketを用いたブラウザLogcatのhtml5ソースの改良ができました。。
WebSocket WiFiデバッグ改良ポイント（１）で問題提起した（ギブアップしていた！？）ポイントを改良して以下の画像のようにプライオリティごとのハイライト（色分け）表示ができました！

Logcatビューぽく仕上がっています（クリックして拡大）

9月24日（土）に行われた日本Androidの会神戸支部＆神戸GTUG勉強会で、参加メンバーのみなさんにいろいろ聞いて解決しました。

これはC-LIS有山さんのDevQuizのプレゼンです（面白かった）

以下の変更（追加）点は以下のdiffソースをご覧下さい。

32c32,46
<         $("#logcat").append($("<p>").html(received_msg));
---
> 		var startPos = received_msg.indexOf('/');
> 		//var logLevel = received_msg.substring(startPos, startPos+1);
> 		var logLevel = received_msg.substring(startPos-1, startPos);
> 		if(logLevel == "D"){//debug
> 			$("#logcat").append($("<div>").text(received_msg).css("color", "#00007f"));
> 		}else if(logLevel == "I"){//info
> 			$("#logcat").append($("<div>").text(received_msg).css("color", "#007f00"));
> 		}else if(logLevel == "E"){//error
> 			$("#logcat").append($("<div>").text(received_msg).css("color", "#ff0000"));
> 		}else if(logLevel == "W"){//warn
> 			$("#logcat").append($("<div>").text(received_msg).css("color", "#ff7f00"));
> 		}else{//verbose
> 			$("#logcat").append($("<div>").text(received_msg).css("color", "#000000"));
> 		}
> 

@tomorrowkeyさんのクライアント側のhtmlソースの32行目を変更して32〜46行目に書き換えます。
ログメッセージを<p>タグでDOMに追加しているところをif-else文を使いプライオリティごとに色分けのCSSを割り当てました。if-else文の分岐ごとに一つ一つDOMへの追加を行うという、、、なんかイケテナイ文になりましたorz
当初、参加メンバーのアドバイスにしたがってif-else文の後でaddClass()メソッドで色分けのクラスを追加しようかと思ったのですが、なぜかうまくいかず、上記ソースで「妥協」しています。
（うまくいかない理由がわかれば、SyntaxHighlighter 3.0の適用も可能となると思われます、多分。ソース書いててそう感じた…。）

ちなみに５行目のコメントアウトはtakagig支部長のライブコーディング跡です。このif-else文はメッセージの「/」の位置を見つけて、その一つ前にあるD,I,E,W,Vなどで分岐処理するものですが、それをミスった跡ですw（見せしめみたいになってしまった）。

そのtakagig支部長は、Jetty for Androidを使って、Logcatを出力するWebアプリ（Javaサーブレット）を書き、私より一足先にハイライト表示したLogcatブラウザ表示を完成させていました。
logcat - 日本Androidの会 神戸支部:"http://bit.ly/qKuxSF"
サーバ側に書いた色分けのJavaソースに若干バグがあるとおっしゃってましたが、上記の打ち間違いも関連しているかもしれませんね;-)