QuizChan on Nicolive を公開した
はじめに
2017/11/28追記 ユーザー生放送がHTML5版のみになったため、このスクリプトは使用できなくなりました。対応版はしばしお待ち下さい。それまでは「QuizChan on ブラウザ」をご利用ください。
2017/10/01追記--
本家のインターフェースに準拠した簡易バージョンを作成しました。ブラウザベースなのでインストール不要、Windows以外のOSやスマホからでも回答可能です。詳細は以下のリンクから。
eagle0wl.hatenadiary.jp
追記おわり--
クイズちゃんの操作にいつもモタついて苦い思いをしていたので、ニコニコ生放送専用プレイヤーにクイズちゃん回答用の入力フォームを拡張し、マウス操作不要でメッセージの"暗号化"からコメント投稿までを支援する、謎の実験場専用スクリプト『QuizChan on Nicolive』を公開した。
インストール
『QuizChan on Nicolive』は、各種ブラウザ向けに提供されている拡張機能である Tampermonkey のユーザースクリプトとして動作する。
動作確認リスト
まずは普段使用しているブラウザが対応しているかどうかを確認してほしい。スマホ未対応。Macは未確認。
| Chrome | Firefox | Edge | Safari | Opera | |
| Windows 10 | ◎※1 | ○ | ◎※1 | － | ○ |
| Ubuntu 16 LTS | ◎※1 | ×※2 | － | － | ？ |
| macOS Sierra | ？ | ？ | － | ？ | ？ |
◎＝キーボード操作のみで快適に入力できる
○＝キーボード操作のみで入力できる
×＝エンコードだけはできるが投稿にはマウス操作が必要
－＝動作未確認
※1 ニコニコ生放送プレイヤーのコメント欄にフォーカスを一度当てる必要がある。後述。
※2 キーボード操作からではニコ生プレイヤーのコメント欄にフォーカスが当たらない。
Chrome か Edge 推奨。ただ Edge では Google日本語入力が動かないという嫌がらせのような不具合があり、MS曰く再インストールしろとのことだが直らなかった。
Tampermonkey のインストール
『QuizChan on Nicolive』を使いたいブラウザから、以下のURLを辿り Tampermonkey をインストールする（Firefox 用の Greasemonkey とは互換性がある）。
Chrome https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=ja
Firefox https://addons.mozilla.org/ja/firefox/addon/tampermonkey/
Edge https://www.microsoft.com/ja-jp/store/p/tampermonkey/9nblggh5162s
Safari https://tampermonkey.net/?ext=dhdg&browser=safari
Opera https://addons.opera.com/ja/extensions/details/tampermonkey-beta/?display=en
ユーザースクリプトの入手
Tampermonkey をインストールしたブラウザから以下の配布サイトにアクセスし、[raw]をクリックする。
github.com
[raw]をクリックするとTampermonkeyの警告が表示されるので、『QuizChan on Nicolive』をインストールする。
以上でインストールは終了である。
スクリプトを確認したい場合は、ブラウザのツールバーにあるTampermonkeyから「ダッシュボード」を選択する。
『QuizChan on Nicolive』がインストールされていることが確認できる。
使い方
このスクリプトは、「謎の実験場」コミュニティに属し、かつ配信者が「．ａ」さんの生放送に限り適用される。（制限解除方法は後述）
メッセージ入力の基本的な流れを以下に記すが、OSとブラウザの組み合わせによっては若干変わる場合がある。いずれにせよ、動作確認済みのブラウザであれば、入力から投稿まではキーボード操作のみで完遂できる。
0. まずはユーザー名を入力する（一回だけ）
3. Enterキーを押す
エンコードされた文字列がクリップボードに保存される。ニコ生プレイヤー自体にフォーカスが移動する。
1. であらかじめニコ生プレイヤー側のタブフォーカスをコメント入力欄に移動していれば滞りなく移る。Win10(Firefox)の場合は続けてTabキーを一度押すとタブフォーカスがニコ生プレイヤーのコメント入力欄に移動する。
5. 1. に戻る
タブキーではエンコードしたい文字列入力欄に戻れないのでマウス操作が必要。基本的にキーボード操作だけではニコ生プレイヤーの内と外を自由に行き来できない。技術的制限による仕様。
他の生放送に適用させたい場合
Tampermonkey のダッシュボードから『QuizChan on Nicolive』のスクリプトを表示して、var ALWAYS_DISPLAY = false; の false を trueに書き換えると、他の生放送でもクイズちゃんが表示される。
// false を true にすると他の生放送でもフォームが表示される
// ただし http://live2.nicovideo.jp/ から始まるURLでは非表示のまま
var ALWAYS_DISPLAY = false;
技術的な話
ここから先は暇な人向け。
ラリー・ウォールが提唱したプログラマの三大美徳の一つに「怠慢」がある。労力を減らし、無駄を排除して、自動化を実現するために手間を惜しまない、意識高い系の言い方だとQoL（生活の質）を向上させようというニュアンスがある。
ニコニコ生放送にはクイズ形式の放送がある。ニコニコ動画の性質上、コメントは他のリスナーに見えてしまうので、平文を流す訳にもいかない。そのため、ちょっと見で読めてしまうことを防ぐために簡単な"暗号化"（BASE64とかrot13とかの類）を施す必要がある。
※以下、宗教上の理由につき「暗号化」ではなく「エンコード」と表現する。
もちろん、クイズは早解きなので一番早く正解したい訳だが、このエンコードがシームレスにいかず、マウス操作が伴ったりともどかしい。この手間を極力低減できないかと考えてみたのが今回の制作動機である。とはいえ、検討段階でかなり手間取った。
動画プレイヤーと生放送プレイヤーとの違い
（生放送ではない）動画プレイヤーの通信は再生・コメント機能共にhttp/httpsである。動画はプログレッシブダウンロードが使われる。動画プレイヤーにはAPIが複数提供されており、Flashで作られた動画プレイヤーをjavascript側から操作することもできる。これなら楽勝じゃね？ と思った。ところが生放送プレイヤーにはこれらのAPIがことごとく削除されている（隠しであるのかと一縷の望みから生放送プレイヤーををデコンパイルしたがやっぱり無かった）。投稿・コメント機能もhttp/httpsではなく（当然だが）ストリーミング形式で行われている。
現在HTML5版がβ提供されているが、生放送プレイヤーはコメント投稿に対応していないので眼中にない。動画プレイヤーに関して言えばZenzaWatchの方がずっと高速だよね。
生放送のサーバはURLから判別できるがプレイヤーも異なる。現時点ではliveのみ対応、live2は未対応。
http://live.nicovideo.jp/watch/lv****
http://live2.nicovideo.jp/watch/lv****
投稿ツールのあり方
最初はニコ生弾幕ツールのクイズちゃん版を作れば良いかと思った。しかし独立したアプリになるので開発は煩雑になるし、何よりコメントの流れる生放送プレイヤーとは別のウィンドウからの送信にならざるを得ないので、参加している、競っている感が出ない。
ではTampermonkeyでユーザースクリプトを寄生させて独自の投稿ボタンまで実装できればと考えたが、ブラウザ上のjavascriptでは、http/https以外のプロトコルを喋るsocketプログラムは書けない（この事案でWebSocketは代用にならない）。当然といえば当然である。とはいえ、参加している感は損なわれないし、ニコ生プレイヤーの投稿ボタンまでの移動はタブフォーカス程度の手間で済むので、完全自動とはいかないがマウス操作を伴わなければ問題ないと考えた。
ちなみに『ブラウザハック』には極めて限定的ではあるが、javascriptからストリーミングサーバーへの通信方法が記されているものの、本書の名の通りサーバーの実装依存によるものなのでニコ生では不可能と判断し見送った。
www.shoeisha.co.jp
クロスブラウザ
拡張機能であるTampermonkeyは様々なブラウザ向けに公開されており、ユーザースクリプトは問題なく動く。ただし、タブフォーカスやFlash Player側の挙動はどうしてもOSやブラウザ依存になってしまう。
後はコードを書く
どんな処理をやっているかはソースを公開しているので見て欲しい。jQueryを使わないレガシーなコードだが、ライセンスはMITにするので許していただきたい。
javascript内部の文字コードはUTF-16だが、最終的にSJISにしてからBASE64でエンコードしているので、文字コード変換用に encoding.js を外部参照している。
github.com