2009.01.05

Design

京の路、Flickr API を利用してデザインリニューアル!

ふと、以前読んだ「Flickr の JSON フィードで自作ブログパーツ | METAREAL」を思い出し、このブログのデザインを一新することにしました。

以前テンプレートの整理を行っていたので、メインの作業は30分ほどで終了。やはりこの辺りは、慣れもあってか Wordpress より MovableType の方が速くできますね。

新デザインのポイント

幅を 800px から 1000px に

以前はユーザビリティを考えて幅 800px を基準にしていたのですが、今回は思い切って 1000px にしました。小さいノートパソコンをお使いの方は若干見にくいかも知れませんが、やはり画面が広いとデザインの幅も広がってやりやすいです。

ユーザビリティも考慮して可変幅も検討中ですが、可変幅レイアウトをうまく扱える程 Web Design には精通してないので、ちょっと時間かかりそうです。

ヘッダー画像を Flickr の画像に置き換え

これは METAREAL の記事を参考にしていますが、Feed ではなく Photo Search API (要 API KEY) を利用しています。API を利用すると per_page をパラメータとして使えるので、Feed (常に 20 item) よりも使いやすいです。

取得している画像は、"kyoto" タグの付いている Public 画像です。hover で画像サイズが変更されるのは、RAILS PRESS*nov is just tweeting と同様です。なお画像は以下のように window.onload のタイミングで読み込んでいます。

function flickrPhotos(json) {
  var div = document.getElementById("flickr-photos");
  var photos = json.photos.photo;
  for (var i = 0; i < photos.length; i++) {
    var photo = photos[i];
    var a = document.createElement("a");
    var img = document.createElement("img");
    var src = "http://farm" + photo.farm + ".static.flickr.com/"
              + photo.server + "/" + photo.id + "_" + photo.secret + "_s.jpg";
    var href = "http://www.flickr.com/photos/"
              + photo.owner + "/" + photo.id;
    img.setAttribute("src", src);
    a.setAttribute("href", href);
    a.setAttribute("title", photo.title);
    a.setAttribute("target", "_blank");
    a.appendChild(img);
    div.appendChild(a);
  }
}
function include_js(url) {
  var script = document.createElement('script');
  script.src = url;
  script.setAttribute('type', 'text/javascript');
  document.getElementsByTagName('head')[0].appendChild( script );
}
window.onload = function() {
  include_js("http://api.flickr.com/services/rest/
    ?method=flickr.photos.search&api_key=03c38412b6e6d829d992e749fd444362
    &tags=kyoto&per_page=30&format=json&jsoncallback=flickrPhotos");
}

横幅を 900px に変更

やっぱり 1024x768 pixel 環境で確認すると、1000px は横のマージンに余裕が無さすぎたので、900px に変更しました。