☰

adjustColor2

convert colors to eye-friendly - webページの配色を目に優しく変更します (Flash対応)

当前为 2015-06-12 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        adjustColor2
  3. // @namespace   http://chiebukuro.yahoo.co.jp/my/gbjyn273
  4. // @author Syakku
  5. // @description	convert colors to eye-friendly - webページの配色を目に優しく変更します (Flash対応)
  6. // @include     *
  7. // @version     1.2
  8. // @run-at     document-start  
  9. // ==/UserScript==
  10.  
  11. //	================≪ OPTION ≫================
  12.  
  13. 	//	----------------< white" & "black" color >----------------
  14. 	var FILTER_COLOR_W = "rgb(234, 229, 227)";
  15. 	var FILTER_COLOR_B = "rgb(41, 34, 29)";
  16. 	var INNER_COLOR_W = "rgb(211, 203, 198)";
  17. 	var INNER_COLOR_B = "rgb(41, 34, 29)";	//	gb is disabled
  18. 	
  19. 	//	OPTION : apply to Flash object
  20. 	var FLASH = true;
  21. 	
  22. 	//	OPTION : skip <a> tag (link anchor)
  23. 	//	OPTION : <a> タグ、つまりリンク文字列を処理から除外します
  24. 	//	ex: [] or ["google.co.jp", "youtube", "&link=important"] or [*]
  25. 	var _A_SKIP_URL = ["*"];
  26. 	
  27. 	
  28. // ================≪ 初期化 ≫================
  29. 	var _win = document.defaultView;	
  30. 	
  31. 	var fCw = rgbSplit(FILTER_COLOR_W);
  32. 	var fCb = rgbSplit(FILTER_COLOR_B);
  33. 	var iCw = rgbSplit(INNER_COLOR_W);
  34. 	var iCb = rgbSplit(INNER_COLOR_B);
  35. 	
  36. 	// ----------------< インナーがフィルターを超えていたら修正 >----------------
  37. 	for (var i=0; i<3; i++){
  38. 		if (iCw[i] > fCw[i]){iCw[i] = fCw[i];}
  39. 		if (iCb[i] < fCb[i]){iCb[i] = fCb[i];}
  40. 	}
  41. 	
  42. 	// ----------------< フィルタ関連の初期化 >----------------
  43. 	var fColor = createFilter(fCw, fCb);
  44. 	var filterR = fColor[0], filterG = fColor[1], filterB = fColor[2],	filterA = fColor[3], filterAa = 1-filterA;
  45. 	
  46. 	//	色変換で使うので先に計算
  47. 	var filterRA = filterR * filterA, filterGA = filterG * filterA, filterBA = filterB * filterA;
  48. 	var _pr = (iCw[0] - iCb[0]) / 255, _pg = (iCw[1] - iCb[1]) / 255, _pb = (iCw[2] - iCb[2]) / 255;
  49. 	var _pr2 = iCb[0], _pg2 = iCb[1], _pb2 = iCb[2];
  50. 	
  51. 	// ----------------< 色変換の結果保持配列 >----------------
  52. 	var list = [];
  53. 	var lFg = [];
  54. 	var lCount = 0;
  55.  
  56.  
  57. 	// ----------------< 背景画像処理 >----------------
  58. 	var bgFilter = createBgFilter();
  59. 	var bgfCount = bgFilter.substring(0, 30);
  60. 	var bgfcLength = bgfCount.length;
  61. 	
  62. 	function createBgFilter(){
  63. 		var tw=[], tb=[];
  64. 		tw[0] = Math.floor((iCw[0] - filterRA) / filterAa);
  65. 		tw[1] = Math.floor((iCw[1] - filterGA) / filterAa);
  66. 		tw[2] = Math.floor((iCw[2] - filterBA) / filterAa);
  67. 		tb[0] = Math.floor((iCb[0] - filterRA) / filterAa);
  68. 		var bfColor = createFilter(tw, tb);
  69. 		var _rgba = bfColor[4];
  70. 		return("linear-gradient(" + _rgba + ',' + _rgba + "),");
  71. 	}
  72.  
  73. 	// ----------------< URLフィルタ >----------------
  74. 	var _skip = false;
  75. 	for (var i=0; i<_A_SKIP_URL.length; i++){
  76. 		if (location.href.indexOf(_A_SKIP_URL[i]) !== -1 || _A_SKIP_URL[i] === "*"){_skip = true;}
  77. 	}
  78. 	
  79. 	
  80. 		
  81. // ################################################ //
  82. // ################### メイン処理部 ################### //
  83. // ################################################ //
  84.  
  85.  
  86. // ================≪ 起動処理 ≫================
  87. 	loadFilter();
  88.  
  89. 	_win.addEventListener("DOMContentLoaded", afterTouch, false);
  90. 	
  91. 	if (FLASH === true){_win.addEventListener("DOMContentLoaded", flashMode, false);}
  92.  
  93. 	
  94. // ================≪ フィルタの適用 ≫================
  95. function loadFilter(_fast){
  96. 	var _filter = document.createElement("ac_filter"); 
  97. 	_filter.id = "adjustColor"; 
  98. 	_filter.style.backgroundColor = fColor[4];
  99. 	_filter.style.pointerEvents = "none";
  100. 	_filter.style.height = "100%";
  101. 	_filter.style.width = "100%";
  102. 	_filter.style.position = "fixed";
  103. 	_filter.style.zIndex = 9999;
  104.  
  105. 	var _nodes = document.getElementsByTagName("html")[0].childNodes;
  106. 	for (var i=0; i<_nodes.length; i++){
  107. 		var _node = _nodes[i];
  108. 		if (_node.tagName === "BODY"){
  109. 			var _style = _node.style;
  110. 			_style.position = "absolute";
  111. 			//	absolute にすると中央揃えでなくなってしまう
  112. 			_style.left = 0;
  113. 			_style.right =  0;
  114. 			_style.top = 0;
  115. 			_style.bottom = 0;
  116. 			// unset なのはブラウザ標準スタイルシートでマージンが存在するため
  117. 			_style.margin = "unset auto";
  118. 			break;
  119. 		} else if (_node.tagName === "FRAMESET"){
  120. 			document.getElementsByTagName("html")[0].insertBefore(_filter, _node);
  121. 			return;
  122. 		}
  123. 	}
  124. 	document.getElementsByTagName("html")[0].appendChild(_filter);
  125. }
  126.  
  127.  
  128. // ================≪ 追加処理 ≫================
  129. function afterTouch(){
  130.     var elm = document.getElementsByTagName("*");
  131. 	var elm_length = elm.length;
  132.  
  133. 	for (var i = 0; i < elm_length; i++) {
  134.  
  135. 		var tElm = elm[i];
  136. 		// <A>タグ
  137. 		if (tElm.tagName === "A" && _skip === true) {continue;}
  138.         var style = _win.getComputedStyle(tElm, null);
  139. 		var fgColor = style.getPropertyValue("color");
  140. 		
  141. 		// ----------------< 背景 >----------------
  142. 		fg:{
  143. 			
  144. 			//	処理する必要のないカラーは省く
  145. 			for (var n=0; n<lCount; n++){
  146. 				if (fgColor === list[n]){break fg;}
  147. 			}
  148. 						
  149. 			//	既存のカラーは省エネ
  150. 			for (var n=0; n<lCount; n++){
  151. 				if (fgColor === lFg[n]){
  152. 					tElm.style.color = list[n];
  153. 					break fg;
  154. 				}
  155. 			}
  156.  
  157. 			var _tColorF = convColor(fgColor);
  158. 			lFg[lCount] = fgColor;
  159. 			list[lCount] = _tColorF;
  160. 			lCount++;
  161. 			tElm.style.color = list[n];
  162. 		}
  163. 	}
  164. }
  165.  
  166.  
  167. //	================ <背景色レンジ縮小 ≫================
  168. function convColor(_bg) {
  169.  
  170. 	var _col = rgbSplit(_bg);
  171. 	
  172.     var _colR = _col[0] * _pr + _pr2*1;
  173.     var _colG = _col[1] * _pg + _pg2*1;
  174.     var _colB = _col[2] * _pb + _pb2*1;
  175. 	
  176. 	_colR = Math.floor((_colR - filterRA) / filterAa);
  177. 	_colG = Math.floor((_colG - filterGA) / filterAa);
  178. 	_colB = Math.floor((_colB - filterBA) / filterAa);
  179.  
  180.     if (typeof _col[3] === "undefined") {
  181.         return ("rgb(" + _colR + ", " + _colG + ", " + _colB + ")");
  182.     }
  183.     return ("rgb(" + _colR + ", " + _colG + ", " + _colB + ", " + _col[3] + ")"); //	rgba
  184. }
  185.  
  186.  
  187. // ================≪ RGB値の分割 ≫================
  188. function rgbSplit(_col){
  189. 	if (_col.substring(0, 4) === "rgb("){_col = _col.slice(4, -1)}
  190. 	else {_col = _col.slice(5, -1)}
  191. 	var _ret = _col.split(", ");
  192. 	return (_ret);
  193. }
  194.  
  195.  
  196. // ================≪ 白・黒の範囲を与えてフィルタを作成 ≫================
  197. function createFilter(_w, _b){
  198. 	var br = _b[0], wr = _w[0], wg = _w[1], wb = _w[2];
  199. 	var tr = wr - br;
  200. 	var r = tr / (255 - tr) * br + br*1;
  201. 	var a = br/ r;	// 中心値 r が気をつけないと 0 や 255 になって 0 除算になる
  202. 	if (isNaN(a) === true){a = (wr-255) / (r-255);}
  203.  
  204. 	var g = r - (wr - wg) / a;
  205. 	var b = r - (wr - wb) / a;
  206. 	
  207. 	// r, g, b, a, rgba の値を配列で返す
  208. 	return ([r, g, b, a, "rgba(" + Math.floor(r) + ", " + Math.floor(g) + ", " + Math.floor(b) + ", " + a + ")"]);
  209. }
  210.  
  211. // ================≪ フラッシュにもフィルタを適用 ≫================
  212. function flashMode(){
  213. 	
  214. 	 for (var objs = document.getElementsByTagName("object"), i = 0, obj; obj = objs[i]; i++){
  215. 	 
  216.         if (obj.type === "application/x-shockwave-flash"){
  217.             var skip = false;
  218. 			obj.style.display = "none";
  219.  
  220.             for (var params = obj.getElementsByTagName("param"), j = 0, param; param = params[j]; j++){
  221. 			
  222.                 if (param.getAttribute("name") == "wmode"){
  223.                     skip = true;
  224.                     param.setAttribute("value", "transparent");
  225. 					
  226. 					// バックグラウンドのフラッシュはこうすると適用される
  227. 					_win.setTimeout(function(o){
  228. 						o.parentNode.insertBefore(o,o.nextSibling);
  229. 						o.style.display = "block";
  230. 					}, 100, obj);
  231. 					
  232.                     break;
  233.                 }
  234.             }
  235.             if(skip != true) {
  236. 				// paramが存在しないとき用（動作未確認）
  237. 				var param = document.createElement("param");
  238. 				param.setAttribute("name", "wmode");
  239. 				param.setAttribute("value", "transparent");
  240. 				obj.appendChild(param);
  241. 				obj.parentNode.insertBefore(obj,obj.nextSibling);
  242. 			}
  243. 			
  244. 			// バックグラウンドのフラッシュはこうすると適用される
  245. 			_win.setTimeout(function(o){
  246. 				o.parentNode.insertBefore(o,o.nextSibling);
  247. 				o.style.display = "block";
  248. 			}, 100, obj);
  249.         }
  250. 	}
  251. 	
  252. 	// ----------------< embedタグ >----------------
  253. 	for (var embs = document.getElementsByTagName("embed"), i = 0, emb; emb = embs[i]; i++){
  254. 		emb.style.display = "none";
  255. 		emb.setAttribute("wmode", "transparent");
  256. 	
  257. 		// バックグラウンドのフラッシュはこうすると適用される
  258. 		setTimeout(function(o){
  259. 			o.parentNode.insertBefore(o,o.nextSibling);
  260. 			o.style.display = "block";
  261. 		}, 100, emb);
  262. 	}
  263. }