クソアプリ2カレンダー11日目担当、@issy_s16です！
自称ほっこり箸休め担当、よろしくお願いします！
🧀 ねずみが侵略！ブックマークレット
今年ももう終わりますね、、2020年はねずみ年です。
ということで！今回は 画面にねずみが侵略してくるブックマークレット を作りました！
👾 遊び方
1️⃣ 以下の画像の参考にソースコードをURLとしてお気に入りに追加してください！
bookmarklet.js
javascript:(function(a){var b=document.createElement("script");b.src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js";b.onload=function(){a(jQuery.noConflict(true))};document.body.appendChild(b)})(function(a){a("img").attr("src","https://bit.ly/3gWFv6g").hover(function(){var e=Math.floor(Math.random()*2);for(var c=0;c<=e;c++){a("body").after('<img src="https://bit.ly/3zWboTR" class="mouse" style="position: absolute; width:70px; top: -50px; left:-50px; z-index: 99999;">')}var f=a(this).offset();var b=a(this).height();var d=a(this).width();a(".mouse").each(function(g,k){var j=f.top+Math.floor(Math.random()*b);var h=f.left+Math.floor(Math.random()*d);a(k).animate({top:j,left:h},Math.random()*800+200,"swing")})})});
2️⃣ 好きなサイトを開いた状態で、お気に入り登録したブックマークレットを開いてください！
3️⃣ すると、画面上のimgタグが全てチーズに置き換わりますので、チーズにマウスオーバーすることでねずみ（マウス）がわらわら追っかけてきます！
ねずみだけにマウスオーバーっていうただのオヤジギャグです。
📑 圧縮してないソースコード
bookmarklet.js
(function(func) {
var scr = document.createElement("script");
scr.src = "//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js";
scr.onload = function() {
func(jQuery.noConflict(true));
};
document.body.appendChild(scr);
})(function($) {
$('img')
.attr('src', 'https://bit.ly/3gWFv6g')
.hover(function(){
var rand = Math.floor( Math.random()*2);
for (var i = 0; i<=rand; i++) {
$('body').after('<img src="https://bit.ly/3zWboTR" class="mouse" style="position: absolute; width:70px; top: -50px; left:-50px; z-index: 99999;">');
}
var offset = $(this).offset();
var height = $(this).height();
var width = $(this).width();
$('.mouse').each(function(i, elm){
var top = offset.top + Math.floor( Math.random()*height);
var left = offset.left + Math.floor( Math.random()*width);
$(elm).animate({top: top, left: left}, Math.random()*800+200, 'swing');
})
});
});
💪 こだわった点
ねずみには1体ごとにそれぞれ違うアニメーションタイムで動くように設定してます！
また、アニメーションのeasingにswingを設定、対象のチーズの要素の大きさを取得した上でランダム配置、
そして、あえてイベントをストップせず残すことでわらわら感を演出しました！
👏 感想
アプリでもブックマークレットってそんなに使う機会は多くないですよね
でもこんな風に簡単にJSを動かすことができるので、改めてブックマークレットの便利さや面白さを再認識する良い機会になりました！
プライベートでも仕事でも、使える技術は使って自動化していきたいものですね！
来年も良い年になりますように！
☺️ スペシャルサンクス
いつもありがとうございます いらすとやさん！