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

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

佐藤伸吾(akio0911)のデジタルライフハック(Ruby
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アプリの動画

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

 

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

 

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

 

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

 

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

 

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

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

ustream.tv

ustream.tv 

 

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

Gainer 

GAINER.cc 

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

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



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

ミニリレー

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

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

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

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

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

Webアプリ動作環境

動作環境は MacOSX 10.5 ですが、

rubygainerの接続ができれば、他の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

<html> <head> <%= javascript_include_tag :defaults %>

<script type="text/javascript">

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 key_q(){
           new Ajax.Request('/top/frontleft', {asynchronous:true, evalScripts:true, parameters:'authenticity_token='
 + encodeURIComponent('5c2a0299f9f219731bb72866e9831ce211999fad')}); return false;
}
function key_w(){
         new Ajax.Request('/top/front', {asynchronous:true, evalScripts:true, parameters:'authenticity_token=' + enc
odeURIComponent('5c2a0299f9f219731bb72866e9831ce211999fad')}); return false;
}
function key_e(){
           new Ajax.Request('/top/frontright', {asynchronous:true, evalScripts:true, parameters:'authenticity_token=
' + encodeURIComponent('5c2a0299f9f219731bb72866e9831ce211999fad')}); return false;
}
function key_z(){
           new Ajax.Request('/top/backleft', {asynchronous:true, evalScripts:true, parameters:'authenticity_token='
+ encodeURIComponent('5c2a0299f9f219731bb72866e9831ce211999fad')}); return false;

 

function key_x(){
           new Ajax.Request('/top/back', {asynchronous:true, evalScripts:true, parameters:'authenticity_token=' + en
codeURIComponent('5c2a0299f9f219731bb72866e9831ce211999fad')}); return false;
}
function key_c(){
           new Ajax.Request('/top/backright', {asynchronous:true, evalScripts:true, parameters:'authenticity_token='
 + encodeURIComponent('5c2a0299f9f219731bb72866e9831ce211999fad')}); return false;
}

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>

<body>
<embed width="416" height="340" flashvars="autoplay=true" src="http://ustream.tv/SxQwT0VkmQeydBJKd2fj1pniqS2xUiuz.us
c" type="application/x-shockwave-flash" allowfullscreen="true" />

<embed width="563" height="266" type="application/x-shockwave-flash" flashvars="channel=#gainer&server=chat1.ustream
.tv" pluginspage="http://www.adobe.com/go/getflashplayer" src="http://ustream.tv/IrcClient.swf" allowfullscreen="tru
e" />

<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による映像配信がページ遷移で途絶えることはありません。

Railslink_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(キューステア)を操縦する仕組みをGainerRailsを使用して作ってみました。

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

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

 


 

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

ブックマークに追加する Subscribe with livedoor Reader あとで読む

トラックバック 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

この記事にコメントする

ニックネーム:
メールアドレス:
URL:


KBMJのWebソリューション
Ruby on Rails Summer Festival 2008開催決定!!

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最新ブログ一覧

プロフィール

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

ブログの購読

RSS

timelog
株式会社ケイビーエムジェイロゴ