「動画タイトル」画面
「動画サムネイル」をクリックすると、開く画面は主に2種類あります。 動画プレーヤーが無い「動画タイトル」画面と、動画プレーヤーがある「個別動画」画面です。 そのどちらが開くかは「動画サムネイル」次第で、AbemaTVは無秩序に決めている様に見えます。
◎「動画タイトル」画面
◎「個別動画」画面
いずれも動画コンテンツの書庫型のデータベースの一部ですが、「動画タイトル」画面は目次の様なもので、実際の動画再生は「個別動画」画面で行われます。
◎ シリーズの動画コンテンツの場合は、どちらの画面も下部に「動画リスト」があり、その内容は通常は同じです。「AmbTV Comfy」の「配信リスト」機能は、この「動画リスト」を「iframe」に表示します。
突然生じた「配信リスト」の表示崩れ
8月26日、「配信リスト」のフレーム内のデザイン崩れを発見。 動画サムネイルを次々と「Ctrl+左Click」して行くと、1/3程度の「配信リスト」が崩れていました。
調べると、「動画タイトル」画面の複数の要素のクラス名が変更されていました。 表面上は変化がないのですが、システム更新があったとその時点で判断しました。
「配信リスト」の表示崩れ
「配信リスト」が採り込んだ「動画タイトル」画面で、「動画リスト」などのクラス名が変更されていたため、レイアウト崩れを生じた事を確認しました。
「配信リスト」の中で、「左サイドメニュー」や「動画のトップ画像」などが表示され、肝心の「動画リスト」は右下隅に追いやられています。
表示崩れは「動画タイトル」でのみ
「動画サムネイル」は「個別動画」を開くタイプも多く、その場合の「配信リスト」は正常でした。 つまり、クラス名の変更があったのは「動画タイトル」だけです。
レイアウト崩れを修復するために、「動画タイトル」の新しいクラス名を調べて行きました。 幸い、HTML構成は以前と大きく違っていない様子です。
以下は、この修復で発見した「新しいクラス名」と、「個別動画」の同等の要素に指定されている「クラス名」の比較です。 後者は「配信リスト」の基本にしているクラス名です。
| 「動画タイトル」の新しいクラス名 | 「個別動画」のクラス名 |
| .com-contentlist-ContentlistContainer | .com-content-list-ContentList |
| .com-contentlist-ContentlistContainer__sort-button | .com-content-list-ContentListHeader__sort-button |
| .com-contentlist-ContentlistSortButton__icon-wrapper | .com-content-list-ContentListSortButton__icon-wrapper |
| .com-contentlist-ContentlistSortButton__text | .com-content-list-ContentListSortButton__text |
| .com-contentlist-ContentlistEpisodeItem | .com-content-list-ContentListEpisodeItem |
| .com-contentlist-ContentlistEpisodeItem__title | .com-content-list-ContentListEpisodeItem__title |
| .com-contentlist-ContentListEpisodeItem-ContentlistEpisodeItemOverview__supplement | .com-content-list-ContentListEpisodeItem-ContentListEpisodeItemOverview__supplement |
| .com-contentlist-ContentlistEpisodeItem__description | .com-content-list-ContentListEpisodeItem__description |
| .com-contentlist-ContentlistEpisodeItemViewCount | .com-content-list-ContentListEpisodeItem-ContentListEpisodeItemOverview__view-count |
| .com-contentlist-ContentlistEpisodeItem__thumbnail | .com-content-list-ContentListEpisodeItem__thumbnail |
| .com-viewng_history-ViewingHistoryProgressBar__shadow | .com-viewng-history-LegacyViewingHistoryProgressBar__shadow |
| .com-contentlist-ContentlistEpisodeItem__my-list-button | .com-content-list-ContentListEpisodeItem__my-list-button |
新しい「動画タイトル」は、リンクの挙動も異なる
追加されたクラス名を調べて「AmbTV Comfy」を修復すると、「配信リスト」のレイアウト崩れは無くなりました。 しかし、「配信リスト」内の動画のリストをクリックした時の挙動が、以前とは違っていました。
「動画タイトル」の「配信リスト」は、以前は動画サムネイルがクリック可能でしたが、変更後はリストの「記事タイトル」しかリンクが設定されていません。 また、動画リストのどれかをクリックすると、フレーム内が「個別動画」の「配信リスト」に切換り、更にクリックした動画がフレーム内で再生されます。
（動画プレーヤーは隠れているので音声だけの再生）
「動画タイトル」の変更は相当に難儀な状態と判って来ました。 どう対処したものかと対策を考えていたところ、いつのまにか新しい「動画タイトル」の画面は表示されなくなりました。 何かフレーム内の様子が違うので調べると、「動画タイトル」画面の主要要素のクラス名が、以前のクラス名の構成に戻っていました。
なぜか消失した新しい「動画タイトル」画面
最初は半信半疑でしたが、新しいクラス名に修復対応した「AmbTV Comfy」が不要になっていました。 これまでの「AmbTV Comfy ver.4.6」に戻しても、「配信リスト」のレイアウト崩れは全く生じません。 新しいクラス名のチェックに大変な時間を費やしたのに (T_T)。
新しいクラス名を、色々な「記事タイトル」の画面を開いて検索しても、全くヒットしません。 突然に現れて、幻の様に消え去ってしまった「記事タイトル」の画面は、どうももう出て来ない様に思えます。
上記のクラス名の対照表は、今後に再び「記事タイトル」が変えられた場合の保険です。 適当な推測ですが、何かのシステム更新作業で、「記事タイトル」画面を一時的に本来のものと置換える必要があったのかも知れません。 動画のリストで「動画サムネイル」をクリックしてもリンクが無く、中途半端でイレギュラーなデザインだと思ったのですが、それは「仮画面」だったとも思えます。
なんにせよ、フレーム内の動画再生を抑え込むのは大変困難で、その必要がなくなりほっとしました。
最後に、「AbemaTV」を見るなら、ぜひ「AmbTV Comfy」を試してください。
