pointer.jsを作った - ゴミ箱の中のメモ帳

前々から作ろうと思ってたけど作っていなかったのでぱぱっと作った。

Javascriptは久しぶり過ぎて吐き気がひどかったけど何とか出来た。コードの質は下の下の下かと思う。Javascriptは忘れやすいがCoffeeScriptは何故か記憶に残って書きやすい。今回もCoffeeScriptで制作。

つくって覚えるCoffeeScript入門

作者: 飯塚直
出版社/メーカー: アスキー・メディアワークス
発売日: 2013/05/29
メディア: 単行本（ソフトカバー）
この商品を含むブログを見る

スクリプトは記事の末に入れるが、機能は単純。ポインターでクリックした箇所を円で表すというもの。円は半径25pxから10pxまで縮小して消えるようにしている。

何故必要だったかは忘れたが、作ろうと思ってメモしていたのでいつか必要なときのために作っておいた。

うろ覚えだが、スクリプトのデバッグ中にポインタがどこにあるわからなくなるのでポインタを強調するために作ろうと思ったんだったと思う。なのでクリックではなくキー入力に反応したほうが良かったかもしれないが、まぁ今回はいいとする。

こうやってちょっとづつでも書いていかないと忘れてしまう。

sample.coffee

start = ( target) ->
    console.log( target)
    $( target).click( ( e) ->
        console.log( e.clientX, e.clientY)
        $pointer = $( "<div>", { id: "pointer"})
        $pointer.css( "width", "50px").css( "height", "50px").css( "border", "1px solid #000000").css( "border-radius", "25px").css( "position", "fixed").css( "top", e.clientY - 25).css( "left", e.clientX - 25).animate( { "width": "10px", "height": "10px", "top": e.clientY - 5, "left": e.clientX - 5}, {"complete": ->
            $("#pointer").remove()
            })
        $("body").append($pointer)
        )


start( "html")

sample.js

// Generated by CoffeeScript 1.6.1
(function() {
  var start;

  start = function(target) {
    console.log(target);
    return $(target).click(function(e) {
      var $pointer;
      console.log(e.clientX, e.clientY);
      $pointer = $("<div>", {
        id: "pointer"
      });
      $pointer.css("width", "50px").css("height", "50px").css("border", "1px solid #000000").css("border-radius", "25px").css("position", "fixed").css("top", e.clientY - 25).css("left", e.clientX - 25).animate({
        "width": "10px",
        "height": "10px",
        "top": e.clientY - 5,
        "left": e.clientX - 5
      }, {
        "complete": function() {
          return $("#pointer").remove();
        }
      });
      return $("body").append($pointer);
    });
  };

  start("html");

}).call(this);

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Pointer.js Example</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0-beta2.js"></script>
    <script type="text/javascript" src="./../pointer.js"></script>
  </head>
  <body style="min-height: 800px; border: 1px solid #CCCCCC;">

  </body>
</html>