Webページの赤文字を見つけやすくするブックマークレット
概要
Webページの文章中に含まれる赤い文字を検出し、装飾(波線)を付加して見つけやすくするブックマークレットです。
使い方
下記のソースコード( javascript から recursion(document.body); まで)をWebブラウザのお気に入りにブックマークレットとして登録します。
code:RedToDeco.js
javascript:function RGBtoHSV(r, g, b, coneModel) {var h, s, v, max = Math.max(Math.max(r, g), b), min = Math.min(Math.min(r, g), b); if (max == min) {h = 0; } else if (max == r) {h = 60 * (g - b) / (max - min) + 0; } else if (max == g) {h = (60 * (b - r) / (max - min)) + 120; } else {h = (60 * (r - g) / (max - min)) + 240; } while (h < 0) {h += 360; } if (coneModel) {s = max - min; } else {s = (max == 0) ? 0 : (max - min) / max * 255; } v = max; return { 'h': h, 's': s, 'v': v } ; } function recursion(obj) {var tempArray = Array.prototype.slice.call(obj.children); var color = window.getComputedStyle(obj, '').color; var rgb = color.match(/\d+/g); var color2 = ''; var r = rgb0; var g = rgb1; var b = rgb2; var hsv = RGBtoHSV(r, g, b); console.log(obj.localName + "===" + color + ", R=" + r + ", G=" + g + ", B=" + b + ", H=" + hsv.h + ", S=" + hsv.s + ", V=" + hsv.v); if ((hsv.h <= 60 || hsv.h >= 300) && hsv.s > 128) {console.log("たぶん赤"); obj.style.textDecoration = 'underline'; obj.style.textDecorationStyle = 'wavy'; } tempArray.forEach(recursion); } recursion(document.body); Webページを表示し、ブックマークレットを実行します
「赤っぽい」と判断された文字に波線が付加されます。
変換前→変換後
https://gyazo.com/374ba7ed6f0ffc8da6185c0e06fe2c5b → https://gyazo.com/89b9c6d891f92fd97ac48963a2d8cbdf
動作確認済みWebブラウザ(2020年6月現在)
table: 動作確認済みWebブラウザ
Google Chrome Mozilla Firefox Microsoft Edge Apple Safari
Windows Yes Yes Yes N/A
macOS Yes Yes Yes (New!) Yes
iOS Yes No No Yes
Android Yes Yes Yes N/A
利用条件
非営利目的であれば改変可能です。
再頒布される場合は、このページのURLを明記してください。
免責事項
熊本高等専門学校および永田和生は、利用者が本ページの情報を用いて行う一切の行為について、何らの責任を負うものではありません。
謝辞
本研究は JSPS 科研費 JP18K11978 の助成を受けたものです。
参考