読者です 読者をやめる 読者になる 読者になる

Electronで最強のニコニコ生放送のコメントビューアを作り始めた

Electronでコメントビューアを作り始めた。本当に作り始めで、まだ諸々のビルドとか基本的なファイル構成、Chromeからセッションを抜くところまでしかできてません。最小構成の紹介として役立てればなと思います。そしておそらくMacでしか動かないですが、今後Windowsにも対応します

github.com

他のコメントビューア状況ですが、Windowsでは多くの生主が使ってるコメントビューアが存在してて、ほとんどの人がこれを使っていると言っても過言ではないと思います。

www.posite-c.com

一方Macではスタンダードと呼べるコメントビューアはないので作ろうと言いたかったのですが、2015年にMac専用の良さそうなコメントビューアができてたっぽいです。

honishi.github.io

このコメントビューアを放送で見ることはあまりないのですが、そもそも生主でMacを所有している人があまりいないですかね。 そんなことは気にせずに最強のコメントビューアを作ろうと思います。

使用技術は、主にElectron、Babel、webpackとかで、webpack-dev-serverでHot module replacement(HMR)も実現しています。sqlite3も使ってるんですが、これはニコニコはセッション数が限られてるんで、他のコメントビューアでもおなじみなんですが、既存のログインセッションを使うためにChromeCookieを抜く必要があるんですが、ChromeCookiesqliteで保存されているからです。のちのち何か他の用途で使うかもしれませんが

以下今までで得た知見です

ファイル構成

Electron、色々なアプリを見回って参考にさせてもらったのだけど今はこの構成に落ち着いていて、気に入っている まだフレームワークは入れてないがReduxじゃない何かを使おうと色々調べている途中

https://github.com/tsuwatch/nicomentron/tree/b9979ef92f51f58f4bea44641f06ec2bac60151b/src

HMR

こんな様子です

https://github.com/tsuwatch/nicomentron/blob/b9979ef92f51f58f4bea44641f06ec2bac60151b/webpack.config.development.js

https://github.com/tsuwatch/nicomentron/blob/b9979ef92f51f58f4bea44641f06ec2bac60151b/src/renderer/index.html

html-webpack-pluginを使っていると、webpack-dev-serverがこいつも拾うので、こいつもサーバ経由で受け取らないといけないのを見落としていて少しハマった

https://github.com/tsuwatch/nicomentron/blob/b9979ef92f51f58f4bea44641f06ec2bac60151b/src/browser/MainWindow.js#L8

ネイティブモジュールのビルド

sqlite3をElectron(+ webpack)で使うのに結構苦労した覚えがあって、Electron用のsqlite3モジュールにしないといけないのだけど、色々調べつつnode-gypとか色々設定したりしたが、何かうまくいかなかったのだけど、結局ここに書いてあるelectron-rebuildの方法で特に特殊なことをすることなくシュッと使えたので、electron-rebuildするのが良い

electron/using-native-node-modules.md at master · electron/electron · GitHub

./node_modules/bin/electron-rebuild sqlite3 すると、今使用しているElectronのバージョンに合わせたsqlite3のbindingを生成してくれる さらにwebpack使うのであればexternalsに指定しないといけない。うまく使えないなぁと思っていたら、webpack側にも問題があってexternalsに指定してなかったから何かうまくいってなかったように見えたのかなと思います。keytarモジュールも同じようにできる

https://github.com/tsuwatch/nicomentron/blob/master/webpack.config.base.js#L21-L23

https://github.com/tsuwatch/nicomentron/blob/master/package.json#L9

ChromeCookie取得

ChromeCookie取得なんですが、sqliteから引っ張ってくるだけやろと思っていたら暗号化されているらしく、結構めんどくさかった

nicomentron/SessionExtractor.js at b9979ef92f51f58f4bea44641f06ec2bac60151b · tsuwatch/nicomentron · GitHub

復号のロジックなどは記事(ChromeのCookieから値を取得する - Qiita)を参考にしただけなので何でこうなってるかは詳細に調べてない

他の便利情報

こうするだけで、以前のwindowの位置と大きさを記憶、起動時に読み込んでくれて便利

