リンクを自動生成する方法

どの言語で実現できるか不明ゆえに質問させていただくため、
カテゴリが違うかもしれませんが、どうかご容赦を・・・


次のようなディレクトリ構造を持ったWebサイトを作りたいと考えています。

================================================
[root] top.html
　｜
　｜――――――――――
　｜　　　　　　　　　　　　　　｜
[folder1]　　　　　　　　　　[folder2]
　｜　　　　　　　　　　　　　　｜
[A.html　B.html　C.html]　[A.html　B.html　C.html]
================================================

つまり、同じ名前のHTMLファイルを格納したフォルダが複数個存在している状態です。

※上の図ではA.html、B.html、C.htmlの３つだが、
　実際はA.html～EZ.htmlのように100個以上のファイルを格納している。

※上の図ではフォルダがfolder1とfolder2の２つだが、
　実際はfolder1～folder30のように30個以上のフォルダが並列に存在している。


このような構造で、top.htmlに全ファイルへのリンクを作りたいと考えています。
top.htmlでどのように動かしたいかというと・・・

（top.htmlの簡易デザイン↓）
================================================
[フォルダを選択できるリストボックス]
　・Aへのリンク
　・Bへのリンク
　・Cへのリンク
================================================

[フォルダを選択できるリストボックス]でフォルダを選択すると、
Aへのリンク、Bへのリンク、Cへのリンク、
それぞれのリンク先が、
選択されたフォルダのA.html、B.html、C.html、
になって欲しいのです。

このような動かし方は可能でしょうか？
可能ならば、どのようにすれば実現できるでしょうか。
アドバイスいただければ幸いです。

No.1 ベストアンサー 回答者： bvltiggeari 回答日時： 2012/11/29 01:48

JavaScriptを使ってみてはいかがでしょう？

selectのonchangeでフォルダを保存させ、
リンクのhrefでJavaScriptを起動させ、
そのfunctionはフォルダとhtmlファイル名を
合体させる…みたいな。

何か上手く説明できてないので、サンプルソースです。

↓↓↓JavaScript↓↓↓
var folderData = "";
function selectChange(linkValue) {
folderData = linkValue.value;
}
function linkJump(hrefValue) {
location.href = folderData + "/" + hrefValue;
}

↓↓↓html↓↓↓
<select onchange="selectChange(this)">
<option value="A">Aフォルダ</option>
<option value="B">Bフォルダ</option>
<option value="C">Cフォルダ</option>
</select>
<a href="javascript:linkJump('A.html')">・Aへのリンク</a>
<a href="javascript:linkJump('B.html')">・Bへのリンク</a>
<a href="javascript:linkJump('C.html')">・Cへのリンク</a>

この回答へのお礼

お礼が遅くなりました。

今、教えていただいた方法で試してみました。
これなら期待通りのページが作れそうです。

サンプルソースまで載せていただき、助かりました。
ご教授本当にありがとうございます＾＾

お礼日時：2012/11/30 21:59

No.2 回答者： ORUKA1951 回答日時： 2012/12/01 17:09

それは、サイトマップで行うべきです。

＞実際はA.html～EZ.htmlのように100個以上のファイルを格納している。
大きなサイトの場合は、そんなことしません。
さらに分類して、何階層にも分けるのが通常です。そうしないと大変です。

/　　ルート
|-- index.html
|-- sitemap.html
|-- sitemap.txt 検索エンジン用のサイトマップ--XMLです。
|-- SSI/
|　　|-- breadcrumb.txt
|　　|-- grobalNavigation.txt
|-- images/
|-- cgi-bin/
|
|-- category1/
|　　　|-- index.html
|　　　|-- images/
|　　　|-- SSI/
|　　　|　　　|-- navigation.txt　※後で説明
|　　　|-- sub1/
|　　　|　　　|-- index.html
|　　　|　　　|-- images/
|　　　|　　　|-- SSI/
|　　　|　　　|　　　|-- navigation.txt
|　　　|　　　|-- sub1/
|　　　|　　　|-- sub2/
|　　　|-- sub2/
|　　　 　　　|-- index.html★
|　　　 　　　|-- images/
|　　　 　　　|-- SSI/
|　　　 　　　|　　　|-- navigation.txt
|　　　 　　　|-- sub1/
|　　　 　　　 　　　|-- index.html
|　　　 　　　 　　　|-- images
|　　　 　　　 　　　|-- SSI/
|　　　 　　　 　　　　　　|-- navigation.txt
|
|-- category2/
|　　　|-- index.html
|　　　|-- images/
|　　　|-- SSI/
|　　　|　　　|-- navigation.txt
|　　　|-- sub1/
|　　　|　　　|-- index.html
|　　　|　　　|-- images/
|　　　|　　　|-- SSI/
|　　　|　　　|　　　|-- navigation.txt
|　　　 　　　|-- sub2sub1
|　　　 　　　 　　　|-- index.html
|　　　 　　　 　　　|-- images
|　　　 　　　 　　　|-- SSI/
|　　　 　　　　　　　 　　|-- navigation.txt

