どうも、パンジェンシーでございます。

f:id:x-fieldatts:20150502134035p:plain

今回も、自分が作成したライブラリの紹介です。

Webアプリを作っていると、マウスでユーザーが何か入力した時に、何かしらの関数を実行するようにしたいということが多々あると思います。

しかし、いざ使おうとすると、単純にクリックだけなら簡単ですが、右クリックとかホイールクリックはどうやったら認識できるの？とか調べると色々面倒くさいです。

なので、そこを簡単にやってくれるライブラリ
「deva(デーヴァ).js」を作成してみました。ネーミングの由来はもちろん、ムーワァとデーヴァの大冒険のデーヴァです（笑） ====

コード

deva.js

// deva.js

/* example

    <script src="deva.js"></script>
    <button id="button"/>
    <script>
    var mouse = deva("button");
    mouse.on("left",function(){
        alert("left click!");
    })
    mouse.on("middle",function(){
        alert("middle click!");
    })
    mouse.on("right",function(){
        alert("right click!");
    })
    mouse.off("right");
    </script>

*/

var deva = function(id) {
    var DEBUG = 0;

    var elm = document.getElementById(id);
    var callbacks = [];

    function log(text) {
        if (DEBUG === 1) {
            console.log(text);
        }
    }

    function buttonNum(button) {
        switch (button) {
            case 'left':
                return 0;
            case 'middle':
                return 1;
            case 'right':
                return 2;
        }
    }

    elm.addEventListener('mousedown', function(event) {
        event.preventDefault();
        log(event.button);
        if (callbacks[event.button]) {
            callbacks[event.button]();
        }
    }, false);

    elm.addEventListener("contextmenu", function(event) {
        event.preventDefault();
        log("contextmenu");
    }, false);

    return {
        on: function(button, func) {
            var button_num = buttonNum(button);
            callbacks[button_num] = func;
        },
        off: function(button) {
            var button_num = buttonNum(button);
            delete callbacks[button_num];
        }
    };
};

テスト用のページは以下です。
test.html

<!doctype html>
<html lang='ja'>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>deva test</title>
</head>

<body>
    <button id="button">click</button>
</body>
<script src="deva.js"></script>
<script type="text/javascript">
//********************************************
// deva(デーヴァ).jsは、マウスクリックイベント
// を簡単に扱うためのライブラリです
//********************************************

var mouse = deva("button");
// まず、devaオブジェクトを作成します

mouse.on("middle", function() {
    alert("middle click");
});
// on()で、マウスイベント発生時に
// 実行する関数を登録します
// ボタンは、"left","middle","right"
// に対応しています

mouse.on("right", function() {
    alert("right click");
});

mouse.off("right");
// off()で登録した関数を削除できます

</script>

</html>

左クリックは、"left"、
右クリックは、"right"、
ホイールクリックは、"middle"、
に対応しています。

まとめ

今回は、マウスクリックイベントのコールバックを簡単に登録できるライブラリを紹介しました。

誰かのお役に立てれば幸いです。

ではまた。

2015-08-20

【Javascriptライブラリ】キーイベント発生時に関数を実行する「keyos.js」を作ってみました。

Javascriptライブラリ

どうも、パンジェンシーでございます。

f:id:x-fieldatts:20150502134035p:plain

今回も、自分が作成したライブラリの紹介です。

Webアプリを作っていると、キーボードでユーザーが何か入力した時に、何かしらの関数を実行するようにしたいということが多々あると思います。

しかし、いざ使おうとすると、キーコードを調べたり、テキスト入力フォームにユーザーが入力中にも反応してしまい、フラグを立てるとか、色々面倒くさいです。

なので、そこを簡単にやってくれるライブラリ
「keyos(キーオス).js」を作成してみました。 ====

コード

keyos.js

※2015/8/25
・Enterとテンキーに対応しました。
・some()関数追加。callbackで押されたキー名を取得できるようにしました。

