変数を利用して読込先を動的に変えたい

質問

表示しているhtmlファイル名を取得して、動的に参照フォルダを変えるスクリプトを組んでいますが思うように動かず四苦八苦しております。

--------------------------------
/* --- URLからファイル名を取得しfileNameに格納、
　　　　　　　　　　見学報告データフォルダ名指定用として動的に変化させる --- */

var levelUrl = location.href.split("/");
var fileName = levelUrl[levelUrl.length-1].split(".");

// 表示用data.js読込
document.open();
document.write ('<script type="text/javascript" src="./topics/'+fileName[0]+'/data.js" charset="UTF-8"></script>');

// ページ生成シーケンス
document.write ('<h2>',commentList[0][0],'</h2>');　　　//アルバムタイトル生成
document.write ('<div>',commentList[0][1],'</div>'); 　　//冒頭コメント生成
for (var i = 1 ; i <= commentList[1][0] ; i++){
document.write ('<p class="album"><img src="./topics/',fileName[0],'/',i,'.png" /></p><p class="comment">',commentList[1][i],'</p>');
}
document.write ('<div><p class="thanks">ご来訪のお礼</p>',commentList[0][2],'</div>'); //締めのコメント生成
document.close();
-----------------------

この内容を外部ファイル(album.js)として保存し[例]20140623_2htmlページ内で読み込みデバッグツールで確認するとalbum.jsを読み込んだ後に./topics/2014062_2/data.jsも読み込み、中身も正常に確認できましたが、album.jsの後に読み込まれているためか変数を利用できず？真っ白なページとなりました。
そこで、冒頭からコメントの「ページ生成シーケンス」前までを20140623.htmlのalbum.js読み込み直前に直接記載したところ、何故か
document.write ('<script type="text/javascript" src="./topics/'+fileName[0]+'/data.js" charset="UTF-8"></script>');
の行がhtmlタグの書き出しとして機能せず、最後のシングルクォーテーション以降がページ内にテキストとして表示されました。
具体的な表示としてはページ内に
'); document.close();
が表示され、一つのwrite文として機能していないためdata.jsファイルの読込も出来ない状態になりました。

外部ファイルにするか直書きにするかで動作が変わるため何が原因か分からず困っています。
なお、当方が目的としているのは見学報告のページに表示するコメントを収めた配列をhtmlファイルのファイル名に応じて動的に変化させたい事ですので、私が書いたフォルダ名を動的に変化させる方法のミス部分の指摘でも、変数名を動的に変化させる方法（元々これを実現しようと思っていましたが能力不足で出来ませんでしたorz）具体的には20140623.htmlのファイル内では配列data20140623の中身を参照するといった方法でも構いません。

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

回答No.3

fujillin · ベストアンサー

ANo2です。

＞ご指摘通りhtmlファイルが複数出来ますが私のスキルの限界でhtml
＞のファイル名を決めるだけで中身に手を入れず、ファイル名と同じ
＞フォルダを用意し中に１～のpngファイルとdata.jsを放り込むだけ
＞でページ作成が可能になるように考えた結果であります
サーバサイドのプログラムは使わないにしても、ANo2でも書きましたように、HTMLファイルを複数作成しなくても良いのではないでしょうか？
　hogehoge.html?date=20140623
のようなアクセス方法が可能であれば、HTMLファイルは一つのものですむと思います。
ご質問でご提示の方法で「HTMLファイル名（URL）から参照データを作成する」部分を「URLのクエリ部から参照データを作成する」といったように変えればあとは同じで済むと思います。
後者はlocation.searchから取得することが可能ですし、データファイル名を作成した後はまったく同じ処理で済むと思います。

＞理想は、data.jsに該当する物は一つで配列名を可変出来れば・・・
＞もっとシンプルになるのですが
このイメージがどのようなものなのかよくわかりませんが、dataファイルが一つということは全情報が1ファイルになっているということでしょうか？
無理やりやるなら、
　window["fuga"]
で、グローバル変数fugaにアクセスができるので、できないことはないと思いますが、document.writeと同様お勧めはできません。（グローバル変数に限っています）

変数名を変えたいような場合の解決法の一つとして、変数を配列にしておいてそのindexを変えることで対応可能かと思います。（変数名は固定、indexが可変）
（ご提示の変数がすでに配列ですので、配列を配列化することになります）
それによって、indexを渡せばそれに応じたデータを取得することが可能になります。

でも、1ファイルにある全てのデータを一旦読み込んでから、その（ごく）一部のみを利用するのでは、無駄な通信を増やすことになりませんか？
その意味からも、データは別ファイルにしてあるほうが宜しそうな気がしますが…

＞ちなみに、メニューのスクロール機能のためにajax？は利用していますが～～
であれば、その関数を利用することでデータファイルの形式もかなり自由にできますね。
実行順序の制御も、コールバックを利用することで確実になります。

まぁ、このあたりはデータをどのように作成しているかやそのデータを他に利用しているかといったことも関係してきますので、ご質問の文章だけでは判断はできませんが…

お礼

再度のご助言ありがとうございます。

