500行で動くファイルエクスプローラのブラウザアプリを Node.js で作った
外出先から Wake On WAN で PC を立ち上げて、Chrome リモートデスクトップで接続すれば PC 操作はできるんだけど、GUI をゴリゴリ動かすと重たいなーと思って、もっと簡単にファイルが閲覧できるようなファイルエクスプローラを作ってみることにした。その名も「World Banc」。意味はないけど綴りは意図的にこうしてるｗ。ソースは以下。
Node.js サーバがファイルアクセスをして、フロントエンドの HTML ファイル側が情報を受け取って表示する仕組み。ファイルダウンロードは Express の res.download() と、フロントエンド側では Fetch API を response.blob() で取得して a 要素を作ってクリック、みたいな感じにしてる。この辺の似たようなことは、以前作った「nexp」という Node.js CGI や、非公開の本サイト管理用アプリでもやっているので、アイデアや実現方式は既存のモノ。
- Neos21/neos-cgi-explorer: nexp : CGI Explorer, File Uploader, Text Editor.
- 過去記事：2020-10-12 Node.js でプライベートファイルエクスプローラ CGI を作ってみた
- 過去記事：2021-03-25 Ruby CGI でファイルアップロードを実装する・オレオレエクスプローラを作ってみた
以前 Wake On WAN を実現するために紹介した、MyDNS.jp という DDNS を使ってグローバル IP とドメインを紐付けておいて、静的 NAT 設定をして、8080 とかその辺の開発サーバ用ポートを紐付けておく。そうすれば、サーバを起動しておけば外出先から http://HOGE.mydns.jp:8888/ という感じで World Banc の画面がブラウザで開けるようになる。
- 過去記事：2020-08-24 Wake on LAN・Wake on WAN が実現できたのでやり方細かく教える
今回この実装が、クライアントサイドの index.html と、サーバサイドの index.js の2ファイルだけで完結していて、その合計行数が500行ちょうどに収まったことが個人的な喜びポイント。コレだけのことをたった500行でやれたわー、という嬉しさ。
Windows 向けの対応がちょっとめんどくさかったけど、最終的に Windows・WSL (Linux)・MacOS で同様に動作することを確認した。とりあえず作りましたよー、という話。
