遠隔地のチョロQを操縦する方法 with JavaScript, AJAX, Rails, Gainer, Webカメラ, and USTREAM.TV

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

遠隔地のチョロQ(キューステア)をUSTREAM.TVのストリーミングビデオで見ながら、Webブラウザ上でのキーボード操作で操縦できるWebアプリを作ってみました。以下、その仕組みについて詳しく解説していきます。

チョロQ(キューステア)操縦Webアプリの動画

動作している様子と仕組みの概要については、以下の動画を見るのがてっとりばやいかも。

http://jp.youtube.com/watch?v=-n3XV6GGdWY 

http://www.nicovideo.jp/watch/sm2432398 

チョロQ(キューステア)Webアプリ概要図

ustream.tv

ustream.tv 

WebカメラとWebブラウザだけで動画配信できてしまうWebサービスです。今回はこのサービスを動画中継に使用しました。

Gainer 

GAINER.cc

USBと電子部品の橋渡しをしてくれるI/Oモジュール。FlashやRubyなどから電子部品を簡単に扱えるようになります。今回はミニリレーの制御に使用しています。

Gainerについては以下のショップで購入すると良いかもしれません。

使用方法については、以下の書籍が非常に参考になります。

http://rcm-jp.amazon.co.jp/e/cm?t=ateamkbmj-22&o=9&p=8&l=as1&asins=4861672015&fc1=000000&IS2=1&lt1=_blank&lc1=0000FF&bc1=000000&bg1=FFFFFF&f=ifr

ミニリレー

電磁石を用いて電気的にスイッチをON/OFFする部品。今回は赤外線リモコンの制御に使用しています。

チョロQ(キューステア)

チョロQ(キューステア)

付属の赤外線リモコンで制御できるチョロQ(キューステア)。今回はこれを操縦します。 

Amazonでも購入することができます。

http://rcm-jp.amazon.co.jp/e/cm?t=ateamkbmj-22&o=9&p=8&l=as1&asins=B000WZ9MDY&fc1=000000&IS2=1&lt1=_blank&lc1=0000FF&bc1=000000&bg1=FFFFFF&f=ifr

Webアプリ動作環境

動作環境は MacOSX 10.5 ですが、

rubyとgainerの接続ができれば、他のOSでも動作すると思います。 

チョロQ(キューステア)-Gainer接続の参考書籍

GainerとチョロQ(キューステア)の接続方法については下記の書籍が詳しいです。

http://rcm-jp.amazon.co.jp/e/cm?t=ateamkbmj-22&o=9&p=8&l=as1&asins=4861671655&fc1=000000&IS2=1&lt1=_blank&lc1=0000FF&bc1=000000&bg1=FFFFFF&f=ifr

Rails config/environments/development.rb

以下、ソースについて解説していきます。 

 config/environments/development.rb あたりの最後に以下のような記述を追加してください。require ‘gainer’

$gainer = Gainer::Serial.new(‘/dev/cu.usbserial-A2002mcq’)
$gainer.digital_output = 0xf
sleep(1)
$gainer.digital_output = 0
sleep(1)require ‘gainer’ は、rubyからgainerを扱うためのgemです。gem install しておいてください。 

Rails app/controllers/top_controller.rb

 require ‘gainer’

class TopController < ApplicationController
  def frontleft
    $gainer.digital_output[0] = false
    $gainer.digital_output[1] = true
    $gainer.digital_output[2] = false
    $gainer.digital_output[3] = true
  end

  def front
    $gainer.digital_output[0] = false
    $gainer.digital_output[1] = true
    $gainer.digital_output[2] = true
    $gainer.digital_output[3] = true
  end

  def frontright
    $gainer.digital_output[0] = false
    $gainer.digital_output[1] = true
    $gainer.digital_output[2] = true
    $gainer.digital_output[3] = false
  end

  def stop
    $gainer.digital_output[0] = true
    $gainer.digital_output[1] = true
    $gainer.digital_output[2] = false
    $gainer.digital_output[3] = false
  end 

  def backleft
    $gainer.digital_output[0] = true
    $gainer.digital_output[1] = false
    $gainer.digital_output[2] = false
    $gainer.digital_output[3] = true
  end

  def back
    $gainer.digital_output[0] = true
    $gainer.digital_output[1] = false
    $gainer.digital_output[2] = true
    $gainer.digital_output[3] = true
  end

  def backright
    $gainer.digital_output[0] = true
    $gainer.digital_output[1] = false
    $gainer.digital_output[2] = true
    $gainer.digital_output[3] = false
  end
endgainerのIOポートから入出力するためのgemがあり、これを使うと上記のように簡単にgainerを扱うことができます.l

difital_output[0] = true などとすることで、gainerのデジタル出力を操作することができます。 

Rails app/views/top/index.rhtml

<%= javascript_include_tag :defaults %>

---

<%= link_to_remote(“left”, :url => { :action => “frontleft” }) %>	<%= link_to_remote(“front”, :url => { :action => “front” }) %>	<%= link_to_remote(“right”, :url => { :action => “frontright” }) %>
<%= link_to_remote(“left”, :url => { :action => “backleft” }) %>	<%= link_to_remote(“back”, :url => { :action => “back” }) %>	<%= link_to_remote(“right”, :url => { :action => “backright” }) %>

ustreamのブログパーツを張りつけて映像配信を実現しています。

JavaScriptでキーイベントを取得して、AJAXでサーバー側にリクエストを飛ばしています。なのでustreamによる映像配信がページ遷移で途絶えることはありません。

Railsのlink_to_remote()を用いたリンクも用意しています。

USB -> Gainer -> ミニリレー -> 赤外線リモコン 回路

 回路については先ほどの書籍と、以下の写真を参考にしてみて下さい。

使用しているリレーは941H-2C-5Dというもの。

秋葉原の秋月電子にて1個100円で購入しました。

ミニリレー -> チョロQ(キューステア)赤外線リモコン

リモコン側については以下のようにハンダ付けしています。

キーボード -> JavaScript -> AJAXの様子をFireBugで確認

FireBugを使うと、AJAXによるリクエストの様子が見れます。

AJAX -> Rails をログで確認

操縦中のサーバー側のログについては、こんな感じ。

チョロQ(キューステア) with JavaScript, AJAX, Rails, Gainer, Webカメラ, and USTREAM.TV まとめ

以上、WebブラウザでチョロQ(キューステア)を操縦する仕組みをGainerとRailsを使用して作ってみました。

この仕組みを使えば、色々と楽しそうなことができそうですね。

他にも面白いネタを考えています。次回もお楽しみに!

個人ブログ : 拡張現実ライフ