javascriptで、何枚かのバナー画像をランダムに表示するようなサンプルを探しています。

xmlファイルを読んで、画像のパスとリンク先URLを取得でして、ランダムで画像を表示というようなものを探しています。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/11/20 11:21:42
  • 終了:2012/11/27 11:25:03

ベストアンサー

id:australiagc No.1

australiagc回答回数467ベストアンサー獲得回数902012/11/20 13:31:17

jQuery の parseXML()メソッド を使って XML をパースし、データを一旦arrayに保存。後は、array 内の Math.floor(Math.random()*array.length) のインデックスにある値を呼び出してみるのはどうでしょう?

あえてツッコむとすれば、javascript を使っているのに何故 JSON を使わず XML を使うのかというところですね。元データがどうしても XML でなくてはいけないのであれば、array ではなく JSON へ変換してから同様の処理を行うというのもありかと。(jQuery XML to JSON Pluginを使って、要素を作る
第三章 データを解析し表示しよう:JSONのデータを表示する

他1件のコメントを見る
id:koonii26

度重なるコメントすいません。なんとなく理解できてきました。自分のほうでテストしてみます。

2012/11/20 18:27:17
id:australiagc

大丈夫そうですか?
ぶっちゃけ、「jQuery XML to JSON Pluginを使って、要素を作る」にある3つめの四角の中の情報だけあれば十分です。要訳すると、
1)$.get('sample.xml', function(xml){}); でXMLファイルをリクエストする。
2)var json = $.xml2json(xml); で、取得したXMLをJSONへ変換。
3)後は、url = json.banners[Math.floor(Math.random()*banners.length)].bannerUrl; みたいな感じで、ランダムでURLが取得できるはずです。

2012/11/21 11:38:07

その他の回答(0件)

id:australiagc No.1

australiagc回答回数467ベストアンサー獲得回数902012/11/20 13:31:17ここでベストアンサー

jQuery の parseXML()メソッド を使って XML をパースし、データを一旦arrayに保存。後は、array 内の Math.floor(Math.random()*array.length) のインデックスにある値を呼び出してみるのはどうでしょう?

あえてツッコむとすれば、javascript を使っているのに何故 JSON を使わず XML を使うのかというところですね。元データがどうしても XML でなくてはいけないのであれば、array ではなく JSON へ変換してから同様の処理を行うというのもありかと。(jQuery XML to JSON Pluginを使って、要素を作る
第三章 データを解析し表示しよう:JSONのデータを表示する

他1件のコメントを見る
id:koonii26

度重なるコメントすいません。なんとなく理解できてきました。自分のほうでテストしてみます。

2012/11/20 18:27:17
id:australiagc

大丈夫そうですか?
ぶっちゃけ、「jQuery XML to JSON Pluginを使って、要素を作る」にある3つめの四角の中の情報だけあれば十分です。要訳すると、
1)$.get('sample.xml', function(xml){}); でXMLファイルをリクエストする。
2)var json = $.xml2json(xml); で、取得したXMLをJSONへ変換。
3)後は、url = json.banners[Math.floor(Math.random()*banners.length)].bannerUrl; みたいな感じで、ランダムでURLが取得できるはずです。

2012/11/21 11:38:07
id:koonii26

頂いた案を試したのですが、
テストはOKでした。
3)がまだ理解できず、今調べております。

var params = location.href.split("?")[1];
params = params.split("&");
var ValId = "null";
for(var i = 0; i < params.length; i++) {
var tmp = params[i].split("=");
if(tmp[0] = "id"){
ValId = tmp[1];
}
}

$(function(){
$.get('sample.xml', function(xml){
var json = $.xml2json(xml);
var $bannerUrl=json.url[i].url;
var $link=json.link[i].link;
url = json.banners[Math.floor(Math.random()*banners.length)].bannerUrl;
s+="";
    $("#myfeed").append($(s));
}
  }
});
});
今現在、jsはこんな形です。

ローテーションバナーをしようと思っているのですが、なんか違う感じがしたのですが
自分としても説明不足でごめんなさい

誤って質問終了にしておりました。
もし、回答いただけるならお願いします。

  • id:australiagc
    ええと・・・、ちょっと「ロテーションバナー」の意味合いが分からなかったのですが。
    これは毎回ページがロードする際に異なるバナーが表示されると言うことでしょうか?
    それとも、難病かごとにバナーが入れ替わると言うことでしょうか?

    とりあえず貼り付けてあるスクリプトに関してですが、
    var $bannerUrl=json.url[i].url;
    var $link=json.link[i].link;
    そもそも i の値が定義されていませんのでこれはエラーになってしまうかと。
    http://www.tohoho-web.com/js/array.htm

    json.url[i].url とは、データの中の i+1 個目の url の url という値、という意味です。
    「第三章 データを解析し表示しよう:JSONのデータを表示する」を読んでみてください。
    ここに、data.item[i].itemCode という例があります。
    この i が例えば 1 だった時、この値は2個目のitem、つまり味噌ラーメンのitemCode、「94」となります。

    あと、変数の名前に「$」はつけなくても(つけないほうが?)良いと思うのですが・・・。
    $.get()や$.xml2json()にある「$.」は、jquery.の略です。phpなどの$ではありません。
    http://ja.wikipedia.org/wiki/JQuery
    ちなみに、jQueryを利用するには、jQueryのライブラリが必要です。

    それから、var params = location.href.split("?")[1]; から始まる処理でクエリストリングから情報を取得しているようですが、サーバー側での処理は出来ないのでしょうか?これだと、URLを書き換えるだけで素人でもここにある"id"などの値を変更されてしまうので、変更されたくないパラメータなら他の方法を考えるべきかと。

    とまあ、かなりjsやjQueryの初歩内容になってしまうので、もし難しいようであればまずjQuery関連の参考書をご購入されることをおすすめします(^^;)
  • id:koonii26
    やりたい事としては、バナーが何秒間毎に切り替わる事をやりたいと思ってます
    jquery関連の本必要だなって思いました
    やりたいと思う事はあっても、ゴールに着くのが大変そうです (・.・;)
    明日にならないと、ファイル触れないので後日やります
    回答していただきありがとうございます
  • id:australiagc
    だと、今まで話してきた処理を、タイマーを使って定期的に呼ばないといけないですね。
    jQueryを使うならjQuery Timerですが、js既存のものにもsetInterval()というものがありますので。

    http://phpspot.org/blog/archives/2011/06/jqueryjquery_ti.html
    http://www.pori2.net/js/timer/1.html

    頑張って下さい。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません