Electronで自作したツールを修正できた【Collup】

• Electronで自作したファイル整理ツール「Collup」の機能を改善しました。
• ドラッグ&ドロップでファイルをリストに追加し、フォルダ名を入力するだけで効率的にファイルを整理できます。
• 一つ上のフォルダにサブフォルダを作成する仕様に変更し、より使いやすくなりました。

1. こんなツール

先日、修正しようと思っていた、自作ツールがなんとか動作するようになりました。

プログラムのドラッグ領域にファイルをドラッグ&ドロップすると、リストに追加されます（複数のファイルをまとめてドラッグすることもできる）。

フォルダ名を入力すると、一つ上位のフォルダ内に新しくフォルダを作って、リストのファイルをすべて移動します（このとき、すでにフォルダがあれば、そのフォルダ内に移動する）。

ファイル管理ツールは、ファイルが消えてしまうと目も当てられないです。
自分用のツールなので、コードを理解できない方のご利用はおすすめしません。

2. ツール設計の理由

OSのフォルダ作成の操作にやや不満があったからです。

2-1. ファイルを選んでからフォルダにまとめたい

通常は、ファイルを整理するときには、フォルダを作成してから、その中にファイルを移動します。
しかし、いつも先にフォルダを作成するのがベストとは限りません。

スクリーンショットや操作画面の写真ファイルをファイル一覧で見ていると、「このへんをひとまとまりにしたい」と思うことがあります。

「まとめたい」と思ったときには、まだフォルダがないので、いったんフォルダが作ってから、もう一度ファイルを探しに来る必要があります。
これでは、流れるように操作できません。

2-2. ファイルの選択が解除される

また、コントロールキーなどでファイルを複数選択しても、間違えて普通のクリックをして、すべて選択が解除されてしまうことがあります。
せっかく慎重に選んで解除されると、やる気が減退してしまいます。

ということで、ファイル一覧を保持しておいて、後からフォルダ名を決める、という作業ができるツールを必要としました。

あと、Macの場合は、同じ名前フォルダを統合すると、元のフォルダのファイルが消えてしまうことがあります。
これも怖いので、同じ名前のフォルダなら、それを利用するようにしています。

3. 修正箇所（一つ上のフォルダに）

バージョン1は、2020年5月ごろにできて、約1年半ほど重宝していました。

今回、プログラムを修正したのは、フォルダ作成の場所を変更するためです。

バージョン1では、一つ目のファイルのあるフォルダ内に、サブフォルダを作成していました。
しかし、この方法だと、フォルダ内にファイルとフォルダが混在していきます。

そこで、一つ上のフォルダに、フォルダを作成することにしました。
つまり、姉妹フォルダになります。
これなら、ファイルを整理すれば、ファイルを集めているフォルダはどんどんスッキリしていきます。

それにともなって、アプリ名をelecol（Electron File Collector）からcollup（Collect Files to Upper Folder）に変更しました。

また、フォルダ名にURLなどスラッシュを含む場合、自動的に最後の文字列をフォルダ名にするようにしました（これまではエラーになる）。

私の場合は、ブログで利用した画像を、ブログのURLスラッグで分類することが多く、URLをコピペでそのまま利用できるようにしたかったからです。

あと、アプリアイコンを作りました。

3-1. 久しぶりのビルドで苦労した

一年半ぶりの更新で、Electronのバージョンも大きく変わり（v9.0.0 → v16.0.5）、セキュリティの仕組みなども変わっていました。

そのままのコードでは、ビルドできなくて苦労しましたが、プロセスの仕組みを勉強して、修正箇所がわかりました。

Electron Forgeとpreload.jsの使い方を知って、だいぶはかどりました。

こちらもどうぞ

久しぶりにMacでElectronを使えるようにした【node.jsでアプリ自作】

Macで動く自作ツールをJavaScriptでプログラムするために、Electronを使っていました。 久しぶりにプログラムを修正しようとしたら、electronコマンドが通りません。 改めて環境を構築しました。 ポイント electronのインストールで「sudo npm install -g electron --unsafe-perm=true --allow-root」でオプションを付加しないとエラーになった Electronが見つからない Electronは、「HT...

chiilabo.com

「Electronクイックスタート」をMacでたどってみた【Electron Forgeのビルド】

前回は、Electronの環境を作ったのですが、既存のソースからのビルドはうまくいきませんでした。 というのも、設定が中途半端で fsやpathのライブラリがうまく読み込めないようです。 そこで、原点に帰って、改めてElectronのひな形をビルドしてみました。 Electronクイックスタート Electronの公式ドキュメント「クイックスタート」に沿って、アプリを作成します。 クイック スタート | Electron MacBookでチュートリアル通りにそのままできるか、...

chiilabo.com

Electronでrequireができない？【プロセスとコンテクストとプリロードスクリプト】

Electronでスクリプトを書いていたところ、Node.jsのAPIとDOM要素を結びつけるのに迷いました。 main.jsではDOM要素にアクセスできず、HTMLから読み込んだスクリプト（renderer.js）ではNode.jsのAPIにアクセスできないからです。 「プロセスモデル | Electron」をもとに、それぞれの役割の違いを見てみましょう。 ポイント main.jsは、メインプロセスを管理。renderer.jsは、レンダラープロセスを管理。preload....

chiilabo.com

QRコードを読み込むと、関連記事を確認できます。