URLクエリ・・・恥ずかしながら知りませんでした。もちろん、あちこちのアドレスで見て知ってはいた物のそれが何なのか、CGIとか特殊な処理の物と思っていました。
今更ながら、調べたところfujillinさんの仰るとおりhtmlファイルは一つでURLクエリからデータファイルのアドレス生成が可能なようです。

> でも、1ファイルにある全てのデータを一旦読み込んでから、その（ごく）一部のみを利用するのでは、無駄な通信を増やすことになりませんか？
> その意味からも、データは別ファイルにしてあるほうが宜しそうな気がしますが…
データファイルの単独化は確かにテキストの文字データとはいえ今後のデータも次々追加されていきますのでデータの利用率は悪化していきますね・・・
上記のURLクエリを使用して個別化する方向で行きたいと思います。

> ＞ちなみに、メニューのスクロール機能のためにajax？は利用していますが～～
> であれば、その関数を利用することでデータファイルの形式もかなり自由にできますね。
> 実行順序の制御も、コールバックを利用することで確実になります。
導入してる物を確認したところjqueryのセットでした(^-^;

現在、取りあえずタグを分割することで動作させることに成功しました。
yambejpさんが紹介してくれたタグをクリエイトする関数を試したのですがそのまま貼り付けても動かず・・・
これから調べながら動くようにしていきたいと思います。

回答No.2

fujillin

質問の内容がよくわかってませんが・・・

ご提示の手順で読み込むことは可能ですが、通信環境（あるいはブラウザ）によって実行順が変わるようです。
例えば外部ファイルを
＜test.js＞
　alert("a");
として、

<script type="text/javascript">
document.write('<script type="text/javascript" src="test.js"><' + '/script>');
alert("b");
</script>
で、読み込むと、
　IE8・・・ b → a
　FX31・・・a → b
となります。
一旦ブラウザに制御を戻して、
<script type="text/javascript">
document.write('<script type="text/javascript" src="test.js"><', '/script>');
</script>
<script type="text/javascript">
alert("b");
</script>
とすれば、a → bとなるようです。

もっとも、ANo1様もおっしゃているようにdocument.writeを使用するのはあまり…という感じではありますが。

一方で、ご提示のようなことができたとしても、
　20140623.html
　20140624.html
　・・・・・・
のように、同じようなファイルが沢山できるのではないかと想像しますが、それって、わざわざ一般化して読み込むことにほとんど意味がないように感じます。（個別ファイルなのだから、個別で指定しても同じ）

HTMLは一つだけで、データファイルだけ更新（追加）すれば表示できるほうがまだましで、例えば
　hogehoge.html
に一本化して、ファイル名に当たる部分はクエリ部を利用して渡すようなことにすれば、一般化することの意味があると思いますけど。
データをどのように作成しているのか不明ですが、jsファイルにしなくともデータのみのファイルの方がわかりやすいのではないかと思います。他からも利用しやすいでしょうし。（csvとかjasonなど）
（読込がajax利用などになってしまいますが）

どうせなら、サーバサイドで処理してしまうのが一番簡単でもっともらしい方法かも。

お礼

回答ありがとうございます。
一度、スクリプトを閉じることで実行順を固定できるわけですね！

また、ご指摘その通りであります。ただ、サーバサイドはWEBサーバ環境が社内NASを利用した簡易な物
（最もコストが掛からない方法としてこうなりました）のため、プログラムを追加すれば可能ではあったはずですが、メインはNASとしてのファイルサーバなので負荷を上げるわけにもいかず、私のスキルも足りずで現段階では不可能な方法となります。
また、ご指摘通りhtmlファイルが複数出来ますが私のスキルの限界でhtmlのファイル名を決めるだけで中身に手を入れず、ファイル名と同じフォルダを用意し中に１～のpngファイルとdata.jsを放り込むだけでページ作成が可能になるように考えた結果であります(^-^;

理想は、data.jsに該当する物は一つで配列名を可変出来れば・・・もっとシンプルになるのですが(>_<)

ちなみに、メニューのスクロール機能のためにajax？は利用していますが活用方法なども分からず、基本的なプログラムが書ける程度のスキルです(^-^;

回答No.1

yambejp

ちょっと真剣に読んでないけど、ようはスクリプト内でスクリプトタグを書きたいということ？
「</script>」が現れた時点でスクリプトタグが簡潔しちゃうからでしょうね

昔からよくあるのはタグを分割しちゃうパターン
＞document.write ('<script type="text/javascript" src="./topics/'+fileName[0]+'/data.js" charset="UTF-8"></script>');

なら

document.write ('<script type="text/javascript" src="./topics/'+fileName[0]+'/data.js" charset="UTF-8"></'+'script>');

みたいな感じ？

ただプログラム的に美しくないので

window.onload=function(){
var n=document.createElement("script");
n.setAttribute("type","text/javascript");
n.setAttribute("src","./topics/"+fileName[0]+"/data.js");
n.setAttribute("charset","UTF-8");
document.getElementsByTagName("head")[0].appendChilid(n);
}

みたいな処理をかくケースもあります

お礼

なるほど！document.writeで出力したスクリプトの終了タグで終わっちゃっているわけですね・・・
確かに、無理矢理タグを分割しても美しくないですので紹介して頂いた方法を試してみたいと思います。

ありがとうございました