MintWatch のあれこれ
β版のMintWatchを使っていて疑問になりそうな点を明確にしていく記事。いわゆるQ&A。
リリース告知、MintWatchに関する情報は お知らせ: MintWatch のβ版が拡張機能になって公開されました！ の記事を見てください。
現行の MintWatch に合わせて随時更新されます。
なぜ MintWatch を作ったのか？
新視聴ページとなるべく関わりたくないから。
旧視聴と違い現代の高度なフレームワークで再構築された新視聴ページでは、大規模な改変を維持するのが難しいのです。
セレクターは複雑化し、コードの可読性が低下したり、開発ペースが遅くなったり、
ちょっとのアップデートで他全体が壊れたり、再レンダリングによって行った改変がリセットされたりします。
MintWatchはこの問題を避けて視聴ページをカスタムするため、
そして他のユーザーや開発者にも視聴ページを自分好みに改変するための手段として開発しています。
改変しやすい視聴ページを目指して
もちろん、現代のWeb技術に基づいて作られているのはMintWatchも同じです。
MintWatchも新視聴と同じReactを用いています。MintWatchを改変する場合も再レンダリングの影響は受けることになります。
それでも、MintWatchは要素の特定を難しくするようなCSS技術は取り入れていません。
各要素のクラス名には可読性があり、少なくとも全く同じスタイルの別物と取り違えることはありません。
MintWatchはユーザースクリプトによる改変も支持します。
各スクリプトは自身を「プラグイン」としてフッターに表示でき、MintWatchがレンダーを開始したことを示すイベントも発火します。
そのイベントを待ち受けていれば、動画情報やコメントデータも使用できます。
どこかの要素からtextContentを読み取ったりする必要を最低限に抑えられます。
(UserScriptでのプラグインに関する内容をもっと知りたい場合は、MintWatch を改変する第一歩 を見ることをおすすめします)
開発の進行度
MintWatchはまだベータ段階です。なんなら実験的です。
基本的な視聴は難なくできますが、タグ編集機能やギフトの表示、高度なコメント機能(ソート,コメント削除,NGの編集など…)は未実装です。
なぜ PepperMint+ から分離されたのか
肥大化する可能性が非常に高いため。
1機能の枠に既に留まっていない上、MintWatchを使用しないユーザーにとってはbloatwareですし、
逆にMintWatchしか使用しないユーザーにとっては、PepperMint+のその他の機能はbloatwareになります。
そのため、別の拡張機能に分離してリリースすることになりました。
ダークモード化などは依然として PepperMint+ の手を借りる必要があります。
なぜ MintWatch 内にカラーパレット機能もコピーしなかったかと言われれば、
単純にカラーパレットを適用するなら他のページにも適用したい、という人が大半を占める可能性が容易に想像できたからです。
ゲスト視聴について
実装予定なし。
ゲスト視聴の場合、通常のキーに加えて所定のトラッキング情報が必要です。
MintWatchがそれを完全に再現して、今後の仕様変更についていけるほどのリソースは今のところありません。そのリソースをもっと別の場所に割くべきなので。
一般会員の動画広告について
実装予定なし。
ニコニコの利益を傷つけたいわけではありません。ゲスト視聴と同様それに割けるリソースがありません。
実装が複雑化する上、頑張って実装したとしても広告プラットフォームがそれを確実に処理できるかどうかわからないためです。
なので、できればそれ以外の場所では広告ブロッカーを切るとか、プレミアム会員になるとかしておくと良いでしょう…
国内の動画プラットフォームを維持することは重要です。
「Firefoxでは一部制限があります」とは？
Firefoxでは、コンテンツスクリプトがHLSを再生する場合に問題が発生していました。
これを解消するために、HLSを再生するコードをページスクリプトに移動する必要がありました。
簡単に言うなら、UIやコメントレンダーの作業をしている島とは全く別の島で動画を処理しているようなものです。
そのため、UIとの連携が難しくなっています。画質セレクターは実装されていますが、場合によっては動作しないこともあります。
シークバーのバッファ表示も未実装です。
(Fun fact: ページスクリプトとして動画の再生処理を行うスクリプトは「外部HLS プラグイン」と呼ばれる一個のプラグインになっています)
他にも、パフォーマンスの問題が発生したりすることがあります。これがFirefoxにおける「制限」です。
レジューム再生の「スマート」とは？
少しだけ気の利くレジューム再生です。
動画の終わりか始まりに近い場合に、そのレジューム地点を無視して最初から再生を行います。
具体的には開始10秒以内、もしくは終了の10秒前より後がレジューム地点だった場合に無視されます。
「コメント入力時に一時停止してプレビュー」とは？
「コメント入力時に一時停止」までは通常のプレイヤーと同じです。
MintWatchでは、ここにコメントプレビュー機能が加わります。どのようにコメントが表示されるか、投稿前に確かめることができます。
一時停止を無視して再生を開始しても、最後の入力時の再生時間でプレビューが保持されます。
実際の投稿は現在の再生時間で行われるので、その点には注意してください。
その他雑多Q&A
下線が黄色いタグが意味するのは？
投稿者によってタグロックされていることを表します。
Shinjuku レイアウトを選んでもプレイヤーの見た目が変わらない
プレイヤーテーマでも「Shinjuku」を選んでください。
「コメント描画FPS」はどうすればいい？
どんなモニターであっても、基本的に「自動」を選んでください。他は自動設定で問題が起こるユーザー用です。
「自動」では、アニメーションフレームと呼ばれる機能を用いて、常に最適なタイミングで描画を行います。モニターに設定されたリフレッシュレートも尊重します。
あとがきとか小ネタとか
機能面の小ネタ的な話をします。
エフェクトコントロール
気づいている人もいるかも知れませんが『beatmania IIDX』のVEFX機能が元ネタです。コンポーネント名も「VefxController」になっているくらいには。
ベータ前の開発版では常にエフェクト状態が出ているくらいに主張強めだったりしていましたが、今は開いて見る形式になっています。
ちなみに、ラウドネスノーマライズ機能はこのエフェクトコントロールの実装に組み込まれています。
ちょっとノードを増やすだけでラウドネスノーマライズを実装できたのは嬉しいポイント。
Re:Re:仮 レイアウトの🎣
IE4 のイースターエッグが元ネタです。
クリックできないなら…元ネタのやり方を見てみると何かしらヒントがあるかも。
フォロー中のタイムライン
関連動画とこのユーザーの投稿動画に次ぐ第三の「次に見る」選択肢。
Re-cresc レイアウトなどで見れる横並びのタイムラインUIはお気に入りです。数直線的なやつ。
公式のデザインを元にしていい感じに水平レイアウトへ落とし込めたんじゃないかなと思っています。
このフォロー新着はサイドバーとして出す選択肢もあり、コンセプトまで作りましたが、
レコメンドに置くのが一番使いやすい選択肢だと思っています。
(そもそも水平レイアウトの具体的な案が思いついていない時に出た案なので…)
動画を投げ込んで再生キューに追加
関連動画からセトリを作成する。これのメリットはもちろん、この時の関連動画から2個以上の動画を次に持ち越せる点です。
ドラッグアンドドロップで追加するアクセシビリティガン無視設計はなんとかしたいところです。