橋本商会

チャットに画像のURLが貼られた時に、安全にimgタグを埋め込みたいという議論があったので書いておく。

一番単純な実装だと、

var s = "はろー http://shokai.org.ex/example.jpg てすとてすと";

s.replace(/(https?:\/\/.+)\.(jpe?g|gif|png)/g, "<img src=\"$1.$2\">$1.$2</img>");

のようにすると

"はろー <img src="http://shokai.org.ex/example.jpg">http://shokai.org.ex/example.jpg</img> てすとてすと"

になるのだが、よく考えると http://tumblr.com/logout#.png みたいなのを貼られるとimgタグが描画された瞬間にログアウトしてしまう。

正規表現がショボいのも悪いけど、最近はURL末尾に画像の拡張子が付いていなくても画像が返ってくるサービスもある。そういうのが埋め込めない。

問題

いくつか問題というか解決策がある。どれが正しいのかは知らない。

1. GETでアクセスしただけでログアウトしてしまうサービスが悪い
2. imgタグを描画する前に、本当にURLがimageなのか調べるべき。でもJavaScriptだけではcontent-type調べられない。
3. ブラウザはサーバーに期待するmime-typeを付けてリクエストする。imgタグからリクエストするなら X-Mime-Condition: image/* とか

3が一番いいけど、2が現実的かな。

api.geta6.net

2について、geta6が2つ作ってくれた。

http://api.geta6.com/imagent
URL先のページや画像をPhantomJS+xvfbでキャプチャして画像で返してくれるAPIで、これを使うとなんでもimgタグに埋め込んで大丈夫になる。
画像だったら画像がそのまま返ってくるし、webページも画像になって返ってくる。
resizeやcropもできる。

http://api.geta6.com/headers
URLを渡すとmime-typeがJSONPで取得できるので、JavaScriptで判別してimg/embed/audio/iframe/aなど適当なタグで埋め込む。

content-type.herokuapp.com

Node.jsの勉強がてら、簡単なのを作ってみた。
http://content-type.herokuapp.com/


http://content-type.herokuapp.com/type/image/IMAGE_URL のようにすると、typeがimageでなければ埋め込まれない。

<img src="http://content-type.herokuapp.com/type/image/http://twiticon.herokuapp.com/shokai/bigger">

画像じゃない時はエラー画像が表示される。

<img src="http://content-type.herokuapp.com/type/image/http://tumblr.com/logout#.png">

あと、 http://content-type.herokuapp.com/type/http://twiticon.herokuapp.com/shokai でmime-typeが取得できるのでこれを使って適当にタグを埋め込むJSライブラリを作ると便利かもしれない。

Herokuのmemcache

上のをNodeで作ってて誤算だったのは、HerokuのNode.jsではMemcacheが使えなかったことだった。
HerokuのMemcacheはSASLという認証が必要なんだけど、SASLをサポートしているNode.jsのmemcacheライブラリがmemjsしかない。でもmemjsもSASL通らなかった。

しょうがないのでmemory-cacheというオンメモリキャッシュを使った。

Twitterにfilter APIという単語で検索してstreamを受信できるAPIがあるので、授業のハッシュタグでfilterしてチャットを作った。
プログラムと起動方法は https://github.com/shokai/twitter-stream-api にある。

 

まず先週は、Terminalで動くバージョンを作って文字をデカくして全画面表示で教室の前に表示させて使ってた。
mitukiiiさんのuserstreamというgemのAPI参照先をfilter APIに変更したらすぐできた。@username の部分はrainbow で色を付けた。
twitterのログもテキストファイルで生成される。

 

次に今週はHTMLで表示させるようにした。Stream APIをem-websocketでwebsocketにして、文字をデカくした全画面表示SafariにWebSocketで表示させている。
表示用のHTMLとWebSocketサーバー起動方法は githubのtwitter-stream-api/viewer にある。

昨日まで東京ミッドタウンで開催していた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度以上回ったらドアを開けるだけだし。

html5のcanvasのピクセル単位の処理を試してみた。ここで動かせる → http://dev.shokai.org/test/canvas/cv/

ソースはここ https://github.com/shokai/js-canvas-test/tree/master/cv


輪郭抽出とかしてみた



■canvasでのピクセル処理方法
canvasはgetContext(‘2d’)してからgetImageDataするとImageDataオブジェクトが手に入る。
あとの処理はこんな感じ（画像をグレースケールにする例、cv/main.jsの39行目あたり）

var canvas = $('canvas#img');

var ctx = canvas[0].getContext('2d');



var img = ctx.getImageData(0, 0, canvas[0].width, canvas[0].height);

for(var i = 0; i < img.data.length; i+=4){

    var r = img.data[i]&0xFF;

    var g = img.data[i+1]&0xFF;

    var b = img.data[i+2]&0xFF;

    // var a = img.data[i+3]&0xFF;

    var gray = (r+g+b)/3;

    img.data[i] = gray;

    img.data[i+1] = gray;

    img.data[i+2] = gray;

}

ctx.putImageData(img, 0, 0);

データが1次元配列になっていて、RGBAの順に値が格納されている。なのでImageData.dataの要素数はピクセル数の4倍になる。
x,y座標でデータを取れる関数が無いので、自分で色々試して作ってみたけどどうしても3〜6倍ぐらい遅くなってしまうので1次元配列のまま扱う事にした。
JavaScriptで多値を扱うには配列やオブジェクトを使わなければならないんだけどどうやらそれらの生成コストがかなり高いらしく、1ピクセルずつ処理したらひどく遅くなった。


■クロスドメイン
別ドメインの画像をcanvasに読み込んで、getImageDataはできない。chromeだと “Uncaught Error: SECURITY_ERR: DOM Exception 18” というエラーが開発パネルに出る。
ローカルでの開発時にローカルのhtmlからローカルの画像を読み込んでgetImageDataしてもこのセキュリティエラーが出るので、rubyで簡単なhttpサーバーを作っておいたのでコレ使うといい。
実行するとそのディレクトリでhttpサーバーが起動する。


■実行速度
端末によって実行速度が違う。

下の画像は、今年の2月に買った11インチMacbook Airのchromeで、1000×1000の画像を4段階量子化したところ。
だいたい50ミリ秒で量子化できた。遅いパソコンでも毎秒数回は実行できそう。
iPodTouch 4Gや初代iPadはMacbook Airより30倍ぐらい遅くて2秒弱かかる。Nexus Sが意外なことに更に遅くて25秒ぐらいかかる。Macの500倍遅い。

http://canvas.shokai.org

HTML5のcanvasを使ってみたかったので作った。
websocketも使っているので、chromeかsafariで動く。ブラウザ2つ開いてみると、同期しているのがわかりやすい。

画像のURLを末尾につけるとその画像が読み込めて、マウスで線を引くとみんなでリアルタイムに描ける。Gyazoと合わせて使うと便利。
http://canvas.shokai.org/http://gyazo.com/365d02afdf4953d40ec904df5019aa13.png


ソースはgithubに置いた https://github.com/shokai/shared-canvas


こんな風に、オンラインゲームのマップを置いて、友達と「ここ攻めろ」みたいな指示を共有したいなと思って作ってみた。
http://canvas.shokai.org/http://gyazo.com/1b2f1f6b0df60aa2d0dfe3da79106a4e.png



canvasのプラグインは色々あるけど、canvasのAPIの操作感が変わりすぎる物ばかりだったので、とりあえず何も使わないで操作してみた → draw.js

Imageオブジェクトで画像を読み込んで、onloadイベント発生時にcanvasのサイズを変更するとぴったりのサイズになる。かならずdrawImage前にサイズ変更をすること。
（92行目あたり）

var draw_img = function(img_url, onload){

    var img_tag = $('canvas#img');

    ctx = img_tag[0].getContext('2d');

    var img = new Image();

    img.onload = function(){

        img_tag.attr('width', img.width).attr('height', img.height);

        ctx.drawImage(img, 0, 0, img.width, img.height);

        if(onload && typeof onload == 'function') onload();

    };

    img.src = img_url; // 読み込み開始

};

rubyとem-websocketで作ったwebsocketサーバーは、daemontoolsで自動起動・復活するようにしてある。DBは無くて、最近10万本のlineの色と太さと座標データを保存している。
また線にはどの画像URLの線か、というデータも付いているので、これで画像URL毎に部屋分けを行っている。