ニコニコ実況の過去ログをアニメの放送情報から検索して見れるサービスをつくった

タイトルの通りのものを開発して公開しました。

• NicoJK Anime Archive Viewer

たとえば、けものフレンズ1期12話 の様子はこんな感じで表示されます。

初回放送で実況で盛り上がったところなど見てみると結構おもしろいです。
(実況独特の文化があって、5chのような治安の悪さもあるので苦手な方はご注意ください。)

• 魔法少女まどか☆マギカ #10-12
• ガールズ＆パンツァー #12
• 進撃の巨人 #1
• ラブライブ！ School idol project(第2期) #1
• SHIROBAKO #23
• ご注文はうさぎですか?? - #1
• ポプテピピック #1
• 鬼滅の刃 #1
• ウマ娘 プリティーダービー Season 2 #12

以下、開発した背景や技術的な話などしていきます。

動機

ニコニコ実況とは、ニコニコ動画を有するドワンゴが2009年11月からサービス開始させた、テレビ放送にリアルタイムにコメントを投稿できるサービスです。

• ニコニコ実況

以前は過去ログを日時指定して確認したり、そのためのAPIなどが公開されていたのですが、 Flash終了に伴い2020年12月15日にニコ生ベースのシステムに移行されたのを機に廃止されてしまいました。

終盤・放送終了後に話題になったアニメの序盤や、かなり後になって追っかけたアニメの初見の反応を過去ログ漁って見るのが楽しかったのですが、それができなくなるのが残念でした。

が、なんと有志の方が過去ログを保管してAPI化したサービスを公開していただいてました。

• ニコニコ実況 過去ログ API

非常に使いやすいAPIで、せっかくだからもっと簡単にコメント見れるようなサービスつくりたいな〜と思い開発はじめました。

(裏背景として、ちょうど転職前の練習がてらGo, React, AWSあたりを使ってきちんとなにか作ってみようってとこもあります。)

技術的なところ

全体像

アーキテクチャはだいたいこんな感じです。

2022/07/24追記: ホスティングにAmplifyを使ってましたが、Next.jsとの相性問題に悩んだ末Vercelに移行させました。Amplifyブラックボックス多くてわからない。。

しょぼいカレンダー・ニコニコ実況過去ログAPIを利用しているのですが、少し加工して利用したいのと、負荷をかけすぎないようにしたく、 間にキャッシュのようにDynamoDB,S3を配置しました。

また、本当はAPIもECS使ったりいろいろ試したかったんですが、AWSの無料枠をなるだけ利用する方向に途中でシフトしました。 予算見積もると意外とするのねあれ…

アニメ放送情報の取得

放送情報はしょぼいカレンダー さんのAPIを使って取得してます。個人で運営されていると思われますが、非常に多くの情報が取得できて便利です。

こちらのヘルプページにAPIに関するルール、利用方法などが記載されています。

• しょぼいカレンダーのヘルプ | しょぼいカレンダーのヘルプ

たとえば、アニメタイトルすべてを取得はこのように

curl "http://cal.syoboi.jp/json.php?Req=TitleLarge"
# jsonが返却される

放送情報をサブタイトル付きで取得する場合は

# TIDにはアニメ作品に紐付いたIDを指定
curl "http://cal.syoboi.jp/db.php?Command=ProgLookup&TID=4441&JOIN=SubTitles"
# xmlが返却される

ヘルプページだけでは理解しにくい部分も多いです。試しながらやってみると掴めてくるかと思います。

コメント表示

肝になるコメント表示の部分は、すべてJS,React上であれこれして描画しています。

コメント流しはCSSのtransitionを使ってます。初期状態では↓みたいなのを当てて

font-size: 24px; /* コマンドにより変更 */
color: #ffffff; /* コマンドにより変更 */
position: absolute;
top: 48px; /* 配置する余裕がある場所を指定 */
white-space: nowrap;
font-family: "MS PGothic";
left: 480px; /* ウィンドウの右端に合わせ、最初は隠れさせる */

描画直後、↓を当てて動かしてます

left: -90px; /* コメントの長さに合わせて、終端がちょうど隠れるところまで持っていく */
transition: left 4000ms linear; /* 4秒間画面に表示 */

スピード(描画後のleft)、配置する高さ(top)を計算するのが結構大変です。すでに配置されてるもののステータスをもとにコメント1件追加するたびに再計算させています。 置かれたコメントのサイズとスピードをもとに、ここでコメントを置くと追いついてしまわないか？を毎度計算してます。(久しぶり数式書いたりしてロジック考えてと頭使いました。)
効率的にどうかなーと思いますが、自分の試した環境ではほぼ問題なく動作しているためそこまで最適化させておりません。

また、ShitaやUeコマンドにも対応させてます。通常コメに比べると楽ですが、これら3パターンのコメントを制御させるようにしてみました。

その他

ざっと工夫点上げると

• Bleve を使って簡易にアニメタイトル検索を実現した
• デザインはMUI つかってサボった
• コメントはProtocol Bufferでエンコードしたものをフロントにわたすようにして、通信容量を削減
• Clean Architectureを参考にしたアーキテクチャで、データソースなど検証がてら頻繁に変更することがあってもすぐに対応できた
• ほぼほぼAWSの無料枠で動くコストかからない構成にした

本来はコメント自体ストリーミングさせるよう、gRPC-Web とか試してたんですが、やりたいことに対して合わないってわかってやめちゃいました。

裏目的のGo, React, AWSに慣れるという点ではそれなりに達成できたかなーとは思ってます。

今後について

機能拡張として

• A, Bパートを推定してマークをつける。CMがあっても飛ばしてアマプラなどと同期しやすくする。
  • ニコニコ実況では「A」「B」とコメントする文化があるので、ある程度推定できそう
• アクセスランキング、おすすめログなど表示
• ある話数が概ね好評、不評かコメントから類推して結果表示

あたりを考えたり考えなかったり。 ニッチなサービスでそこまで集客できる気もしていないので、このままこっそり置いとく感じにはなるかと思ってます。

以上。ニコニコ風にコメント流すノウハウはつかんだので、これをまたどこかで活かしたりしてみたいですね。