WebSocketでニコニコリモコンみたいなのを作ってみる

はじめに

この記事は、JavaScript Advent Calendar 2011 (Node.js/WebSocketsコース)の20日目の記事です。飛び入り参加です。
注：開発速度重視で書いたコードなので、綺麗さ皆無です＞＜すみません＞＜
その上半年前のコードなので色々とアレです＞＜

概要

ニコニコリモコン、皆さん使ってますか？僕は使ってないです。というかスマホなのでサポートされていません。
使えないなら自分で作ろう！！というのが今回の目的です。
だいぶ@ajalaboxさんの「Google ChromeをWebSocketで制御する」とかぶっている気がします。すみません…

仕組み

2つの端末が同じ所に接続します。
片方がレシーバ、もう片方がコントローラを選びます。
コントローラが何か指示を出した時、WebSocketにその指示を流し、サーバが送り手以外の接続している端末に送ります。
レシーバはその指示を解読し、ニコニコ動画を制御します。

サーバ側のコード1つ、クライアント側のコード1つ、レシーバ用の拡張機能1つを作ります。

実際に作ってみる

node.jsをインストールしましょう。僕は0.4.9を使いました。
次にnpmをインストールして、expressとsocket.ioをインストールしましょう。socket.ioは0.6.17を使いました。

いよいよ本体です。
まずは、操作画面を作ります。
操作画面は下のような感じにしました。

第一形態

最終形態：コントローラ

最終形態：レシーバ

index.html(一部) index.html(フル)

操作画面が完成しました。

お次にブラウザの制御を行います。しかしどのように制御しましょう？
ただ単にウインドウを開くだけなら簡単なのですが、今回は既に開いているタブにスクリプトを注入しなければなりません。
そこで、簡単なChrome拡張を作りました。

ソースコードは以下の1つだけです。
background.html(一部) background.html(フル)

このコードが何をしているかの前に、レシーバの仕様について。

レシーバが何かをソケットから受信した時、URLのhashに、受信したものをくっつけます。
例：

http://localhost:12000/#receive
 ↓ { type: 'aaa' } という情報を受信
 URLが http://localhost:12000/#receive/{type:'aaa'} となったのち、http://localhost:12000/#receive に戻る

なぜJSONにしようとしたかは半年前の僕に聞いてください。
とにかく、情報を受信すると、このようにhashが変化します。

ここで、先程作った拡張機能の出番です。
タブが更新されたときに、登録したコールバック関数が呼び出されます。
これは、hashが変わっただけでも呼び出されます。これで受信した命令を取得します。
そこからあとは、ニコニコ動画を開いているタブを探して、再生したり一時停止したりするコードを注入するだけです。

サーバ側のコードは以下のとおりです。
server.js ただ単に送られてきたものを送り返すだけです。

動かしてみる

実際に動かしてみましょう。

node server.js

おー動いてます動いてます！！
雑な実装ですが、きちんとiPod touchからも操作できてます！！
ホントは動画でも撮りたかったのですが、手頃な三脚がなかったので断念しました。

おわりに

Advent Calendar向けの記事ではなかったかもしれません… 反省。

Chrome拡張の所が少し厄介でしたが、WebSocket自体は非常に簡単に扱うことが出来ました。
この記事を見て、ひとりでも多くの方がWebSocketやnode.jsに興味を持っていただければと思います。