RoboCupSoccer SSL向けのnode.jsとWebブラウザを使ったグラフィカルクライアントssl_gclient_nodeを作りました．
BLThunder1991/ssl_gclient_node · GitHub
ひとまず最低限な機能を満たしたので，紹介したいと思います．
事の発端
最近，HTML5とかnode.jsを触る機会が多くて，これでなんか作りたいなと思ってました．幾つかアイディア出てきたんですが，一番イメージが湧きやすかった，RoboCupに関するプロダクトを作ってみたくて，やってみました．
なぜわざわざ，SSL-Visionに同梱されているグラフィカルクライアントを作ったのかと言えば，Macの上で動くクライアントが欲しかったのと，どうせ試合をクライアントから見るなら得点の状況とかステータスも知りたいなという要望が個人的にあったからです．試合直前にロボットのお世話しながら机の上で試合見るとかできます（笑）
さらに言えば，僕がRobocupに参加した時こういうものがあったらうれしかったなというのがなんとなくあります．
個人的にそう思っていたというか，こればっかりは僕のグイグイ力の問題なのかもしれませんが，初参加の時は時間とか人とかのリソース的にロボット作ってAIサーバ作るのが精一杯でこういう本筋とは関係ないけど会ったほうが良かったものってなかなか後回しになりがちです．
もし，今後Robocupに興味を持って，参加したいというチームに向けてちょっとでもハードルが下がるといいなという気持ちで作りました．
ssl_gclient_nodeができること
SSL-Vision，RefereeBoxからのパケットを受け取って，サーバにアクセスしているWebブラウザにリアルタイムで反映します．
なので，サーバをマルチキャストが届く範囲で起動させて，アクセスするWebブラウザは経路さえ空いていればどこからでも試合の状況を確認できます．
単純に，現状のグラフィカルクライアントを置き換えることも十分できるとは思いますが，パブリックビューイング的な？見に来てくれているお客さんが試合の状況を把握するとか，そういうケースにも使えるかと思います．（なんせブラウザがあれば見れるので！）
あとは，ちょっとインフラの整備が必要になるかもしれませんが，公式ページに埋め込んで，Webサイトから試合の状況リアルタイムで見れる，みたいなこともできると思います．
ssl_gclient_nodeがこれからできるようになるかもしれないこと
WebSocketは双方向の通信技術なので，サーバからブラウザへ更新をかけるだけではなく，もちろんブラウザから何かサーバ側に送る事もできます．
また，基本的にはWeb（HTML5）の技術を使用しているので，クリックイベントとかも結構簡単に取れます．
したがって，シミュレータみたいなものももしかしたら結構簡単に作れるかもしれません．（Javascriptの2D物理演算ライブラリとかもありますしね）
実装に関して幾つかのフォロー
サーバサイド
サーバサイドはnode.jsで実装されています．
% node gclient.js
コマンドを叩くと，Webサーバ，Websocketサーバ，マルチキャストレシーバ×２が起動します．
ポート番号とかホストとかはハードコーディングされているので，必要に応じて変更してください．
サーバ側では，Googleprotobufを使うためにprotobufjsというライブラリを使用しています．
これがまた素晴らしいライブラリで，かなり簡単にProtobufをいじれるようになりました．逆にパケット作るなんてときにもめっちゃ簡単そうです．
クライアントサイド
クライアントサイドはWebsocketでデコード済みのProtobuf（JSON形式）をサーバから受け取って，それを元にロボットとかボールとかを描画しています．
Canvasタグの２Dコンテキストを取得してゴリゴリ書いています．描画タイミングは，SSL-Visionからパケット受け取ったタイミングで書くようになっていて，安定して受け取れるなら大体60fpsぐらいで描画しています．
描画に関してはもしかしたら，WebGL使ったりしたほうが扱いやすくなるかもしれません，今後検討します．
RefereeBoxからのパケットも同様に，受け取ったらチーム名とか得点とかステータスとかを更新しています．
デザイン面に関しては，Twitter bootstrapを使用してレイアウトしています．しかしながら，なんかたまにおかしいことになります（笑）
あと，致命的なことにUIがださい（笑）改善案お待ちしています．
もしつかっていただけるなら……
所属チームを引退してからはや数ヶ月，実は僕の手元には色々テストするための環境がありません．ロボットとか，シミュレータとか，AIそのものとか……．なので，本プロダクト作成にあたっては，grSimとか使ってデバッグしておりました．
もし，このプロダクトが気に入って，使っていただけるようであれば，ぜひぜひ使い倒してバグ報告とか，改善提案とかいただければと思います．Pull Requestとかも大歓迎です！
本番に近い環境じゃないとわからないこともたくさんあると思うので．
おわりに
かなり簡単な説明になってしまいましたが，このぐらいにしておこうと思います．
バグの報告や改善案などはGitHub等にお願いします．
