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); }); });