Electronでシンプルな動画プレイヤーを作ってみた（技術編）

Electronでシンプルな動画プレイヤーを作ってみたので、その機能記事と技術記事を書こうと思います。本記事はその技術編です。

使用した主な技術要素などは以下です。

Electron

説明するのも野暮だと思うので概要だけ。

Electron（旧Atom-Shell）とは、Web開発者がHTML5とNode.jsでMac、Windows、Linuxのデスクトップアプリを作れるクロスプラットフォーム実行環境です。 Electronはオープンソースで無料で使える上に、MITライセンスであるため、商用利用も可能です。 開発元はGitHub社です。
CodeZineより引用

React

こちらも有名ですね。
やや古いですが、この記事が簡潔にまとまっていて分かりやすかったです。

react-router

名前の通り、ルーティング周りのライブラリです。Railsでいう link_to メソッド等の機能ももっています。
URLに応じて対応するコンポーネントのレンダリング等を行ってくれます。

redux

reduxは状態管理のためのフレームワークです。
Redux入門【ダイジェスト版】10分で理解するReduxの基礎が分かりやすかったです。
実際に使ってみて、状態変化など分かりやすかったですし管理しやすかったです。(後述のボイラープレートによる部分も大きかったですが）
View,Action,Reducerそれぞれの役割が決まっているので、余計なことを考えず、その部分の実装に集中できましたし、ロジックも簡潔になりました。例えば、あるボタンを押した時、こっちのフラグが立っていたら〇〇とか複雑なことを考えなくてよかったです。
ただ自分の場合はActionとReducerの境界がはっきりしておらず、これはActionの仕事かなということもReducerでやっている感があります。

余談ですが、最近(2016年2月中旬頃)にreactjsに移管されたようです

electron-react-boilerplate

• 上記のElectron, React, React-router, redux 全てが入ったボイラープレートです。これを使うとスゴくお手軽です。

• 最近の流行りらしくgulpは使っておらずnpm scriptsでまかなっています。けど全然不便は感じません。

• ここらへんはよく分かっていないのですが、ソースコードを変更するといい感じにreloadしてくれます。webpack等のlive reloadとは違い、必要なモジュールだけreloadしてstateに応じて再描画してくれたり、actionの再実行をしてくれます。ただそのせいで、Reducerをべき等にしておかないといけません。（まぁこれはデメリットではなくメリットだと思います。）

• 他にもボイラープレート類はたくさんあるので、使いたい技術要素+「boilerplate」or「starter」などのキーワードをつけてググるとジャストフィットなものが見つかるかもしれません。

redux-devtools & atom-redux-devtools

• boilerplateをそのまま使うとアプリの画面上にreduxのdevtoolsの領域が表示されるのですが、Electron自体のdevtoolもあるので、イヤだなーと思っていました。そうしたところ、Atomエディタにそれ用のタブを表示してくれるatom packageを見つけたので採用しました。
• ちなみにGithubのREADMEには書かれていませんが、atomで cmd + shift + d とするとredux-devtoolsのタブが開きます。

lowdb

• lodashの関数でアクセスできる軽量DBです。簡易なものでよかったこと、もともとlodashに馴染みがあったこと、データをjsonで保存可能だったことから採用しました。
• 当初は想定していなかったjsonのexport,importも簡単に実現できて結果的によかったです。
• データ操作はサンプルに載っているように、db('posts').chain().sortBy('views').take(5).value() とchain を使ったのですが、最近「 Why using _.chain is a mistake.」という記事を読んで、なるほどと思いました。しかし書き直す気力はなく・・・

react-tags

• タグ用のcomponentを探したところ、欲しい機能がだいたい揃っていたのがこれでした。
• ただし現在はあまり開発されておらず放置気味のようで、一抹の不安がありました。しかしコードを読んだ感じだといざとなれば自分でメンテできそうだったので採用しました。
• タグ入力時に何も入力してなくても候補を表示したかったのですが、そのままの使い方だと無理だった(最低1文字は手入力しないといけない)ので、ちょっと小細工しました。

marerial-ui

• 有名なgoogleが提唱(?)しているマテリアルデザインのreact用UIライブラリです。
• 各種コンポーネントが手軽に使えて便利です。
• ただし生成されるDOMのstyle属性に直接書いてくるので、ちょっとしたカスタマイズはstyleオプションですることになります。適当なclass名を与えてCSSでやろうとしても「!import」ばかりになってしまう。。
• そのためコンポーネントのモジュール化がすすみ、感覚的にはWeb Componentsに近いと思いました。
• ちなみに、色はカラーパレットを見ながら、メインカラーとアクセントカラーを決めて、その他はメインカラーと同系色3,4色にしようと思っていたのですが、センスがなくて同系色5,6色くらい結局使ってしまいました・・・難しい・・・
• カラーパレットの色コードとライブラリの定数名(厳密には定数ではないですが)が同期しています。

たとえば、「Light Blueの900」の場合

import Color from 'material-ui/lib/styles/colors'

const style = {
  color: Color.lightBlue900
}

React Infinite

• リストが数百件になるとすごく重いので遅延レンダリングしてくれるcomponentを採用しました。
• 何も気にせず配列に数百件のデータを入れても、画面スクロールに応じて適量ずつレンダリングしてくれるので軽量です。
• ただし子要素はdivでラッピングされるので、リスト部分にtable,trタグを使うと実行時にレンダリングエラーになります。

ライブプレビュー

ライブラリではないですが、ちょっと工夫したところを。
動画再生中にシークバーにマウスをホバーしたらそのシーンをプレビューできるようにしたかったのですが、最初はcanvasを使ってイメージを描画し、それをポップアップで表示させればいいと考えていました。が、描画するにはそのシーンを表示する必要があり、再生中動画はそのままにしたいから別にvideoタグ作って・・・と試行していたら、あれ？それならcanvas使う必要はなく、もう1つのvideoタグをポップアップすればよくない？と気付きました・・・「画像を表示したい＝canvasを使う」という思い込みがあったせいで、変な遠回りをしてしまいました。