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

Abemaの「ニュースチャンネル」 

AbemaTVにはニュースチャンネルが2系統あり、TVニュースの様なコンテンツを常時配信しています。 この「ニュース配信」は Edgeのトップ画面のニュースパネルに比べると、TV放送に近い「一般性」が感じられます。 ニュースの質はニュース制作会社に委ねられますが、時事速報をフッター部に文字表示したり、天気や早送りニュースのコーナー、ライブ配信、などの工夫がみられます。 

AbemaTV ニュースチャンネル

情報量など未完成の感がありますが、TV放送が無い場所でネットを通じてニュースを知りたい時に、こういう「TV放送型」の配信は今後の価値が高まりそうです。 そう考えると衛星放送のニュースチャンネルはさすがに良く出来ていると感じますが、あれは「受信料取るぞ」なので、民放のAbemaなどの頑張りを期待したいものです。

「Videoツール」の開発はプレーヤー解析が鍵 

「 AmbTV OnAir」の開発で一番要所になった部分は、少し特殊な「動画プレーヤー」の解析です。「TV放送型」のプレーヤーは、「チャンネルのスケジュール」に従って「動画・CM」の動画再生を開始/停止/終了します。 この自動操作がどの様に行われるかを把握しないと、適確な「CMミュート」が出来ません。

ツールの動作テスト 

ニュースチャンネルについて最初に書いたのは、「ミュート」がこのチャンネルで誤動作する問題があったからです。

「CM」の判定に失敗すると「メインコンテンツ」にミュート（音声OFFや画面縮小など）が実行されます。 この一番避けたい誤動作が、ニュースチャンネルでは時々生じる事が判りました。

下は、コンテンツ切換え時に正常な動作をするか検証している画面です。

「コンテンツ切換え」「CMの挿入」の時にしかツールの動作チェックが出来ないので、動作チェックは大変に時間を要します。（実際に2日ほどテストをしています）

コンテンツ切換えは5～30分ほど待たないと起こらないので、一度に2つのチャンネルを表示して効率を良くしています。「ニュースチャンネル」は、延々とエラーが生じないかを監視しています。

これらはテスト中の特別な画面で、公開版「 AmbTV OnAir」を利用した場合は、上記のスクリーンショットの様なマーク表示はありません。

◎ ツールの関数動作を示すコードを「 AmbTV OnAir」に埋め込み、どの関数が動作をしたかを画面上部にマーク表示しています。

◎ 上部右側に、Abema側の切換え操作のタイミングを知るために、別ツールで時計を表示しています。

◎ コンテンツ切換えが起こるチャンネルを常に探すので、チャンネルセレクターは常時表示するアレンジCSSを「Stylus」で適用しています。

◎ あるチャネルでテスト結果を確認した後は、放送の終了時刻の最も近いチャンネルを探して移動し、次のコンテンツ切換えを待機します。

関数動作の表示コード 

下は、関数動作チェックの表示コードです。 今回は4個のマークを表示する様にしています。 調べたい関数に、後半の「yellow_ck()」等のコードを書き込むことで、その関数が動作した時にマークが表示されるという仕組みです。

// ================

setTimeout(()=>{
    let disp=
        '<div class="tw_monitor">'+
        '<span class="tw_ye">🟡</span>'+
        '<span class="tw_re">🔴</span>'+
        '<span class="tw_gr">🟢</span>'+
        '<span class="tw_sq">🟥</span>'+
        '</div>'+
        '<style>.tw_monitor { position: fixed; top: 23px; left: 300px; '+
        'font: 16px Meiryo; color: #000; z-index: 1000; } '+
        '.tw_ye, .tw_re, .tw_gr, .tw_sq { opacity: 0; }</style>';
    document.body.insertAdjacentHTML('beforeend', disp);
}, 1000);


function yellow_ck(){ // 🟡
    let tw_ye=document.querySelector('.tw_ye');
    if(tw_ye){
        tw_ye.style.opacity='1';
        setTimeout(()=>{
            tw_ye.style.opacity='0'; }, 500); }}


function red_ck(){ // 🔴
    let tw_re=document.querySelector('.tw_re');
    if(tw_re){
        tw_re.style.opacity='1';
        setTimeout(()=>{
            tw_re.style.opacity='0'; }, 1000); }}


function green_ck(){ // 🟢
    let tw_gr=document.querySelector('.tw_gr');
    if(tw_gr){
        tw_gr.style.opacity='1';
        setTimeout(()=>{
            tw_gr.style.opacity='0'; }, 500); }}


function sq_ck(){ // 🟥
    let tw_sq=document.querySelector('.tw_sq');
    if(tw_sq){
        tw_sq.style.opacity='1';
        setTimeout(()=>{
            tw_sq.style.opacity='0'; }, 1000); }}

// ================

ニュースチャンネルの特殊な切換え 

以上の様なテスト環境で判った事は、ニュースチャンネルのコンテンツ切換えのタイミングが、一般チャンネルと異なる点です。

◎ 一般のチャンネルは、「メインコンテンツ」➔「CM」の切換え後、余り時間を「CM」を繰り返して埋め、15sec以下の余分は「切換えのカウントダウン」を表示して、コンテンツ切換えが行われます。

◎ ニュースチャンネルの切換えは、日中は1時間ごとの定期で行われます。「CM」後に切替える場合もあるが、「CM」なしでコンテンツを切換える場合があります。

このイレギュラーな切換えの結果、新しいコンテンツ（ニュース）の画面にミュートが適用される事が判りました。

このテスト環境で、「 AmbTV OnAir」のミュート機能はかなり熟成を果たせたと思います。 新しい更新は次日に行います。

「AmbTV OnAir」最新版について 

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

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

スクリプトツール 　最新バージョン・リンク一覧表 （ツール名順）