Big Sky

lomoさんが言ってた

caramel*vanilla » Twitterユーザーにタグ付けするWebサービスが欲しい
共通点のあるユーザーを効率的に探したい
... 誰かなんとかしてくれませんか？
http://caramel-tea.com/2008/05/twitter_tagging/

を作ってみた。まだ途中でlomoさんが要望してる機能の内

caramel*vanilla » Twitterユーザーにタグ付けするWebサービスが欲しい

誰でも自由にユーザーページを登録できる

誰でも自由にユーザーにタグをつけられる

~~Bookmarkletかなにかで今見ているTwitterのユーザーページを登録する仕組みを作る~~

既存のタグに対して＋－して数をカウントする

ユーザーごとの個別ページにはタグクラウドを表示する

ユーザーごとの個別ページにはアイコンと最新発言を表示する

ユーザーごとの個別ページからFollowできるようにする

~~GreasemonkeyなどでTwitterのユーザーページにもタグクラウドを表示させる~~

ユーザーごとの個別ページにはそのユーザーにタグをつけたユーザーのアイコンを表示させる

付けられたタグが似たユーザーのアイコンを表示させる

~~タグごとのランキングページを生成する~~

~~ユーザーページとランキングページのRSSを配信する~~

http://caramel-tea.com/2008/05/twitter_tagging/

までしか出来てない。
まぁとりあえず動いてるんで遊んでやって下さい。
なお、ログインするためにはtwitterでログインしている必要があります。お気を付けて。
「add User」でユーザを追加して、ユーザページにて「add Tags」でタグが追加出来ます。ログイン状態であればユーザページ上のタグにマウスを当てると「+-」が表示されます。

Tagtter - Find twitter's fun on tag cloud!

まだbetaですし、データ構造も変えるかもしれないので、今後変更削除してしまうかもしません。ご了承下さい。

Enjoy!

これまで本サイトの画像の扱いはblosxomのimagerefという、自作ながらお粗末なプラグインを使っていました。
私としては、記事本文に記述される画像へのパスはサイトのURLとは切り離して考えるべきと思っているので、以下のプラグインを使っています。

imageref


# Bloxsom Plugin:ImageRef

# Author: Yasuhiro Matsumoto

# Version: 0.1



package imageref;

use strict;

my $images_url = "http://mattn.kaoriya.net/images";

sub start {1}

sub story {

    my ($pkg, $path, $filename, $story_ref, $title_ref, $body_ref) = @_;

    $$body_ref =~ s@<!--\s+imageref\s+thumb:([^:\. ]*)(\.\S+)?\s+-->@<a href="$images_url/$1$2" rel="shadowbox"><img src="$images_url/$1-thumb$2" alt="$1" border="0" /></a>@ig;

    $$body_ref =~ s@<!--\s+imageref\s+thumb:([^:]+?):([^:\. ]*)(\.\S+)?\s+-->@<a href="$images_url/$2$3" rel="shadowbox"><img src="$images_url/$2-thumb$3" alt="$1" border="0" /></a>@ig;

    $$body_ref =~ s@<!--\s+imageref\s+([^:\. ]*)(\.\S+)?\s+-->@<img src="$images_url/$1$2" alt="$1" border="0" />@ig;

    $$body_ref =~ s@<!--\s+imageref\s+([^:]+?):([^:\. ]*)(\.\S+)?\s+-->@<img src="$images_url/$2$3" alt="$1" border="0" />@ig;

    1;

}

1;

※今回の修正を含んだソースです。
※少しvimの色付け変ですね...
これを使うと、記事本文に


以下の画像を見てください。<br />

<!-- imageref パンダ:panda.png -->

と書くことで


<img src="http://mattn.kaoriya.net/images/panda.png" alt="パンダ" border="0"/>

というHTMLが出力されます。例えばサイトの引越しや画像格納パスの変更で全ての記事に手直しをする必要が無くなる訳です。

また、このプラグインでは


以下の画像を見てください。<br />

<!-- imageref thumb:パンダ:panda.png -->

と書く事で


<a href="http://mattn.kaoriya.net/images/panda.png"><img src="http://mattn.kaoriya.net/images/panda-thumb.png" alt="パンダ" border="0"/></a>

と変換してくれる為、使い手側は「panda.png」とサムネイル画像「panda-thumb.png」を用意しておけばいい事になります。
実際は、「panda.png」から「panda-thumb.png」への画像変換は手作業で


convert panda.png -resize 300x200 panda-thumb.png

※convertはImageMagick付属コマンド
とやってるのですが、ここも本当はオートメーション化したいと思っています。

で、今回はこのプラグインを紹介したかったのではなく、jQueryでサムネイル画像から実画像への表示をビジュアルに表現してくれる「Shadowbox」というプラグインを導入しました。

mjijackson » Shadowbox 1.0 released

なぜ導入に至ったかというと、このimagerefプラグインを少し修正すれば簡単にShadowboxが使えるのでは無いかと思ったからです。
Shadowboxを使うためには、jqueryのロードは必要になります。そして初期化処理として


<script type="text/javascript"><!--

$(document).ready(function() {

    Shadowbox.init();

});

--></script>

というコードを書き、あとは


<a src="xxx-big.jpg">

  <img src="xxx-small.jpg"/>

</a>

となっている部分に「rel="shadowbox"」を足して


<a src="xxx-big.jpg" rel="shadowbox">

  <img src="xxx-small.jpg"/>

</a>

とすれば良し。
class属性ではなく、rel属性を使っているので少し気味が悪い気もしますがそんなの気にしない。

今回はこれをimagerefが勝手に出力してくれる様に修正したまでです。

これでいつも通りにimagerefを使えば


<blockquote>

    <!-- imageref thumb:giraffe-photo.jpg -->

</blockquote>

で

となる訳です。
ちなみにこのShadowbox、画像だけでなく

twtter - mattn

といったインラインHTMLやFlash、動画もサポートしている様です。結構手軽に導入出来る割に得られる効果が大きいかもしれません。
一度使って見られてはどうでしょうか？

関連記事

MOONGIFT: » クールに表示「Shadowbox.js」:オープンソースを毎日紹介

追記
shadowboxやめてjquery.lightbox(balupton edition)にしました。

Big Sky

2008/05/23

Perlハブサイトコアメンバーに訊きたい質問

2008/05/19

twitterユーザに対してタグ付け出来るウェブサービス「Tagtter」作った。

2008/05/13

jQueryで動くメディアビューワ「Shadowbox」を入れた