AbemaTV のTVチャンネル
「AbemaTV」は、動画配信に2つのスタイルを用意しています。 シリーズ単位で動画を纏めた「書庫型」配信スタイルは、多くの動画配信サイトと同じです。 もうひとつは「TV放送型」の配信スタイルです。 配信予定（番組表）が固定した40ほどのTVチャンネルから、好きなチャンネルを選択して閲覧するスタイルです。
「TV放送型」はシリーズ動画の「一挙配信」に使われる事が殆どですが、ユーザー側で動画の観る箇所を選択したり戻したりできないので、「書庫型」の方がずっと閲覧し易いものです。
では、「TV放送型」なんて意味ないのではとなりそうですが、そうでもないのです。「一挙配信」は最初に「TV放送型」で配信され、その終了後から1週間程度の「書庫型」の「一挙配信」に移行する場合が殆どです。 そのため「TV放送型」の配信の方が、いち早く「一挙配信」を観れるわけです。 仕事休みの関係で「TV放送型」の方を選ぶしか無い場合があるかもしれません。
また、「TV放送型」の方がフリーズが少ない様です。 コンテンツに拠ってサーバーへのアクセス量を制御しているのかも知れません。
下は「TV放送型」の動画プレーヤーの様子で、動画の右側にマウスポインターを乗せると、チャンネル選択のメニューが表示されます。
右上隅の「閉じる」を押し、マウスポインターを画面外に退けると「サブウインドウ表示」と同様の拡大表示にできます。 もちろん全画面表示も可能で、これは良いデザインです。
コマーシャル画面で音声をミュート
「TV放送型」のチャンネル表示の動画プレーヤーは、「全画面」と「音量調節」のコントロールしかありません。
「CM」をしっかり動画の間に配信できるのが Abemaの戦略ですね。「CM」の多くが Abema配信のお知らせですが、シリーズ動画への割り込み感は否めません。
そこで実験的ですが、「CM」の音声をミュートするツールを作ってみました。 本当は音量を少し下げる様な調節がしたいのですが、現在の所はできないので、ミュートボタンをツールで押す方法を採っています。
トリガー 要素
「動画の終了」「CMの終了」を適確に判定できるトリガー要素が必要です。 今回は、動画の開始時とCMに入る直前に表示されるアニメーションを利用しました。
この要素は、Abema側のスクリプトでインポーズされ、常時はHTML上にこの要素が存在しません。 こういうのを捕まえるのは苦労します。 DevToolsを起動して要素がインポーズされるのを待ち、その瞬間のスクリーンショットから要素名を調べます。
後は、この要素の親要素に「MutationObserver」をセットして、表示要素の出現/消失をトリガーにしてボリュームを操作する関数を動作させています。
現在の機能の制限
このツールは、かなり正確に「CM」の動画再生の間だけ音声をミュートできます。 ただし、「一挙配信」の動画コンテンツは数時間にわたる場合が多く、同じチャンネルの次の「一挙配信」の開始との間に、10sec程度の時間調節が入る場合があります。
この時間調節は下の様な特別な画面表示になりますが、この後の新しい「一挙配信」の最初だけは、上記のトリガーにしたアニメーションが表示されません。
この理由で「動画の開始」を判定出来ず、その前の「一挙配信」の動画終了時に「ミュート」した状態をリセットできません。 従ってこの場合だけは、手作業で「音声」を「ON」にする必要があります。 ただし、上の「一挙配信」の繋ぎ画面は頻繁には出ないので、余り困る事は無いと思います。
チャンネル切替え時にミュートはリセットされます
「メインコンテンツ」から「CM」に入ると「ミュート」が適用されますが、その状態から他のチャンネルに移動して「ミュート」が続くよりも、チャンネル移動時に「ミュート」がリセットされた方が便利と考えました。
その代わり、他のチャンネルから「CM表示中」のチャンネルに移動した場合は、「ミュート」は適用されません。 これは仕様です。 ただし、そのチャンネルを続けて閲覧して「CM」に入った場合は、「ミュート」が適用されます。
「 AmbTV OnAir」
管理上で、このツールは「 AmbTV Comfy」のサブツールとしたいので、ツール名の前半を同じにしました。
「TV放送型」の画面のCMは殆どが「AbemaTV」の配信予定なので、「ミュート」したくないユーザーも居ると考え、敢えて「 AmbTV Comfy」と統合しませんでした。
「 AmbTV OnAir」を利用するには
このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 右サイドバーの マークのボタンを1度押してください。
コード枠内の右クリック ➔ コード全体の選択 ➔ コピー操作 が可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 AmbTV OnAir 〕 ver. 0.1
// ==UserScript==
// @name AmbTV OnAir
// @namespace http://tampermonkey.net/
// @version 0.1
// @description AbemaTV ユーティリティ
// @author Ameba User
// @match https://abema.tv/now-on-air/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=abema.tv
// @grant none
// ==/UserScript==
let target=document.querySelector('head > title');
let monitor0=new MutationObserver(tv_player_env);
monitor0.observe(target, { childList: true });
function tv_player_env(){
let retry=0;
let interval=setInterval(wait_target, 20);
function wait_target(){
retry++;
if(retry>100){ // リトライ制限 100回 2secまで
clearInterval(interval); }
let TP=document.querySelector('.com-tv-TVScreen__player');
if(TP){
clearInterval(interval);
player_vol(TP); }}}
function player_vol(TP){
setTimeout(()=>{
v_vol(1); // チャンネル変更時にミュートをリセット
}, 600);
let monitor1=new MutationObserver(con_vol);
monitor1.observe( TP, { childList: true });
con_vol();
function con_vol(){
let LF=document.querySelector('.com-tv-LinearFooter__feed-super');
if(TP.querySelector('.com-tv-TVScreen__eyecatch')){
v_vol(1); }
else{
if(!LF.textContent){
v_vol(0); }}}
} // player_vol(TP)
function v_vol(n){ // 0: OFF 1: ON
let button=document.querySelector('.com-playback-Volume__icon-button');
if(button){
let label=button.getAttribute('aria-label');
if(n==0 && label=='音声をオフにする'){
button.click(); }
else if(n==1 && label=='音声をオンにする'){
button.click(); }}}
「AmbTV OnAir」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「AmbTV OnAir 」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
