AbemaTV TVチャンネルツール「 AmbTV OnAir」（23）/ JavaScript

動画のみを「右Click」で表示する機能

「通常表示」（ブラウザ表示）の状態では、マウスを動かすと各種のコントロールに関係するパネルが表示されます。 通常サイズのウインドウの場合は、ウインドウ外にマウスポインターを退けると、それら「各種コントロール」は一瞬で消えます。

 

下の赤枠で囲んだ部分は、その「各種コントロール」です。

 

 

 

マウスポインターがウインドウ内にある場合は、ポインターを動かさなければ、これらの「コントロール」は 4secで自動的に消えます。 しかし僅かでもポインターが動くと、その瞬間にまた表示されます。

 

そのため、「F11」による「全画面表示」では、マウスを少し動かすと望まないのに表示されて、すぐに消えない「コントロール」は扱い難いものです。

 

で、これを動画画面の「右Click」で、強制的に非表示にする機能を作りました。 これで、「各種コントロール」が勝手に表示される事は無くなりましたが、再び「コントロール」が必要になった場合は、この機能をOFFにする必要があります。 

 

 

 手法

「TV放送型」の動画ページを開いた最初に、「各種コントロール」を非表示にする「style要素」をページ上に配置します。 ただし、同時に「disable=true」を指定して無効化しているので、ページ上の「コントロール」は通常通り表示されます。

 

その上で、以下のコードで「style」を有効・無効を変更します。

 

「 AmbTV OnAir」 ver.2.0   289行～ 

let NOAC=document.querySelector('.c-tv-NowOnAirContainer');
let clear_style=document.querySelector('.oa_clear_style');
if(NOAC && clear_style){
    NOAC.oncontextmenu=function(event){
        if(!event.ctrlKey || !event.shiftKey){
            if(!full_check()){
                if(clear_style.disabled==true){
                    clear_style.disabled=false; }
                else{
                    clear_style.disabled=true; }}}}

    document.addEventListener('keydown', function(event){
        if(event.keyCode=='27'){
            if(clear_style.disabled==false){
                clear_style.disabled=true; }}});
} // if(NOAC && clear_style)

 

「clear_style」が「コントロール」を非表示にする「style要素」です。 前半は、動画画面の「右Click」で、「clear_style」の「disabled=true」「disabled=false」を切換えるコードです。

 

後半は、「ESC」キーの押下で「clear_style」を無効にするコードです。 これは、操作に困った時は「ESC」で戻るという、一般的な仕様に従いました。 この機能は「コントロール」を全て非表示にするので、知らずに「右Click」した時の安全策です。

 

 

「コントロールの非表示」機能の仕様 

◎「通常表示」（ブラウザ表示）の動画画面を「右Click」すると、「動画」以外の「各種のコントロール」が瞬時に非表示になります。

 

◎ この状態から戻るには、動画画面を「右Click」するか「ESC」キーを押します。

 

◎「チャンネルセレクタ」上での「右Click」も、この機能をONに出来ます。

 

◎「F11」による「全画面表示」の状態でも、この機能は有効です。

 

◎「フルスクリーン表示」では各種の表示物がなく、この機能は動作しません。

 

実際に使って見ると、コントロールが一瞬で消えると非常に快適です。 特に「F11」による「全画面表示」が「フルスクリーン表示」以上に扱い易くなります。

 

 

 

「 AmbTV OnAir」の操作マニュアル

このツールは「 AmbTV Comfy」のサブツールで、両方を同時に併用できます。

「ミュート」機能の設定方法は、以下のページを参照ください。

 

 

 

 

「AmbTV OnAir」を利用するには 

このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。

 

 

❶「Tampermonkey」を導入します

使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。

既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。 

拡張機能の導入については、以下のページに簡単な説明があるので参照ください。

 

 

 

❷「Tampermonkey」に ツールのソースコードを登録します  

「 AmbTV OnAir」は、ソースコードを下の「Github」で配布しています。

 

 

 

このリンク先は下の様な画面で、ここでコードのコピーが可能です。

 

 

 

❶ 赤枠のところに、コピー用のボタンがあります。 これをクリックします。

　これで、ページ上のコードがクリップボードにコピーされます。

 

 

 

❷「Tampermonkey」の管理画面で「＋」マークの「新規スクリプト」を開きます。

 

 

 

❸「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠にしてください。

 

❹ 編集枠内をクリックして「Ctrl+V」を押すか、右クリックして「貼り付け」を選択します。

 

➎ コードの先頭までスクロールして、最初の行から正しく貼り付けられたかを確認してください。

 

❻ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。

 

 

 

「AmbTV OnAir」最新版について 

旧いバージョンの JavaScriptツールは、Abemaサイトのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。

 

●「AmbTV OnAir」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。