ニコニコ動画の音楽に特化した動画も見れるよPCアプリを作った

時期的にも機能的にも区切りがついたので、v1.0.0をリリースしました💃

2018年の1月の目標として、このNicoHacoをv1.0.0でリリースしたいと思っていました。(今2月ですので、少し間に合いませんでしたが。。。)

この一ヶ月の間、全くブログを更新出来なかったのはずっとElectronを触っていたからです。

だからと言ってElectronの知見が溜まったかというとIPC周りぐらいで実際Webでやっていることと変わらないため記事を書くほどの知見はなかった気がします。

NicoHacoとは？

f:id:about_hiroppy:20180205015512p:plain

リポジトリ

github.com

サイト

nicohaco.github.io

NicoBoxみたいに音楽再生に特化しているけど、動画も見れるよアプリです。
本当は音楽だけで良かったのですが、動画も見たくなって急遽見れるようにしました。

詳しくはせっかくサイト作ったのでそちらを見てもらえると嬉しいです😘

ニコ動は機能が多く、すべての実装をすると終わらないので、区切りとして自分がほしかった最低限の機能だけ実装しました。

また、今回リリースを優先してたためリファクタリングが終わらなかったのと細かい修正が残っている部分があるためそれもすぐに修正していきたいと思っています。なのでもうすこしこの開発スピードが続きそうです。

良かったこと

1/20ぐらいからほぼ毎日リリースをしていた。

楽しすぎてこれを仕事にしたいぐらいとりあえず楽しかった。
だから一ヶ月でv1まで持っていけたんだと思う。

良くなかったこと・学び

1月の半分ぐらいは仕事8時間、趣味(これ)6時間ぐらいの生活を送っていたけど、PC画面をずっと見ていると気持ち悪くなることが多かった。。。
大体、ずっと連続でコード書いて12時間ぐらい経過するとダメなことを学んだ。

また、デザインセンスがないので勉強しないといけないなと感じた。
一番時間を使ったのはデザインで一日何も進まないこともあった。

悩み

Electronのメインプロセス側は純粋なNode.jsなのでwebpackやらBabelやらに通したくないんだけど、環境変数の埋め込みをやらないといけなくて結局通す事になった。。。
主に自分の場合、環境変数とFlowが影響あった。(結局実行時にはstripしないといけないので。。)
幸いにもFlowにはコメントで型が付けれる(e.g. /*: string */)優秀な機能があるので今はこれでやっているけど、今現在結局、webpackを通しているのでこれもやめてモジュールもCJSからESMに変えようか悩んでいる。。

FYI flow.org

あと、ニコ動の(公式的には)API無いのでHTMLのパースをしている部分が多くて今後追従大変だなって思っているのでパースできるかどうかの定期テストを書かないとだめかな。。(あとパフォーマンス的にも良くない)

知見

Electronの署名周り

# 無理矢理署名をしてautoupdateのみ確認を行う
# debugのみで実際そのパッケージと同じ署名ではないためパッケージの展開はできないです
# (`update-downloaded` のところで Could not locate update bundle for... と怒られる)
$ codesign --deep --force --verbose --sign - electron.app

# ガギ一覧(macの場合)
$ security find-identity -v

GitHubへのリリースノート作成時

GitHubへapp形式のを直でリリースに貼る時、初めてリリースノートを作成時に投げるとなぜか駄目って言われるので一回リリースを作ってしまい、その後Editしてそこで投げるとzipに圧縮してくれる。[要検証]

f:id:about_hiroppy:20180203122320p:plain

Autoupdate

とりあえずElectronのAutoupdateがめんどくさい。。
今回は、一番ラクにできるでだろうと思っている方法で解決しました。

使ったもの

now-cli
hazel

github.com

やり方

now-cliを使って、nowへhazelをデプロイをする
アプリのautoupdaterの向き先をnowのデプロイ先に向ける

# 最初にnowのアカウントを作る
$ npm install -g now
$ now -e NODE_ENV=production zeit/hazel
# 終わり

仕組み

zeitのnow上にhazelを使ってリリースしたバイナリをjsonに紐付けしています。
このjsonは各バージョンのpathに切られたところに配置されます。
流れは、hazelがjsonに最新のGitHubのリリースノートのバイナリのurlを書いてくれるのを生成してくれるので、それをアプリが見てGitHubにある最新バイナリをダウンロードします。
また、hazelは自動的にGitHubのリリースノートを見てくれて紐付けしてくれますので、特に一回デプロイしたら何もすることはありません。

nicohaco/nicohaco

ただ、注意点としてファイル名にmacという文字列がないとmacOSのアプリと認識してくれません。(ハマってコード読みました)

github.com

めっちゃ簡単で便利なのでオススメです。