0

プログラミング方法論 講義資料

増井先生のプログラミング方法論という授業(春学期月曜2限)におじゃまして、教育実習ということで3回授業させていただきました。
gdgdなところもあったけど実習が妙にみんな楽しそうだったからまあいいか。
フルで1コマ間を持たせるのは準備だけで消耗しますね・・


講義資料です。







実習の資料です

橋本商会 » JavaScriptとRubyによるWeb版Linda入門(1)
橋本商会 » JavaScriptとRubyによるWeb版Linda入門(2)
橋本商会 » JavaScriptとRubyによるWeb版Linda入門(3)

0

JavaScriptとRubyによるWeb版Linda入門(3)

(第13回プログラミング方法論の演習資料です)

前:JavaScriptとRubyによるWeb版Linda入門(2)


今日のテーマは「別のパソコンに接続されたArduinoマイコンを、自分のパソコンから使う」です。
Web版Lindaを使えばインターネット上にセンサーデータを流し、別のマシンとやりとりするのも簡単です。


必要なものをインストール

(第二回を完遂した人は必要ありません)

まずLindaを使うのに必要なライブラリをgemコマンドでインストールします。
Terminal.appに打ち込んでください。
gem install sinatra-rocketio-linda
MacのデフォルトRubyを使っている場合、コマンドの頭にsudoをつける必要があります。
sudo gem install sinatra-rocketio-linda
ネットワークとPCの性能しだいで数分かかります。


センサーデータ

次にセンサーデータを取得します。

下のいずれかからセンサーデータが取得できます。
http://linda.masuilab.org/delta/sensor
http://linda.masuilab.org/iota/sensor
http://linda.masuilab.org/shokai/sensor
タプルスペースdeltaとiotaは増井研究室の部屋の名前です。(建物の名前です)
実際に部屋に付いているセンサーの値が読めます。


Arduinoに明るさと温度センサーがついていて、https://github.com/shokai/linda-arduino-sensorのプログラムでLindaサーバーに毎秒書き込んでいます。
今回は授業時間が無いので電子工作はしませんが、電子工作側の情報はGitHubに書いてあるので興味がある人は見てみてください。
(実習では私のPCからと、増井研のdelta/iota部屋からのセンサー値を使います)
2013-05-27 19.43.10



とりあえずセンサー値を読んでみましょう

require 'rubygems'
require 'sinatra/rocketio/linda/client'

linda= Sinatra::RocketIO::Linda::Client.new "http://linda.masuilab.org"
ts = linda.tuplespace["delta"]

linda.io.on :connect do
puts "connet!!"
puts linda.io.type

ts.watch ["sensor"] do |tuple|
p tuple
end
end

linda.wait

ruby main.rb

こういう結果が出てくればOKです。
connet!!
websocket
["sensor", "light", 130]
["sensor", "temperature", 15.9]
["sensor", "light", 131]
["sensor", "temperature", 16.0]
["sensor", "light", 130]


明るさだけを読む

温度と明るさのセンサー値が流れてきていますが、とりあえず温度は必要ありません。
明るさのみを取得するには[“sensor”,”light”]でread/watch/takeすれば良いです。

require 'rubygems'
require 'sinatra/rocketio/linda/client'

linda= Sinatra::RocketIO::Linda::Client.new "http://linda.masuilab.org"
ts = linda.tuplespace["delta"]

linda.io.on :connect do
puts "connet!!"
puts linda.io.type

ts.watch ["sensor", "light"] do |tuple|
p tuple
end
end

linda.wait

“temperature”が無くなっていればokです。


明るくなった・暗くなったと通知する

最後に、明るくなったり暗くなったりしたら音声読上げしてみましょう。
これだけで遠くの部屋の雰囲気がわかるシステムが作れます。

わかりやすくするために、タプルスペース名を”delta”から”shokai”に変更してください。
今まではSFCのデルタ棟にある増井研の部屋の明るさを読んでいましたが、”shokai”にすると私のPCに接続しているセンサーが読めるようになります。
# -*- coding: utf-8 -*-
require 'rubygems'
require 'sinatra/rocketio/linda/client'

linda= Sinatra::RocketIO::Linda::Client.new "http://linda.masuilab.org"
ts = linda.tuplespace["shokai"]

last = 0
linda.io.on :connect do
puts "connet!!"
puts linda.io.type

ts.watch ["sensor", "light"] do |tuple|
sensor = tuple[2].to_i
puts sensor
if last-sensor > 20
puts "暗くなった"
system "say 暗くなった"
elsif sensor-last > 20
puts "明るくなった"
system "say 明るくなった"
end
last = sensor
end
end

