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

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

github.com

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

www.posite-c.com

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

honishi.github.io

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

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

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

ファイル構成

Electron、色々なアプリを見回って参考にさせてもらいましたが,今はこの構成に落ち着いていて、気に入っている

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

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

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アプリの便利なライブラリ情報が集まっていて良い

まとめ

続報をお待ち下さい