橋本商会

11月262013

Lindaによるブラウザ上での分散処理の例

Category: 未分類 | Tags: JavaScript, Linda | Author: shokai

いわゆる分散処理の例を作ってあってsinatra-rocketio-lindaのsampleの中に入れてあったんだけど、blogに書くのを忘れていたので書きます。
センサーのデータを流して受け取る、いわゆる「pub-sub」的な使い方の他にも、Hadoopがやっているようなタスク分散が簡単に書けるよという例です。

実行環境 http://hello-linda.shokai.org
ソースコード https://github.com/shokai/linda-hello-world

というのも昨日wise9さんに取り上げていただいて、そういえば全然サンプルコードとか整備・整理してない事を思い出したので書こうと思った。

PC遠隔操作編の拡張版みたいなやつです。

動かし方（ごく普通に実行）

clientとworkerをそれぞれ開き、「request!」ボタンを押します。
worker側のウィンドウで式がevalで実行されます。

evalなのでclientに「alert(“hoge”)」とか書いてrequestすると、worker側でalertのダイアログがポップアップします。

動かし方（分散実行）

hadoop(map/reduce)がやっているような、仕事を複数のワーカーに分散実行させて結果を一箇所にまとめる処理をブラウザ上のJavaScriptだけで書けます。

まずclientを1つ開きます。
次にworkerを3つ開きます。
clientの「request!」ボタンを押すと、3つのworkerが順番に仕事してくれます。
webブラウザで実行されているので、workerのwebページを手持ちのスマホやタブレットで開けば分散実行に参加できます。

動かし方（仕事を貯めておいて実行）

仕事を貯めておいて、ワーカーが現れるまで待ちます。現れたら一気に実行されます。

まずclientを1つ開き、「requst!」ボタンを連打します。
次にworkerを1つ開くと、今まで溜まっていたrequestが一気に実行されます。

動作原理

3つとも同じコードです。Lindaのtake（削除しつつ読み出し）をうまく使うと、こういう処理が簡単に書けます

Lindaはだれでも読み書きできるタプルスペース（共有メモリ領域）を使った並列処理の実行環境です。

命令はwrite/read/take/watchという4種類しかありません。
writeは書き込み、readはマッチするタプル最新の1個を読み出し、takeはreadしながら削除です。
watchはマッチするタプルがwriteされた瞬間に通知されます。watchはセンサーデータをストリーミングする時などに便利です。

Lindaのタプル読み出しは少し特殊です。
takeとreadは要求しているタプル（データのこと。ArrayかHash）があれば即座に値を読み出しますが、見つからない場合、値が現れるまで待ちます。これが分散実行に使えます。

read/take/watchのマッチングは、「Arrayの前方一致」です。
つまり[“sensor”]は[“sensor”,”light”,20]にマッチするし、[“sensor”,”temperature”, 25]にもマッチします。
[“sensor”,”light”]に範囲を狭めると、[“sensor”,”light”,20]や[“sensor”,”light”, 123]にはマッチしますが、[“sensor”,”temperature”,25]等にはマッチしません。
「Arrayの前方一致」なので、1つ目の要素が”sensor”で2つ目の要素が”light”なタプルにしかマッチしないのです。

タプルの構造によってどんなデータが欲しいかを指定します。

タプルスペースはなんでも入れられるハブです。そこにクライアントをぶら下げるとread/take/watchを駆使してイベント駆動でデータを受け取ると便利だよという事ですね。

ちなみに「だれでも読み書きできる共有メモリ空間」なのですが、Lindaの実装はRubyのwebアプリケーションフレームワーク「Sinatra」のプラグインになっています。
Sinatraでログイン画面とか作れば、特定の人しか書き込みできないようにするとか、ユーザー毎にタプルスペースを分けるとかも可能です。

あとで書く

Lindaでの色々なパターンでのデータの流し方とその例をまとめる

pipeline
pub-sub
req-res
job-queue
broadcast
multisub

8月242013

jQuery.editableでtextarea編集できるようにした

Category: 未分類 | Tags: JavaScript, jQuery, jQuery.editable | Author: shokai

クリックするとinputタグになるのはいいけど、textareaにはできないの？という質問が来たので、実装した。

デモ

こういうところをクリックすると

編集できるようになって

枠外をクリックすると保存される

edit-in-place（その場編集）プラグインはいくつか存在するけど、jQuery.editableは最も使いやすいAPIを出していると思います。
他のは・・あまりカッコよく書けない。

clickしたら編集し、編集終了後の値をコールバックで取得するのはこう書ける。
click以外にもmouseover, dblclick, clickholdなどトリガーは色々設定できる。

$("span#edit").editable("click", function(e){

  alert(e.value);

});

値をチェックして、条件に合わなかったら元の値に戻すこともできる（validatorがわり）

$("span#zip").editable("click", function(e){

  if( !e.value.match(/^\d{3}\-\d{4}$/) ){

    e.target.html(e.old_value);

    alert(e.value + " is not valid zip-code");

  }

});

編集するテキスト以外のDOM要素をトリガーにする事もできる。この場合は横に「編集ボタン」があってそれを押したら編集モードになる。編集中はトリガーになった要素はhide()される。

var option = {trigger : $("input#btn_edit"), action : "click"};

$("span#edit").editable(option, function(e){

  alert(e.value);

});

今回追加したtextarea版はこうやる。type: “textarea”を指定すればtextareaになり、その中は複数行の編集ができる。

var option = {type : "textarea", action : "click"};

$("p#license").editable(option, function(e){

  alert(e.value);

});

6月242013

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

Category: 未分類 | Tags: JavaScript, Linda, プログラミング方法論 | Author: shokai

（第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”, 数字]というタプルが流れてくる

6月232013

episopass.comのなぞなぞを全パターン試す

Category: 未分類 | Tags: episopass, JavaScript | Author: shokai

なぞなぞでパスワードを作れるepisopass.com

EpisoPass – 記憶からパスワードを生成

に全パターン攻撃してみた

全部クリックして攻撃しているように見える演出がしたかったのでこうなった

6月012013

コードに色つけてKeynoteに貼る

Category: 未分類 | Tags: JavaScript | Author: shokai

明日のrubyhirobaでLTするのでスライドを作り始めたんだけどコードに色ついてないと気持ち悪いから作った。

ppcode – incremental pretty-print

webブラウザからKeynoteにテキストをコピペすると、スタイルを保ったままコピペされる。
ppcodeでコードに色を付けてからKeynoteコピペすると綺麗になる。

キーボード押す毎にgoogle code prettifyを読んでる。