electron-packagerでasar圧縮する時はFlashなどのバイナリファイルを含めてはならない

表題どおりです．electron-packagerでasar圧縮する時にバイナリファイルも圧縮すると，asar内でそのファイルを読み込むことができない．

--asar.unpackオプションで指定して，圧縮しないようにする必要がある．

Unable to use Pepper Flash plugin in packaged app (MacOS X) · Issue #114 · electron-userland/electron-packager · GitHub

なので，

https://github.com/tsuwatch/nicomentron/blob/94c0106f720c0725f18059ace024f509b55e4770/package.json#L8

こんな感じ．指定するとアプリ内ファイルのapp.asarが生成されるディレクトリと同じディレクトリに app.asar.unpackedというディレクトリができ，そこに指定した圧縮されていないファイルが置かれる．

なので，

https://github.com/tsuwatch/nicomentron/blob/v0.5.0/src/main.js#L24

ディレクトリを指定するときに，app.asarの部分をapp.asar.unpackedにしたりして読み込む．

ニコ生のコメントサーバーに接続したりするためのライブラリ作った

ニコ生のコメントサーバに接続したりするためのライブラリをJavaScriptで書きました．npmで利用できます．

github.com

ニコ生デスクトップクライアント（GitHub - tsuwatch/nicomentron: Desktop client for ニコニコ生放送（live.nicovideo.jp） made of Electron）を作っていて、その副産物です。とにかくニコ生デスクトップクライアントを作るために作ってるので、ガッと実装していて色々怪しいところもあったり、ドキュメントもまだ書いてないんですが、そのうちちゃんとやります。

現状こんな感じで使える。

import nicolive from 'nicolive-api'

nicolive.login('foo@bar.com', 'xxx').then(client => {
  client.connectLive('lvxxxx').then(manager => {
    manager.viewer.connection.on('comment', (comment => {
      console.log(comment.text);
    }));
    manager.viewer.connection.on('ejected', () => {
      console.log('追い出されました');
      manager.disconnect();
    });
  });

  client.connectAlert().then(viewer => {
    viewer.connection.on('handshaked', () => {
      console.log('handshaked');
    });
    viewer.connection.on('notify', (info => {
      console.log(info.contentId);
    }));
  });
});

使えるAPI

  • 生放送情報取得
  • コミュニティ、チャンネル情報取得
  • ユーザー情報取得
  • ニコ生アラート

コメントサーバーの仕様について

全部屋に接続して、全部屋のコメントを取得します。

ウェブ上にある情報やOSSなどを見てコメントサーバについて少し解説すると（もちろんあってるかかどうかはわからない）、まず、メッセージサーバ群が存在します（ https://github.com/tsuwatch/nicolive-api/blob/56d8e36b2800d909dcb5e71cd107b2e0aac5e692/src/MessageServer.js#L2-L23

） こんな感じで、ドメイン名とポート群があり、ここから対象の放送のメッセージサーバを探索します。

getplayerstatus というAPIが存在するので、そこから自分が接続しているサーバを確認します。メッセージサーバは順番を持っていて、他の部屋のメッセージサーバは、自分が接続したメッセージサーバの前後に存在している。例えば立ち見Aに接続した場合、アリーナサーバは1つ前のドメイン名とポート番号に存在している。接続するにはスレッド番号も必要なので、自分が今接続しているスレッド番号に-1すれば良い。こういう感じで前後のメッセージサーバを探索していける。

スレッド番号は、放送が開始された段階でまとめて部屋分確保されるので、単純にプラスマイナスすれば良い。コミュニティレベルに応じて、そのコミュニティが可能な部屋数の最大までスレッドが確保されている。チャンネルも固定で500人×6部屋の3000人分確保されている。しかし問題なのが、自動増席システムです。チャンネルは、満員になると自動的に席が追加されます（立ち見席と表記される）。この席はもちろん、一番うしろのメッセージサーバの次のメッセージサーバであることはわかるんですが、スレッド番号が特定できません。なぜなら一気に確保していませんし、裏では常に他の放送のスレッドを確保しているからです（おそらく）。

なので、立ち見席には対応できていません。立ち見席に接続した場合は、立ち見席しか取得できないようになっています。世のコメビュはなぜか対応できているやつもあるっぽいんですが、謎です。教えてください。

そういえば、ニコニコ生放送は新配信に移行するようです。新配信では満員という概念がなくなるようで、自動増席がバンバンされるということですね。現状確認したところ、コミュニティレベルに応じてスレッドを一気に確保するというシステムは現状変わっていないようなので、それ以降に自動増席がされるようです。

こんな感じです。みなさん、これで最強のコメントビューアが作れますね。

参考

【7/13更新】新配信番組のタイムシフト画質を改善|ニコニコインフォ

ニコ生の公式とチャンネルのコメントサーバの仕様について | ニコラボ

GitHub - honishi/Hakumai: niconama comment viewer alternative for mac os x.

Electronアプリのファイルサイズ最適化，必要なファイルだけパッケージするやり方

ElectronアプリはchromiumをベースにしていてHello worldするだけでも100M近くのファイルサイズになってしまう． 油断しているとすぐに200Mとかになってしまうので，ファイルサイズをできるだけ小さくすることを普段から心がける必要がある．

心がけた結果のPRがこれ

github.com

今までは，

$ NODE_ENV=production ./node_modules/.bin/electron-packager . nicomentron --platform=darwin --arch=x64 --out=packages --overwrite

こうビルドしていた． こうすると，もちろんだがカレントディレクトリのファイル全てがアプリ内に含まれてしまい，node_modulesや当たり前に不必要なファイルが数多く含まれてしまいこのようになる．

f:id:tsuwatch:20170527181027p:plain 最適化できているかは，アプリ内のここのディレクトリを見れば確認することができる．（asarで圧縮してしまうともちろん見れない

せっかくビルドした結果をapp以下に吐いているのに無関係に全ファイルアプリ内に入ってしまっていることがわかる． 必要なのはビルド結果のapp以下のファイルとpackage.json，その他必要なファイルだけだ．

不必要なファイルで気をつけるべきなのは，自分のアプリで言うとフラッシュプラグインがあり，今後マルチプラットフォーム対応するにあたって各プラットフォームごとのフラッシュプラグインを用意するので，このままだと全てのフラッシュプラグインが入ってしまう

結果以下のようにapp以下をパッケージングするように変更した．パッケージングするにはpackage.jsonが必要である．自分のアプリはexternalsでネイティブモジュールを使用しているので，仕方なくnpm installして，electron-rebuildも実行するようにしている．もちろん，本来であればnode_modulesも必要ない

$ cp package.json ./app && cp -r plugins ./app && cd ./app && rm -rf node_modules && npm install --production && ../node_modules/.bin/electron-rebuild -m . sqlite3 keytar
$ NODE_ENV=production ./node_modules/.bin/electron-packager ./app nicomentron --platform=darwin --arch=x64 --out=packages --overwrite --asar

結果 f:id:tsuwatch:20170527223245p:plain 良さそう