4uの画像を延々と表示するMUGEN 4uを作ってみた


id:zyxwvが、STRAIGHTLINE™の画像を溜め込んで、それを延々と表示するJavascriptを書いてました。変態ですね。

それを内輪だけで使っているのはもったいないので、外部に公開可能な形に書き換えてみました。

SafariかChromeなどのWebKit系のブラウザで開いてください。iPhone/iPod touchでも表示できます。

制限

  • 画像は20枚しか表示されません
  • ロードは結構遅いです。

ソースコード

#!/usr/bin/env ruby
require 'uri'
require 'open-uri'
require 'cgi'

def fetch(n)
  open("http://4u.straightline.jp/?page=%d" % n) do|io|
    URI.extract(io.read).select{|url|
      url =~ %r!http://static.straightline.jp/html/found/static/upload/l/.*\.jpg$!
    }
  end
end

MAX = 3575
cgi = CGI.new
cgi.out{
  urls = fetch(rand(MAX)).map{|url|
    %("#{url}")
  }.join(",")

  "var fileList = [#{urls}]\n"
}

<html>
  <head>
    <title>MUGEN 4U(Limited Edition)</title>
    <script type="text/javascript" src="./4u.cgi"></script>
    <style type="text/css" media="screen">
img.pic {
  position: absolute;
  border: 5px solid white;

  opacity: 0;
  -webkit-transform: rotate(180deg) scale(2);

  -webkit-transition-property: opacity, -webkit-transform;
  -webkit-transition-duration: 3s, 3s;
}
    </style>

    <script type="text/javascript">
function init(){
   var i = 0;
   var numOfPics = fileList.length;
   const numOfvisiblePics = 50;
   var pics = [];

   function show(){
      var pic = document.createElement("img");
      pic.className = "pic";
      pic.src = fileList[i%numOfPics];
      pic.setAttribute("name", "pic"+i);
      pic.style.top = Math.random() * (window.innerHeight - 400);
      pic.style.left = Math.random() * (window.innerWidth - 400);
      document.body.appendChild(pic);
      pics[pics.length] = pic;
      i += 1;
      if (i > numOfvisiblePics) {
         document.body.removeChild(pics[i-numOfvisiblePics]);
         pics[i-numOfvisiblePics] = undefined;
      }

      setTimeout(function(){
         pic.style.opacity = 1;
         pic.style.webkitTransform =
            'rotate('+(Math.random()*40-20)+'deg)'+
            'scale(1)';
      },0);
   }

   show();
   setInterval(show, 4000);
}
    </script>
  </head>
  <body onload="init()" bgcolor="black" height="100%" width="100%">
  </body>
</html>