Greasy Fork is available in English.
Feederチャットの背景を変更するスクリプトです。
// ==UserScript==
// @name 背景変更(Feederチャット)
// @namespace http://tampermonkey.net/
// @version 0.12
// @description Feederチャットの背景を変更するスクリプトです。
// @author You
// @match *.x-feeder.info/*/
// @match *.x-feeder.info/*/sp/
// @exclude *.x-feeder.info/*/settings/**
// @require https://greasyfork.org/scripts/396472-yaju1919/code/yaju1919.js?version=798050
// @require https://greasyfork.org/scripts/387509-yaju1919-library/code/yaju1919_library.js?version=755144
// @require https://greasyfork.org/scripts/388005-managed-extensions/code/Managed_Extensions.js?version=720959
// @grant GM.setValue
// @grant GM.getValue
// ==/UserScript==
(function() {
'use strict';
const backgroundColor_copy = $("#wrapper").css("backgroundColor");
const backgroundImage_copy = $("body").css("backgroundImage");
const addBtn = (h, title, func) => { // ボタンを追加する関数
return $("<button>").text(title).click(func).appendTo(h);
}
let inputImgSetBoolBtn, inputChangeInterval, inputImgURL, inputFilterColor, inputFilterOpacity, inputBlur, inputBrightness, inputSaturate, inputSepia;
const setConfig = () => {
const h = $("<div>");
let countUp_flag = false;
let start_flag = false;
let st; // setTimeoutのidを格納する変数
let exeFunc = () => start_flag ? funcMainAndChange() : null; // start_flagがtrueならchange関数とmain関数を実行
// input要素などを追加
inputImgSetBoolBtn = yaju1919.addInputBool(h, {
title: "壁紙変更",
value: false,
change: () => {
countUp_flag = true;
exeFunc();
},
});
inputChangeInterval = yaju1919.addInputNumber(h, {
title: "切り替え時間",
placeholder: "背景画像の切り替え時間(単位:秒)",
save: "AM_inputChangeInterval",
width: "90%",
value: 10,
min: 10,
max: Infinity,
change: exeFunc,
});
inputImgURL = yaju1919.addInputText(h, {
title: "画像のURL",
placeholder: "背景にしたい画像のURLを入力(複数の場合は改行で区切って入力)",
save: "AM_inputImgURL",
width: "90%",
textarea: true,
change: exeFunc,
});
inputFilterColor = yaju1919.addInputText(h, {
title: "フィルタの色",
placeholder: "カラーコードを入力(空の場合は黒色)",
save: "AM_inputFilterColor",
width: "90%",
change: exeFunc,
});
let rangeValue = $("<div>").appendTo(h); // 調整バーの値を表示する要素
inputFilterOpacity = yaju1919_library.appendInputRange(h, {
save: "AM_inputFilterOpacity",
width: "90%",
value: 0,
min: 0,
max: 100,
step: 1,
change: exeFunc,
});
let rangeValue2 = $("<div>").appendTo(h);
inputBlur = yaju1919_library.appendInputRange(h, {
save: "AM_inputBlur",
width: "90%",
value: 0,
min: 0,
max: 100,
step: 1,
change: exeFunc,
});
let rangeValue3 = $("<div>").appendTo(h);
inputBrightness = yaju1919_library.appendInputRange(h, {
save: "AM_inputBrightness",
width: "90%",
value: 100,
min: 0,
max: 500,
step: 1,
change: exeFunc,
});
let rangeValue4 = $("<div>").appendTo(h);
inputSaturate = yaju1919_library.appendInputRange(h, {
save: "AM_inputSaturate",
width: "90%",
value: 100,
min: 0,
max: 200,
step: 1,
change: exeFunc,
});
let rangeValue5 = $("<div>").appendTo(h);
inputSepia = yaju1919_library.appendInputRange(h, {
save: "AM_inputSepia",
width: "90%",
value: 0,
min: 0,
max: 100,
step: 1,
change: exeFunc,
});
//--------------------
const rangeValueLoad = () => { // 調整バーの数値を読み込む関数
const filterOpacity = inputFilterOpacity();
const blur = inputBlur();
const brightness = inputBrightness();
const saturate = inputSaturate();
const sepia = inputSepia();
rangeValue.text(`フィルタの透明度 : ${filterOpacity}`);
rangeValue2.text(`ぼかしの強度 : ${blur}`);
rangeValue3.text(`画像の明るさ : ${brightness}`);
rangeValue4.text(`彩度 : ${saturate}`);
rangeValue5.text(`セピア : ${sepia}`);
}
const setFilter = filter => { // filterを追加
const imgSetBoolBtn = inputImgSetBoolBtn();
if (imgSetBoolBtn) {
let elm = $("<div>").appendTo($("body"));
elm.css({
"z-index": "-114515",
"background": "inherit",
"-webkit-filter": filter,
"-moz-filter": filter,
"-o-filter": filter,
"-ms-filter": filter,
"filter": filter,
"position": "fixed",
"top": "0px",
"left": "0px",
"right": "0px",
"bottom": "0px",
});
}
}
addBtn(h, "初期値に戻す", () => {
let e = h.find("input");
e.eq(4).val(0);
e.eq(5).val(0);
e.eq(6).val(100);
e.eq(7).val(100);
e.eq(8).val(0);
const blur = inputBlur();
const brightness = inputBrightness();
const saturate = inputSaturate();
const sepia = inputSepia();
const filter = `blur(${blur}px) brightness(${brightness}%) saturate(${saturate}%) sepia(${sepia}%)`; // CSSのfilterプロパティ
setFilter(filter);
rangeValueLoad();
});
addBtn(h, "デバッグ情報をコピー", () => {
const imgSetBoolBtn = inputImgSetBoolBtn();
const changeInterval = inputChangeInterval();
const imgURL = inputImgURL();
const filterOpacity = inputFilterOpacity();
const filterColor = inputFilterColor();
// CSSのfilterプロパティに関する値
const blur = inputBlur();
const brightness = inputBrightness();
const saturate = inputSaturate();
const sepia = inputSepia();
//--------------------------------
const imgURLs = imgURL.split("\n").filter(v => v);
const filter = `blur(${blur}px) brightness(${brightness}%) saturate(${saturate}%) sepia(${sepia}%)`; // CSSのfilterプロパティ
let debugInfoText = `
"inputImgSetBoolBtn" : "${imgSetBoolBtn}",
"inputChangeInterval" : "${changeInterval}",
"inputImgURL" : "${imgURL}",
"inputFilterOpacity" : "${filterOpacity}",
"inputFilterColor" : "${filterColor}",
"inputBlur" : "${blur}",
"inputBrightness" : "${brightness}",
"inputSaturate" : "${saturate}",
"inputSepia" : "${sepia}",
"imgURLs" : "${imgURLs}",
"filter" : "${filter}",
"count" : "${count}",
"imgURLs[count]" : "${imgURLs[count]}",
"imgURLs.length" : "${imgURLs.length}",
"countUp_flag" : "${countUp_flag}",
"start_flag" : "${start_flag}"
`;
yaju1919.copy(debugInfoText);
debugInfoCopyResult.fadeIn();
clearTimeout(st);
st = setTimeout(() => {
debugInfoCopyResult.fadeOut();
}, 2000);
});
let debugInfoCopyResult = $("<div>").text("クリップボードにコピーしました").hide().appendTo(h);
const removeBgImg = () => { // 背景画像を削除
$("body").children().each((i, e) => e.style.zIndex === "-114515" ? $(e).remove() : null);
$("body").removeAttr("style").css({
"backgroundImage": `url(${backgroundImage_copy})`,
});
yaju1919.setBgImg(null, {
opacity: 0
});
$("#wrapper").css({
"backgroundColor": backgroundColor_copy
});
}
let si, count = 0; // siはsetIntervalのidを格納する変数
const main = () => {
const imgSetBoolBtn = inputImgSetBoolBtn();
const changeInterval = inputChangeInterval();
const imgURL = inputImgURL();
const filterOpacity = inputFilterOpacity();
const filterColor = inputFilterColor();
// CSSのfilterプロパティに関する値
const blur = inputBlur();
const brightness = inputBrightness();
const saturate = inputSaturate();
const sepia = inputSepia();
//--------------------------------
const imgURLs = imgURL.split("\n").filter(v => v);
const filter = `blur(${blur}px) brightness(${brightness}%) saturate(${saturate}%) sepia(${sepia}%)`; // CSSのfilterプロパティ
rangeValueLoad();
if (count >= imgURLs.length) count = 0; // countがimgURLsの長さ以上なら0に戻す
// 背景を設定
removeBgImg();
if (imgURLs.length > 0 && imgSetBoolBtn) {
$("#wrapper").css({ // 内部背景を透明にする
"backgroundColor": "transparent"
});
yaju1919.setBgImg(imgURLs[count], {
color: filterColor,
opacity: Number(filterOpacity) / 100
});
setFilter(filter);
if (countUp_flag) count++; // countUp_flagがtrueならcountの値を増やす
} else if (imgURLs.length === 0 || !imgSetBoolBtn) {
clearInterval(si);
}
countUp_flag = false;
//-----------
}
const change = () => {
const changeInterval = inputChangeInterval();
clearInterval(si);
si = setInterval(() => {
countUp_flag = true;
main();
}, changeInterval * 1000);
}
const funcMainAndChange = () => {
change();
main();
}
start_flag = true;
main();
setTimeout(() => { // 起動時に調整バーの数値を読み込む
rangeValueLoad();
});
return h;
}
win.Managed_Extensions["背景変更"] = {
config: setConfig,
tag: "装飾",
}
})();