1. ampersand

    No comment

    ampersand
Changes in body
Source | HTML | Preview
@@ -1,57 +1,66 @@
# 何を言っているのか
![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デベロッパーダッシュボードはゴミばっかりです。
+
+# 追記(2017/12/27 11:32)
+陰毛を散らかすChrome拡張ってなんだよって反応を複数見かけたので追記します。
+これです [ウェブちぢれっ毛](https://chrome.google.com/webstore/detail/%E3%82%A6%E3%82%A7%E3%83%96%E3%81%A1%E3%81%A2%E3%82%8C%E3%81%A3%E6%AF%9B/gndfeliefbgbnflipbjpefibkponopak?hl=ja)
+
+動作の様子です
+
+<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">なるほどイカれたChrome拡張だ <a href="https://t.co/zU4t9wV8ba">pic.twitter.com/zU4t9wV8ba</a></p>&mdash; コンユウ (@kon_yu) <a href="https://twitter.com/kon_yu/status/943712194964873216?ref_src=twsrc%5Etfw">2017年12月21日</a></blockquote>
+<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>