Hatena::ブログ(Diary)

明日の鍵

2011-10-01

ブラウザからlogcatを見る(アップデートしました)

前回記事

ブラウザからlogcatを見る - 明日の鍵 
http://d.hatena.ne.jp/tomorrowkey/20110514/1305379371

前回作ったブラウザから見るlogcatをデ部にて発表しました。

ブラウザからlogcatを見る
http://d.hatena.ne.jp/tomorrowkey/files/20111001_slide.pdf

発表ついでに以下を変更しました。

  • 外観を整えました。
  • 普通のSocketにも対応しました。

実行ファイルたち

Androidアプリ(Server)
http://tomorrowkey.googlecode.com/svn/trunk/LogcatOnBrowser/LogcatSocketServer/bin/LogcatSocketServer.apkjarファイル(Client)
http://tomorrowkey.googlecode.com/svn/trunk/LogcatOnBrowser/LogcatSocketClient/jar/wifilogcat.jar
・htmlファイル(Client)
http://tomorrowkey.googlecode.com/svn/trunk/LogcatOnBrowser/Client/logcat.html

WebSocketを使ったバージョンはそのうち使えなくなります。

すでにchromeでは動かなくなりました。

現在動作確認がとれているのはMacSafariのみです。

Socketで接続する場合、引数IPアドレスとポート番号を指定してあげる必要があります。

コマンド例は以下です。

java -jar wifilogcat.jar -ipaddress 192.168.0.2 -port 10008

コマンドラインで実行なので、grepできたりcoloredlogcatが使えたりしてさらにべんり!!

2011-05-14

ブラウザからlogcatを見る

こちらが最新です
ブラウザからlogcatを見る(アップデートしました) - 明日の鍵 
http://d.hatena.ne.jp/tomorrowkey/20111001/1317451235

充電していない状態でlogcatを確認したくて、どうすればいいか悩んでました。

思いついたのが、表示するアプリを作ればいいんじゃね!って事。

しかし、端末に表示するのでは画面が小さすぎる、読みづらいので

Socketでパソコンとつないで表示することに

ついでに気になってたWebSocketを使うようにすれば、新しい事もできて一石二鳥!わーい!

構成

サーバ

Androidアプリ

画面は一つでサーバの起動と停止のみ行う

サーバが起動するのはWi-Fiで通信中のみ

クライアント

Chrome(11.0.696.68)

Android端末のIPアドレスとポート番号を指定することでソケットで接続を試みる

接続後はサーバから送られてくるテキストをhtmlで垂れ流す

通常のSocketについて調べる

Socketはさんざん触ったことあるので、大丈夫。

勉強したい人はTECHSCOREがオススメ

ソケットネットワークプログラミング-TECHSCORE- 
http://legacy.techscore.com/tech/J2SE/Network/2.html

そういや本も一冊買ってた

Socketの他にStreamについても勉強になった

TCP/IPソケットプログラミング Java編

TCP/IPソケットプログラミング Java編

WebSocketを調べる

The WebSocket API 
http://www.w3.org/TR/2011/WD-websockets-20110419/

WebSocketの一次情報

draftと書かれているので、仕様が変わるかもしれないってヤツですね。

英語分からん。


W3C - 『The WebSocket API』日本語訳 - HTML5.JP 
http://www.html5.jp/trans/w3c_websockets.html

日本語訳バージョン

日本語分からん。


WebSocket - Wikipedia 
http://ja.wikipedia.org/wiki/WebSocket

Wikipedia

通常のSocketみたく、繋げたら何してもおっけーってわけではなく

ハンドシェイクというやりとりが必要という情報が


WebSocketのプロトコル ― ありえるえりあ 
http://dev.ariel-networks.com/Members/inoue/websocket/

1年くらい前の記事だけど

WebSocketについてまとまってる

ハンドシェイクのやり方も丁寧に解説してある

意味あんのかって突っ込んでるけどw


http://www.google.co.jp/codesearch/p?hl=ja#CwgqP48SYDw/trunk/shared/J2SE/jWebSocketServer/org/jwebsocket/netty/engines/NettyEngineHandler.java

google code searchでjavaでのサーバ側の実装を見つけた

constructHandShakeResponseというメソッドでごにょごにょしてる

一番参考になった。コードが一番分かりやすい。

jWebSocket - The Open Source Java WebSocket Server 
http://jwebsocket.org/

どうやらこれのソースみたいだ


HTML5 WebSockets Tutorial 
http://www.tutorialspoint.com/html5/html5_websocket.htm

クライアントサイドはここを参照

簡単すなぁ…

作った

適当な実装だけど動くものはできた

サーバ側

LogcatSocketServer

http://code.google.com/p/tomorrowkey/source/browse/#svn%2Ftrunk%2FLogcatOnBrowser%2FLogcatSocketServer

クライアント側

logcat.html

http://code.google.com/p/tomorrowkey/source/browse/#svn%2Ftrunk%2FLogcatOnBrowser%2FClient

実行イメージ

f:id:tomorrowkey:20110514215636p:image

なんかそれっぽいの見えてるよね!

試すには

http://tomorrowkey.googlecode.com/svn/tags/LogcatSocketServer/1.0.0/bin/LogcatSocketServer.apk

このアプリをAndroid端末にインストール(※クリックするとapkファイルがダウンロードされます)

アプリ起動するとIPアドレスとポート番号が表示されます。*1

http://tomorrowkey.googlecode.com/svn/trunk/LogcatOnBrowser/Client/logcat.html

同じLAN内につながってるパソコンにこのHTMLを保存する

ブラウザから保存したhtmlファイルにアクセスする*2

IPアドレスとポート番号を入れるテキストがあるので、アプリに表示されているものを入力

connectボタンを押せばlogcatが読み込まれます


動くようには作りましたが、けっこう適当実装です。

自己責任で実行してください。責任は一切負いません。

やってみて

javascriptとかhtmlとか普段ぜんぜんやらないから楽しかった!

今は情報がたくさんあって、知識がなくてもなんとなくで作れてしまうね

なんか実装の悪いところあったら指摘ください。

WebSocketはすごく楽しい。

可能性を感じる。

*1:Wi-Fiに接続していない場合、そのまま終了します

*2:ここでアラートが表示された場合、使っているブラウザがWebSocketに対応していません