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

ランプの中身(Ruby on Railsのシステム開発): ランプの中身(Ruby on Railsのシステム開発)では、株式会社ケイビーエムジェイのRuby on Railsエンジニアが蓄積したノウハウを公開しています。Ruby on Railに関する技術解説や実践的なノウハウなど、開発現場の技術に則したコンテンツを随時追加していきます。初心者の方でもわかりやすい技術解説を心がけています。リクエスト、ご質問も受け付けいますので、ご気軽にコメントを記述して下さい。

< ケータイWebサイト... | メイン | Rubyを使ってPaSoRi経由でSui... >

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

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

チョロQ キューステア JavaScript AJAX Rails Gainer Webカメラ USTREAM.TV

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

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

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

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

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

ustream.tv

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

Gainer

GAINER.cc

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

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

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

ミニリレー

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

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

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

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

Webアプリ動作環境

動作環境は MacOSX 10.5 ですが、

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

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

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

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
end

gainerのIOポートから入出力するためのgemがあり、これを使うと上記のように簡単にgainerを扱うことができます.l

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

Rails app/views/top/index.rhtml

function keyput(event){
          switch(event.keyCode){
                case 81: key_q(); break;
                case 87: key_w(); break;
                case 69: key_e(); break;
                case 90: key_z(); break;
                case 88: key_x(); break;
                case 67: key_c(); break;
        }
}

function keyputup(event){
new Ajax.Request('/top/stop', {asynchronous:true, evalScripts:true, parameters:'authenticity_token=' + enc
odeURIComponent('5c2a0299f9f219731bb72866e9831ce211999fad')}); return false;
}

document.onkeydown=keyput;
document.onkeyup=keyputup;

</script>
</head>

<hr>

<table>

<tr>
<td><%= link_to_remote("left", :url => { :action => "frontleft" }) %></td>
<td><%= link_to_remote("front", :url => { :action => "front" }) %></td>
<td><%= link_to_remote("right", :url => { :action => "frontright" }) %></td>
</tr>

<tr>
<td><%= link_to_remote("left", :url => { :action => "backleft" }) %></td>
<td><%= link_to_remote("back", :url => { :action => "back" }) %></td>
<td><%= link_to_remote("right", :url => { :action => "backright" }) %></td>
</tr>

</table>
</body>

</html>

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

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

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

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

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

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

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

チョロQ キューステア JavaScript AJAX Rails Gainer Webカメラ USTREAM.TV

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

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

チョロQ キューステア JavaScript AJAX Rails Gainer Webカメラ USTREAM.TV

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

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

チョロQ キューステア JavaScript AJAX Rails Gainer Webカメラ USTREAM.TV

AJAX -> Rails をログで確認

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

チョロQ キューステア JavaScript AJAX Rails Gainer Webカメラ USTREAM.TV

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

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

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

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

コメント (0) |トラックバック (1)

トラックバック URL

トラックバック一覧

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

おお、おもしろい。同じ会社にこんなハッカーがおるとは。すげぇ、びっくりだ。ついでに、Remote Control Wrapperを使ってApple Remote経由でチョロQが動かせると楽しいかも... [続きを読む] posted from すめるまん Broken Diary 2008.03.05 01:07

この記事にコメントする

Ruby on Rails Summer Festival 2008開催決定！！

ウェブキャリアは"Webの世界で働く人々"の転職を支援します。

TOPICS

2008/06/25
「ZD Net Builder」の連載記事です。第四回は「Rubyでどう書く？：重複したRSSをまとめる」が掲載されました。

2008/05/30
「ZD Net Builder」の連載記事です。第三回は「Rubyでどう書く？：Rubyで特定URLの画像パス一覧を表示する」が掲載されました。

2008/05/07
「ZD Net Builder」に連載を始めました。第二回は「Rubyでどう書く？：RubyでPDF履歴書を作成する」が掲載されました。

2008/04/24
「アットマーク・アイティ」に『 Rubyを使ってPaSoRi経由でSuicaの乗車履歴を取得し、GoogleMapsやGoogleEarthで表示する』が掲載されました。

RoR最新ブログ一覧

全体のRoR最新ブログ一覧

ssatoのアーカイブ

プロフィール

ssato
佐藤伸吾(akio0911)です。2008/01からWeb業界に入りました。フィジカルコンピューティングやユビキタスコンピューティングに興味があります。

Ruby on Railsのシステム開発｜技術解説ブログ『DoRuby!』