多くのElectronアプリやElectronアプリの便利なライブラリ情報が集まっていて良い

まとめ

続報をお待ち下さい

ニコニコ生放送と凸待ち文化について

ふと思い立ったので書き留めておこうと思う.別に大したことではないのだが,メモ程度にこういうことを書いていくのも良いかなと

早速だが,ニコニコ生放送には凸待ち放送という放送がある

live.nicovideo.jp

どんな放送かと言うとまず,ニコニコ生放送において凸とは基本的にSkypeで通話をするということで,通話待ち放送ということになる.

dic.nicovideo.jp

放送内容というと,基本的に雑談とか何かテーマを設定して凸を待つとかそういうのが多い.会話という特徴から,声真似を特技とする生主も多く,声真似放送も多く放送されていた.

喧嘩凸放送という文化もあり,これは他の生主に口喧嘩しに行く様子を流す放送である. 基本的に荒らし行為であり,一部,あらゆる放送を荒らし回り信者と呼ばれる熱狂的なリスナーを多く持つに至った生主もいた. プロレスのように喧嘩凸というスタイルでコミュニケーションを取るということも多い.

最近この凸系の放送が減っているのではないかと思う.完全に体感だし,単に自分が見なくなっただけかもしれないことはわからない. リスナーとして凸系の放送は,何とか凸の間におもしろいことをする,言おうとする様子を見るのがとても面白くて好きだった. 他にも,生主が凸してくる(売名)のは,他の面白い生主を知るキッカケにもなって,どんどん面白い放送を知れて良かった. 大手の生主が,それほど大きくないコミュニティと絡んで多くのリスナーが流れ込んだりするのは,生主としてもリスナーとしても非常に良い循環を生んでいたように思う.

現在はゲーム実況の勢いが強く,ほとんどの放送がゲーム実況だが,当時ゲーム実況がまだそれほど勢いがないころ,凸待ちは,生主同士,生主とリスナーの繋がりがどんどん強くなるこの放送は,ニコニコ生放送を支えてきたとも言えるのではないだろうか.

この放送形態が生まれたのはニコニコというアングラな雰囲気とコミュニティ,そして技術面では,PCでWebカメラSkypeがあるというのが大きな要因だったように思う.モバイルでの配信ではせいぜいカメラで顔出すか何かを写すことしかできず,PCでは案外というか色々なことができるので,色々な放送が生まれやすい

個人的なニコニコ生放送の面白いところは,生主の企画力や何かニコニコ的な特殊な放送,そして何と言っても30分にかける気持ちの強さだと思う.30分という枠は,トライアンドエラーの連続で生主の向上心と枠の質向上を促しているはずだ.だらだら行われるゲーム実況放送も良いが,生主初心者としては,30分放送して視聴者も一桁,コメントもなしくらいがちょうどいい.もっとアクティブを増やそう,コミュメンバーを増やそう,次頑張ろうとそう思える気持ちが大事だ. PCつけて,Webカメラつけて,コメビュを立ち上げて,全力で30分頑張るのがニコニコ生放送だと思う.

何か面白い放送知っていれば是非,教えてください.

佐倉綾音さんの応援を支える技術

みなさんこんにちは〜、佐倉綾音です

www.adventar.org

17日目です。遅れてすみません

佐倉としたい大西イベントに行きました。とても良かったですね

#toshitai

@tsuwatchが投稿した写真 -


あやねるがいのりんのCDを買って、それを舐めている写真をいのりんに送っているという話が良かったですね…

それでは、早速本題の佐倉綾音さんの応援を支える技術ということで普段、どのようにして佐倉綾音さんの活動を追っているのかを少し紹介したいと思います

まず、ラジオですね。

github.com

超A&Gのラジオの好きな時間を指定して録画できるので便利

これで録画したファイルをWebDAVなどでアクセスできるようにして見ています

次に、ニコニコ生放送ですが、

github.com

を使っています。これは入力した単語でタグ検索して自動でタイムシフト予約します。「佐倉綾音」を登録しておくと、公式放送や佐倉綾音さんが関わっているアニメなどにもタグが入ってるので便利

簡単な紹介ではありましたが、以上になります。

それでは〜、良き声優ライフを〜