サイトを開いた最初の表示に拘る
「Stylus」を利用した場合は、ページを開いた最初からCSSがページに適用されます。 ところが、「Tampermonkey」を使ってCSSのスタイルをページに適用する場合は、どうしても一瞬遅れてCSSが適用される問題に悩まされて来ました。
ほんの一瞬ですが、ページの開かれる瞬間は目立ちます。 これは音楽のイントロや、ムービーの序章と同じで、全ての印象を左右する場合もあります。
この「Gyao! Comfy」でも、前バージョンは、最初に「GYAO!」サイトを開いた時に、ほんの一瞬ページ下部の「白背景」が目に入ります。 その後、別ページに移動する時は気になりませんが。
これを改善しようと色々試しましたが、JavaScriptの通常のメソッドでは改善ができませんでした。 しかし最後に、編集画面の起動強化に使う（強化したツール名には ⭐マークを付けています）コードを試すと、素晴らしい効果を発揮しました。
起動強化コード
以下は、起動強化コードのサンプルです。 以下のスクリプトは、ページが読み込まれる際に「Tampermonkey」が可能な最速のタイミングで動作し、「body要素」が取得されるまで、0.001secごとに取得を試みます。
このコードだけでは、効果はありません。「Tampermonkey」は、デフォルトのスクリプト起動タイミングを「@run-at document-body」としている様で、このコードはもっと早い時期から動作させないと、意味が無いのです。
以下は今回の「スクリプトヘッダー」ですが、「@run-at document-start」の行で、通常のスクリプトでは使わない最も早いタイミングを設定しています。
一般のスクリプトでこれを設定すると、未だページの「body要素」も無い状態で、多くのコードは要素を何も取得できずにエラー停止します。 しかし、上記の強化コードは、「body要素」が未だ存在しない間に起動し、それを取得できるまで動作するコードで、「document-start」で動作させてこそ有効なコードです。
この起動強化コードの利用で、どんな場合も、アレンジが適用された状態でページが開く様になりました。 私にとって、これはとても大きな前進です。
「Gyao! Comfy」の操作について
「Gyao! Comfy」は「Tampermonkey」上で常にONにしておく常駐型のツールです。「Tampermonkey」は「GYAO!」のサイトを開いた時にのみ実行されます。
「Gyao! Comfy」を常駐すると、幾つかの便利なショートカット操作が可能になりますが、これは前ページに纏めているので、参照ください。
また、「stylus」を使うCSSスタイルの「GYAO動画のフル画面表示」を導入して併用すると、通常サイズのウインドウ内全体に動画表示ができる様になります。 これはサブウインドウで動画表示する事が多い場合に適していますが、「Gyao! Comfy」があれば、通常は必要ありません。
「Gyao! Comfy」を利用するには
このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Gyao! Comfy 〕 ver. 0.3
// ==UserScript==
// @name Gyao! Comfy
// @namespace http://tampermonkey.net/
// @version 0.3
// @description Gyao! 動画の「▶」のクリックで全画面表示
// @author You
// @match https://gyao.yahoo.co.jp/*
// @run-at document-start
// @grant none
// ==/UserScript==
let retry=0;
let interval=setInterval(wait_target, 1);
function wait_target(){
retry++;
if(retry>100){ // リトライ制限 100回 0.1secまで
clearInterval(interval); }
let target=document.body; // 監視 target
if(target){
clearInterval(interval);
style_in(); }}
function style_in(){
let css1=
'<style id="GC1" type="text/css">'+
'/* GYAO動画のフル画面表示 ver. 202203.08.01 */'+
':root { --back: #91b4bf; --hove: #b9cfd6; }'+
'html, body { background: var(--back); }'+
'.button-favorite { opacity: .6; }'+
'.button-favorite:hover { opacity: .8; }'+
'.button-favorite .button-favorite-text { color: #000; }'+
'.navigation-header-searchbar_searchSuggestResult__tU9rX, '+
'.search-suggest-result { background-color: #d2dee3 !important; }'+
'.arrow-button_arrowButton__aMtur:focus, '+
'.arrow-button_arrowButton__aMtur { box-shadow: inset 0 0 0 4px #fff; }'+
'.button-arrow:hover { box-shadow: 0 0 0 3px #fff; }'+
'.schedule-list-item { padding: 0 6px; }'+
'.schedule-list-item:hover { background: var(--hove); }'+
'.schedule-list-item-sub-text { color: #000 !important; }'+
'.schedule-list-container h3 { border-top: 1px solid #f0f0f0; }'+
'.schedule-list .schedule-list-row-item:not(:last-child) { padding-right: 0; }'+
'.schedule-list .schedule-list-row-item { border: none !important; }'+
'.schedule-list .schedule-list-row-item h3, .schedule-list .schedule-list-row-item ul { '+
'border-left: 1px solid #f0f0f0; border-right: 1px solid #f0f0f0; }'+
'.program-list .program-list-more-link { margin-top: 30px; }'+
'.more-link .more-link-text { color: #000; outline: 1px solid #eee; }'+
'.more-link .more-link-text:active, .more-link .more-link-text:hover { '+
'color: #fff; background-color: rgb(60 125 150 / 50%); }'+
'.breadcrumb .breadcrumb-list-item-link, '+
'.breadcrumb .breadcrumb-list-item:last-child .breadcrumb-list-item-link { color: #000; }'+
'.breadcrumb_item__KOyoB * { color: #000 !important; }'+
'.ad.ad-yads { display: none !important; }'+
'.overlay-ad_ad__grVga { display: none !important; }'+
'.timeline-ad_timelineAd__zM3OV { display: none !important; }'+
'.image-lazy { background-color: #90aeb7; }'+
'html::-webkit-scrollbar { width: 16px; }'+
'html::-webkit-scrollbar-thumb { '+
'background: #000; border: 1px solid var(--back); border-right: none; }'+
'html::-webkit-scrollbar-track { background: transparent; }'+
'html { scrollbar-color: #000 transparent; }'+
'html { overflow: overlay; overflow-x: hidden; }</style>';
if(!document.querySelector('#GC1')){
document.documentElement.insertAdjacentHTML('beforeend', css1); }
let path=document.location.pathname;
if(path.match(/^\/ranking|^\/arrivals|^\/titles|^\/search|^\/schedule/)){
let css2=
'<style id="GC2" type="text/css">'+
'/* 共通設定 */'+
'.tab .tab-title > span { color: #000; }'+
'.tab .tab-title.is-active { background: none; }'+
'.tab .tab-title:active > span, .tab .tab-title:focus > span, '+
'.tab .tab-title:hover > span { color: #000; }'+
'.option-selector .option-selector-item > label { color: #000; }'+
'.option-selector .option-selector-item > input:hover + label { color: #000; }'+
'.program-list .program-list-item-title { color: #000; }'+
'.program-list .content-label { color: #000; }'+
'.program-list .program-list-item-sub-text { color: #000; }'+
'.item-list .item-list-more-link { margin-top: 30px; }'+
'html::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .2); }'+
'html { scrollbar-color: rgba(0, 0, 0, .2) transparent; }</style>';
if(!document.querySelector('#GC2')){
document.documentElement.insertAdjacentHTML('beforeend', css2); }}
if(path.match(/^\/p\/|^\/player\/|^\/episode\/|^\/title\//)){
let css3=
'<style id="GC3" type="text/css">'+
'/* 個別の動画ページ 基本表示 */'+
'.video-player.is-pip .video-player-titles { background-color: #223e4c; }'+
'.video-player.is-pip .video-player-titles p { color: #ccc; }'+
'.video-player.is-pip .video-player-titles:after { content: "▲"; '+
'position: fixed; right: 20px; bottom: 15px; font: normal 32px/44px Meiryo; '+
'text-indent: 6px; color: #fff; display: block; height: 50px; width: 50px; '+
'border: 3px solid #fff; border-radius: 50%; }'+
'.video-information .datetime { color: #000; }'+
'.video-descriptions .video-description-main, '+
'.program-descriptions .program-description-main { color: #000; }'+
'.video-descriptions .content-text, .program-descriptions .content-text { color: #000; }'+
'.container-clipper .container-clipper-content::after { '+
'background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #b9cfd6); height: 50px; }'+
'.video-list-more { background: var(--hove); }'+
'.item-tile .item-tile-item-details { background: none; }'+
'.item-tile-item-link:hover { background: var(--hove); }'+
'.button.type-primary-white { background: var(--hove); }'+
'.button.type-primary-white:hover { background: #c2edfb; }'+
'.button.type-secondary { background: var(--hove); }'+
'.button.type-secondary:hover { background: #c2edfb; }'+
'.review-list-item-header-post-info .datetime { color: #000; }'+
'.review-list .review-list-item-content-text { color: #000; }'+
'.review-list-item-content-interstitial { color: #000 !important; background: var(--hove); }'+
'.review-list-more { background: var(--hove); }'+
'.video-list .video-list-item { padding: 0 4px; }'+
'.video-list .video-list-item:hover { background-color: var(--hove); }'+
'.video-list .video-list-item.is-current { background-color: var(--hove); }'+
'.video-list .video-list-item-titles time { color: #000; }'+
'.video-list .video-list-item-sub-text { color: #000; }'+
'.section-upsell-item { padding: 0 4px; }'+
'.ad-banner.ad.section { display: none; }'+
'.to-app-banner.to-app-banner-footer, .footer-aside.footer-container { display: none; }'+
'.vjs-gyao .vjs-head-bar .vjs-head-title { font-size: 1em; }'+
'.vjs-gyao .vjs-control-bar .vjs-play-progress { background-color: #29b6f6; }'+
'html::-webkit-scrollbar { width: 0px; }'+
'html { scrollbar-width: none; }</style>';
if(!document.querySelector('#GC3')){
document.documentElement.insertAdjacentHTML('beforeend', css3); }}
if(path.match(/^\/specials\/|^\/special\//)){
let css6=
'<style id="GC6" type="text/css">'+
'/* 特設ページ */'+
'body { font-family: "メイリオ", Meiryo, sans-serif !important; }'+
'#cnt p, #cnt h3 { color: #fff !important; }</style>';
if(!document.querySelector('#GC6')){
document.documentElement.insertAdjacentHTML('beforeend', css6); }}
} // stylein()
window.addEventListener("load", function(){
let target_g=document.querySelector('.gyao-player'); // 監視 target
if(target_g){ // 通常動画のコンテンツ表示時に動作
let monitor_g=new MutationObserver(wider);
monitor_g.observe(target_g, {childList: true, subtree: true}); // 監視開始
function wider(){
let play_button=document.querySelector('.vjs-big-play-button');
let full_cont=document.querySelector('.vjs-gyao .vjs-fullscreen-control');
if(play_button && full_cont){
play_button.onclick=function(event){
if(!event.ctrlKey){
full_cont.click(); }}
document.onkeydown=function(event){
if(event.ctrlKey){
play_button.style.filter='hue-rotate(-135deg)'; }}
document.onkeyup=function(event){
play_button.style.filter='';
if(event.ctrlKey && event.keyCode==13){
full_cont.click(); }}}
}} // 通常動画のコンテンツ表示時
});