electronがatom-shellという名前だった頃から気になってたんだけど、ようやく入門してみることができた。
electronで何が作りたいかというと、OS非依存な同人誌zip管理専用のソフト。
フロント部分はモダンなフレームワークだとかなんとかを使わずに全部jQueryで書く、とかなら今でもできそうな気もするけど、それでは挑戦が少なすぎる。なのでもっとモダンなフロントエンド技術を勉強しつつ盛り込めればいいな、というスタンスをとっており完成はいつになるかわからない。
では本題へ。
具体的なアプリケーションの内容は別にして、管理ソフトには「監視対象のディレクトリを持ち、そのディレクトリにあるファイル一覧を取得する」という機能は絶対必要だろう。この機能なしで作る方法を知ってるならぜひ教えてほしい。
というわけでこの機能をはじめに実装してみることにした。
世間によくあるelectron始めてみました、的な記事はあんまり役に立たない。というのもそれらは「メインウィンドウにhello worldを表示させてみました」止まりの記事ばかり。そこから（どんなにショボかろうが）機能を持ったアプリケーションにする、というところまで大きな開きがあると思う。
下の記事はhello worldの一歩先までのチュートリアルになっているので、electron触ってみようと言う時はおすすめ。
Qiita - Electronでアプリケーションを作ってみよう
まずやることを整理。
- OSごとの適切な場所（UNIX系なら~/mangarack、Windowsならユーザー/Appdata/Roaming/mangarack）設定ファイルがある（今回はJSON形式）
- 設定ファイルの中には監視対象のディレクトリパスが書かれている
という状況下で
ちなみに、「electron実行環境を整える」とか「main.jsを書く」とかは省略。
- 実行されているOSを検出して、適切な場所に設定ファイルを読みに行く
- その設定ファイルに書かれている監視対象ディレクトリ内のファイルパス一覧を取得する（今回はとりあえずウィンドウに一覧を出力するだけ）
これから述べるファイル構造はこういうふうになっている。
 |
| どういう構造が「まっとう」なのか、electron自体新しいから あんまり定まってない？ |
これは未理解なので説明に自信がないんだけど、こういうふうにするとrequireされても同じオブジェクトが使いまわされる…はず。シングルトンパターンというらしい。
10行目のproess.envには、実行しているOSの環境変数が入っている。なのでwindows系ではAPPDATA環境変数、それ以外ではHOME環境変数で指定されているディレクトリ以下mangarackディレクトリ内のsetting.jsonに設定を保存するというもの。仮に存在しなかった場合は同梱されているデフォルトのものがコピーされる仕組み。ファイルコピーはfs-extraというライブラリを使うと簡単。（ユーザーが勝手に書き換えて設定ファイルがおかしくなってる場合とか、それはこっちの責任じゃないよね…）
ちなみにappData(src/appData.js)というのはアプリケーション名だとかバージョン情報だとかを入れておくためのもので、settingと同じようにシングルトン。 ただしほんとにシングルトンなのか調べてないので、そのうちちゃんと検証してみないと。。。
そして、設定に書いてあるディレクトリのファイル一覧を取得するのはsrc/lib/libraryWatcher。
ここではnode-globというライブラリを使っている。
で、main.jsから呼び出されるview/index.htmlとそこから呼ばれるsrc/index.jsはこんな感じ。
で、あとはassets/default_setting.jsonに監視させたいディレクトリ名を入れてみる。
{と、これでタスクはクリア。
"watch_dir": [
"C:\\Hcomic\\**"
]
}
このプロジェクトのディレクトリを監視対象にして実行してみると、こんな結果に。ディレクトリは再帰的にたどられるので、bootstrapとかnodeのモジュールのファイルも全部列挙されてしまった。
