ニコニコ動画Zeroのプレイヤーから操作部分を取り出す

初期のニコニコ動画Zeroはコメント記入欄と動画コントロールバー(再生と音量とか)が両方とも動画領域の中にあった。
苦情が殺到したかは定かではないが、コメント記入欄は動画領域の下、以前の位置に戻ったものの、コントロールバーはいまだ動画領域の中に閉じ込められている。

幸い、ニコニコ動画Zeroはjsでかなりの操作が可能となったのでコントロールバーをそのままhtmlとして移植してみた。
これでflashは動画とコメントを表示するだけになった。

対応ブラウザはchromeに限定しました。Firefoxもと試してみたのですが、input type="range"がまだ対応していないらしい。
html5で色々な入力フォームが増えたのに、対応が遅いのはとても残念。何を差し置いても真っ先に対応して欲しい。特にinput dateとか。ブラウザから日付を入力させるのって本当に面倒なんです。
一応コードをuser.js形式でgithubに置いておくから、どうしても使いたい人や改造したい人、将来fireFoxがrangeに対応した時に希望を託す人はどうぞ。

input rangeで何をしたかと言うと、シークバーと音量バーに使った。
ただ、音量バーはともかくシークバーは一行のラインに現在の再生位置と読み込み量の二つを表示しないといけないので、cssを使った。
rangeタイプもCSSで外見を変えられるから、つまみで再生位置、背景で読み込み量を表現する事にした。

#zeroController2 input[type='range']::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:10px;height:20px;
    background-color:#FFF;
    border:solid 1px;
}
#zeroController2 input[type='range']{
    -webkit-appearance:none;
    margin:0;
    background-color:red;
    background-image:-webkit-gradient(linear,right top,left top,color-stop(0,#CCC),color-stop(0.5,#CCC),color-stop(0.5,#0AA),color-stop(1,#0AA));
    height:15px;
    float:left;
}

外見が完成した動画プレイヤーの下に表示するコントロールバー。この状態でhtmlとCSSは完成していて、これを視聴ページの狙った場所にコンテンツスクリプトで追加し、スクリプトからイベントを追加する。
全てを囲むdivのIDにだけ気をつけて、スタイルシートも全てそのIDのみ適用させる。
コンテンツスクリプトで動かせるのはjavascriptだけだから、このhtmlをjsの変数に入れる。
今まではcreateElementで作ったりもしていたが、ここまでくるとやってられない。
javascriptにヒアドキュメントは無いから

here='あいうえお
かきくけこ';

行末にエスケープを書くと一行扱いする方法を使う。これも面倒だけど正規表現で一発で出来るからマシ。
再生する、停止するなどの命令はjs一行で出来るけど、今の状態をリアルタイムで表示するのが手間取った。
公式でイベントを用意してくれればいいのだが、見つからなかったのでsetIntervalをしている。
WatchApp.namespace.model.player.NicoPlayerConnector.updatePlayerConfigを使うループやミュート、ボリューム関連の変更はレスポンスがとても遅い。
これは直接フラッシュへオプションを渡しても変わらないから、手の施しようがない。
個人的には、シークバーさえ操作出来ればいいから優先度は低い。
また、Zeroプレイヤーはイベントによってそのサイズが多種多様に変化するが、これもjsからの操作が調べきれなかった。
プレイヤーサイズを変更させる命令は

WatchApp.namespace.model.player.NicoPlayerConnector.playerScreenMode.changeMode("normal");
//"monitorFull","browserFull","normal","medium","small","notFull";

と分かっているのだが、smallが成功しない時がある。
恐らく、サイズの状態は一つではなく複数のオプションを設定する必要があるようだ。
と言うのも、プレイヤーのサイズらしき値が入っている変数が４つもあり

WatchApp.namespace.model.player.NicoPlayerConnector.playerScreenMode._mode;
WatchApp.namespace.model.player.NicoPlayerConnector.playerScreenMode._size;
WatchApp.namespace.model.player.NicoPlayerConnector.playerScreenMode.lastPlayerSize;
WatchApp.namespace.model.player.NicoPlayerConnector.playerScreenMode.mode;

同じ状態でも前の状態によって値が異なる。
全パターン試して表に纏めれば何か見えてくるかもしれない。
以上がコーディングの話。
次はchromeExtensionにする為に名前や説明文、アイコンを作る。
私のニコニコ関連の拡張は、何の拘りか「ニコニコ漢字カタカナ」で統一している。
こうして今回の拡張機能ニコニコ追加コントローラーが完成した。

2012-05-13追記以前のはてブ