1. ampersand

    Posted

    ampersand
Changes in title
+カタカタカタッターンを可視化した
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,57 @@
+# 何を言っているのか
+![Dec-20-2017 17-50-11.gif](https://qiita-image-store.s3.amazonaws.com/0/7193/04820961-fcb1-f5bf-cdb3-4d501d975a1e.gif)
+
+
+# 製作時間
+30分ぐらい
+
+# 内容
+input要素のtypeがtextまたはsearchの要素、もしくはテキストエリア内におけるキャレットの位置を画面内の絶対値として取得し、その周辺に打鍵と同時に画像を散らかしています。
+
+## キャレット位置の取得方法
+これの実現については今回は自前実装ではなく caretposition.jsという素晴らしいライブラリがあったので、使わせていただいてます。
+http://d.akiroom.com/2012-06/jquery-textarea-caret-position-javascript-library/
+
+# 実装
+```js
+'use strict';
+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(80, 100) : rand(10, 20);
+ var caretPosition = Measurement.caretPos(current);
+ var imgUrl = chrome.extension.getURL('images/' + prefix + '_' + rand(1, 4) + '.svg');
+ var $img = $('<img width="' + size + '">');
+ $img.attr('src', imgUrl);
+ $img.css({
+ 'position': 'absolute',
+ 'top': caretPosition.top + rand(-10, 10),
+ 'left': caretPosition.left + rand(-10, 10),
+ 'zIndex': 99999
+ });
+ $('body').append($img);
+ $img.animate({
+ 'top': caretPosition.top + rand(-40, 40),
+ 'left': caretPosition.left + rand(-40, 40),
+ 'width': size + (isEnter ? rand(30, 50) : rand(10, 20)),
+ 'opacity': 0
+ }, 500, function () {
+ $img.remove();
+ })
+ }
+
+ function rand(min, max) {
+ return Math.floor(Math.random() * (max - min) + min);
+ }
+}
+```
+
+# ウェブストアに公開しました
+https://chrome.google.com/webstore/detail/katakatataaaaaaan/piapcmegjmiehfijbnafacnpmgkjnkhp?hl=ja
+
+数年前にブラウザの中に陰毛を散らかすだけのChrome拡張を作って公開したことがあったので、今回も公開しました。 私のChromeデベロッパーダッシュボードはゴミばっかりです。