【8日目】「AdjusTimer」同時視聴用のお手軽便利タイマーツール作った（chrome拡張）【ぱちお Advent Calendar 2020】
おはおはの民！
ぱちお Advent Calendar 2020 の8日目の記事です。
7日目は、ぱちお(@patioglass)さんの
【7日目】ぱちおさんが出産(してない)した経緯【ぱちお Advent Calendar 2020】 - ぱちおのいろいろ。 でした。
ここから使えます
使い方動画
動画です
AdjusTimer(アジャスタイマー)インストール
インストールはコチラから
ｱﾏﾌﾟﾗしか今対応してませんが、再生前に 右クリックからストップウォッチが起動できるというものです。
ストップウォッチはスタートボタンを押す必要はなく、「ｱﾏﾌﾟﾗの再生ボタンを押したら勝手に動く」 ストップウォッチです。
基本的現在再生している時間を追従するので、一時停止、スキップをしてもずれることはありません。
なので、是非同時視聴とかやりたい配信者は画面に映すストップウォッチとして活用していただければなと思います。
↓↓↓↓↓↓↓ここから技術的な感想↓↓↓↓↓↓↓↓↓
開発のパターン
今回もchrome extensionなのは、やはり単純に再生時間をとってくるのでDOM情報が必要になる＝まぁchrome extensionsよねという結論。
実装方法は3パターンほどあり、悩んだ末に右クリックからの起動方法になりました。
その① content_script単体で実装する
これはもう一個自分が作ったことのある「つべアンケ - Chrome ウェブストア」と同様の実装の仕方です。
現在見えている画面内のDOMに挿入することで、実現していくものですね（別ウィンドウの表示はwindow.openで実現）
利点： 特定のページだけでしか動作しないため、余計なことを考えなくていい
欠点： 既存のWebページのUIに差し込む形になるので、UIの違う複数ページに実装する場合統一されたUIにできない
その② content_script->background(event)で実装する
これはextensionでよく使われるcontent_scriptからbackgroundへ情報を受け渡しでjsで操作するという方法です
なぜ？と思うかもしれませんが、chromeブラウザの持つAPIがほぼフルで使えるのがbackgroundで、content_scriptはAPIに制限があり、今回のような右クリックメニューのハックなどはできないからです。
他にもpopup（右上の拡張アイコン部分での動作）もアリです。
利点： ユーザがchromeブラウザの拡張として認知しやすい位置に機能をおける
欠点： 常にスクリプトとして発火するので下手な暴発が起きる可能性がある
その③ devtoolsを使った実装
実はchrome extensions、検証ツールもいじれたりします。（今回で知った）
最初はこの案で行ってみるかと思い、実装しかけた痕跡があるので画像参照ですが、こんな感じです。
いけるやん！ってなったんですが、情報の伝達がこれまためんどくさく
推奨としてはcontent_script ⇔ background ⇔ devtools でコネクションを張る方がいいよ。というものでした。
下手に暴発しないようにとかそういう観点なのかな・・・？まぁ色々ぐぐりながらやってたんですけど、この工数もったいないなということで断念しました。
利点： chromeの検証ツールなので普段は邪魔にならない、かつ誰でも絶対閲覧できそう
欠点： 普通の人検証ツール知らなさそう
以上のことから、案2を選択した感じです。他動画サイトにも対応する場合、ページ内DOMハックするのはUIがばらつくし右クリックが妥当って感じですね。
ビデオの時間取得
document.getElementsByClassName("atvwebplayersdk-timeindicator-text")[0]
今回（も）DOM堀りで取得しています。その上でMutationObserverによる監視です。
初期案では、videoタグから
document.body.querySelector('video').getCurrentTime()
でとるのが無難だと思い、やってたのですが
広告のvideoと本編のvideoの判別が難しい
という問題に直面してしまいました。。。。dアニメとかだと絶対広告ないから安心してvideoからとってくるんですが、ｱﾏﾌﾟﾗとﾈﾄﾌﾘはつらい・・・・
ということで久々にもくもく開発しました、アドカレで開発ネタぶち込むの割と無理ある（）
P.S.
mainブランチ作成実績解除！！！！
