sib前回のエントリでsoket.ioにだいたい慣れたので、次は以前作ったEaselJSのスタディを少しいじって、soket.ioでつなぎタッチの可視化共有してみた。今回作ってみた物を以下に置いておく。VPSサーバーの構成変更を行う予定なので、いつまでこの形でおいておくかは分からない。co-touchできればiPhoneとmacとかiPhoneとiPadとかで見ていただけると、一方のタッチがリアルタイムに伝わる様が見えるだろう。ブラウザウィンドウ2枚立ち上げでも何が起きるか把握できる。EaselJSのスタディ02がタップやドラッグを使用していてsoket.ioで共有してみるサンプルとしては適切だろうということで、これをベースに少し表現を変えて作成をしていくこととした。スタディ02の構成からsoket.ioで伝えるイベントはonMouseDownと、マウス押し状態でのonMouseMoveの2つにする。このイベントで得られるポイントを、どの画角で見ても大丈夫なように横幅からの割合、縦幅からの割合にして、socket.emitで運ばれるオブジェクトに格納する。以上の方針より、サーバー側は以下のようなスクリプトになった。});});クライアント側はスタディ02をベースにsocket接続を入れた形なのでJSのメイン部分だけを示すことにする。html側でsocket.ioのクライアント側スクリプトをロードしておき、キャンバス制御や通信はcotouch.jsに書くようにする。src="js/cotouch.js"></script>cotouch.js内部の初期化し、ソケットからの情報を受け取る部分はこうしている。easel_main.addCirclesで、模様を描いている。data.mouse.x,data.mouse.yは横幅内、縦幅内の比になっているのでcanvas.widthやcanvas.heightを掛けて位置を決めている。socket;}マウスクリックやタッチで、ソケットへ情報を送る部分はこのような形にした。that.addCirclesで、模様を描いている、thatになっているのは同じオブジェクト内だからだ。ステージ内での位置情報はcanvas.width,canvas.heightで割って比に直している。}}クライアント側は、これ以外にも色々と入っているがsoket.io通信に関する部分はたったのこれだけ、それでタッチの共有ができてしまった。デプロイするにあたりngixでサーバーというのはちょっとおおげさだったので、foreverでデーモン化することにした。existとなってしまう。OSX、CentOS両方共だ。調べてみると、githubのフォーラムでも全く同じ症状の方達が沢山おり、しょうがないので終了はコマンドでKILLすることにした。soket.ioは随分と楽に面白いものができて、可能性を十分に感じさせてくれるた。今回のものだとピアノのような音が出ると素敵だと感じる。タッチ系は音との連動があると楽しそうだ。oAuthでTwitter/Facebook認証をしてアイコンとかtweetとかで遊んでみたり、みんなでお絵かきや塗り絵アプリみたいなのを作ってみたりしてみたくなる。Comment返信をキャンセルする。