ニコニコ静画APIを使ってニコニコ静画で流れてしまったコメントを追うChrome拡張機能を作ってみた
作ったもの
ニコニコ静画のコメント欄で下図のような状況がよくある。
ちょっと分かりにくいかもしれないが、要するにレスを送った対象のコメントが流れてしまって、今表示されているコメントがどんなコメントに対して反応しているのか分からないという状況だ。
図の場合だと、一つ上のコメントに対して反応しているのに、最新の10個しかコメントは表示されていないので対象のコメントは見えなくなっている。これを解消するには「すべて読む」を押して遡る必要がある。
個人的にはそれが結構面倒だったので、下図のように、矢印をマウスオーバーすれば反応している対象を吹き出しに表示してくれるChrome拡張を作ってみた。
これでわざわざ全てのコメント一覧を開く必要はなくなった。はず。
導入方法
下サイトにソースコードを置いています。
GitHub - ryu022304/niconico_seiga_comment_tracer
そこから下記手順で導入できます。
- 「Clone or download」をクリック
- 「Download Zip」
- ダウンロードしたZipファイルを解凍
- Chromeで「chrome://extensions/」に移動する
- 「パッケージ化されていない拡張機能を読み込む」で先ほど解凍したものを選ぶ
- 以上
技術的内容
http://seiga.nicovideo.jp/ajax/illust/comment/list?id=「静画ID」&mode=allで対象の静画に対するコメントが全て取れる。
本Chrome拡張機能では、アクセスしたページのURLから静画IDを取得して、このAPIを叩いている。
処理の流れとしては以下の通り
1. アクセスしたWebページがニコニコ静画のイラストページだったらURLから静画ID取得
2. content_script.jsからbackground.jsにpostMessageで静画IDを送る
3. 取得した静画IDからニコニコ静画APIを叩いて閲覧している静画の全コメントを取得しcontent_script.jsに結果を返す
4. 矢印等が文頭にあるコメントから反応しているコメントを対応付ける
5. 現在表示されている矢印付きのコメントの矢印部分にマウスオーバーされたときの処理を追加する
6. 以上
まとめ
ニコニコAPIとChrome拡張機能とGitHubを使ってみたかったから作った。
2人日ぐらいで作ったので、バグは折を見て直します。
参考サイト
content_script.jsとbackground.js間の通信
Chrome Extensionのevent pageでAPI通信をおこなう - Qiita吹き出しのデザイン
コピペでできる!CSSとhtmlのみで作るツールチップ | copypet.jp|パーツで探す、web制作に使えるコピペサイト。アイコンの作成
絵文字ジェネレーター - Slack 向け絵文字を無料で簡単生成