linda.wait

センサーに光を当てたり隠したりして、Rubyが喋ればokです。

0

JavaScriptとRubyによるWeb版Linda入門(2)

(第12回プログラミング方法論の演習資料です)

前:JavaScriptとRubyによるWeb版Linda入門(1)
次:JavaScriptとRubyによるWeb版Linda入門(3)


前回作成したチャットに、自分のMac上のRubyからも参加できるようにしましょう。
参加するといっても、せっかくなのでただのチャットでは面白くありません。

RubyでLindaチャットのテキストを音声読上げするソフトを作ります。


まずLindaを使うのに必要なライブラリをgemコマンドでインストールします。
Terminal.appに打ち込んでください。

gem install sinatra-rocketio-linda
MacのデフォルトRubyを使っている場合、コマンドの頭にsudoをつける必要があります。
sudo gem install sinatra-rocketio-linda
ネットワークとPCの性能しだいで数分かかります。


前回のWebチャットプログラムが無い場合

大丈夫です。LindaはWebページ上でデータをすべて見れます。
チャットの発言を見る
http://linda.shokai.org/room1/chat

チャットに発言する
http://linda.shokai.org/room1/chat/てすと
http://linda.shokai.org/room1/chat/こんにちは

プログラムを書く、Lindaに接続

今回はプログラムファイルを1つしか作らないので、ディレクトリを作る必要はありません。好きな場所で作業して大丈夫です。

main.rbというファイルを作り、まずLindaに接続する所まで書いてみましょう。
第一回のJavaScriptのプログラムとかなり似ています。
接続先のタプルスペースはchatと同じです。

main.rb
require 'rubygems'
require 'sinatra/rocketio/linda/client'

linda = Sinatra::RocketIO::Linda::Client.new "http://linda.shokai.org"
ts = linda.tuplespace["room1"]

linda.io.on :connect do
puts "connect!!"
puts linda.io.type
end

linda.wait

実行します
ruby main.rb

connect!!
websocket
接続できた事が確認できたら、ctrl+c で終了します。


Lindaからchatデータを受け取る

タプルスペースに書き込まれたchatの値を読み出して、表示するコードを追加しました。
require 'rubygems'
require 'sinatra/rocketio/linda/client'

linda = Sinatra::RocketIO::Linda::Client.new "http://linda.shokai.org"
ts = linda.tuplespace["room1"]

linda.io.on :connect do
puts "connect!!"
puts linda.io.type

ts.watch ["chat"] do |tuple|
puts tuple[1]
end
end

linda.wait

実行すると、Webブラウザ側で入力したチャットがターミナルに表示されます。
ruby main.rb



音声読上げする

Macには音声読上げソフトが入っています。
say はい
で「はい」と読み上げられるはずです。
読みあげられない場合は、[システム環境設定]→[音声入力と読み上げ]→[テキスト読み上げ]→[システムの声]を日本語(kyoko)に変更してみましょう。

main.rb に音声読上げするコードを追加しました。外部プログラムsayを実行するので、入力値を洗浄しています。
require 'rubygems'
require 'sinatra/rocketio/linda/client'

linda = Sinatra::RocketIO::Linda::Client.new "http://linda.shokai.org"
ts = linda.tuplespace["room1"]

linda.io.on :connect do
puts "connect!!"
puts linda.io.type

