未来世紀アラカワ未来世紀アラカワ2015-10-16入門Electronプログラミングelectronがatom-shellという名前だった頃から気になってたんだけど、ようやく入門してみることができた。electronで何が作りたいかというと、OS非依存な同人誌zip管理専用のソフト。フロント部分はモダンなフレームワークだとかなんとかを使わずに全部jQueryで書く、とかなら今でもできそうな気もするけど、それでは挑戦が少なすぎる。モダンなフロントエンド技術を勉強しつつ盛り込めればいいな、というスタンスをとっており完成はいつになるかわからない。具体的なアプリケーションの内容は別にして、管理ソフトには「監視対象のディレクトリを持ち、そのディレクトリにあるファイル一覧を取得する」という機能は絶対必要だろう。この機能なしで作る方法を知ってるならぜひ教えてほしい。いうわけでこの機能をはじめに実装してみることにした。世間によくあるelectron始めてみました、的な記事はあんまり役に立たない。worldを表示させてみました」止まりの記事ばかり。そこから(どんなにショボかろうが)機能を持ったアプリケーションにする、というところまで大きな開きがあると思う。worldの一歩先までのチュートリアルになっているので、electron触ってみようと言う時はおすすめ。Electronでアプリケーションを作ってみようまずやることを整理。OSごとの適切な場所(UNIX系なら~/mangarack、Windowsならユーザー/Appdata/Roaming/mangarack)設定ファイルがある(今回はJSON形式)設定ファイルの中には監視対象のディレクトリパスが書かれているという状況下で実行されているOSを検出して、適切な場所に設定ファイルを読みに行くその設定ファイルに書かれている監視対象ディレクトリ内のファイルパス一覧を取得する(今回はとりあえずウィンドウに一覧を出力するだけ)ちなみに、「electron実行環境を整える」とか「main.jsを書く」とかは省略。これから述べるファイル構造はこういうふうになっている。いう構造が「まっとう」なのか、electron自体新しいからあんまり定まってない?まず、設定ファイル読み込みを行うsrc/module/setting.jsから。これは未理解なので説明に自信がないんだけど、こういうふうにすると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に監視させたいディレクトリ名を入れてみる。["C:\\Hcomic\\**"]}と、これでタスクはクリア。このプロジェクトのディレクトリを監視対象にして実行してみると、こんな結果に。ディレクトリは再帰的にたどられるので、bootstrapとかnodeのモジュールのファイルも全部列挙されてしまった。現在、Github製のatom.ioというエディタを使っている。v0.0.1/2まだ0.0.1にすらなってないけど、一応進捗を。始めたブログも気づけば10年を超えてました。(bloggerから移転)ブログを書くことで自分と向き合っています。欧州サッカーメガクラブはFFPを破るのかトップに戻るプライバシーポリシー・免責事項お問い合わせ未来世紀アラカワ引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。