// keyoshita.js
/* example
    var key = keyoshita();
    key.on("keyup","a",function(){
        alert("a oshita!");
    });

    key.on("keypress","↓",function(){
        ("↓");
    });
*/
var keyos = function() {
    var DEBUG = 0;
    var ACCEPT_KEY_INPUT = 1;
    var eventList = ['keyup', 'keypress'];
    var keyCodeList_keyup = {
        13: 'Enter',
        37: '←',
        38: '↑',
        39: '→',
        40: '↓',
        65: 'a',
        66: 'b',
        67: 'c',
        68: 'd',
        69: 'e',
        70: 'f',
        71: 'g',
        72: 'h',
        73: 'i',
        74: 'j',
        75: 'k',
        76: 'l',
        77: 'm',
        78: 'n',
        79: 'o',
        80: 'p',
        81: 'q',
        82: 'r',
        83: 's',
        84: 't',
        85: 'u',
        86: 'v',
        87: 'w',
        88: 'x',
        89: 'y',
        90: 'z',
        48: '0',
        49: '1',
        50: '2',
        51: '3',
        52: '4',
        53: '5',
        54: '6',
        55: '7',
        56: '8',
        57: '9',
        96: '0',
        97: '1',
        98: '2',
        99: '3',
        100: '4',
        101: '5',
        102: '6',
        103: '7',
        104: '8',
        105: '9',
        190: '.',
        188: ',',
    };
    var keyCodeList_keypress = {
        48: '0',
        49: '1',
        50: '2',
        51: '3',
        52: '4',
        53: '5',
        54: '6',
        55: '7',
        56: '8',
        57: '9',
        97: 'a',
        98: 'b',
        99: 'c',
        100: 'd',
        101: 'e',
        102: 'f',
        103: 'g',
        104: 'h',
        105: 'i',
        106: 'j',
        107: 'k',
        108: 'l',
        109: 'm',
        110: 'n',
        111: 'o',
        112: 'p',
        113: 'q',
        114: 'r',
        115: 's',
        116: 't',
        117: 'u',
        118: 'v',
        119: 'w',
        120: 'x',
        121: 'y',
        122: 'z',
        46: '.',
        44: ',',
    };
    var handler = {};
    handler.keyup = {};
    handler.keypress = {};
    var some = {};
    some.keyup = function() {};
    some.keypress = function() {};

    function log(text) {
        if (DEBUG) {
            console.log(text);
        }
    }

    document.getElementsByTagName('body')[0].addEventListener('keyup', function(event) {
        if (ACCEPT_KEY_INPUT) {
            event.preventDefault();
            log("keyup:" + event.keyCode);
            var key = keyCodeList_keyup[event.keyCode];
            if (handler.keyup[key]) {
                log("keyup:" + key);
                handler.keyup[key]();
            } else {
                log("handler is not registered.");
            }
            if (some.keyup) {
                some.keyup(key);
            }
        }
    });

    document.getElementsByTagName('body')[0].addEventListener('keypress', function(event) {
        if (ACCEPT_KEY_INPUT) {
            event.preventDefault();
            log("keypress:" + event.keyCode);
            var key = keyCodeList_keypress[event.keyCode];
            if (handler.keypress[key]) {
                log("keypress:" + key);
                handler.keypress[key]();
            } else {
                log("handler is not registered.");
            }
            if (some.keypress) {
                some.keypress(key);
            }
        }
    });

    return {
        on: function(event, key, callback) {
            if (handler[event]) {
                handler[event][key] = callback;
            } else {
                log('指定されたイベントには対応していません');
            }
        },
        some: function(event, callback) {
            if (some[event]) {
                some[event] = callback;
            } else {
                log('指定されたイベントには対応していません');
            }
        },
        accept: function() {
            ACCEPT_KEY_INPUT = 1;
        },
        refuse: function() {
            ACCEPT_KEY_INPUT = 0;
        }
    };
};

テスト用のページは以下です。
test.html

<!doctype html>
<html lang='ja'>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>keyos test</title>
</head>

<body>
</body>
<script src="keyos.js"></script>
<script>
//**********************************************
// keyos(キーオス).jsは、キーイベントを
// 簡単に扱うためのライブラリです
//**********************************************

var key = keyos();
// まず、keyosオブジェクトを作成します。

key.on("keyup", "e", function() {
  alert("e oshita!");
});
// on()で、キーイベント発生時に実行する
// 関数を登録できます。
// イベントは、"keyup"と"keypress"に
//  対応させています。
// キーは、
// 方向キー,a-z,0-9,".",","に対応しています。
// 他のキーにも対応させたい場合は、ライブラリに
// キーコードを追加してください。

key.on("keypress", "↓", function() {
  console.log("↓");
});

key.on("keyup", "r", function() {
  key.refuse();
  // refuse()をすると、キーイベント発生時に
  // 登録した関数が実行されなくなります
  // accept()をすると、実行される状態に戻ります。
});
</script>

</html>

まとめ

今回は、キーイベントのコールバックを簡単に設定できるライブラリを紹介しました。

誰かのお役に立てれば幸いです。

ではまた。

2015-08-19

【Javascriptライブラリ】localStorageを簡単にする「memol.js」を作ってみました。

Javascriptライブラリ

どうも、パンジェンシーでございます。

