nicohacoを作った

5/29 エンジニアLT
repo: https://github.com/abouthiroppy/slides

😋 me 😙

Yuta Hiroto

A JS engineer and Architect

Dwango, Inc

Working on Node.js, Babel

Node.js Japan User Group

近況報告

maintainersに参加しました🙃

Open Source Maintainers on GitHub

The GitHub maintainer community is a place for open source maintainers on GitHub to collaborate with each other, and with people who work at GitHub.

GitHubで働く人たちと協力して
GitHubを良くしていくことが主な目的となっています。
主に、問題点の提示、解決や
プレリリースの機能のフィードバックを行ったりします。

opensource.guide
http://abouthiroppy.hatenablog.jp/entry/2017/05/15/215836

nicohaco

nicohacoとは？

2017/05/15ぐらいから開発し始めた個人プロダクト
NicoBoxというニコ動の音楽アプリのPC版(Electron製)

まだαの段階です

https://github.com/abouthiroppy/nicohaco

icon

デザイナのmiiiさんに書いてもらいました 😄
ありがとうございます🌝

機能

マイリスト作成
マイリストへビデオを追加・削除
検索
ランキング

ライブラリ

electron

electron-builder
- パッケージングするときに楽
electron-devtools-installer
- 様々なdevtoolsを楽に入れることができる
- 今回は、ReduxDevtoolsとReactDeveloperToolsを使用
electron-gh-releases
- AutoUpdaterのラッパ
- GitHubのリリースページに上げたのを確認してくれる

webpack

Main Process(target: electron-main)

主に使う目的としては、NODE_ENVでコードの分岐があるため
プロダクション用にコードを吐く必要があったため使用。
今現在、ESMでは書かれておらずCommonJS modulesで書かれている

Renderer Process(target: electron-renderer)

ReactのためにBabelを使用
またstring paddngは入っていないためbabel-polyfillを使用
今回はES5へ落とす必要性がないため、UglifyJSではなくBabiliを使用しminify

babel

presetsはreactとstage-1を使用
また、HMRとflowtypeを使うのでそれに関連するプラグインのみを使用

css

postcssを使用し、css-nextを基準に構築
mixinsはないので、postcss-mixinsを使用

postcss.config.js

IndexedDB

IndexedDBを使うことにした。
今回はlocalForageではなく、Dexie.jsを使った。
大変使いやすく、良かった(toArray()の意味は個人的に分かりづらかった)

ui

photon.jsを使った。
クラスを当てるとOSXのデザインになるライブラリ。
注意点として、npmでinstallするとdist内にcssがないので
GitHubから直接urlで引いたほうがいい。

アーキテクチャ

Reduxを使用
Middlewareはredux-saga
ルーティングはreact-router@4.0.0-beta.6, react-router-redux@next

Atomic Design

Atomic Designを採用
どこからでもconnectできる状態であるので、Reduxと相性がいいかは不明
ただ、単位レベルで分けれるのでわかりやすい。
が、やはりチーム開発で採用するのは大変そう
(抽象的なので個人的な主観が入る可能性が高い)
あと、見方によってこれはどこだろうって悩む時間が勿体無い気もした

niconicoのAPIについて

難しかった。
キーのケースがcamelやsnakeだったり、
キーの意味が同じでもapi間でキー名が違ったりしていた。
特に、mylistからデータを消すAPIのキー名がid_list[0][]だったのはすごかった

コードを見たほうが早いと思うので興味ある方は
リポジトリの方を見てください🤓

今後の課題

feature

cssがまだ終わってないので終わらせる
マイリスト内の並び替え・シャッフル再生・ループ再生
nicohistoryの自動ポーリング
検索機能の強化
media-queryを使ってcolumnのレイアウト修正

The end

PRやIssueお待ちしております😎