のように・・・、あなたのMy Documentの中と同じです。ひとつのフォルダーに何十個もファイルがあったら見つけ出すのが大変です。

　その上で、各ページには上の階層へのリンクと、下の階層は多くても２階層程度のリンクしか書きません。
★のファイルには
<p class="breadcrumb"><!-- パンくずリスト(breadcrumb list) -->
　<a href="/">TOP</a></li> | <a href="/category1/">カテゴリートップ</a> | <a href="/category1/sub2/">カテゴリートップ</a> | sub2
</p>

そのページに関連ぶかいリンク
<div class="nav" id="navigation">
　<ol>
　　<li><a href="/">TOP</a></li>
　　<li><a href="/category1/">カテゴリートップ</a></li>
　　<li><a href="/category1/sub2/">カテゴリートップ</a>
　　　<ol>
　　　　<li><a href="/category1/sub1/"></a>
　　　　　<ol>
　　　　　　<li><a href="/category1/sub1/sub1/">sub1</a></li>
　　　　　　<li><a href="/category1/sub1/sub1/">sub2</a></li>
　　　　　</ol>
　　　　</li>
　　　　<li><a href="/category1/sub1/"></a>
　　　　　<ol>
　　　　　　<li><a href="/category1/sub1/sub1/">sub1</a></li>
　　　　　　<li><a href="/category1/sub1/sub1/">sub2</a></li>
　　　　　</ol>
　　　　</li>
・・・【中略】・・・
　　　</ol>
　　</li>
　</ol>
</div>

そして、全体の
<div class="nav" id="grobalNavigation">
　<ol>
　　<li><a href="/">TOP</a></li>
　　<li><a href="/category1/">カテゴリートップ</a>
　　　<ol>
　　　　<li><a href="/category1/sub1/"></a></li>
　　　　<li><a href="/category1/sub1/"></a></li>
　　</li>
　　<li><a href="/category2/">カテゴリートップ</a>
　　　<ol>
　　　　<li><a href="/category2/sub1/"></a></li>
　　　　<li><a href="/category2/sub1/"></a></li>
　　　</ol>
　　</li>
　　<li><a href="/category3/">カテゴリートップ</a>
　　　<ol>
　　　　<li><a href="/category3/sub1/"></a></li>
　　　　<li><a href="/category3/sub1/"></a></li>
　　　</ol>
　　</li>
　</ol>
</div>

とか・・・が一般的--使いやすいでしょう。
<body>
　<div class="header">
　　<p class="breadcrumb"></p>
　</div>
　<div class="section">
　　本文
　</div>
　<div class="footer">
　　<div class="nav" id="navigation"></div>
　　<div class="nav" id="grobalNavigation"></div>
　</div>
</body>

とすることが多いです。HTML5の場合は、下記のような構造にしています。
<body>
　<header>
　　<p class="breadcrumb"></p>
　</header>
　<section>
　　本文
　</section>
　<footer>
　　<nav id="navigation"></nav>
　　<nav id="grobalNavigation"></nav>
　</footer>
</body>

＞このような動かし方は可能でしょうか？
　HTMLには、きちんと文書構造だけを記述すれば、あとは好きなように、そのページに最適な方法でデザインすればよいでしょう。

　リンク自体を動的に作成するのはどのプログラムでも可能ですが、必ずサーバーサイドで動作させるか、ローカルでPerlなどを使って事前に作成しておくことになりますが、その場合にそれぞれのHTMLに正しくページタイトル<title></title>が記述されていないとならないことは理解できます。
　誤動作や製作中のページの処理、隠したいページの処理を考えると、自動作成ではなく、それぞれのカテゴリーごとに事前に作っておくき、includeで埋め込むことをお勧めします。

この回答へのお礼

丁寧が回答ありがとうございます（＠＠
一度読んだだけでは理解できない部分もあったので、
これから検索しつつ探っていこうと思います。

より効率の良い方法を提案し、詳しいコードまで丁寧に教えてくださって大変ありがたいです＾＾
調べて自身のスキルアップを図ります。

お礼日時：2012/12/22 13:23