スピードダイアル - 素人がプログラミングを勉強していたブログ

Quickchoice - a Speed Dial clone for css transform supporting browsersを見て、iframeのページの幅に合わせてサムネイルをフィットさせられるといいと思い、書いた。

Firefoxのnightlyだと上のようになる。
<html>
  <head>
    <title>SpeedDial</title>
    <style>
      body {
        overflow: hidden;
      }
      #speeddial {
        list-style: none;
        width: 80%;
        margin: auto;
      }
      #speeddial  > li {
        float: left;
        padding: 20px;
        margin: 10px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        background: #f2f2f2;
        width: 220px;
        height: 100px;
        color: gray;
      }
      #speeddial > li > button.close {
        float: right;
        border: none;
      }
      #speeddial > li > button.page { 
        padding: 0px;
        width: 200px;
        height: 100px;
        padding: 0;
        margin: 0;
        background: white;
        border: 1px solid lightgray;
        font-size: 2em;
        color: gray;
      }
      #speeddial > li > span {
        float: left;
      }
      #speeddial > li > button.page:hover {
        border-color: gray;
      }
      #speeddial > li > button.page > iframe {
        -moz-transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
        border: none;
        margin: 0px;
        padding: 0px;
        position: absolute;
        visibility: hidden;
        height: 1000px;
        width: 1000px;
      }
      #speeddial > li:nth-of-type(3n+1) {
        clear: both;
      }
    </style>
    <script defer="defer">
var speeddial = document.getElementById('speeddial');
var items = speeddial.children;
Array.prototype.forEach.call(items, function (li, i) {
  var button = document.createElement('button');
  button.className = 'page';
  var url = (sessionStorage.getItem(i) || {value: null}).value;
  if (url) {
    li.appendChild(document.createElement('span')).appendChild(document.createTextNode(i + 1));
    var iframe = document.createElement('iframe');
    iframe.src = url;
    iframe.addEventListener('load', function (e) {
      var scale = 1 / (iframe.scrollWidth / 200);
      iframe.style.MozTransform = 'scale(' + scale + ')';
      iframe.style.webkitTransform = 'scale(' + scale + ')';
      iframe.style.position = 'static';
      iframe.style.visibility = 'visible';
    }, false);
    button.appendChild(iframe);
    var close = li.appendChild(document.createElement('button'));
    close.className = 'close';
    close.appendChild(document.createElement('img')).src = 'http://gyazo.com/1f79888f50f58655e0cc24dca1359263.png';
    close.addEventListener('click', function (e) {
      sessionStorage.removeItem(i);
      location.reload();
    }, false);
  } else {
    button.appendChild(document.createTextNode(i + 1));
  }
  button.addEventListener('click', function (e) {
    var val = sessionStorage.getItem(i);
    if (val) {
      location.assign(sessionStorage.getItem(i).value);
    } else {
      sessionStorage.setItem(i, prompt('URL'));
      location.reload();
    }
  }, false);
  li.appendChild(button);
});
    </script>
  </head>
  <body>
    <ol id="speeddial">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </body>
</html>