「GYAO!」に関する述懐
動画サイト「GYAO!」に関して、これまでにサイト全体をアレンジするCSSスタイル「GYAO動画のフル画面表示」と、動画に表示されるADをOFFにする JavaScriptツール「Gyao! AD Skip」を作りました。 以下がそれらの最終記事です。
これらは現在も利用できますが、どちらも理想的とは言い難いものです。
「GYAO動画のフル画面表示」のCSSコードはかなり陳腐化している事が判って来ました。「GYAO!」サイトは大がかりでアレンジを徹底できず、サイトデザインの更新に追いついて行けない部分が出て来ます。 要所に絞り、細かな点に拘らないアレンジが求められますが、再アレンジはごっついしんどいです。
一方の「Gyao! AD Skip」は、試みの域を出ないものです。 高度な技術の基礎がある「uBlock Origin」等を使い始めると、汎用動画プレーヤーでのブロック技術にはとても追いつかないと感じます。
簡単な快適化ツール
今回手がけたのは、動画サイズの拡大を自動で行うツールです。「GYAO!」をよく閲覧される方はご存知と思いますが、動画スタートの「▶」ボタンを押さないと、動画サイズを全画面にする「 」ボタンが表示されません。 シリーズ動画を続けて見る様な場合は、毎回このボタンを押すのが不便です。
小さな事ですが、これはスクリプトで自動で全画面表示に出来るのではと、コードを書いて見ると上手く行きました。
最初は「Gyao! AD Skip」に追加する事を考えましたが、自分が使わないツールをお勧め出来ません。 で、ほんの数行のコードというのもなんなので、これは「GYAO動画のフル画面表示」と合体させる事を考えました。
実は最近、「Stylus」のスタイル適用の速度に、ほぼ見劣りしないコードが作れる様になっています。 このコードを拡張機能としてコンパイルすれば、多分「Stylus」と同等の適用速度になると思っています。
それを再確認する意味もあり、複数セクションの「GYAO動画のフル画面表示」のCSSを、JavaScript版に移植する事にしました。「Gyao! Comfy」は、サイトデザインのアレンジと合体した環境ツールとすれば、恰好が付くというわけです。
ツールの内容
「GYAO動画のフル画面表示」のセクション構成は以下です。
〔追記〕2022.03.09 ver. 202203.08.01 から 6セクションに変更しています。
1 GYAO動画のフル画面表示 ver. 202203.03.01
2 共通設定
3 共通設定
4 個別の動画ページ 基本表示
5 動画プレーヤー
6 動画プレーヤー
7 特設ページの修復
GYAO! サイト全体のアレンジは「1,2,3」のセクションで行い、「4,5,6」が動画表示ページのアレンジです。 このスタイルは特に、サブウインドウで動画を表示する事に注力していて、それが「5,6」のコードです。
「Gyao! Comfy」は、自動的に「全画面表示」にする機能が主で、サブウインドウでの表示は目的外です。 そのため「5,6」は採り入れず、他のセクションを移植する事にしました。
以下は、1つのセクションのコードの雛形ですが、太字は適用ページを「path名」で選別する機能です。 これは「Stylus」の適用先の指定に相当します。
スタイルのCSSコードをコピーして、styleタグに変え、最後の2行で「html」に埋め込みます。 この様なコードを、適用するセクションの数だけ実行します。
制作の進捗
目的の通りの動作は、比較的簡単に実現しました。 ただ、CSSコードを移植していると、現在はクラス名が一致せずに無効なコードが散見され、元の「GYAO動画のフル画面表示」の更新が必要と判って来ました。
これは、かなり手間なチェックが必要で、このページの「Gyao! Comfy」は、更新前のコードを使っています。 今後、「GYAO動画のフル画面表示」も「Gyao! Comfy」も、CSSコードの更新が必要です。
「Gyao! Comfy」を利用するには
このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
未だ全てが完全ではありませんが、動画のスタートボタンの機能はテストできます。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Gyao! Comfy 〕 ver. 0.1
// ==UserScript==
// @name Gyao! Comfy
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Gyao! 動画の「▶」のクリックで全画面表示
// @author You
// @match https://gyao.yahoo.co.jp/*
// @grant none
// ==/UserScript==
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(){
full_cont.click(); }}
let progress=document.querySelector('.vjs-play-progress');
progress.style.backgroundColor='#29b6f6'; // シークバーを青色にする
}} // 通常動画のコンテンツ表示時
let css1=
'<style id="GC1" type="text/css">'+
'/* GYAO 全ページ共通のスタイル ******************/'+
'/* 基本配色 */'+
':root { --back: #91b4bf; --hove: #b9cfd6; }'+
'/* ページ背景色 =全ページ共通= */'+
'html, body { background: var(--back); }'+
'/* GYAOヘッダー */'+
'.header .header-global { height: 44px; }'+
'.header .header-left-container { height: 44px; }'+
'.header .header-logo-gyao { height: 20px; }'+
'.header .search-suggest .search-suggest-input, .header .search-suggest .search-suggest-search-button { height: 36px; }'+
'.header .header-right-container { line-height: 44px; }'+
'.header .header-button { font-size: 1.2rem; font-weight: normal; }'+
'.header .header-button img { width: 24px; height: 24px; }'+
'.header .header-menu-button .header-menu-button-text { font-size: 1.2rem; font-weight: normal; }'+
'/* ウォッチリストに追加するボタン =全ページ共通= */'+
'.button-favorite { opacity: .6; }'+
'.button-favorite:hover { opacity: .8; }'+
'.button-favorite .button-favorite-text { color: #000; }'+
'/* 横スライド枠 ボタンデザイン =全ページ共通= */'+
'.arrow-button_arrowButton__aMtur:focus, .arrow-button_arrowButton__aMtur { box-shadow: inset 0 0 0px 4px #fff; }'+
'/* 動画一覧アイテム 説明 =全ページ共通= */'+
'.item-carousel .item-carousel-item-details { background-color: transparent; }'+
'.item-carousel-item:hover { background: var(--hove); }'+
'/* 更新カレンダー =全ページ共通= */'+
'.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; }'+
'/* ジャンル・サブジャンル =全ページ共通= */'+
'.category-item:hover { background: var(--hove); }'+
'.categories .category-item:nth-child(3n+1) { border-left: 1px solid #f0f0f0; }'+
'.categories .category-item:nth-child(3n) { border-right: 1px solid #f0f0f0; }'+
'/* インフォメーション =全ページ共通= */'+
'.item-list-item { padding: 0 8px; }'+
'.item-list-item:hover { background: var(--hove); }'+
'.item-list-item-sub-text { color: #000 !important; }'+
'/* もっと見る =全ページ共通= */'+
'.more-link .more-link-text { color: #000; }'+
'.more-link .more-link-text:active, .more-link .more-link-text:hover { color: #fff; filter: brightness(400%); }'+
'/* 末尾 パンクズリスト =全ページ共通= */'+
'.breadcrumb .breadcrumb-list-item-link, .breadcrumb '+
'.breadcrumb-list-item:last-child .breadcrumb-list-item-link { color: #000; }'+
'/* ヤフーADブロック =全ページ共通= */'+
'.ad.ad-yads { display: none !important; }'+
'/* 読込みの無いサムネイル */'+
'.image-lazy { background-color: #90aeb7; }'+
'/* スクロールバーデザイン（Chromeのみ）=全ページ共通= */'+
'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; }'+
'/* スクロールバーデザイン（Firefoxのみ）=全ページ共通= */'+
'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; }'+
'/* 検索結果ページの追記 */'+
'.search-rental-result-information.search-rental-result-information-lazy.is-active { background: var(--hove); }'+
'.search-rental-result-information .search-rental-result-information-text { color: #000; }'+
'/* スクロールバーデザイン（Chromeのみ）*/'+
'html::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .2); }'+
'/* スクロールバーデザイン（Firefoxのみ）*/'+
'html { scrollbar-color: rgba(0, 0, 0, .2) transparent; }</style>';
if(!document.querySelector('#GC2')){
document.documentElement.insertAdjacentHTML('beforeend', css2); }}
if(path.match(/^\/special\/gyao_latest\/|^\/coming-soon|^\/selection\/|^\/list\//)){
let css3=
'<style id="GC3" type="text/css">'+
'/* 共通設定 **********************************/'+
'.container-two-column-right { width: 0 !important; }'+
'/* 注目の配信ラインナップ specialのページ */'+
'#cnt h2 { color: #fff; font-size: 24px; font-weight: bold !important; }'+
'#cnt P, #cnt h5 { font-weight: bold !important; }'+
'#cnt h5 { color: #000; }'+
'.thumb .time_left, .thumb .duration { color: #fff; }'+
'/* 配信のラインナップ */'+
'.frame_layer .module_accordion a { color: #fff; font-weight: bold; }'+
'#cnt h3 { color: #fff; font-weight: bold !important; }'+
'.accordion_content p { color: #000 !important; }'+
'/* 配信予定 coming-soonのページ */'+
'.coming-soon-list.section { margin: 0 auto; }'+
'.item-list .datetime { color: #000; }'+
'.item-list .item-list-item-sub-text { color: #000; }'+
'.item-list-item.item-list-item-nomatch { color: #000; }'+
'/* もっと見る */'+
'.item-list-more-link { background-color: var(--hove) !important; }'+
'/*音楽カテゴリ selectionのページ */'+
'.selection-header-description-text { color: #000 !important; }'+
'.selection-list .item-list { margin: 0 auto; }'+
'/* 注目の特集 listのページ */'+
'#delimiter_wrapper, #main_cnt_wrapper { background: none; }'+
'#delimiter li, #delimiter li a { color: #000 !important; }'+
'#main_cnt { color: #fff; }'+
'#im, #rightcnt, #footer { display: none; }'+
'/* スクロールバーデザイン（Chromeのみ）*/'+
'html::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .2); }'+
'/* スクロールバーデザイン（Firefoxのみ）*/'+
'html { scrollbar-color: rgba(0, 0, 0, .2) transparent; }</style>';
if(!document.querySelector('#GC3')){
document.documentElement.insertAdjacentHTML('beforeend', css3); }}
if(path.match(/^\/p\/|^\/player\/|^\/episode\/|^\/title\//)){
let css4=
'<style id="GC4" 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: absolute; right: 20px; bottom: 15px; '+
'font: normal 32px/40px 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); }'+
'/*検索 オーバーレイ ダイアログ */'+
'.search-suggest.search-suggest-core .search-suggest-container { background-color: rgba(11, 45, 62, 0.7); }'+
'.search-suggest.search-suggest-core .search-suggest-close-button { font-size: 1.4rem; color: #fff; }'+
'/* 右列 */'+
'/* 右リスト選択部 */'+
'.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; }'+
'/* Cookei許諾 */'+
'.section.thirdparty-cookie-information p { color: #000; }'+
'/* 右リスト AD */'+
'.ad-banner.ad.section { display: none; }'+
'/* フッター部 AD */'+
'.to-app-banner.to-app-banner-footer, .footer-aside.footer-container { display: none; }'+
'/* スクロールバーデザイン（Chromeのみ）*/'+
'html::-webkit-scrollbar { width: 0px; }'+
'/* スクロールバーデザイン（Firefoxのみ）*/'+
'html { scrollbar-width: none; }</style>';
if(!document.querySelector('#GC4')){
document.documentElement.insertAdjacentHTML('beforeend', css4); }}
if(path.match(/^\/specials\/|^\/special\/list/)){
let css7=
'<style id="GC7" type="text/css">'+
'/* 特設ページの修復 **************************/'+
'/* special/list */'+
'body { font-family: "メイリオ", Meiryo, sans-serif !important; }'+
'main h2 { color: #fff; }'+
'/* specials/ */'+
'#cnt p > a, #cnt h3 { font-family: Meiryo; color: #fff; }'+
'.app-frame_navigationMenu__bt79L, .navigation-menu_section__3NmVQ { width: 240px; }'+
'#cnt div:not(.video-js):not(.module_visual_header) p { font-family: Meiryo; color: #fff; }'+
'#cnt .frame_layer { font-family: Meiryo; }</style>';
if(!document.querySelector('#GC7')){
document.documentElement.insertAdjacentHTML('beforeend', css7); }}