質問: new Folder ("/data/"); //エラーメッセージ: Uncaught ReferenceError: Folder is not defined ``` * PHPのglob :調べたところローカルだけでもPHPが動かせるとありましたが、自力では動かせませんでした。 * 画像ファイルを連番(001.jpg, 002.png, ... xxx.gif)にリネームしてアクセスしやすくする :自力だとこれが最も現実的だと思いましたが、大変なのでしたくないです。 ### 補足情報 * 完全に自分用なので、どこかのwebサーバに公開する予定はありません。 また、ローカルで完結するので特に制限はないです。 * Javascriptで動的にを生成することにはなんとか成功しました。 * HTML/CSS/JSで作ろうと思っている理由は、学習が簡単そうだからです。 ですが言語の仕様で無理そうな場合は、他の方法も教えていただきたいです。
回答: 自分用のアプリケーションでローカルでのみ実行するという前提で回答します。 JavaScriptのFile APIを利用すると、Chromeで以下のようなコードを書くとディレクトリ内の画像ファイルを取得して表示できます。 ただ、ディレクトリを選択する際にダイアログがでるので、そこで許可を出す必要があります。 !screenshot 個人用のアプリケーションでセキュリティリスクがないのであれば、アップロードしても問題ないと思います。 (WEBで公開する場合はセキュリティリスクがあるので、その点を考慮した実装にする必要があります) ``` ``` ``` document.getElementById("file").addEventListener("change", ev => { for (let i = 0; i < ev.target.files.length; i++) { let file = ev.target.files[i]; // ディレクトリの相対パス let relativePath = file.webkitRelativePath; let fileReader = new FileReader(); fileReader.onload = (function(theFile) { return function(e) { // Render thumbnail. var figure = document.createElement("figure"); figure.innerHTML = ` ${theFile.name} `; document.getElementById("list").insertBefore(figure, null); }; })(file); fileReader.readAsDataURL(file); } }); ``` こちらにサンプルコードを上げましたので、よろしければ参考にしてください。 サンプルコード:CodePen 参考リンク * Reading local files in JavaScript - HTML5 Rocks * [Javascript] input要素(file)で、ディレクトリを丸ごと選択する - YoheiM .NET