hail2u.net

Linksをサムネイル化した

Posted at 2006-09-17T00:29:00+09:00 in Web Design

Linksをサムネイル化してみた。各サムネイルはSimpleAPIのウェブサイトサムネイル作成API頼みなのでNOW PRINTINGばかりだったりするけど、それはそのうち解消されるはず。無駄にポップアップとかさせてみたり。

Simple APIのウェブサイトサムネイル作成APIが返す画像は決まったサイズなので、ポップアップはかなり前に考えたposition: relative;を利用したテクニックでやった。CSSのコードは、

div#contents div.story ul.thumbnail {
  margin: 1em 0;
  width: 100%;
  line-height: 1;
  list-style-type: none;
}

div#contents div.story ul.thumbnail li {
  margin: 0 1em 1em 0;
  float: left;
  width: 64px;
  height: 64px;
  overflow: hidden;
}

div#contents div.story ul.thumbnail > li {
  overflow: visible;
}

div#contents div.story ul.thumbnail li a img {
  z-index: 1;
  width: 64px;
  height: 64px;
}

div#contents div.story ul.thumbnail li a:hover {
  width: 128px;
  height: 128px;
}

div#contents div.story ul.thumbnail li a:hover img {
  position: relative;
  top: -32px;
  left: -32px;
  z-index: 2;
  width: 128px;
  height: 128px;
}

という感じ。リスト項目をfloatで並べたりしているのと絡んだコードになっているのでややこしく見えるけど、強調したところがポイントになるところで、要は:hoverで画像のサイズを元に戻しposition: relative;でずらして表示させるというだけ。widthプロパティ/heightプロパティ/topプロパティ/leftプロパティの値は画像の縦横サイズに依存するため、あらかじめ画像サイズがわかっていないとこのテクニックは利用できない。ものすごく単純化させたサンプル・ページも参照。Internet Explorer 6とかでもちゃんと動く。もちろんFirefox 1.5やOpera 9でも。

最初はlivedoor ReaderからOPML形式のフィード購読リストを引っ張ってくることにより、完全に動的に更新させようかなと思っていたのだけど、そこまですることもないかなーと思い、定期的にJSON形式のデータを生成してやることにした。JSON形式のデータの構造は、各サイトごとに、

{
  "title":   "hail2u.net - Weblog",
  "htmlUrl": "http://hail2u.net/blog/",
  "xmlUrl":  "http://feeds.feedburner.com/hail2u/blog"
}

というOPML形式のフィード購読リストに似た形にしておいたけど特に意味は無い。多くのフィード・リーダーで惰性で利用されている(私見)OPML形式の代わりに、こういった再利用しやすい形態の購読リストをインポート/エクスポートする仕組みが流行っても良さそうなもんだけど。

追記@2006/09/21

バックエンドがGeckoなMozShotに変更した。エフェクトをはずしたものにしたせいか、多少キレイになった気がする。

追記@2006/09/21

キレイになったけど重すぎなのでSimpleAPIのウェブサイトサムネイル作成APIに戻した。