iPhoneをリモコンにしてブラウザの絵を操作

node.jsのデモとしておもしろいのでメモ。
iPhoneの傾きをsocket.ioでサーバーに送って、socket.ioの全てのコネクションと同期させる。
iPhoneの加速度センサーは、Safari上のjavascriptからも利用できるので、javascriptだけでできる。

サーバー

  io.on('connection', function(socket) {
    socket.on('accelerate', function(accel) {
      socket.broadcast.volatile.json.emit('move', accel);
    });
  });

クライアント

回転のアニメーションは、jquery rotate を使いました。

  $(function() {
    var tyome = $('#tyome'),
        defaultLeft = parseInt(tyome.offset().left),
        socket = io.connect(socketIOUrl + '/tyomecon');


    socket.on('move', function(pos) {
      var angle = (parseInt(pos.left) - defaultLeft);
      tyome.css(pos).rotate(angle);
    });

    //tyome.draggable({
    //  drag: function(event, ui) {
    //    var pos  = ui.position,
    //        left = pos.left,
    //        angle = (left - defaultLeft);
    //        
    //    tyome.rotate(angle);
    //    socket.json.emit('accelerate', ui.position);
    //  }
    //});

    // iPhone
    window.addEventListener("devicemotion", function(event) {
      var gravity = event.accelerationIncludingGravity,
          left    = parseInt(tyome.css('left')) || 0,
          top     = parseInt(tyome.css('top')) || 0,
          angle = (left - defaultLeft);

      left += gravity.x;

      cssPos = {
        left: left + 'px',
        top:  top  + 'px'
      };

      tyome.css(cssPos).rotate(angle);
      socket.json.emit('accelerate', cssPos);
    });
  });