Tampermonkey/供養/ Youtubeの字幕フォントを(無理やり)変更する version 1
:追加された部分
:削除された部分
(差分が大きい場合、文字単位では表示しません)
Tampermonkey/供養/ Youtubeの字幕フォントを(無理やり)変更する
* 中華フォントやだー!!! の一心で書いてた
→ 公式の字幕オプションでフォント変えられるの知らなかった……
* タグに直書きされたcssを「取得して」「置換する」という
__力こそパワー__ なごり押しを通すアレ
* コードが稚拙なのは、いつものことです
```javascript
// ==UserScript==
// @name CaptionFontChange
// @namespace https://www.youtube.com/
// @version 0.1.3
// @description I WANT JAPANESE FONT
// @author kAttri-ute
// @match https://www.youtube.com/*
// @run-at document-body
// @grant GM_addStyle
// ==/UserScript==
GM_addStyle("@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@600&family=Jura:wght@700&family=Kosugi+Maru&family=M+PLUS+Rounded+1c&family=Mitr&family=Orbitron&display=swap');");
(function() {
'use strict';
/***
font-family: 'Dosis', sans-serif;
font-family: 'Jura', sans-serif;
font-family: 'Kosugi Maru', sans-serif;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-family: 'Mitr', sans-serif;
font-family: 'Orbitron', sans-serif;
***/
var $root = document.getElementById('movie_player');
var Changer = function() {
if($root !== null) {
// --->
let $conts = $root.querySelectorAll('div.caption-window span[style*="font-family"]');
if(0 < $conts.length) {
$conts.forEach(function($cont) {
let stytx = $cont.getAttribute('style');
let sty_arr = stytx.split(';');
//console.log(sty_arr);
let idx = sty_arr.findIndex((item) => (-1 < item.indexOf('flag')));
if(idx < 0) {
// font-falimy change
idx = sty_arr.findIndex((item) => (-1 < item.indexOf('font-family:')));
sty_arr[idx] = " font-family: 'Jura', 'Orbitron', 'M PLUS Rounded 1c', 'Kosugi Maru', sans-serif";
// font-size change
idx = sty_arr.findIndex((item) => (-1 < item.indexOf('font-size:')));
let sz = sty_arr[idx].match(/\d+\.\d+px/)[0];
sz = Math.abs(sz.substring(0, sz.length - 2)) - 3;
sty_arr[idx] = " font-size: "+ sz +"px";
// setting
sty_arr[sty_arr.length-1] = ' flag: true';
sty_arr.push(' padding: 10px');
sty_arr.push('');
stytx = sty_arr.join(';');
$cont.setAttribute('style', stytx);
}
});
}
// --->|
} else {
$root = document.getElementById('movie_player');
}
}
var interval_id;
var interval_span = 180;
interval_id = setInterval(Changer, interval_span);
})();
```
今見ても…… __およそ10F毎に更新巡回とかマジでアレのソレ__
- 中華フォントやだー!!! の一心で書いてた
→ 公式の字幕オプションでフォント変えられるの知らなかった…… - タグに直書きされたcssを「取得して」「置換する」という
力こそパワー なごり押しを通すアレ - コードが稚拙なのは、いつものことです
// ==UserScript==
// @name CaptionFontChange
// @namespace https://www.youtube.com/
// @version 0.1.3
// @description I WANT JAPANESE FONT
// @author kAttri-ute
// @match https://www.youtube.com/*
// @run-at document-body
// @grant GM_addStyle
// ==/UserScript==
GM_addStyle("@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@600&family=Jura:wght@700&family=Kosugi+Maru&family=M+PLUS+Rounded+1c&family=Mitr&family=Orbitron&display=swap');");
(function() {
'use strict';
/***
font-family: 'Dosis', sans-serif;
font-family: 'Jura', sans-serif;
font-family: 'Kosugi Maru', sans-serif;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-family: 'Mitr', sans-serif;
font-family: 'Orbitron', sans-serif;
***/
var $root = document.getElementById('movie_player');
var Changer = function() {
if($root !== null) {
// --->
let $conts = $root.querySelectorAll('div.caption-window span[style*="font-family"]');
if(0 < $conts.length) {
$conts.forEach(function($cont) {
let stytx = $cont.getAttribute('style');
let sty_arr = stytx.split(';');
//console.log(sty_arr);
let idx = sty_arr.findIndex((item) => (-1 < item.indexOf('flag')));
if(idx < 0) {
// font-falimy change
idx = sty_arr.findIndex((item) => (-1 < item.indexOf('font-family:')));
sty_arr[idx] = " font-family: 'Jura', 'Orbitron', 'M PLUS Rounded 1c', 'Kosugi Maru', sans-serif";
// font-size change
idx = sty_arr.findIndex((item) => (-1 < item.indexOf('font-size:')));
let sz = sty_arr[idx].match(/\d+\.\d+px/)[0];
sz = Math.abs(sz.substring(0, sz.length - 2)) - 3;
sty_arr[idx] = " font-size: "+ sz +"px";
// setting
sty_arr[sty_arr.length-1] = ' flag: true';
sty_arr.push(' padding: 10px');
sty_arr.push('');
stytx = sty_arr.join(';');
$cont.setAttribute('style', stytx);
}
});
}
// --->|
} else {
$root = document.getElementById('movie_player');
}
}
var interval_id;
var interval_span = 180;
interval_id = setInterval(Changer, interval_span);
})();
今見ても…… およそ10F毎に更新巡回とかマジでアレのソレ