Electronを触り始めました。

ファイルを指定する

Electronではブラウザよりも柔軟なファイル選択が可能です。フォルダ選択が可能なため、今回は対象のファイルを一括で指定するためにフォルダ選択を用いました。

Electronのレンダラープロセス側のJSで、ボタンを押したらフォルダ選択ダイアログを表示して処理するみたいな部分をまず書いてみます。

 1// index.js
 2import { remote } from "electron";
 3const Dialog = remote.dialog;
 4
 5$(document).ready(function() {
 6  $("#folder-select").click(() => {
 7    Dialog.showOpenDialog(
 8      null,
 9      {
10        properties: ["openDirectory"],
11        title: "フォルダ選択",
12        defaultPath: "."
13      },
14      (folderNames) => {
15        const folder = folderNames[0];
16        console.log(folder);
17      }
18    );
19  });
20});

画面側をざくっとjQueryで作ったのでアレですが、このコードによって対応したボタンを押したらダイアログが開いてくれて、フォルダパスを取得可能です。

フォルダ内のファイルへアクセス

フォルダのパスがわかったなら中にあるファイルの一覧を取得します。

例えば画像ファイルに限定すると仮定して、MIME-Typeがimage/から始まるものだけを対象に処理をします。

 1import fs from 'fs;
 2import path from 'path';
 3import mime from 'mime-types'
 4
 5fs.readdir(folder, (err, dir) => {
 6  for (let file of dir) {
 7    const ext = path.extname(file);
 8    const type = mime.lookup(ext);
 9    if (type && /^image\//.test(type)) {
10      // do something
11    }
12  }
13});

パスでファイルにアクセスできるの、めっちゃ便利ですねー。ブラウザだとセキュリティ的な理由でこうはいかないし。