ts.watch ["chat"] do |tuple|
msg = tuple[1].gsub(/'/, '') # 入力値を洗浄
puts msg
system "say '#{msg}'" # 音声読上げ
end
end

linda.wait

ruby main.rb
しゃべればokです。

チャットに発言できるようにする

最後に、LindaのタプルスペースにRubyからも書き込めるようにします。

require 'rubygems'
require 'sinatra/rocketio/linda/client'

linda = Sinatra::RocketIO::Linda::Client.new "http://linda.shokai.org"
ts = linda.tuplespace["room1"]

linda.io.on :connect do
puts "connect!!"
puts linda.io.type

ts.watch ["chat"] do |tuple|
msg = tuple[1].gsub(/'/, '')
puts msg
system "say '#{msg}'"
end
end

linda.wait do
line = STDIN.gets.strip
ts.write ["chat", line] if !line.empty?
end

ruby main.rb


やってみよう

音声読み上げ以外にも、何かやってみましょう。
例えば「お腹すいた」とチャットに流れてきたらピザを注文する等

1

JavaScriptとRubyによるWeb版Linda入門(1)

(第11回プログラミング方法論の演習資料です)

次:JavaScriptとRubyによるWeb版Linda入門(2)


Lindaは共有メモリを用いた分散並列プログラミングのしくみです。
最近このblogでよく書いている、Ruby上のLinda実装を使う解説です。

Ruby上に並列言語拡張Lindaを実装してWebSocket/Cometで使えるようにした

Web版LindaはWebSocketとCometで使えるようになっているので、Ruby以外の言語でも接続可能です。
JavaScriptは公式のライブラリが配布されています。AndroidJava版は馬場君が作っています。


とりあえず、一番簡単なJavaScriptでのLinda入門をしてみましょう。


Webブラウザで動くチャットを作る

JavaScriptとLindaでチャットを作ってみましょう。

完成形は http://dev.shokai.org/linda/chat/
です。
JavaScript版Lindaライブラリを使うと、サーバーを全く実装せずにHTML+JavaScriptだけでWebブラウザ用チャットが作れます。


プロジェクトのディレクトリを作る


Terminal.appを開いてディレクトリを作ります。
% mkdir linda-chat


linda.min.jsのダウンロード


https://github.com/shokai/sinatra-rocketio-linda#javascript-lib-for-browser
から、ライブラリ(linda.min.js)をDLします。

linda-chatディレクトリに置きます。
ちなみにlinda.jsとlinda.min.jsの違いは圧縮されているかどうかだけです。


jquery.jsのダウンロード

Download jQuery | jQuery
同様にjQueryというライブラリもダウンロードします。

linda-chatディレクトリに置きます。


HTMLを書く

index.htmlを作ります
<html>
<head>
<meta charset="UTF-8" content="text/html" http-equiv="Content-Type">
</head>
<body>
<h1>linda chat</h1>
<input type="text" id="message" value="hello" size="80">
<input type="button" id="btn_send" value="send">
<div id="log"></div>
<script src="./jquery-2.0.2.min.js"></script>
<script src="./linda.min.js"></script>
<script src="./main.js"></script>
</body>
</html>
jquery.js、linda.jsそしてmain.jsが読み込まれています。

JavaScriptを書く

main.jsを作ります。
がんばって写しましょう。
var io = new RocketIO().connect("http://linda.shokai.org");
var linda = new Linda(io);
var ts = new linda.TupleSpace("room1");

io.on("connect", function(){
alert(io.type+" connect");
});

ブラウザで開く

index.htmlをブラウザで開きます。
lindaが接続出来れば、このように「connect」と表示されます。

表示されなければSafariの場合[開発]→[エラーコンソールを表示]すると原因がわかると思います。


送信ボタンにイベント追加

main.jsに送信ボタンのイベントを追加します。
ボタンを押せば、テキスト欄に入力した文字が表示されるようになるはずです。
var io = new RocketIO().connect("http://linda.shokai.org");
var linda = new Linda(io);
var ts = new linda.TupleSpace("room1");

io.on("connect", function(){
alert(io.type+" connect");
});

$(function(){
$("#btn_send").click(function(){
var m = $("#message").val();
alert(m);
});
});



タプルスペースに送信する

ts.writeします。
var io = new RocketIO().connect("http://linda.shokai.org");
var linda = new Linda(io);
var ts = new linda.TupleSpace("room1");

io.on("connect", function(){
alert(io.type+" connect");
});

$(function(){
$("#btn_send").click(function(){
var m = $("#message").val();
ts.write(["chat", m]);
});
});


送信できているか確認する


Lindaサーバーのwebサイト上で確認できます。
http://linda.shokai.org/room1
http://linda.shokai.org/room1/chat


チャットを受信する

接続イベント内でwatchします。タプルスペースからのデータ読み出しは「配列の前方一致」なので、[“chat”]でwatchしていれば[“chat”,”hello”]でも[“chat”,”こんにちは”]でも読み出せます。
var io = new RocketIO().connect("http://linda.shokai.org");
var linda = new Linda(io);
var ts = new linda.TupleSpace("room1");

io.on("connect", function(){
alert(io.type+" connect");

ts.watch(["chat"], function(tuple){
$("#log").prepend(
$("<p>").text(tuple[1])
);
});
});

$(function(){
$("#btn_send").click(function(){
var m = $("#message").val();
ts.write(["chat", m]);
});
});


ブラウザ間でチャットできているか確かめる

2つ開いて確認してみましょう


やってみよう

下のページに、増井研究室の部屋の明るさセンサーの値が毎秒流れてきます
http://linda.masuilab.org/delta/sensor/light
webブラウザで取得してみましょう

ヒント:
JavaScript上の方、接続先サーバーを変更する
タプルスペースは”delta”
[“sensor”,”light”, 数字]というタプルが流れてくる