ブラウザだけで動く2画面ファイラー「Browser Web Filer」の紹介

はじめに

皆さんこんにちは。今回は、インストール不要でブラウザだけで動作する2画面ファイラー「Browser Web Filer」を紹介させていただきます。

なぜこのツールを作ったのか

企業などで働いていると、以下のような制約に悩まされることがありませんか？

セキュリティポリシーでアプリケーションのインストールが制限されている
作業用PCの環境を変更できない
管理者権限がない

そんな環境でも、効率的なファイル操作をしたい！という思いから、このツールを開発しました。

特徴

1. インストール不要、ブラウザだけで動作

HTMLファイルを開くだけで即座に使用可能
Chrome推奨（File System Access API対応ブラウザ）
サーバー環境も不要

2. 2画面（左右ペイン）のファイル操作

Norton Commanderライクな2画面インターフェース
キーボード操作重視の設計
ダークテーマ対応で目に優しい

3. 基本的なファイル操作機能

ファイル/フォルダのコピー
ファイル/フォルダの移動
ファイル/フォルダの削除
新規ファイル/フォルダの作成

4. セキュリティ面での安心感

ローカル環境でのみ動作
外部サーバーとの通信なし
ブラウザのセキュリティサンドボックス内で動作

使い方

GitHubからプロジェクトのzipファイルをダウンロード
C:\Users\Users\Downloads\browserwebfiler-main\browserwebfiler-main\main\src\app\html\index.htmlをブラウザで開く
「フォルダを選択」ボタンで作業フォルダを選択
キーボードショートカットでファイル操作

主なキーボードショートカット

[基本操作]
n         : フォルダを選択
←/→      : ペイン移動
↑/↓      : ファイル選択
Enter     : フォルダに移動

[コマンド]
Space     : コマンドモードON/OFF
m         : 移動
c         : コピー
d         : 削除
Shift + k : 新規フォルダ作成
Shift + e : 新規ファイル作成

制限事項

正直に申し上げると、以下のような制限があります：

システムファイルエリア（C:/等）へのアクセス不可
ファイル編集機能なし
ドラッグ＆ドロップ非対応

類似ツールとの違い

既存のWEBベースのファイラーと比較した際の本ツールの特徴は：

完全ローカル動作
- サーバー不要
- インストール不要
- 外部依存なし
シンプルな構成
- HTML/CSS/JavaScriptのみで構築
- フレームワーク未使用
セキュリティ重視
- ローカルファイルのみアクセス
- 通信機能なし
- ブラウザの保護機能を活用

まとめ

Browser Web Filerは、以下のようなシーンで特に活躍します：

社内の制約の厳しい環境での作業
クライアントPCでの一時的なファイル操作
アプリケーションのインストールが制限された環境

今後の展望

現在はベータ版ですが、以下の機能を検討中です：

ファイル検索機能
ファイル名編集機能
ソート機能の拡充

おわりに

本ツールがお役に立てば幸いです。GitHubでソースコードを公開していますので、ぜひフィードバックやプルリクエストをお待ちしています。
※この記事はAI(Cusrorチャット)で作成されました。画像の挿入、リンクの説明等一部を筆者が編集しています。

参考リンク

以下、余談(作者コメントの追記)

投稿前にQiitaで検索したところ、先駆者がいたようです。
@takanopontaro (Shinji Takano)
二画面ファイラーを作った。
https://qiita.com/takanopontaro/items/58a4474e88f439330ab5

本WEBアプリはNode.jsなどインストールが必要ないので、
気軽にお試しできるところが強みかなとは思いますが、
機能は殆ど皆さんご存知「あふｗ」を元に作成しています。

ツールの作成理由は、先駆者の方も記事に書いていましたが、
Web版の2画面ファイラーがほとんど存在しないので、作りました。

本投稿記事もそうですが、このWEBアプリ自体はAI（CursorのCOMPOSER）で作成しました。
設計資料を途中で後から作ったりしていたので実装込みで2週間ほどの期間です。
途中でテストコードも出力させようとしていましたが、
node.jsを使わないといけなかったりしたので、アプリ仕様に合わないため一旦諦めました。
（オリジナルのテスト設計ライブラリを作らせたりもしましたが微妙だった）

CursorのCOMPOSERのagent modeでそこそこ動いてくれましたが、
設定等を調整したりするとうまく動いたりしなかったり。
https://github.com/2f0833e717/browserwebfiler/blob/main/main/docs/develop/auto-composer.ps1
主にこれを使い完全手放しでCOMPOSERの25回制限の自動実行テストをしていましたが、
COMPOSERS自体が反応したり、しなかったりと、とはいえ、「続けて Enter」の操作をしなくて済むので、
完全自動実行で今話題のCline系と使用感は変わらないかなと思います。
この辺だけでも記事にできそうですがまた別の機会で。

それではまた。