キー操作で「全画面 ⇄ 通常表示」を操作可能に
「Gyao! Comfy」の主な仕事は、動画閲覧の操作を快適にする事です。 動画再生のスタートボタン「▶」を押すと、スタートと同時に全画面表示にする便利機能ですが、せっかく JavaScriptを起動させるので、これだけではもったいない。
「GYAO!」の動画プレーヤーは YouTubeと異なり、ショートカットキーは限られています。 調べた所では、「Space」で「停止・再生」の切換え、「Esc」で「全画面表示」➔「通常表示」に戻せるだけの様です。
そこで、「全画面表示 ⇄ 通常表示」をキー操作で切り替える機能を追加しました。 使えるキーを色々と試すと、キー受付がシステムで封じられているのか、通常のキーは取得できません。 調子よく反応するキーは限られ、結局「Ctrl+Enter」をショートカットに使う事になりました。
「Gyao! Comfy」の再生操作の纏め
以下は、「Gyao! Comfy」ver. 0.2 で可能な操作です。
❶ 動画再生開始は通常の通り「▶」ボタンを「Click」します。
▪この操作で、動画は自動的に「全画面表示」になります。
❷ 再生中は「Ctrl+Enter」ごとに「通常表示」⇄「全画面表示」が切換ります。
❸「Space」キーを押すと「再生」⇄「停止」が切換ります。 但し、動画プレーヤーにフォーカスがある場合に限り、そうでないとページスクロールになります。
❹「Esc」キーは「全画面表示」➔「通常表示」に使えます。
➎ 動画再生の開始時に「▶」ボタンを「Ctrl+Click」すると、「通常表示」で再生が開始されます。 この違いを明瞭にするため、「Ctrl」キーを押すとボタンが「紺色」になります。
「GYAO!」のサイトデザインをアップデート
サイトの各所でHTML構成が更新されていたので、アレンジ用CSSコードを全面的に見直しました。 これは「GYAO動画のフル画面表示」ver. 202203.08.04 として、アップロードしましたが、更新したコードを改めて「Gyao! Comfy」に移植しました。
「Gyao! Comfy」は、再生操作の便利機能と同時に「GYAO動画のフル画面表示」と同等のサイトアレンジを提供します。 眼の疲れにくい配色のアレンジが、このツールを導入するだけで得られます。
〔注意〕
「GYAO動画のフル画面表示」は、動画を通常サイズのウインドウ内全体に表示できますが、そのコードは「Gyao! Comfy」にはありません。 これは「Gyao! Comfy」と「GYAO動画のフル画面表示」を併用すれば可能になります。（併用は問題ありません）
〔参考〕「GYAO動画のフル画面表示」は、以下のページで公開しています。
「Gyao! Comfy」を利用するには
このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Gyao! Comfy 〕 ver. 0.2
// ==UserScript==
// @name Gyao! Comfy
// @namespace http://tampermonkey.net/
// @version 0.2
// @description Gyao! 動画の「▶」のクリックで全画面表示
// @author You
// @match https://gyao.yahoo.co.jp/*
// @grant none
// ==/UserScript==
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); }}
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(); }}}
}} // 通常動画のコンテンツ表示時