ｶﾀｶﾀｶﾀｯﾀｰﾝのほかにクリック音とカーソルの移動音も可視化した！

はじめに

こちらの投稿(ｶﾀｶﾀｶﾀｯﾀｰﾝを可視化した)、そしてそのChrome拡張機能、知っている方も多いのではないでしょうか？

先日確認したところ、拡張機能がなくなってしまっていたので、自分で作ってみました。
(※公開はしていません、Github上にあるファイルで自身のChromeでは使用可能です。)

こんな感じになりました

こちらで試せます
https://koichirokato.github.io/katakatademo/

内容とキャレット位置の取得方法

本家(?)様と同様です。
以下、引用(引用元：https://qiita.com/ampersand/items/3ef94ebe9cba8c07a157)

内容

input要素のtypeがtextまたはsearchの要素、もしくはテキストエリア内におけるキャレットの位置を画面内の絶対値として取得し、その周辺に打鍵と同時に画像を散らかしています。

キャレット位置の取得方法

これの実現については今回は自前実装ではなく caretposition.jsという素晴らしいライブラリがあったので、使わせていただいてます。
http://d.akiroom.com/2012-06/jquery-textarea-caret-position-javascript-library/

実装

以下が実装内容ですが、キーボード入力、クリック、カーソルの移動と3つに分かれています。

// Kachi Kachi
document.onkeydown = function (e) {
    var current = document.activeElement;
    if (e.key === 'Backspace') {
        return true;
    }
    if (current.type === 'textarea' || current.type === 'text' || current.type === 'search') {
        var isEnter = e.key === 'Enter';
        var prefix = isEnter ? 'tan' : 'kata';
        var size = isEnter ? rand(90, 120) : rand(40, 50);
        var caretPosition = Measurement.caretPos(current);
        var imgUrl = chrome.extension.getURL('images/' + prefix + '_' + rand(1, 4) + '.svg');
        chrome.storage.sync.get("kata", function(items) {
            if(items.kata==true) outputimage(caretPosition.left, caretPosition.top, imgUrl, size, isEnter);
        });
    }
}
// Pochi Pochi
document.body.addEventListener( "click", function( event ) {
    var x = event.pageX ;
    var y = event.pageY ;
    var size = rand(40, 50);
    var imgUrl = chrome.extension.getURL('images/' + 'pochi' + '_' + rand(1, 4) + '.svg');
    chrome.storage.sync.get("pochi", function(items) {
        if(items.pochi==true) outputimage(x,y,imgUrl,size);
    });
} ) ;


// Byu-n
var lastx=0;
var lasty=0;
document.body.addEventListener("mousemove", function(event){
    var x = event.pageX;
    var y = event.pageY;
    var size = rand(60, 70);
    var imgUrl = chrome.extension.getURL('images/' + 'byun' + '_' + rand(1, 4) + '.svg');
    chrome.storage.sync.get("byun", function(items) {
        if(items.byun==true) outputimage(x,y,imgUrl,size,isEnter=false,mousemove=true,lastx=lastx,lasty=lasty);
    });
    lastx = x;
    lasty = y;

});

// Output Image
function outputimage(x, y, imgUrl, size, isEnter=false, mousemove=false,lastx=0,lasty=0){
    var $img = $('<img width="' + size + '">');
    $img.attr('src', imgUrl);
    $img.css({
        'position': 'absolute',
        'top': mousemove ? lasty : y+rand(-10, 10),
        'left': mousemove ? lastx : x+rand(-10, 10),
        'zIndex': 99999
    });
    $('body').append($img);

    $img.animate({
        'top': mousemove ? y : y+rand(-40, 40),
        'left': mousemove ? x : x+rand(-40, 40),
        'width': size + (isEnter ? rand(30, 50) : rand(10, 20)),
        'opacity': 0
    }, mousemove ? 200 : 500, function () {
        $img.remove();
    })
}

Chrome拡張機能

拡張機能用にポップアップを利用した設定ができる用にしました。
アイコンをクリックでチェックボックスと保存用のボタンが出てきます。うるさいときは止めれますね。

おわりに

Chromeの拡張機能の部分、なかなか大変でしたがなんとかできてよかったです。
公開するかはまた決めようと思います。(そもそもいいのか？という)