【Javascript】ローカルファイルの一覧を取得したい

前提・実現したいこと

プログラム初心者です。
絵の資料として貯めた画像ファイルを閲覧するためのシステムを、HTML/CSS/JSで作ろうと思っています。

そこで、メインのHTMLファイル(index.html)があるディレクトリのローカルファイル名の一覧を取得したいです。

次のようなディレクトリ構成を想定しています。

(root)
├ index.html
└ picture
　├ hogehoge.jpg
　├ mogemoge.png
　・
　・
　・
　└ foofoo.gif

お力添えよろしくお願いします。

試したこと

Javascript(?)のActiveXObject
：何とか動くようにはできましたが、以下の理由であまり使いたくないです。
(1)IEでしか(?)動かない
(2)毎回許可が必要
Javascript(?)のFile API
：以下のコードを実行するとUncaught ReferenceError: Folder is not defined というエラーが出て動かせませんでした。

f = new Folder ("/data/");
//エラーメッセージ：　Uncaught ReferenceError: Folder is not defined

PHPのglob
：調べたところローカルだけでもPHPが動かせるとありましたが、自力では動かせませんでした。
画像ファイルを連番(001.jpg, 002.png, ... xxx.gif)にリネームしてアクセスしやすくする
：自力だとこれが最も現実的だと思いましたが、大変なのでしたくないです。

補足情報

完全に自分用なので、どこかのwebサーバに公開する予定はありません。
また、ローカルで完結するので特に制限はないです。
Javascriptで動的に<img/>を生成することにはなんとか成功しました。
HTML/CSS/JSで作ろうと思っている理由は、学習が簡単そうだからです。
ですが言語の仕様で無理そうな場合は、他の方法も教えていただきたいです。

otn

2020/02/14 23:12

正しい言葉の使い方をしているのか不明なので、やりたいことが不明瞭です。まず、ウェブアプリ（ブラウザと、HTTPサーバーが、TCP/IPで通信して処理する）を作りたいということで合ってますか？その場合、・ブラウザを動かす環境・・・・ローカル・HTTPサーバーを動かす環境・・・リモートとなります。同じPC内で稼働する場合もそうです。TCP/IP通信を境界としてブラウザ側がローカル、ブラウザと通信する相手側がリモートです。 > メインのHTMLファイル(index.html)があるディレクトリのファイル名の一覧ということだと、リモートのファイル一覧ということになります。それとも、HTTPサーバーを使わずに、ブラウザで、file:///D:/temp//aa.html のようにファイルを直接開く話ですか

行動規範の内容に同意します

回答4件

ベストアンサー

自分用のアプリケーションでローカルでのみ実行するという前提で回答します。

JavaScriptのFile APIを利用すると、Chromeで以下のようなコードを書くとディレクトリ内の画像ファイルを取得して表示できます。
ただ、ディレクトリを選択する際にダイアログがでるので、そこで許可を出す必要があります。

個人用のアプリケーションでセキュリティリスクがないのであれば、アップロードしても問題ないと思います。
（WEBで公開する場合はセキュリティリスクがあるので、その点を考慮した実装にする必要があります）

html
1<input type="file" id="file" name="upfile[]" webkitdirectory />
2<div id="list"></div>

js
1document.getElementById("file").addEventListener("change", ev => {
2  for (let i = 0; i < ev.target.files.length; i++) {
3    let file = ev.target.files[i];
4
5    // ディレクトリの相対パス
6    let relativePath = file.webkitRelativePath;
7
8    let fileReader = new FileReader();
9    fileReader.onload = (function(theFile) {
10      return function(e) {
11        // Render thumbnail.
12        var figure = document.createElement("figure");
13        figure.innerHTML = `
14          <img class="thumb" src="${e.target.result}" />
15          <figcaption>${theFile.name}</figcaption>
16         `;
17        document.getElementById("list").insertBefore(figure, null);
18      };
19    })(file);
20    
21    fileReader.readAsDataURL(file);
22  }
23});

こちらにサンプルコードを上げましたので、よろしければ参考にしてください。
サンプルコード:CodePen

参考リンク

投稿2020/02/15 00:26

編集2020/02/15 00:31

shgtkshruch

総合スコア665

nerunoda

2020/02/15 09:48

回答ありがとうございます。実現したかったことを叶えていただきました。質問なのですが、毎回フォルダを選択するのは言語の仕様上仕方ないんでしょうか？特定の名前のフォルダの中身を自動で読み込みできれば、より便利になると思ったのですが... 別にJavascriptでなくてもいいので、他に何かよさそうな言語があれば教えていただきたいです。

shgtkshruch

2020/02/16 01:59 編集

解決できてよかったです。毎回フォルダを選択するのは、現在のJavaScriptやブラウザの仕様です。回答にも書きましたが、サイトで読み込まれたJavaScriptからローカルファイルにアクセスさせるのはセキュリティ的にリスクがあるので、現在はこのような仕様になっています。私の回答はページを読み込んでからJavaScriptで動的に画像を追加する方法ですが、別の方法としては、例えば Static Site Generator（静的サイトジェネレータ）を使うという手もあります。これは予め用意したテンプレートにデータを流し込んで、HTML・CSS・JavaScriptを生成する（ビルドといったりします）ツールで、Node.jsやRuby、Goで書かれたものなどたくさんあります。今回の例であれば、テンプレートに「絵の資料として貯めた画像」を流し込んでページを作成して、閲覧する際は生成されたHTMLをブラウザで表示するという感じです。このやり方ですと、ビルドする際にフォルダを指定すれば、ページを見る際はユーザーが特に操作する必要はありません。画像を追加するたびにビルドする必要がありますが、これはある程度自動化して手間を省くことも可能です。（とはいえ、作成しているアプリケーションの更新頻度がわからないので確かなことは言えませんが。）

nerunoda

2020/02/15 13:40

追加回答ありがとうございます。静的サイトジェネレータというものがあることを初めて知りました。色々調べてみようと思います。丁寧な対応をありがとうございました。大変助かりました。またよろしくお願いします。

行動規範の内容に同意します

Chrome の sandbox 内限定、という条件付きであれば、FileSystem API を使えばかろうじてできるかもしれません。
日本語のドキュメントがほとんどないので、いばらの道だと思いますが……

FileSystem API ｜特集カテゴリー｜ Developers.IO
LocalFileSystem - Web API | MDN
DirectoryEntrySync - Web API | MDN

投稿2020/02/15 01:06

Lhankor_Mhy

総合スコア37460

nerunoda

2020/02/15 09:55

回答ありがとうございます。教えていただいたAPI？を調べてみます。ありがとうございます。

行動規範の内容に同意します

インのHTMLファイル(index.html)があるディレクトリのローカルファイル名の一覧を取得したいです。

ブラウザ上のHTMLだけでは、セキュリティ上不可能です。

「ブラウザ拡張を使う」「事前にファイル一覧を特定のファイル名で作成しておく」「Electronや他の言語で作るなど、ブラウザ内の枠に縛られない別の手段を使う」などの手法が必要になります。

投稿2020/02/14 23:30

編集2020/02/14 23:31

maisumakun

総合スコア146641

nerunoda

2020/02/15 09:37

回答ありがとうございます。教えていただいたElectronを調べてみようと思います。

行動規範の内容に同意します

回答としては maisumakun さんと同じです。

ブラウザ内の枠に縛られない別の手段 として dir コマンドの結果を文字列処理する方法を考えました。

コマンドプロンプトで dir > entries.txt の結果をファイルに出力後、
Ajaxで読んで、Array に格納する。

Shift_JIS を utf-8 にするため、Fetch API で Shift_JIS の HTML をDOM として読み込むの手法を採用しています。

javascript
1const url = "./pictures/entries.txt";
2
3// Shift_JIS to UTF8 on browser
4const parseBlob = blob => {
5  return new Promise(resolve => {
6    let reader = new FileReader();
7    reader.onload = () => { resolve(reader.result) };
8    reader.readAsText(blob, 'Shift_JIS');
9  });
10};
11
12fetch( url )
13  .then( res => res.blob() )
14  .then( parseBlob )
15  .then( txt => {
16    let ary = txt.split(/\r?\n/).reduce( (acc,line) => {
17      let m;
18      if( m = line.match(/^\d{4}/\d{2}/\d{2}\s+\d{2}\:\d{2}\s+[\d,]+\s(.+)$/) ){
19        acc.push(m[1]);
20      };
21      return acc;
22    }, []);
23
24    console.log( ary ); // ファイル名取得（ entries.txt 含む ）
25
26  });
27