lsを間違えてdlと検索してしまったときに、D言語くんが通り過ぎるスクリプト

この記事はD言語くん Advent Calendar 2017の14日目の記事です。
（投稿日時とずれてるような気もしますが気のせいでしょう）

概要

突然ですが、lsコマンドをついdlって打ち間違えちゃう、さらに検索だった！！！ということってありますよね？
そういった時にD言語くんが颯爽と走ってきて注意してくれる癒しスクリプトを作りました。

いわゆる sl コマンドのD言語くん版の検索版です。

デモ

これはなに

Chromeの拡張機能にTampermonkeyという、特定のサイトでユーザスクリプトを走らせるものがあるのですが、これを使いました。

// ==UserScript==
// @name         Running Dman!
// @include      /https:\/\/www\.google\.co\.jp\/search\?.*([=\+]dl[\+&])/
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    GM_addStyle(`
        @keyframes running {
            0% {
                transform: translate(0%);
            }
            100% {
                transform: translate(-120%);
            }
        }
        #dman {
            padding-left: 100%;
            animation-name: running;
            animation-duration: 1.5s;
            animation-delay: 0.5s;
            animation-timing-function: linear;
            animation-direction: normal;
            animation-iteration-count: 1;
            animation-fill-mode: both;
        }
    `);

    let dman = document.createElement("div");
    dman.id = "dman";
    dman.innerHTML = "<img src='https://dlang.org/images/compiler-dmd.png' width='100px' height='100px'>";
    dman.addEventListener("animationend", () => dman.parentNode.removeChild(dman));
    document.querySelector("#appbar").appendChild(dman);
})();

少し解説すると、

• @includeで正規表現が使えるみたいで「dlを検索ワードに含んだ検索ページにマッチする」ようにしました。/https:\/\/www\.google\.co\.jp\/search\?.*([=\+]D言語くん[\+&])/に変更すると、検索ワードD言語くんにヒットします。
• CSSを直書きしたかったので@grant GM_addStyleでGreasemonkeyの関数を引っ張ってきました。

余談

D言語くんが左側へ走る処理をmarqueeでやりたかったのですが、Chromeでonfinishのイベントハンドラの対応がされてないみたい(?)だったので、CSS animationで代用しました。

marquee、(ネタとして)めちゃくちゃ好きなので廃止方向なのは悲しいなあ

関連リンク

qiita.com