HTML5のWebSocketを活用したアプリです。
その改良を考えています。が、勉強不足で自力でできません。
とりあえず問題点を書き出してみました。
WebSocket WiFiデバッグのニーズ
ADK/MicroBridgeをやっていると、AndroidとArduino/PICなどのマイコンはUSBケーブルで接続され、PC側へのadb接続ができません。
いつもは、AndroidとPCをUSB接続してLogcatを見るのですが、PCに繋がっていたUSBケーブルをマイコンに接続する必要が生じます。
WiFiでadbというのもありますが、機種によってできるものとできないものがあるようです。Nexus SはWiFi ADBが使えませんorz...
Nexus SでADK/MicroBridge中にWiFi経由でLogcatを見る方法は以下のサイトで紹介されていました。
"side2.jp » Android Open Accessory開発時のWiFiデバッグ2":http://bit.ly/qvnQ4H
紹介先のサイトは以下のURLです。
”ブラウザからlogcatを見る - 明日の鍵":http://bit.ly/oEi3eg
WebSocketでLogcatを出力し、ブラウザで表示させます。
ブラウザはHTML5のWebSocket対応で、自分のMacBook Airでは、 ChromeやSafariで実行する事ができました。
 |
| LogcatSocketClient.htmlの実行画面 |
だた、Logcatログが1行ずつ空けて表示され（1行づつ<p>タグで囲まれている）で、Priorityによる色分け（ハイライト表示）がありません。これでは少し不便です。
また、ログにタイムスタンプがなく（adb logcatのデフォルト表示であるbriefオプションです）、いつ起こった事象なのか証拠（エビデンス）が残りません。
改良点として以下の２点を挙げます。
- ブラウザ上に色分け表示をさせる。
- ログの各行にタイムスタンプをつける。
1.については、LogcatSocketClient.htmlのソースコードでLogcatのテキスト行をPrioryごとに色分けする処理を書かせればいいはずです。
function connect() {
if ("WebSocket" in window) {
ip_address = $("#ip_address").val();
port_number = $("#port_number").val();
ws = new WebSocket("ws://" + ip_address + ":" + port_number);
ws.onopen = function() {
$("#socket_status").html("status:connected/" + ip_address + ":" + port_number);
$("#toggle_connect_button").val("disconnect");
};
ws.onmessage = function (evt) {
var received_msg = evt.data;
$("#logcat").append($("<p>").html(received_msg));
if($("#auto_scroll_checkbox").is(":checked")) {
window.scrollBy(0,document.height);
}
};
しかし、正直、Ajax以前のPHPerである私は、$("…")の意味がすぐには分かりません。ファイルの先頭行を見ると…
<!DOCTYPE HTML> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> <script type="text/javascript">…とあるので、まあHTML5はもちろんjQuery勉強せんかい！という感じです。
いかんなぁ。
当初、以下のソースにあるように77行目のid=logcatの<div>タグに、SyntaxHighlighterでCSSを適用すればハイライト表示するかと思いましたが、ダメでした。
<div><input type="checkbox" id="auto_scroll_checkbox" checked /><label for="auto_scroll_checkbox">auto scroll</label></div> <div id="socket_status">status:closed</div> </div> <div id="logcat"></div> </body> </html>Dynamic HTMLにCSSを適用するのは無理なんかなあ…。DHTML勉強せんかい！という感じです。
SyntaxHighlighterでは、以下のようなルールでハイライト表示させています。
;(function()
{
// CommonJS
typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;
function Brush()
{
this.regexList = [
{ regex: /^.*ERROR\/.*$/gm, css: 'error' },//Kenichi Yoshida
{ regex: /^.*DEBUG\/.*$/gm, css: 'debug' },//Kenichi Yoshida
{ regex: /^.*WARN\/.*$/gm, css: 'warn' },//Kenichi Yoshida
{ regex: /^.*INFO\/.*$/gm, css: 'info' },//Kenichi Yoshida
{ regex: /^.*VERBOSE\/.*$/gm, css: 'verbose' },//Kenichi Yoshida
{ regex: /^E\/.*$/gm, css: 'error' },//Kenichi Yoshida
{ regex: /^D\/.*$/gm, css: 'debug' },//Kenichi Yoshida
{ regex: /^W\/.*$/gm, css: 'warn' },//Kenichi Yoshida
{ regex: /^I\/.*$/gm, css: 'info' },//Kenichi Yoshida
{ regex: /^V\/.*$/gm, css: 'verbose' },//Kenichi Yoshida
];
};
Brush.prototype = new SyntaxHighlighter.Highlighter();
Brush.aliases = ['logcat', 'lc'];
SyntaxHighlighter.brushes.logcat = Brush;
// CommonJS
typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
})();
各優先順位(ERROR, DEBUG, WARN, INFO, VERBOSE)のCSS（色）の指定は以下の通りです。.syntaxhighlighter .error, .syntaxhighlighter .error a {
color: #ff0000 !important;
}
.syntaxhighlighter .warn, .syntaxhighlighter .warn a {
color: #ff7f00 !important;
}
.syntaxhighlighter .debug, .syntaxhighlighter .debug a {
color: #00007f !important;
}
.syntaxhighlighter .info, .syntaxhighlighter .info a {
color: #007f00 !important;
}
.syntaxhighlighter .verbose, .syntaxhighlighter .verbose a {
color: #000000 !important;
}
多分、LogcatSocketClient.htmlの32行目あたりに、shBrushLogcat.jsの正規表現ルールで分岐させて、 shThemeEclipse.cssの色指定を適用させれば色分けできると思うのですが…。どうしたらいいでしょうか？
2.のログにタイムスタンプをつける点については次のブログに書きます。
0 件のコメント:
コメントを投稿