6
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

闇のプログラミングAdvent Calendar 2021

Day 10

世界を闇に変えましょう

Last updated at Posted at 2021-12-09

はじめに

皆様の日常に闇って足りてますか?
もちろん足りてませんよね。
では、闇を増やしていきましょう。

とりあえず黒を闇にする

あなたの目の前にあるのはなんでしょうか?
そうですね、ブラウザですよね。
まずはブラウザに表示される「黒」という文字を闇にしましょう。
黒という文字が書いてあるページ1を開きおもむろにF12を押してdevtoolsを立ち上げてください。

その後下のコードをコンソールに貼りつけて、Enterを押すと、黒という文字がすべて闇になります。

(()=>{const d=document;d.body.innerHTML=d.body.innerHTML.replaceAll('','');})();

document.body.innerHTMLでページのHTMLを取得し、そのHTMLの中でreplaceAll()で黒という文字を闇に入れ替えます。
アロー関数で上の操作をする関数を作り、()();で括って即時実行しています。

黒1.png

ワンクリックで闇にする

毎回devtoolsを開いて闇にするのは面倒ですよね。
ブックマークに登録してブックマークレットとしてワンクリックで闇にしましょう。

javascript:(()=>{const d=document;d.body.innerHTML=d.body.innerHTML.replaceAll('','');})()

先頭にjavascript:と付け加えた上のコードをお気に入りに登録すれば、いつでもどこでも黒を闇に変えられます。
名前は「闇にする」などお好きなものをどうぞ。

ブックマークレット.png

他の色も闇にする

でも、黒だけでは出現回数が少ないから物足りないですよね。
他の色も闇にしましょう。

javascript:(()=>{const d=document;d.body.innerHTML=d.body.innerHTML.replace(/[赤青黄緑白黒紫橙水桃茶金銀藍紺朱緋紅空墨灰]/g,'');})()

replaceAll()からreplace()に変え、変更する予定の文字を/[赤青黄緑白黒紫橙水桃茶金銀藍紺朱緋紅空墨灰]/gと正規表現で指定します。
最後にgをつけることで、1つだけではなく、ページ内のすべての色の文字を置換できます。

虹1.png

ゼロクリックで黒にする

毎回クリックするのも面倒ですよね。
WebExtensionを作成して、自動で闇になるようにしましょう。

manifest.json
{
    "name": "闇にする",
    "description": "すべての色を闇にする",
    "version": "1.0",
    "manifest_version": 3,
    "content_scripts": [
      {
        "matches": ["http://*/*", "https://*/*"],
        "js": ["content.js"]
      }
    ]
}
content.js
window.addEventListener("load",(eve)=>{
  const d = document;
  d.body.innerHTML=d.body.innerHTML.replace(/[赤青黄緑白黒紫橙水桃茶金銀藍紺朱緋紅空墨灰]/g,'');
})

上の2つのファイルをまとめて1つのフォルダに入れて、拡張機能としてブラウザに取り込めば完成です。
Chromeの場合は、chrome://extensionsを開き、デベロッパーモードをオンにして、まとめたフォルダをドラッグ・アンド・ドロップすれば読み込めます。

拡張機能ではwindow.adeEventListenerでロードされたときに実行するようにしています。

拡張機能.png

なんでもかんでも闇にする

もはや、色だけでは物足りなくなってきましたよね。
漢字すべてを闇にしましょう。
先程のcontent.jsを下のコードに差し替えて、再インストールしてください。

content.js
window.addEventListener("load",(eve)=>{
  const d = document;
  d.body.innerHTML=d.body.innerHTML.replace(/[一-龠]/g,'');
})

一-龠とすることで、Unicodeでの最初の漢字である一(\u4E00)と最後の漢字である龠(\u9FA0)の間にある文字が対象となり、すべての漢字が闇になります。

全1.png
全2.png

いかがでしたか

すべての漢字が闇に変わりましたでしょうか?
あまりにも最悪な体験だったので自分はすぐに拡張を削除しました。
闇という単語がゲシュタルト崩壊してきたのでもう二度と闇が足りないなんて思わなくなると思います。やったね!
それではまた。

参考文献

https://qiita.com/keitean/items/2b345f206215499873c8
https://wikiwiki.jp/boudai/%E8%89%B2%E3%81%BE%E3%81%A8%E3%82%81/%E6%BC%A2%E5%AD%97%E4%B8%80%E6%96%87%E5%AD%97%E3%81%AE%E8%89%B2%E4%B8%80%E8%A6%A7
https://developer.chrome.com/docs/extensions/mv3/intro/
https://stabucky.com/wp/archives/7594

  1. このページでも大丈夫です。

6
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?