橋本商会

一つ前の記事で書いたRocketIOのJSライブラリを内蔵した。
JSとHTMLだけでRubyのLindaに参加できるようになった。

shokai/sinatra-rocketio-linda · GitHub


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


使い方
内部でRocketIOを使っているので、ioインスタンスをLindaのコンストラクタに渡せばwebsocket/cometの適当な方で接続してくれる。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script src="/linda.min.js"></script>

var io = new RocketIO().connect("http://example.com");

var linda = new Linda(io);



var ts = new linda.TupleSpace("calc");



io.on("connect", function(){

  alert(io.type + " connect!! " + io.session);

  ts.write([1, 2, 3]);

});

試しに、研究室の明るさセンサが出しているタプルを読んでWebページの背景色として表示してみた。
部屋が明るいとページも明るくなる。
JSちょっと書くだけでサーバーから毎秒センサー値が送られてきて楽しい。
http://sho.masuilab.org/light/

ソースコード
https://github.com/shokai/linda-light-sensor-webpage

Webブラウザ拡張等からRocketIOのサーバーに接続したい時などに使う。


RocketIOと同じリポジトリにある。
shokai/sinatra-rocketio · GitHub


ダウンロード
rocketio.js
rocketio.min.js


connect関数に接続先のURLを渡せば勝手にwebsocketかcometで接続してくれる。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script src="/rocketio.min.js"></script>

var io = new RocketIO().connect("http://example.com");



io.on("connect", function(){

  alert(io.type + " connect!! " + io.session);

});

あとは使い方は同じ。


これを使うときは、Sinatra側でcometのクロスドメインを許可しておく。

config.ru

require 'sinatra'

require 'sinatra/rocketio'

set :cometio, :allow_crossdomain => true

set :rocketio, :websocket => true, :comet => true # enable WebSocket and Comet



run Sinatra::Application

諸事情あって、iframeの中身をフレーム外側のページからJavaScriptでスクロールできるのを作った。
ふつうは別ドメインのページをiframeに読み込むとスクロールできないんだけど、（marginに負の値を入れたりして）iframeごと上下左右に動かしたり、iframeの外側にbox要素2つ付けてはみだした部分を表示しないようにcssでなんか色々やったりしたらそれらしい物ができた。

デモ XFrame.js

shokai/xframe.js · GitHub


使い方は簡単である

js読み込んで

<script src="xframe.js"></script>

XFrameを出したい箱を作って

<div id="tv"></div>

読み込む

var xframe = new XFrame("div#tv");

xframe.load("http://shokai.org");

あとは相対スクロールしたり絶対位置指定したりできる

xframe.scrollX(10);

xframe.scrollY(100);

xframe.top = 200;

xframe.left = 50;

マウスによるスクロールを許可するかどうかも決めれる

xframe.mouseScroll = true;

xframe.mouseScroll = false;

XFrame自体の大きさは外側のdivにピッタリになるようにできているので、
この例だと<div id="tv">にcssでwidthやheight付ければサイズ決められる。

無茶っぽい実装だけど不思議と主要なブラウザでは動いちゃった。（safari, firefox, chrome, iOS, Android）
でも発想としては昔のFlashなんかでよく使うような方法だと思う。

フッターにJS書いて消した

<script type="text/javascript">

window.addEventListener("load", function(){

  var pres  = document.getElementsByTagName("pre");

  for(var i = 0; i < pres.length; i++){

    var pre = pres[i];

    pre.innerHTML = pre.innerHTML.replace(/<br>/gi, "");

  }

}, false);

</script>

このblogではgoogle-code-prettifyでコードに色つけてるんだけど
preタグの中でも改行をbrタグに変換してて、1行開いてしまうので消した。


あとblogの見た目を変えた。
テンプレをアップデートしてもカスタムした差分をgitで取ってあるからパッチ当てれるだろ・・と思ってアップデートしたら、templateディレクトリごと消滅して.phpだけしか残っていなかった。
それで色々消えたので違うテンプレートにした。

RocketIOではevent_emitterという（node.jsのを参考にして作った）イベント管理機構を使っている（Ruby用、JavaScript用）


event_emitterの全てのイベントを取得する手段がある


Ruby

user.on :* do |event_name, args|

  puts event_name  # 呼び出されたイベント名

  p args

end

JavaScript

user.on('*', function(event_name, data){

  console.log(event_name + ' was called');

  console.log(data);

});

RocketIOでも、これを使っているので

Sinatra::RocketIO.on :* do |event_name, args|

  puts "#{event_name} - #{args.inspect}"

end

とするとサーバー側で起こったイベント全部取れるし

var io = new RocketIO().connect();

io.on("*", function(event_name, args){

  console.log(event_name);

  console.log(args);

});

これでクライアント側のイベント全部取れる。


関係ないクライアントにデータ送信してるかも、とか、余計なイベント送ってるかも等の調査に便利。