カタカタカタッターンのほかにクリック音とカーソルの移動音も可視化した!
はじめに
こちらの投稿(カタカタカタッターンを可視化した)、そしてその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の拡張機能の部分、なかなか大変でしたがなんとかできてよかったです。
公開するかはまた決めようと思います。(そもそもいいのか?という)
Author And Source
この問題について(カタカタカタッターンのほかにクリック音とカーソルの移動音も可視化した!), 我々は、より多くの情報をここで見つけました https://qiita.com/koichi_baseball/items/623369b808d2e502050b著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .