月別アーカイブ 2006年03月

サイトに関するちょっとしたお知らせ

この記事が属するカテゴリー
Misc

FeedBurner に移行

フィードを FeedBurner.jp で焼くことにした。すでに 1 月末にフィード作って登録してたんだけど、色々と忙しくなっちゃってそのまま放置してた。ちなみに URI は下記のようになってます。

Redirect して ステータスコード 301 返してるんで、アグリゲータの方で特に変更する必要はないと思う。とりあえず、RSS2.0 をベースに要約だけで無く、content で全文つっこんでみた。関係ないけど、公開する前から bloglines の subscribe 数が自分以外に 5 ユーザいたりして何かのけぞった。

サンプルページを集めたページを作成

今まで作ったサンプルページを集めたページを作ってみた。

過去に作ったサンプルページを確認したいって時に激しく面倒だったって事と、埋もれてしまった過去のものを掘り返すって事で、各サンプルページをカテゴライズして適当にまとめてみた。本当に適当だから、もうちっと整理してみるけど。

そうそう、古いサンプルページも全て appendix ディレクトリ下に移動しちゃったんで、サンプルページをブックマークしていた人はゴメンなさい。あとから気付いた :-P

2006-03-30T12:49:14+09:00 | コメント (0) | トラックバック (0) |はてなブックマーク

ゲームと娘

この記事が属するカテゴリー
Misc

3 歳半になる娘を今虜にしているのが、ディズニーキャラクターが数多く登場するゲーム「キングダムハーツ」。プレステ 2 の アナログスティックを小さな手で巧みに操作し、敵を倒してイベントをクリアしてんのを見ると、なんかスゲェなって思ったりして。彼女の場合はゲームをプレイするのが楽しいって言うよりは、どちらかと言うとディズニーの各キャラクターに会えるのを楽しんでいるっぽい。その楽しみ方は例えば FF12 でのガンビットの組み合わせを試行錯誤するのが楽しいとか、ライセンスをどう取得させていくか考えるのが楽しいとかってのとはまるで違う次元だ。

100 エーカーの森へ行き、プーの家へ入りこんでおもむろに窓を開け放ったり、戸棚を開けてみたり、鳩時計ならぬ熊時計を何回も鳴らして、それに合わせて自分も飛び跳ねてみたり。テレビの中や絵本の中だった世界へ入り込んで触ることができる。擬似的とは言え彼女にとってそこはリアルに存在する世界だ。こりゃ脳内麻薬出まくりだよなぁとか思った。

そんな娘が今日もまた小さい手でコントローラーを握りしめて目を輝かせている。そして、その横で FF12 のロムを手に順番待ちをしている俺がいますが、何か?

2006-03-25T10:25:46+09:00 | コメント (0) | トラックバック (0) |はてなブックマーク

del.icio.us の private saving 機能

この記事が属するカテゴリー
del.icio.us

やっと del.icio.us にプライベート機能が実装された。

この機能を有効にするには、まず settings で private saving を有効にしておく必要がある。

del.icio.us の settings 画面

これによって、ブックマークポスト時に do not share のオプションが表示され、チェックすることでプライベートなブックマークができるようになる。んで、実際にプライベートブックマークしたものには、not shared と表示される。

プライベートブックマーク

ここら辺の UI は今後様子を見ながら変更されていくかも知れない。ちなみに、必要かどうかは個人的には微妙だけど、プライベートブックマークしたものだけをまとめて表示とかは出来ない。でも、そのうち system: private ってなシステムタグが用意されるかも。

2006-03-20T12:49:34+09:00 | コメント (4) | トラックバック (0) |はてなブックマーク

del.icio.us がマイナーチェンジ

この記事が属するカテゴリー
del.icio.us

ソーシャルブックマークの del.icio.us が微妙にマイナーチェンジされてて、一番の変更はブックマークの編集が inline edit に変わり、その場で編集できるようになったこと。軽快に動いて格段に使いやすくなった。

delicious-edit.png

他にも url 確認ページが変わってて、notes 欄にコメントを書いているユーザーが右カラムに抜き出される形になってる。個人的には、何となく見づらくなったような気がしないでもないけど、まぁ慣れかな。

delicious-url.png

微妙な変更としては、ブックマークのポスト時間が日付にマウスオーバーでツールチップ表示されるようになった。もちろんグリニッジ標準時なんで 9 時間足さなきゃいけないんだけど。ただ、いちいちマウスオーバーすんのも面倒なんで、Firefox の userContent.css に下記を追加して ::after 疑似要素で常に表示させるようにした。

@-moz-document domain(del.icio.us) {
  span.date[title]::after {
    content: attr(title);
    padding-left: 1em;
    color: #000;
  }
}

delicious-post-time.png

del.icio.us blog によると、来週にもプライベート機能がリリースされ、他にもいくつかの機能が追加される予定らしいんで期待。

2006-03-10T10:52:00+09:00 | コメント (0) | トラックバック (0) |はてなブックマーク

CSS だけで Mac OS X の Dock 風ナビゲーション

この記事が属するカテゴリー
CSS

マウスオーバーした時にグニュって拡大する Mac OS X の Dock っぽい動きを CSS だけで実現させるってアイデア。このギミックがユーザビリティ的にどうかは置いておくとして、隣接セレクタを使ってフォントのサイズを段階的に変えるってのは面白いなぁ。試しに自分でもサンプルを作ってみた。ちなみに動作するブラウザがかなり限定されしまい、 隣接セレクタ未対応の IE はもちろん、Opera や Safari でもうまく動作しない。まぁほぼ Gecko オンリーって感じ。

対応ブラウザ
  • Firefox 等の Gecko 系
  • Internet Explorer 7 beta 2

テキストをズーム

テキストにマウスオーバーでズーム

li {
  font-size: 1em;
}
  li:hover {
    font-size: 2em;
  }
    li:hover + li {
      font-size: 1.5em;
    }
      li:hover + li + li {
        font-size: 1.3em;
      }

当然のことながら、隣接セレクタは直後の要素へ対する指定しか出来ないんで、マウスオーバーしている要素の直前の要素は変化しない。それでも比較的それっぽく見える。調子に乗って、アイコンを使ってもっと Dock っぽいサンプルも作ってみた。

アイコンをズーム

アイコンにマウスオーバーでズーム

#dock li {
  float: left;
  list-style :none;
}
  #dock li img {
    width: 64px;
    height: 64px;
  }
    #dock li:hover img {
      width: 128px;
      height: 128px;
    }
      #dock li:hover + li img {
        width: 96px;
        height: 96px;
      }
        #dock li:hover + li + li img{
          width: 80px;
          height: 80px;
        }

img 要素を使ってるんだけど、画像サイズを width、height 属性での指定では無く、CSS でサイズ指定することで大きさを変化させている。あまり深く考えずに作ったんで、可変の原点が上側だけどなかなか良い感じ。

2006-03-08T00:05:53+09:00 | コメント (4) | トラックバック (3) |はてなブックマーク

Ajax を利用したアクセス解析ツール mapsurface

この記事が属するカテゴリー
web&blog

非常にライトウェイトなアクセス解析ツール mapsurface 。ベータテストの申し込みしをしてから約 10 日ほど、忘れていた頃にアカウントが貰えたんでちょっと使ってみた。

mapsurface is a web page activity widget that helps you quickly see how people find, navigate and value the pages of your web site.

Google Analytics 等のサードパーティ製アクセス解析サービスは管理画面にログインしないと解析結果が確認できないわけだど、mapsurface の場合は今閲覧しているページ上でそのページの解析結果を即座に、しかも誰でも見ることができる。とりあえずテストページを作ってみたんで、百聞は一見にしかず。

Alt + x(マックの場合はoption + xOpera の場合は shift + ctrl + x のショートカットで画面にウィジェットが表示され、簡単なアクティビティを確認できるようになっている。

mapsurface ウィジェット

ウィジェット内の map をクリックすれば、ページ内のリンクに対するクリック率が分かるようになってて、色が濃いほどクリック率が高いなど数値だけでなく視覚的にも分かりやすいインターフェース。当然クリック率を表示しているラベルは自由に動かせるようになっている。全てのリファラーや週単位でのアクセスグラフなどは more > をクリックで確認。

リンクのクリック率

昔からあるアクセスカウンタの今風(なんちゃら 2.0 とは言わない ! ;-P)な感じかも。サイト管理人だけじゃなくて閲覧している誰もが見られる事で、初めての訪問者にもどのページが人気のあるページなのかが分かったりとか、または、ページのリファラーを辿ったりができるってのが良いよね。正式にサービス開始し始めて、安定しているようだったら導入してみようかなとか思ってみた。

2006-03-07T00:46:45+09:00 | コメント (2) | トラックバック (1) |はてなブックマーク