みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

コードの簡素化

現在サイトを作成しておりFlashの音楽プレイヤーを設置してます。
プレイヤーは配布サイトからダウンロードしてきたものを使用しています。
クリックすると自作の音源が流れます。
Flashのソースは下記のようにしてます。

<object type="application/x-shockwave-flash" data="./sound/player.swf" id="audioplayer1" height="24" width="290">
<param name="movie" value="./sound/player.swf" />
<param name="FlashVars" value="playerID=1&amp;soundFile=./sound/sample.mp3" />
<param name="quality" value="high" />
<param name="menu" value="false" />
<param name="wmode" value="transparent" />
</object>

例えば1ページで20曲紹介する場合、上記のソースを20回貼り付けています。
違う部分は当然ファイル名のみです。
これを簡略化させたいのですが、何か方法はあるでしょうか?

以前こちらでJavascriptのソースを簡略化したかったので質問したら解決してもらえたので、この場合でも簡略化する方法があるのかな?と思いました。

ご存知の方いらっしゃいましたらご教示ください。
よろしくお願いします。

投稿日時 - 2011-09-26 22:11:35

QNo.7036458

困ってます

質問者が選んだベストアンサー

そちらのwebサイト構築環境がどの様な物か分らないので、当てずっぽうで2種類の方法を考えてみました。


◆ 1. ファイルが連番で,繰り返し回数も決まっている場合::
━ ココから ━━━━━━━━━━━━━━━━━━━━━━━━
<div id="my_loop"></div>

<script type="text/javascript"><!--
window.onload = function(){
/* HTML内に該当ID名が無ければJavaScriptを終了 */
if ( !document.getElementById('my_loop') ){
return;
}
else {
var myloop = document.getElementById('my_loop');
}
/* 繰り返し処理 */
var cnt = 20; //繰り返し回数を指定
var ary_myhtml = [];
for (var i=1; i<=cnt; i++) {
ary_myhtml.push('<img src="./sample-'+ i +'.jpg" />'); //配列に代入
}
/* 結果を書き出し */
myloop.innerHTML = ary_myhtml.join('');
};
//--></script>
━ ココまで ━━━━━━━━━━━━━━━━━━━━━━━━


◆ 2. ファイル名に依存せず,繰り返し回数も動的に変化::
━ ココから ━━━━━━━━━━━━━━━━━━━━━━━━
<div id="my_loop">
<!--rUXcbXd58vm52H.jpg-->
<!--8xnPgy6d4625be.jpg-->
<!--6JCyhR39ff2dec.jpg-->
<!--Haa3g429d9fae7.jpg-->
</div>

<script type="text/javascript"><!--
window.onload = function(){
/* HTML内に該当ID名が無ければJavaScriptを終了 */
if ( !document.getElementById('my_loop') ){
return;
}
else {
var myloop = document.getElementById('my_loop');
}
/* 配列を初期化 */
var ary_myloop = myloop.childNodes;
var cnt = ary_myloop.length;
var ary_mydata = [];
var ary_myhtml = [];
var n = 0;
/* コメント文の中身のみを抽出 */
for ( var i=0; i<cnt; i++ ) {
val_line = ary_myloop[i].nodeValue;
if ( val_line.length > 1 ) {
ary_mydata.push( val_line ); n++;
}
}
/* 繰り返し処理 */
for ( var i=0; i<n; i++ ) {
ary_myhtml.push('<img src="./'+ ary_mydata[i] +'" />'); //配列に代入
}
/* 結果を書き出し */
myloop.innerHTML = ary_myhtml.join('');
};
//--></script>
━ ココまで ━━━━━━━━━━━━━━━━━━━━━━━━


~以上の2パターンを応用すれば、大概の場合は大丈夫じゃないかと…?

ポイントとしては、事前にページ内の必要な箇所に、
<div id="my_loop">~</div>
~の形でID名を割り振って置く事です。

こうする事によって、その場所のみのHTMLの中身が書き換えられます。

尚、コード簡略化するために <img> タグで例文を書いています。必要に合わせて書き換えて使って下さい。

投稿日時 - 2011-09-27 18:30:07

お礼

お礼が遅くなり申し訳ありません。
なんとかできました。丁寧に教えて頂きありがとうございました。

投稿日時 - 2012-01-11 19:01:12

ANo.2

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

20回貼り付ける場合、例文のどこをどう書き換えるのかな??それが分らないと、答えようが無い。

投稿日時 - 2011-09-27 01:12:54

あなたにオススメの質問