概要

hogeディレクトリに複数のpngファイルが有り、いくつファイルがあるか動的に取得したい

環境

webpack 4.41.2
react.js 16.11.0

webpackでcompileし、index.html, index.css, index.jsができる
(フロントのみ)

調べてみたこと

https://stackoverflow.com/questions/1266004/count-number-of-files-in-a-folder-through-javascript
https://stackoverflow.com/questions/33775113/count-the-number-of-files-in-a-directory-using-javascript-nodejs

ここらへんを見ると、「フロントサイドだけでは構造的に無理、サーバーサイドで取得してajaxで取得する必要がある」という回答。

しかし今回のアプリケーションではフロントサイドのみ使用する。
この場合、やはりjavascriptのみでは不可能なのでしょうか？

自分の考えている解決方法

(javascriptだけで不可能な場合)
実装方法としては hoge directory内のpngファイルを手動で記入し(jsonとして)、そこから取得する。を思いついていますが、もしもっと良い方法があれば記載していいただきたいです。

よろしくお願いいたします。

m.ts10806

2020/02/01 21:11

思いついたのは良いとして、試してないのでしょうか。

m.ts10806

2020/02/01 21:11

いずれにしても「hogeディレクトリ」が「どこにあるか」という前提条件も必要に思います。

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

回答2件

サーバーにディレクトリにあるファイル一覧を返すような仕組みがない限り不可能です。

フロントエンドはブラウザー、つまり、クライアント側で動作しています。クライアントはサーバーのディレクトリへ直接アクセスする手段はありませんので、ディレクトリの中身を確認することはできません。自分のパソコン上でどんなに頑張っても、teratailのサーバーのあるディレクトリにあるファイル一覧を取得できませんよね？それと同じです。だから、サーバー側がディレクトリの中身の一覧を返す何らかの仕組みが必要になります。

サーバー側で一覧を返す手段はいくつかあります。

指定のディレクトリの中身一覧を表示するだけのPHP/CGIプログラムを作って置く。
スタティックなファイルの表示と指定のディレクトリの中身一覧を表示するだけのWeb ServerなWebアプリケーシを作って、リバースプロキシでアクセスするようにする。
WebDAV機能を有効にする。
autoindex機能を有効にする。

最初の1.と2.は(簡単な)プログラミングが必要になります。また、3.のWebDAVは設定次第でファイルの置き換えさえ許してしまうので、セキュリティに詳しくない人が安易に設定すべきではありません。ですので、最後4.のautoindex機能だけ説明します。

autoindex機能はApach HTTP Serverにも、nginxにも、IIS(設定名としてはDirectoryBrowser)にも備わっている機能です。

これらを有効にして、"index.html"と言ったインデックスファイルを置いていないディレクトリにアクセスしてみてください。ディレクトリの中身の一覧が取得できるはずです。あとは、これをAjaxで取得し、加工すれば良いとなります。

ただ、この機能はもともとブラウザから見ることを想定しているため、通常はHTML内にファイルの一覧が表示されることになります。これではパースするのが面倒です。JSONで取得できるようにできないかという話ですが、nginxであれば可能です。autoindex_format json;とJSONを指定してください。Apache HTTP ServerとIISについては機能が見つけられませんでした。nginx以外を使っている場合は、次に簡単なPHP/CGI等にした方がいいかもしれません。

投稿2020/02/01 22:38