f:id:x-fieldatts:20150502134035p:plain

今回も、自分が作成したライブラリの紹介です。

HTML5を使えば、ブラウザ上にリッチなコンテンツを作成することができます。

その中でも、localStorageは、クライアントの端末内にデータを保存できる便利な機能です。

しかし、いざ使おうとすると、色んなアプリで作成したデータがグッチャグッチャになってワケワカメ状態になること必至です。

なので、アプリ毎にストレージを分けたり、色々やってくれるライブラリ「memol(メモル).js」を作成してみました。

コード

memol.js

// memol.js
/* example
	<script>
	var memo = memol("example");
	memo.set("myname", "xnoudon");
	console.log(memo.get("myname"));
	memo.delAll();
	console.log(memo.get("myname"));
	</script>
*/
var memol = function(storageId) {
    var STORAGE_ID = storageId;
    return {
        'STORAGE_ID': null,
        'get': function(key) {
　　　　　　// ユーザー情報をオブジェクト形式で取得
            if (window.localStorage && window.localStorage[STORAGE_ID]) {
                var datalist = JSON.parse(
                    window.localStorage.getItem(STORAGE_ID));
                if (datalist[key] !== null) {
                    return datalist[key];
                } else {
                    return null;
                }
            }
            return null;
        },
        'set': function(key, val) {
　　　　　　// ユーザー情報をローカルストレージに保存
            if (window.localStorage) {
                var datalist;
                if (window.localStorage[STORAGE_ID]) {
                    datalist = JSON.parse(window.localStorage.getItem(STORAGE_ID));
                } else {
                    datalist = {};
                }
                datalist[key] = val;
                window.localStorage.setItem(STORAGE_ID, JSON.stringify(datalist));
                return "set was successful";
            }
            return null;
        },
        'delAll': function() { // 保存したデータを全て削除
            if (window.localStorage) {
                window.localStorage.removeItem(STORAGE_ID);
            }
            return null;
        }
    };
};

テスト用のコードは以下です。

test.html

<!doctype html>
<html lang='ja'>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>memol test</title>
</head>

<body>
  <h2>memol</h2>
  <p>
    <h4>set</h4>
    <input id="input" type="text">
    <button id="set">set</button>
  </p>
  <p>
    <h4>get</h4>
    <button id="get">get</button>
    <textarea id="output"></textarea>
  </p>
  <p>
    <h4>delAll</h4>
    <button id="delAll">delAll</button>
  </p>
</body>
<script src="memol.js"></script>
<script>
//***********************************************
// memol(メモル).jsは、localStorageの読み書きを
// 簡単に行うためのライブラリです
//***********************************************

var memo = memol("example");
// まず、memolオブジェクトを作成します
// 引数として、ストレージの名前を入れます。

document.getElementById("set").addEventListener("click", function() {
  var input = document.getElementById("input").value;

  console.log(memo.set("memo", input));
  // set()は、ストレージにデータを書き込みます。
  // この例では、"example"ストレージに、
  // "memo"という名前で、内容がinputであるデータを書き込みます。

  document.getElementById("input").value = "";
});

document.getElementById("get").addEventListener("click", function() {
  var output = memo.get("memo");
  // get()は、ストレージに書き込んだデータを読み出します。
  // この例では、"example"ストレージに保存してある
  // "memo"という名前のデータの中身を取り出しています。

  document.getElementById("output").innerHTML = output;
});

document.getElementById("delAll").addEventListener("click", function() {
  memo.delAll();
  // dellAll()は、ストレージ内のデータを全て削除します。
  // この例では、"example"ストレージのデータを削除しています。
  // 別の名前で作成したストレージのデータは削除されません。
});
</script>

</html>

まとめ

太古の昔に作成したコードなので、何がどういいのか忘れてしまいましたが、多分、保存するデータが、何でもOKになるところがメリットだと思います。

例えば、連想配列を保存しようとすると、window.localStorage.setItem()では、一旦文字列に変換して保存する必要があり、取り出す際にも、パースする必要があります（多分）。

その辺をライブラリがちゃっちゃとやってくれる感じにしたんだと記憶しています。

誰かのお役に立てれば幸いです。

ではまた。

パンジェンシーの「汗だく開発日誌」

システム開発の備忘録です。

【Javascript】マウスクリックイベントで関数を実行するライブラリを作りました

コード

まとめ

【Javascriptライブラリ】キーイベント発生時に関数を実行する「keyos.js」を作ってみました。

コード

まとめ

【Javascriptライブラリ】localStorageを簡単にする「memol.js」を作ってみました。

コード

まとめ