橋本商会

NFCタグサーバーにもクロスドメインでAjaxできるようにするためにHTTP HeaderにAccess-Control-Allow-Originを追加した。
JavaScriptだけでNFCタグリーダーを使える。

これ → IO-DATAのNFCタグリーダーをHTTP、WebSocket、Socketから使えるようにした

Eventmachine HttpServerが軽量で使いやすいので、sinatraを使うほどでもないプロジェクトでよく使っている。

class NfcHttpServer  < EM::Connection

  include EM::HttpServer

  

  def process_http_request

    res = EM::DelegatedHttpResponse.new(self)

    puts "* http #{@http_request_method} #{@http_path_info} #{@http_query_string} #{@http_post_content}"

    res.headers['Access-Control-Allow-Origin'] = '*'

    res.headers['Access-Control-Allow-Headers'] = 'Content-Type'

    res.headers['Access-Control-Allow-Methods'] = 'PUT,DELETE,POST,GET,OPTIONS'

    res.status = 200

    res.content = @@tag.to_s

    res.send_response

  end

end

Eventmachine HttpServerはドキュメント全然書かれてないけど、コードが読みやすいのでどうにでもできる。cometとかもできるし。


■参考にした
Ajaxのクロスサイト通信をJSONPを使わないでやってみよう – Back yard : yuya_lush’s report

昨日まで東京ミッドタウンで開催していたSFC ORF2011の増井研でデモしていました。


■実世界コピペ
実世界コピペはAndroidとNFCタグを使ってコピペできるアプリなのですが、これはAndroid側のアプリは全てJavaScriptで書かれています。




■GoldFish
GoldFishというプラットフォームを自作していて、これを使うとJavaなしでJavaScriptだけでアプリが書けて、しかも端末にインストールする必要がなくなります。（今学校のサーバーが落ちていて見れないがそのうち復活するはず）

先週書いたAndroidとNFCで研究室の鍵を開けるシステムもGoldFish上で実装されているし、他にも置く場所によって自動的にAndroidがパソコンを操作するタッチパッドになったり、写真立てになったりするデモをしました。


GoldFishは、実世界志向なユーザインタフェースを作る時によくある5つの機能を簡単にJavaScriptだけで扱えます。

• 操作する物体や機器の指定をタッチで直接指示する … GUIでは名前を入力するかアイコンをクリックしていた
• ジェスチャーで操作する … 大量のボタンは必要なく、画面を見る必要もない
• 状況によってインタフェースが変わる … タグによって起動するアプリを切り替えられる、またGoldFishアプリ内からもタグの情報が読める
• 使用者によってコンテンツが切り替わる … 安全な方法で端末IDを生成しているので、ユーザ名を入れたりする事なくユニークユーザを検出できる。居間のTVで見ていたビデオを台所の小型モニタで継続する等も簡単。
• 他のアプリと通信する … 中身がWebブラウザなのでAjaxは使えるのは勿論だが、普通のTCPやUDP SocketもwebsocketっぽいAPIで簡単に使える。TCPでチャットを実装した例

Javaを書かなければ使えなかった機能をラップしてJavaScriptから使えるようにしています。



■他のGoldFishアプリ
MacとUDPで通信して操作できるタッチパッドが86行で書けたり（ソースコード）




空中マウスが62行ぐらいで書けたりする。（ソースコード）



空中マウスは操作が難しくてボツになりました。でもこういうのを実験的に作る時に、イチからAndroidアプリを書くのと比べて全然楽に実装できます。プロトタイピングにも向いている。


研究室のドアの鍵開ける奴も、ほとんどプログラム書いたこと無い後輩にサンプル見せて、作ってよーって頼んだら1日でできてしまったので、それなりに使いやすいんじゃないかなと思います。setIntervalで50msecごとにジャイロスコープを監視して、+90度以上回ったらドアを開けるだけだし。

先週、後輩のN園が作ってくれました。

