ブログ記事8件
「TV配信型」動画プレーヤーの行方 3月初旬に、新しい動画プレーヤーがリリースされましたが、それは3日程で旧来の動画プレーヤーに戻されました。以前に数時間ほど一部クラス名が差換えられた事がありますが、今回の更新はレベルが異なりました。差し戻し後に10日以上経過し、現在の（旧デザインを受け継ぐ）動画プレーヤーが今後も定着する気配が強くなりました。しかし、3日間使用されたデザインは繋ぎのデザインとは思い難く、今後そちらに置き換わる可能性は棄てられません。この状況に対応し、旧デザイン
2種類の「全画面表示」がある問題「全画面表示」「フルスクリーン表示」といった言い方は実は不正確で、「F11」を押下した場合、「TV放送型動画プレーヤー」の「」ボタンをクリックした場合、更にJavaScriptで「全画面API」を使って「全画面表示」とした場合など、そのどれにあたるかによって、状況が異なります。これは「 AmbTVOnAir」「 AmbTVOnAirOld」の制作過程で、「右Click」でコントロール群を表示できる場合と出来ない場合があり、この問題に直面しました
「旧アスペクト動画」とはTVがアナログ放送の時代は、受像機（モニター）のアスペクト比は4:3でした。当時のアニメやドラマはこれを基準に作られていたので、16:9が標準になった現在では、旧アスペクト比の動画は、左右に黒背景の部分を追加して表示されます。下のスクリーンショットは「名探偵コナン」の配信画面の様子で、動画画面の両サイドに黒背景の部分が追加されています。PCモニターのアスペクト比が16:9の場合は、緑部分全体が16:9なので、この動画を全画面表示にすると動画はモニタ
「Old」タイプのチャンネルセレクタ「AbemaTV」の「TV放送型」の画面は、旧タイプデザインに差し戻されたままです。気になる状態が続いていますが、監視がてら旧デザインの修正をしています。「旧デザイン」はデフォルトの「縦型」のセレクタには背景色を着けていませんでした。これは「 AmbTVOnAirOld」に引き継がれています。一方、「新デザイン」のリリースで「チャンネルセレクタ」のデザインを更新せざるを得なかったのですが、「新デザイン」は「縦型」セレクタに背景色を着けました。
動画上に被さる各種コントロール「TV放送型」の画面は、「旧デザイン」「新デザイン」ともに「ページヘッダー」「左サイドメニュー」下部の「動画タイトル」などが、動画画面に被さるデザインです。これは画面のレイアウト上では仕方がない事ですが、それで黒背景のコントロールが動画画面の一部を隠してしまうのは、圧迫感があり落ち着きません。そこで、コントロールの背景色を半透過にして、できるだけ動画画面が常時見えるデザインにしました。このデザインは現在は「旧デザイン」に対してのアレンジですが、「新デザイ
あらかじめ失われた試みたちよ3日程の内に新サイトデザインが指し戻され、旧デザインの「AbemaTV」が配信されています。今日の内だけ？明日まで？それともずっとなのでしょうか。こんな危ういサイトデザインにアレンジを試みるなんて酔狂な事ですが。でもちょっと心残りがあります。この旧デザインにしかない「並べ替え」の機能について改善を試みている最中に新サイトデザインに切り替えられ、その作業が中断されたのです。「並べ替え」機能 「並べ替え」はサイトトップの「一覧」や、「TV
旧いページデザインへの差戻しがありました「AbemaTV」サイトが新デザインに更新されたのが3月8日だったと思います。このデザイン変更はサイトの「トップページ」➔「TV放送型」の動画配信ページに関しての更新で、「書庫型」の動画配信ページに関しては変更はありませんでした。しかし、まだ3日程しか経っていないのに、以前のサイトデザインに戻されました。新しいサイトデザインを作るのはそう簡単な事ではなく、各種ブラウザに対するテストを経てリリースされていると思われるので、何かの不具合で差し戻し
ブラウザの全画面表示を判定する この簡単な事が、現在のJavaScriptでは難しい様です。ブラウザによってこの状態を取得するコードが統一されていない様です。以下は最初に検索ヒットしたページ。JavaScriptで現在FullScreen状態か判定するメモ最近、ウインドウが現在フルスクリーンかどうかを判定する処理を入れる機会があったのですが、iOSのSafariでのみうまく作動しなかったので、完璧に現在フルスクリーンかどうかを判定する方法をメモ。コード2021/03/18
動画上部の余裕TVチャンネルの動画プレーヤーの配置は、デフォルトでは動画の上辺がウインドウの上辺に接します。（下図の左側）しかし、このデザインより上部に余裕を持たせた方が、ウインドウのツールバーから動画が独立して落ち着きます。（下図の右側）ただ、これは動画をサブウインドウで閲覧する場合で、全画面で表示した場合は自動的にディスプレイにフィットし、上部の余裕があると却ってバランスが崩れます。前バージョンでは、「サブウインドウ」で上部の余裕を作り、「F11」による「全画面表示」
「テレビチャンネル型配信」の基本デザインの更新先日、この「テレビチャンネル型配信」の基本デザインが変更されました。トップページの「一覧表示」のボタンでTV放送中のサムネイル一覧画面が表示される様になりました。以前は「チャンネルセレクタ」の表示順が変更できましたが、インターフェイスが悪くて改善を始めた矢先に廃止されました。^^;その他も色々な箇所が変更され、「 AmbTVOnAir」の殆どの機能が動作しなくなり、元通りの機能を再生させるのに2日が必要でした。一部の機能は不要になり
チャンネル履歴のブルー枠を修正「 AmbTVOnAir」は、AbemaTVのサイトの「テレビチャンネル型動画配信」に特化した動画閲覧ツールです。このツールの詳細は操作マニュアルを参照ください。前バージョンで、ABEMAトップ画面の「チャンネル一覧」に、直前まで閲覧していたTVチャンネルを青枠表示する様にしました。「チャンネル一覧」の表示形式は「プレビュー/一覧」を切換え可能ですが、青枠は特に「一覧」の表示で有効です。下は「一覧」の「チャンネル一覧」に戻った場合のデザ
前回のチャンネルをブルー枠で表示「TVチャンネル」は40個程度あり、チャンネルを選択するボタンのデザインは、区別がし易い様に工夫がされています。しかし、「動画のチャンネル表示」からABEMAのトップ画面に戻ると、それまでどのチャンネルを見ていたか判り難いものです。これを改善するために、それまで閲覧していたチャンネルのボタンに「青枠線」を表示する様にしました。◎「プレビュー」の「チャンネル一覧」に戻った場合。◎「一覧」の「チャンネル一覧」に戻った場合。
「放送中」のページが表示される「AbemaTV」のTVチャンネル型の動画ページ、私は案外と見ることが多いです。しかし、最近「TVチャンネル」の表示に入れなくて困った事がありました。そこで、簡単なはずの「TVチャンネル」を表示する方法なんですが、少し調べました。「トップ画面」⇨「一覧」 からABEMAトップ画面で❶「一覧」を押して、❷のチャンネル一覧のパネルを表示し、適当にどれかの「チャンネル」を押す。通常は、この操作で「TVチャンネル」の表示になります。とこ
動画のみを「右Click」で表示する機能「通常表示」（ブラウザ表示）の状態では、マウスを動かすと各種のコントロールに関係するパネルが表示されます。通常サイズのウインドウの場合は、ウインドウ外にマウスポインターを退けると、それら「各種コントロール」は一瞬で消えます。下の赤枠で囲んだ部分は、その「各種コントロール」です。マウスポインターがウインドウ内にある場合は、ポインターを動かさなければ、これらの「コントロール」は4secで自動的に消えます。しかし僅かでもポインターが動
使わず嫌いだった「フルスクリーン」この間、フルスクリーン「」のボタンを使ってテストをしていて、このボタンの意味が判って来ました。デフォルトの「TV放送型」の画面は下の様に、各種の表示物が邪魔をして、動画を閲覧する状態ではありません。このページデザインは、動画は「フルスクリーン」で見るのが前提ですね。なるほど「フルスクリーン」では、マウスポインター動かしても、右下隅に「」「」がささやかに出るだけで、閲覧の邪魔にならない様になっています。「 AmbTVOnA
「フルスクリーン」と「F11全画面表示」「AbemaTV」の「TV放送型」の動画プレーヤーにはシークバーがなく、決まった番組表に沿って閲覧する「TV放送」の様な閲覧スタイルです。コントローラーで使えるのはフルスクリーン「」とボリューム「」だけですが、シリーズ動画を通して閲覧する余裕がある場合は、悪くない閲覧スタイルだと思います。「書庫型」の動画ページで全話一挙配信がある場合は、そちらの方が明らかに便利ですが。で、モニター画面全体で動画を閲覧するには、「フルスクリーン」
「チャンネルセレクタ」のデザイン選択機能前バージョンで「CMミュートの設定パネル」を開く「CMMute」ボタンを設置しました。これはデザインを既存のボタン類に合わせましたが、もうひとつ「Channel」ボタンを追加しました。このボタンは、デフォルトの「縦型チャンネルセレクタ」と、選択ボタンを矩形に並べた「矩形チャンネルセレクタ」とを切換えるボタンです。◎デフォルトの「縦型チャンネルセレクタ」◎「 AmbTVOnAir」の「縦型チャンネルセレクタ」
「CMのミュート設定」を開くボタンを設置「動画表示部分」を「Ctrl+左Click」する事で「設定パネル」を開き「CMのミュート設定」を変更できます。しかし、液晶TVにPCの画像出力を表示してAbemaTVを閲覧していると、キーボードが無いために「設定パネル」が開く事が出来ません。PCの前で操作していた時には気付かなかった事で、無線マウスだけで遠隔操作する場合は「Ctrl+」「Shift+」の操作が出来ないのです。（可能なマウスもありますが）これは「設定パネル」を開くボタンを設
「動画＋コマーシャル」の配信方式を調査最近のコマーシャルの挿入仕様に変化があった事は、最近のページで書きました。AbemaTVTVチャンネルツール「 AmbTVOnAir」（16）/JavaScript「補助ミュート機能」の修復更新前バージョンから「補助ミュート機能」は完全にバックアップの機能となったので、もし上手く機能しなくても、メインの「ミュート機能」が…∽ameblo.jpこの変更に一応の対策をしましたが、その後のチェックで「補助ミュート機能」が動作しない場合がたまに生
「補助ミュート機能」の再点検JavaScriptはしたたかに動作するので、エラーが致命的でなければ表面上は無問題に見えます。こちらは何もしていないのにページ上でエラーが頻発していて、これで問題ないのかと思ってしまう事もあります。やはりノンエラーのページが理想です。スクリプトエラーが「溜まる」ことで、しまいにページ上のスクリプト動作の問題になる場合があるのでは？特別な条件が重なった時に、何度もエラーを出していた処理が、他に影響するエラーのきっかけにならないと断言できないのでは。
「補助ミュート機能」の修復更新前バージョンから「補助ミュート機能」は完全にバックアップの機能となったので、もし上手く機能しなくても、メインの「ミュート機能」が動作しているかぎり、ユーザーは気付かないかも知れません。ただ、「補助ミュート機能」が機能していない場合、コマーシャル再生中のチャンネルに切り換えた際、すぐにミュート状態になりません。で昨日、その状態に気付きました。コマーシャル 表示の方式が変更されたテレビチャンネルのコマーシャル表示の方式が、再び変更された様に思われま
「補助ミュート機能」の更新本来の「ABEMA」のアニメーションロゴをトリガーとする「ミュート機能」は、適確なタイミングで「ミュート」を適用できます。その唯一の弱点だったロゴの表示を伴わない「非正規」なコマーシャル切換えは、現在は探すことが困難です。もはや「補助ミュート機能」は不要なのかも知れませんが、「非正規」の切換えの問題は今後も再燃しないとは断言できません。そのため、「ミュート機能」のバックアップという位置付けで、「補助ミュート機能」の実装を今後も継続します。そして、前ペー
「補助ミュート機能」の根本的な改善「 AmbTVOnAir」の一番メインの機能は、「TVチャンネル形式」の動画配信に挿入されるコマーシャルの「ミュート機能」です。この機能は、「動画コンテンツ」と「コマーシャル」が切換る時を感知して、コマーシャルに入ったら「ミュート」を適用し、動画コンテンツに戻ったら「ミュート」を解除します。これまでの所、おおむねこの機能は成功しています。切換えの 判定この判定に用いているのが、動画画面の左上に表示される「ABEMA®」の画像です。下の画
再生環境によって「補助ミュート」が使えない私のプログラム制作は、「おそらく平均的な能力」のPC上で行っています。一方、現在では陳旧化したサブPC（Win7時代のPCをWin10にアップグレード）でテストをすると、動画や通信の能力が劣るため想定外の問題が露呈しました。問題が生じるのは「タイミング処理」の部分です。PCの環境によっては想定したタイミングが通用しないため、目的の動作が得られないのです。特に「 AmbTVOnAir」は「タイミング処理」を多用するツールです。通信環境やP
「ミュート設定」を即時に適用する設定パネルは「ミュート機能のON/OFF」「ミュート時の画面のデザイン」「イレギュラーなCMに対する反応タイミング」を設定します。これまでは、次のCMが開始されるまで設定を確認できない仕様でした。これは「動画コンテンツ」⇄「CM」の切換えをトリガーにしてミュートを適用する仕組みのためです。設定したミュートの状態がすぐ判らないのは、少々扱い難い部分です。そこで少し工夫をしました。以下の赤枠の設定を変更すると、その「ミュート設定」が即座にCM画面に反映
設定パネルのデザイン更新設定パネルのデザインを更新しました。機能はver.0.8から変化はありません。パネルのデザインは、「音声ミュート」が全てのミュート機能の「有効/無効」を決める仕様だと、なるべく自然に判る様にしました。また操作マニュアルを纏めて、パネルタイトル部の「」ボタンでアクセスできる様にしました。「 AmbTVOnAir」の操作マニュアルこのツールは「 AmbTVComfy」のサブツールで、両方を同時に併用できます。「ミュート」
イレギュラーなCM移行に対する「ミュート」タイミング「CM」移行の直前に「ABEMATV」のロゴを表示するのが正常ですが、ロゴを表示しないイレギュラーなCM移行が増えています。下は、このイレギュラーなCM移行に対応する「ミュート」機能のタイミングの模式図です。現在は（A）のタイプのCM移行が多く、「動画タイトルの消失」と同時に「CM移行」します。この場合は遅延時間「0」のタイミングで「ミュート」を適用する❶が最適です。しかし、かなり手前で「動画タイトルの消失」が
「ミュート」機能のトリガーコードの更新 前ページの調査を受けて、「ミュート」機能のトリガーコードを更新しました。「動画コンテンツ」⇄「CM」の切り換わり時に、「ABEMA」のロゴのアニメーションが画面の左上隅に表示されます。この「ロゴ」は「ミュート」機能のメイントリガーですが、「ロゴ」の表示なしで「動画コンテンツ」➔「CM」方向に切り替わる場合が出て来ました。これに対応するため「動画タイトル」の表示を「ミュート」のトリガーに追加しました。実装上で問題になった事
CMのインポーズタイミングを調査中 6月に入ってから、TVチャンネルのCMの入り方に変更があった様です。CMをどの様にインポーズするかは、AbemaTVの運営にとって重要なポイントなので、今後も色々と変更・改変が行われるものと思います。「 AmbTVOnAir」は、AbemaTVの「TVチャンネル動画」の専用閲覧ツールです。CMの「ミュート」機能は独自のもので、「動画コンテンツ」⇄「CM」の切換えのタイミングを適確に捉える事がこの機能の生命線です。今月に入ってから「ミュート」が効
「ミュート」機能のトリガーコードを更新しました 「ミュート」を適用する「CM」の判定コードを刷新しました。これまでの判定コードはver.0.2から同じでしたが、「アメーバニュース」のイレギュラーなコンテンツ切換えにも対応できる様に、大幅に改善しました。以下は、新しく採用したトリガー要素です。選択チャンネルの表示 チャンネルのコンテンツの切換えが行われると、「チャンネルセレクター」の「選択チャンネルの表示」は必ず更新されます。この更新を監視して、更新があれば「ミュー
