javascript初心者です。

下記のページを元にランダム表示する画面をつくっているのですが、
一度表示したものを表示させない処理がうまくできません。
http://q.hatena.ne.jp/1328329662

どなたかご教授頂けると幸いです。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/02/09 14:10:51
  • 終了:2012/02/09 17:30:41

ベストアンサー

id:Cherenkov No.2

Cherenkov回答回数1503ベストアンサー獲得回数4932012/02/09 15:51:20

ポイント200pt

http://jsfiddle.net/cherenkov/EgvQk/1/

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>笑ったら罰ゲーム</title>
</head>
<body>
<script type='text/javascript'>
//javascript初心者です。 下記のページを元にランダム表示する画.. - 人力検索はてな
//http://q.hatena.ne.jp/1328764249

var photoList;
var f;

function getAlbum(res) {
  var entry = res.feed.entry;
  photoList = getPhotoList(entry);
  f = setPhoto();
  f();
}

function setPhoto() {
  var i = 0;
  var picasa = document.getElementById('picasa');
  return function() {
    if (i >= 5) {
      alert('5回を超えた');
      location.href = 'http://q.hatena.ne.jp/1328764249';
      return;
    }
    picasa.src = photoList[i++];
  };
}

function getPhotoList(entry) {
  var list = [];
  for (var i=0,n=entry.length; i<n; i++) {
    var e = entry[i];
	list.push(e.content.src);
  }
  list = list.shuffle();
  return list;
}

Array.prototype.shuffle = function() {
    var i = this.length;
    while(i){
        var j = Math.floor(Math.random()*i);
        var t = this[--i];
        this[i] = this[j];
        this[j] = t;
    }
    return this;
}
</script>
<p><img src="" id="picasa"></p>
<button type="button" onclick="f()">セーフ</button>
<button type="button"><a href="out.html">アウト</a></button>
</body>
<script src="https://picasaweb.google.com/data/feed/api/user/youjirou/albumid/5705134729235124241?alt=json-in-script&callback=getAlbum"></script>
</html>

参考
id:ypressjp

度々ありがとうございます。本当にありがたいです!
記述をしっかり読み込みつつ、参考URLまでご親切につけて頂いたので、
自分で記述できるよう勉強させて頂きます。重ね重ねお礼申し上げます。

2012/02/09 17:29:41

その他の回答(1件)

id:a-kuma3 No.1

a-kuma3回答回数4504ベストアンサー獲得回数18702012/02/09 14:39:43

ポイント150pt

数字をシャッフルした配列を先に作って、その順番で画像を表示するのが、一番簡単そうかなあ、と。

<script>
/* 配列の内容をランダムに並べ替える */
function shuffle(a) {
    var len = a.length
    for (i = 0 ; i < 1000 ; ++i) {
        var i1 = Math.floor(Math.random() * len);
        var i2 = Math.floor(Math.random() * len);
        if (i1 != i2) {
            var ii = a[i2];
            a[i2] = a[i1];
            a[i1] = ii;
        }
    }
    return a
}

function print_arr(a) {
    alert(a.join(", "))
}

function sample() {
    var N = 25;      // 例えば、25個
    var arr = []
    for (i = 0 ; i < N ; ++i) {
        arr[i] = i;
    }
    alert(arr.join(", "))    // 順番に並んでる

    arr = shuffle(arr);      // かき混ぜる

    alert(arr.join(", "))    // バラバラになってる

    for (i = 0 ; i < N ; ++i) {
        var index = arr[i];
        ※ index を使った処理    /* ランダムに実行されてるように見える */
    }
}

</script>
<button onclick="sample()">push</button>
id:ypressjp

丁寧に注釈付きで非常に助かります。勉強中なので、どこでなにが行われているかわかると大変ありがたいです。
親切にありがとうございました!

2012/02/09 17:20:27
id:Cherenkov No.2

Cherenkov回答回数1503ベストアンサー獲得回数4932012/02/09 15:51:20ここでベストアンサー

ポイント200pt

http://jsfiddle.net/cherenkov/EgvQk/1/

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>笑ったら罰ゲーム</title>
</head>
<body>
<script type='text/javascript'>
//javascript初心者です。 下記のページを元にランダム表示する画.. - 人力検索はてな
//http://q.hatena.ne.jp/1328764249

var photoList;
var f;

function getAlbum(res) {
  var entry = res.feed.entry;
  photoList = getPhotoList(entry);
  f = setPhoto();
  f();
}

function setPhoto() {
  var i = 0;
  var picasa = document.getElementById('picasa');
  return function() {
    if (i >= 5) {
      alert('5回を超えた');
      location.href = 'http://q.hatena.ne.jp/1328764249';
      return;
    }
    picasa.src = photoList[i++];
  };
}

function getPhotoList(entry) {
  var list = [];
  for (var i=0,n=entry.length; i<n; i++) {
    var e = entry[i];
	list.push(e.content.src);
  }
  list = list.shuffle();
  return list;
}

Array.prototype.shuffle = function() {
    var i = this.length;
    while(i){
        var j = Math.floor(Math.random()*i);
        var t = this[--i];
        this[i] = this[j];
        this[j] = t;
    }
    return this;
}
</script>
<p><img src="" id="picasa"></p>
<button type="button" onclick="f()">セーフ</button>
<button type="button"><a href="out.html">アウト</a></button>
</body>
<script src="https://picasaweb.google.com/data/feed/api/user/youjirou/albumid/5705134729235124241?alt=json-in-script&callback=getAlbum"></script>
</html>

参考
id:ypressjp

度々ありがとうございます。本当にありがたいです!
記述をしっかり読み込みつつ、参考URLまでご親切につけて頂いたので、
自分で記述できるよう勉強させて頂きます。重ね重ねお礼申し上げます。

2012/02/09 17:29:41
  • id:Cherenkov
    現在のロジックは画像を1枚表示する際に毎回APIを叩いていますが、
    1回でアルバムまるごと取得して、画像URLのリストをシャッフルしておき、ボタンを押すごとに入れ替えるようにしてみるのはどうでしょう。
    前回の私の回答を改造すれば近道かも。
  • id:ypressjp
    度々アドバイスありがとうございます!まさに、その流れを考えているのですが、一度アルバムの画像を落として配列をシャッフルするところをどう記述すればいいわからず再度質問してしまった次第です。
    お恥ずかしい限りです。

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

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

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

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