「エンドロール機能」の監視対象の変遷

「AmbTV Comfy」は、AbemaTVサイトの「書庫型」の動画ページで複数の機能を提供します。 その中で「エンドロール機能」は、シリーズ動画を連続した閲覧を快適にします。

 

「エンドロール」は、動画本編の最後に制作関連のスタッフや使用楽曲等を表示するあの部分です。 現在の AbemaTVでは、通常「エンドロール」の入口と、エンドロール(次編の予告を含む)の最後の2ヵ所で、次の動画を案内する「案内パネル」が表示されます。

 

ただしエンドロールの後に、長い本編が追加される動画では「案内パネル」の表示位置や回数が異なってきます。 同じシリーズ動画の中でも「案内パネル」の表示位置は変更される場合があり、「エンドロール機能」はそれに応じた動作をします。

 

以前は、下の様なシンプルなデザインの「案内パネル」が主流でした。

 

AbemaTV エンドロール案内パネル

 

 

下は、最近の「案内パネル」で、このタイプはこのツールの制作を始めた頃から次第に増え、現在は全て大きなパネルデザインに統一された様です。

 

アニメ「かなわない」第2話の案​​内パネル

 

 

監視対象として 

動画の右側からスライドインするパネルを監視して、その表示のタイミングで自動的に「キャンセル」や「▶」のボタンを押すのが「エンドロール機能」です。 この機能を適切に動作させるには、「案内パネル」の要素の取得が肝心です。

 

◎ 下は以前と現在の「案内パネル」の要素のクラス名の詳細です。

 

AbemaTV次話案内パネル:第2話「サンとB4」

 

     
  種類 class名
A 全体 -------------
  監視 .com-vod-VODNextProgramInfo
  cancel .com-vod-VODNextProgramInfo__cancel-button
  next .com-vod-VODNextProgramInfo__next a
B 全体 .com-vod-VODPlayerNextContentRecommendBase
  監視 .com-vod-VODPlayerNextContentRecommendBase__details
  cancel .com-vod-VODPlayerNextContentRecommendBase__cancel-button
  next .com-vod-VODPlayerNextContentRecommendBase__next a

 

(A) 旧い小型パネル (廃止されたものと思われる)

(B) 現在の大型パネル

 

◎ 現在の案内パネルは「お勧め動画のサムネイル」の表示がある場合と、無い場合があります。 時間帯によってサムネイルの有無が変化する様ですが、上表の各要素のclass名は変化しません。

 

◎ 2024年6月の段階で、全て(B)タイプの「案内パネル」に統一された様です。

 

 

監視対象の取得方法 

class名を使って各要素の取得は可能ですが、今後も class名の変更があり得るので、Html上の要素の位置から各要素を取得するコードを使っています。 このため、Htmlの構成が変更されなければ、取得に成功します。

 

今回の調査では、以前の取得コードは有効でした。 ただし(A)のタイプに対応する取得コードは不要になっていたので、この不要コードを整理しました。

 

今後も機能のチェックを時々行って、システム変更に対応して行きます。

 

 

 

 「AmbTV Comfy」のマニュアル

「AmbTV Comfy」の操作に関しては、以下のマニュアルを参照ください。

 

 

 

 

「AmbTV Comfy」を利用するには 

「AmbTV Comfy」のコードは「GitHub」で配布しています。

 

 

 

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

 

AmbTV Comfy GitHub コード表示

 

 

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

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

 

Rawファイルコピーボタン

 

 

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

 

Tampermonkey新規スクリプトテンプレート

 

 

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

 

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

 

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

 

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

 

 

 

「AmbTV Comfy」最新版について 

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

 

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