Intelligent Technology's Technical Blog

株式会社インテリジェントテクノロジーの技術情報ブログです。

スマフォでスライド操作 - Robodeck

こんにちは、間藤です。

先日出石のほうでSocket.IOを記事を書いてましたが、以前Socket.IOの面白いサンプルを見つけたことを思い出しました。ネタとしてはだいぶ古いんですがご紹介します。

Robodeck

サンプルの概要

f:id:IntelligentTechnology:20140612150456p:plain

操作するスライドは、PC上のブラウザに表示しておきます。上の図だと2台のPC上でスライドを表示しています。プレゼンなら、このスライドページをプロジェクターでスクリーンに映すような使い方なのでしょうが、例えばタブレット持参の人向けには、手元のタブレットにスライドを表示するなんてこともできるでしょう。このサンプルのスライドは3ページ構成になっていて、画面の両端に表示されるリンクを押下すると、前後のスライドに移動するようになっています。なお、このスライドページに接続すると、WebSocketの接続を行うようになっています。スマフォからは、スライド操作のための別ページにアクセスします。このページに接続しても、WebSocketの接続は確立されません。この画面のボタンを押下すると、Ajaxのリクエストをサーバに送ります。サーバは、このリクエストを受け、WebSocket接続しているクライアントに対して、スライドするようにメッセージを送ります。

仕組みとしてはこれだけです。
なお、

  • サーバはExpress + Socket.io
  • スライド機能はdeck.jsを利用
  • スマフォ用ページ(リモコンページ)にはSencha Touchを利用

というような構成になっています。

動作手順

まず、githubからRobodeckをcloneしますが、本家のコードだとうまく動かなかったので、私のほうでForkして修正をしています。

$ git clone https://github.com/hatena-iti/robodeck.git

cloneできたら作成されたディレクトリに移動して、必要なモジュールをインストールします。Socket.ioもここでインストールされます。

$ npm install

なお、Socket.ioのバージョンが、5月末に1.0に上がったようです。現時点の最新は1.0.4でしたので、私はこのバージョンで動作確認しました。公式サイトを見ると、以前よりも情報が増えたんじゃないかと思います。(以前のサイトをちゃんと見ていたわけではないですが)

サーバを起動します。

$ node app

後は、ブラウザからスライドのページ、リモコンのページにそれぞれ接続すれば、動作確認できると思います。ローカルで確認するならば、

(スライドページ)
http://localhost:1511

(リモコンページ)
http://localhost:1511/x

にアクセスします。

補足

スライドの内容をカスタマイズするなら、views/desktop.jadeを編集します。

また、スライドの機能とは関係ないのですが、Geolocation APIで現在位置を画面右上に表示するようになっています。(なぜこのサンプルにこれを加えたのかはよくわかりませんが。。。)
クライアントサイドで取得した緯度経度をサーバに送信し、サーバはgooglemapsというモジュールを利用して、逆ジオコーディングを行って、結果を各クライアントにブロードキャストします。googlemapsは、その名の通りGoogle Geocoding APIを利用していますので、外部にリクエストを送信します。お使いの環境がプロキシ環境下にある場合は、このモジュールに対してプロキシ設定を行っておく必要があります。本家のコードは、この考慮がなかったので、私の環境ではサーバがこけてしまってました。プロキシ設定を行っていなくてもサーバがこけないように修正してありますが、もし逆ジオコーディングも行うのであれば、環境変数にプロキシ設定を行ってください。

(設定例)
$ export http_proxy="http://username:password@proxy.example.com:8080"