7rpn’s blog: うわああああな日常

好きなことをつらつらと。AIとかで面白いことをしたい。

画像の座標を取得するアプリ作った(Ruby+sinatra+D3.js+jQuery)

画像の一点をクリックしたら座標を取得してくれるようなそんなアプリがほしかった。

多分ドンピシャなソフトを探すより自分で作った方が速いだろう，と思ったので作りました。

RubyとHTMLを合わせても40行にも満たないミニアプリです。
画像をクリックするとその座標の位置情報をresult.txtに出力します。

require "sinatra"

get "/" do
    erb :index
end

get "/place" do
    File.open("result.text", "a") { |f| f.write params["x"]+"-"+params["y"]+"\n" }
end

__END__

@@index
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title></title>
   <script type="text/javascript" src="d3.js"></script>
   <script type="text/javascript" src="jquery.min.js"></script>
   <script type="text/javascript">
   var w = window.innerWidth;
   var h = window.innerHeight;
   d3.select('body').append('div').append('svg').attr({'width': w, 'height': h}).append('image')
   .attr({
       'xlink:href': "hoge.png",//表示する画像のディレクトリを指定，public/hoge.pngがhoge.png扱いされるので注意
       width: w,
       height: h,
   });
   d3.select('svg').on("click",function(){
       var x = d3.mouse(this)[0];
       var y = d3.mouse(this)[1];
       $.get("/place?x="+x+"&y="+y);
   })
   </script>
</head>
<body></body>
</html>

出力はこんな感じ。x軸の座標-y軸の座標。

使い方

使う人が果たして存在するのだろうか。Ruby環境があればgem install sinatraしてこのRubyファイル実行してください。Publicフォルダにd3.jsとjquery.min.jsを入れるの忘れずに。
取り急ぎ。