ディレクトリ内の他のファイル名を取得して動的に追加したい

Question

前提

PHPを使えない、CMSも使えない案件で、HTML,CSS,JSのみでウェブサイトを構築しています。

ブログ記事一つ一つにhtmlのページがあるのではなく、ブログページ１ページにリストタグで記事がずらりと並んでいる状態です。（一つの記事が数行しかないため。）

最初はpost.htmlというファイルを作り、そこにliタグを並べ、ブログページのulタグの中にXMLHttpRequestでinnerHTMLを埋め込む。という形にしていました。（これは、クライアントが記事更新をしやすくするために、記事部分のみ切り分けた方がいいと思ったからです。）

blog.html //ブログのトップページ
post.html //内容をblog.htmlに出力

また、selectタグを記事上部に追加して、optionで年を選べるようにしました。liタグの中にtimeタグで年月日を記述しているので、年を抜き取ってliタグにそれぞれの年のクラスをつけ、その年をjsで取得し配列にし、optionに追加。そしてselectのプルダウンで選んだ年以外はdisplay:none;になり、選んだ年のみ表示されるようにしていました。

しかし、記事が増えた際に全ての記事が一つのファイルにあるのはデータも大きくなるしあまり良くないですよね...。（画像を入れる記事もあるので...。）

実現したいこと

そこで、/post/というディレクトリに「2020.html」「2021.html」と年毎に分けたファイルを用意し、選んだ年を出力するという方式に変えました。この出力自体は問題がないのですが、selectタグにoptionを追加するというところで躓きました。

blog.html //ブログのトップページ
post
 L 2019.html 
 L 2020.html
 L 2021.html

具体的な実現したいこととしてはディレクトリの/post/にあるhtmlファイルのタイトルを取得し、それぞれoptionタグに追加することです。optionタグを手打ちではなく、ファイル名から動的に取得して入れるということがしたいです。（新しい年になった場合に、記事更新（ファイルを追加）をするだけでoptionに新しい年がが追加されている状態）

可能な限り調べてみましたが、私のリサーチ力では回答にたどり着けなかったので質問をさせていただきました。言語はHTML,CSS,JSのみ使用可能です。可能であれば方法を、不可能であれば不可能または代替手段をお教えいただければ幸いです。

下記は前提段階での動作しているソースコードです。（不要な部分は省いています）

前提段階のソースコード（動作しているコードです。）

【blog.html】

<select name="year" class="js-select">
　　　　　　　　　　<option value="latest">年を選択</option>
</select>
<ul id="test"></ul>

【post.html】

<li>
    <time>2020/03/37</time>
    <h2>タイトル</h2>
    <p>本文</p>
</li>

const $select = document.querySelector('.js-select');
    const v = $select.options[$select.selectedIndex].value;
    const x = new XMLHttpRequest();
    x.open('GET', '/post.html');// post.htmlファイルから読み取り
    x.responseType = 'document';
    x.send();
    x.onreadystatechange = () => {
        if(x.readyState === 4 && x.status === 200) {
            // 記事部分の読み込み
            document.querySelector('#test').innerHTML = x.response.documentElement.innerHTML;

            // 年ごとのクラスを付与
            const $li = document.querySelector('#test').querySelectorAll('li');
            $li.forEach( e => e.classList.add(e.querySelector('time').innerText.slice(0, 4)));
            
            // selectに年を追加
            const yearArray = Array.from(new Set(Array.prototype.slice.call(document.querySelectorAll('time')).map( e => e.innerText.slice(0, 4))));
            let y = 0;
            while(y < yearArray.length){
                const o = document.createElement('option');
                o.text = yearArray[y];
                o.value = yearArray[y];
                $select.appendChild(o);
                y++;
            }
            // selectで選択したものだけ出力
            $select.addEventListener('change', () => {
                const v = $select.options[$select.selectedIndex].value;
                $li.forEach( e => {
                    if(e.classList.contains(v) || v === 'none'){
                        e.style.display = 'block';
                    } else {
                        e.style.display = 'none';
                    }
                });
            });
        }
    };

以上、お力添えよろしくお願いいたします。

Answer 1

クライアントのみでいちおう実現可能です。記事の画像などはロード不要になるので、全記事が1ファイルに入るよりトラフィックは減るかもしれません。

例:
一番古い記事の年を例えば let y = 2018; として、/post/${y}.html を XHR で取得してみる。status が 200 なら <option> に y をたして、++y してループ。status が 200 以外ならループ終了。

もちろん効率が良いとは言えないので、こういうのはサーバサイドで処理するのが普通です。

Comments

[zuny]

ご回答ありがとうございます。

教えていただいた例を参考にして、optionの動的追加が実現できました...！！（コンソールログのエラーメッセージで最後のループの際のhtmlの404のエラーメッセージが出てしまうのはどうしようもないですよね...。）

私の力量的にも環境的にも、今回はこれしか方法がないと思うので、この方法で行きたいと思います。大変参考になる回答を迅速にしていただきありがとうございました！

Answer 2

サーバーサイドでプログラムを動かせない場合は、無理と思った方が良いですが、
サーバー側の環境と、あなたのセキュリティー方針によっては、やってやれないことは無いです。

ディレクトリに、index.htmlやindex.php等が無い場合に、ディレクトリ内のファイル一覧が見える様に設定できます。例えば、こんなページです Index of /pub。

XMLHttpRequestでそのディレクトリにアクセスすれば必要な情報は得られるので、あとは文字列処理だけです。

Apacheなら.htaccessにOptions +Indexesです。
普通は、ファイル一覧を公開することはセキュリティー的な意味で避けるので、禁止してあるはずですが、公開して良いのならこの方法で出来ます。なお、サーバーの設定で、Options +Indexes自体が禁止されているかも知れません。

Comments

[otn]

まあ、「JavaScriptでサーバーのファイル一覧を見たい」＝「JavaScriptを解析した人にはサーバーのファイル一覧が見えちゃってもかまわない」なので、あなたのポリシー的には問題なしですかね。

[zuny]

ご回答ありがとうございます。なぜJSからアクセスができないのか、理由がよくわかりました。不勉強で申し訳有りません。

Answer 3

サーバサイドに仕掛けをしない限り不可能です。「ファイルリスト」を取得する手段そのものが存在しません。

Comments

[zuny]

やはりJSではできないのですね。ご回答ありがとうございました！