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
、(ネタとして)めちゃくちゃ好きなので廃止方向なのは悲しいなあ