読者です 読者をやめる 読者になる 読者になる

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

好きなことをつらつらと。

画像の座標を取得するアプリ作った(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軸の座標。

283-214
323-213
346-253
411-253
446-253
512-253
577-253
639-253

使い方

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