質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

3100閲覧

HTML5でルートディレクトリからサブディレクトリ以下の内容を表示したい

takatsu

総合スコア7

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/12/20 11:20

###前提
html5のFILE APIを用いてファイルを管理するシステムを作っています。

###該当のソースコード

html

1management 2<meta charset="utf-8"> 3<script src="../js/filesys.js"></script> 4 5<output id="result"></output> 6<form> 7 <textarea cols="20" rows="5" id="fsData"></textarea> 8</form> 9<script> 10 // ファイル一覧を取得しリストで出力する 11 viewFileList(); 12 function viewFileList() { 13 window.fsapi.getFiles("/", function(list) { 14 document.getElementById("result").innerHTML = "<ul>"; 15 var text = ""; 16 for (var i = 0; i < list.length; i++) { 17 if (list[i].isFile) { // ファイルの場合 18 text += '<li onclick=viewFile("' + list[i].name + '")>[File]'; 19 } else { // ディレクトリの場合 20 text += '<li>[Directory]'; 21 } 22 text += list[i].name + "</li>"; 23 } 24 document.getElementById("result").innerHTML = text + "</ul>"; 25 }); 26 } 27 // クリックされたらファイル内容を読み出す 28 function viewFile(filename) { 29 window.fsapi.readText(filename, function() { 30 document.getElementById("fsData").value = this.result; 31 }); 32 } 33</script>

javascript

1 //filesys.js 2window.fsapi = {}; 3window.fsapi.error = function(e){ console.log(e); } 4window.fsapi.readText = function(filename, successFunc){ 5 window.webkitRequestFileSystem( 6 TEMPORARY, / 7 0, // サイズ 8 function(fs){ // 成功時のコールバック関数 9 // ファイル処理 10 fs.root.getFile(filename, {}, 11 function(fileEntry){ 12 fileEntry.file(function(file){ 13 // ファイル読み出し 14 var reader = new FileReader(); 15 // 読み込み完了時の処理(文字をテキストエリアに出力) 16 reader.onload = successFunc; 17 reader.readAsText(file); 18 }); 19 }, 20 window.fsapi.error 21 ); 22 }, 23 window.fsapi.error 24 ); 25} 26// ディレクトリ一覧 27window.fsapi.getFiles = function(dirname, successFunc){ 28 window.webkitRequestFileSystem( 29 TEMPORARY, 30 0, // サイズ 31 function(fs){ // 成功時のコールバック関数 32 // 一覧を生成 33 fs.root.getDirectory(dirname, {}, 34 function(dirEntry){ 35 var dirReader = dirEntry.createReader(); 36 dirReader.readEntries(successFunc,window.fsapi.error); 37 }, 38 window.fsapi.error 39 ); 40 }, 41 window.fsapi.error 42 ); 43}

ルートディレクトリをクリックしてサブディレクトリ以下の内容を表示できるようにしたいです。

親ディレクトリの名前にバックスラッシュを付ければサブディレクトリは表示できると思うのですが、うまくいきません。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

WebはURLな世界なので、バックスラッシュではなくスラッシュが正しいかと思いますが、しかし、今回の場合はいずれにおいても不要かと思います。

js

1fs.root.getDirectory()

は、ルート直下のディレクトリを取得するというものですので、例えば

js

1root 2 ├── hoge 3 ├── fuga 4 └── piyo

といった構成だった場合、hoge, fuga, piyo それぞれのDirectoryEntryを取得するには

js

1fs.root.getDirectory('hoge',); 2fs.root.getDirectory('fuga',); 3fs.root.getDirectory('piyo',);

と書くべきなのではと思います。(未検証)

また、ルート直下のフォルダを列挙したい場合は、fs.rootがDirectoryEntry型と思いますので、

js

1var dirReader = fs.root.createReader(); 2dirReader.readEntries(function(entries) { 3 entries.forEach(function(dirEntry) { 4 console.log(dirEntry.name); // hoge 5 // fuga 6 // piyo 7 }); 8});

で行けるかと思います。(未検証)

投稿2017/12/20 19:24

turbgraphics200

総合スコア4267

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問