1. AndroidでNFCタグを読むと鍵開けアプリが起動
2. ジェスチャー入力をSinatraで書かれたドアサーバーに伝える
3. ドアサーバーはPhidgetsのサーボモーターを駆動し、鍵をヒモで引っ張って開ける

最近はAndroidでNFCタグを読むとタグ毎のwebアプリが起動し、しかもPhoneGapみたいにJavaとJavaScriptのブリッジが書かれているのでセンサーが使えるというシステムを作っている。
6月にNHKのITホワイトボックスでデモした奴の発展版で、GoldFishという開発コードで呼んでいる。


こんなメリットがある

• HTMLとJS（と必要あればwebアプリ）が書ければアプリを作れる環境
• 実世界の物体を指し示して、「アレをコレに」とか操作できる
• GUIだけではなくジェスチャーも入力できる
• 状況によってインタフェースが変化する
• 誰が使っているかによって内容が変化させられる

NFCタグリーダーをサーバーにした。
shokai/nfctag-server – GitHub


特殊なデバイスはみんなサーバーにしてHTMLとJSから使えるようにすればいい。
1つのハードウェアにいくつもアプリをぶら下げれるし、アプリはハードウェアと別のマシンで動かせるし、JavaScript書けるし、とにかく楽だ。


下は以前作ったWebSocket clientでnfc-tag-serverに接続してtagを読んでいるところ。
タグがある時はhex dumpされた文字列が、無い時はfalseが送信されてくる。同じ値がHTTPや普通のTCP Socketでも取れるようになっている。




■NFCタグリーダー

これ使ってる。USB接続で、けっこうどこででも売ってる。これじゃなくてもlibnfcで動くデバイスならいけるはず。
ただしlibnfcでFeliCaが読めなかった。MIFAREタグなら読めた。

■インストール

git clone git://github.com/shokai/nfctag-server.git

cd nfctag-server

Macの場合

brew install libnfc

gem install nfc eventmachine eventmachine_httpserver em-websocket args_parser

これで必要なライブラリがインストールされる。

Mac以外はlibnfcを自分でインストールすればたぶんok。Ubuntuは意外にもaptにlibnfc無かった。



■起動

./nfc-tag-server --http_port 8080 --websocket_port 8081 --socket_port 8082

これでHTTPとWebSocketと普通のTCP Socketのサーバーが同時に起動する。


それぞれ


HTTP-GET

curl 'http://localhost:8080'

WebSocket

## JavaScript

var ws = new WebSocket("ws://localhost:8081");

ws.onmessage = function(e){

  Console.log(e.data);

};

websocket clientを使えばすぐ試せる



Socket

telnet localhost 8082

のような感じに接続して、tagのIDが読める。

PhoneGapでAndroidのNFCを使えるpluginを作った。

• shokai/phonegap-plugin-nfc – GitHub

JavaScriptから簡単にNFCタグのIDが読める。

<script src='./phonegap.nfc.js' type='text/javascript' />

document.addEventListener('deviceready', function(){

    window.plugins.nfc.id(

        function(tag){

            var id = tag.id; // get Tag ID;

        },

        function(e){

            log(e);

        });

}, true);

インストール方法はgithubに書いた。サンプルプロジェクトもある。
普通のPhoneGap pluginと同じく、phonegap.nfc.jsとNfcPlugin.javaを所定の場所に置くのだけど、NFCを使うためにguava librariesとAndroidManifest.xmlの修正も必要。

とりあえず、NFCでタグのIDを読むだけしか機能は無い。もちろん他にも色々データは取れるんだけど、どこまでwrapしたらいいのかよくわからないのと俺がIDしか使う予定が無いので、とりあえずIDだけにしておいた。（要望あれば追加する）




PhoneGap pluginの作り方は、phonegap / PhoneGap Pluginsが参考になった。JavaScriptからJavaのコードを呼びだす方法が書かれている。


既に公開されているプラグインがいくつかあって、それも参考になった。

• borismus/phonegap-plugins – GitHub
• WebIntent, an Android PhoneGap Plugin | Boris Smus