こんにちは、河野です。

11月2日に社内で行われたハッカソンイベント「Synergy! Code Jam」に参加しました。イベントの概要は鈴木さんが先に書いてますので割愛しますが、僕は2位を獲得したアイパーオリンピックチームに参加していました。

作ったもの

アイパーオリンピックチームは、新技術を使って何かやってみるというテーマのチームでした。
最初はiPhoneをリモコンとしてPC上でゲームを行うというアイデアでしたが、最終的にはゲームまではたどり着かず、プレゼンテーションの操作をするツールへ落ち着きました。

と書きましたが、実は当初からプレゼンテーションの操作をする辺りが着地点かなとチームでは目論んでいて、余裕があればゲームの方まで手をつけようという感じでした。

使ったもの

ちょっと最終的なものとは異なりますが、構成は以下のようになりました。それぞれが触ってみたいというものを盛り込んでみた結果です。

iPhone

iPhoneのSafari上で発生するタッチイベント、加速度センサーを使用した擬似的なシェイクイベントを取得できるようにしています。イベントを元に、サーバーへメッセージを送信しています。サーバーとの通信はWebsocketを使用しました。

Server

dotCloudを使用して構築しました。Node.jsを用いて、websocketの通信ができるようにしています。iPhoneから送信されてきたメッセージを、そのままPCへと送信します。

PC

Serverから送信されてきたメッセージを元に、特定のウィンドウへキーイベントを送信します。（今回こちら側は全く触らなかったのであまり詳しくありません…）

この構成のうち、僕は主にiPhoneとServer間を担当していました。

実装の仕方

構成の通りiPhoneとServerについて言えば、そんなに難しいものでもありません。

サーバは、Node.jsでExpressというライブラリを使用してHTMLの配信を行い、WebsocketでiPhoneからの通信を受け付けることができました。今回は複雑な処理はPCに任せるという前提でしたので、認証もせず、受けたメッセージをマルチキャストするという、単純なエコーサーバといったところです。
最初はSocketIOを使っていましたが、試行錯誤があって最終的には使いませんでした。

iPhone側は、jQueryを使用してDOM操作やイベントハンドリングを行いました。
イベントとメッセージのマッピングは以下の通りです。

• 上フリック→UP
• 下フリック→DOWN
• 左フリック→NEXT
• 右フリック→PREV
• シェイク→NEXT
• タッチしたままシェイク→PREV
• 2本指での上下スクロール→フリック感度の調整

jQueryには慣れていたのと、シェイクのイベント処理はgShakeというプラグインを使用したので結構簡単にできました。上下左右のフリックは、タッチスタートとタッチエンドのイベント間の移動距離で擬似的に実現しました。
また、タッチのイベントハンドリングは何個触ってるかを取得できるので、本数に応じた挙動も簡単にできました。

上手くいかなかったこと

事前準備としてdotcloudを触りはじめた時ですが、SSHの認証が全然通らなくてデプロイが全然できませんでした。色々と調べているうちに寝落ち…目覚めたときにリトライしたら上手くいった！ということがありました。

また、各自そこそこ動いてたんですが、そうは問屋が卸さないわけで、PCとdotCloudの接続が上手く行かなかったりして、結局SocketIOは採用せず。PC側ではもっと色々と苦労があったと思いますが、iPhone側はあまり小難しいことがなくて良かったです。

最終的にどうなったか

最初に書いた通りなんですが、iPhoneでのイベントをサーバーへとメッセージングし、サーバーはそれを中継、PC側ではFlashのプレゼンテーション（Preziというサイトを使用しました）へ、キーイベントとして送出できるようになりました。当然、当日のプレゼンもこれを使って行いました！

今後どうするか

最近はウェブベースのプレゼンもあるので、ウェブのみで完結するようにできたら良いかなぁと思っています。プレゼン配信サーバー兼Websocketサーバーみたいな感じかな。

プレゼン配信サーバーにファイルアップロード→iPhoneアクセス用URL発行→プレゼン表示＆iPhone操作が簡潔にできる！

となると嬉しいですね。認証とか、iPhoneの操作の微調整とかまだまだ手をつけるべきところはあると思うので、今回作ったものをブラッシュアップしていきたいなと思います。

最後になりましたが、ハッカソンイベント楽しかったです！