ソーシャルブックマークをブログコンテンツに

Posted by
ぴろり
Posted at
2006/09/21 00:19
Trackbacks
関連記事 (0)
Post Comment
コメントできます
Category
電算室 カテゴリ

 はてなブックマークdel.icio.usなどのソーシャルブックマークは、個人用ブックマークツールとしても十分な機能を持っています。自分のブックマークをパブリックにすることは自分の今の興味事項や趣味趣向を公開することと同じですから、これを自己紹介の一つの切り口として考えると面白いかもしれません。
 これらソーシャルブックマークのマイページにリンクを張ってしまうのが簡単ですが、自サイトとデザインや構成を統一した上で他ページと同列のコンテンツとして扱えるようにしてみました。このエントリでは、ソーシャルブックマークサービスが生成する RSS を ぐぐるかるを使ってブログパーツ的に使う方法を紹介しています。

ここでも活躍ぐぐるかる! …だけれど Google と関係なくなってきたような?/p>

この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  

概要

 はてなブックマークや del.icio.us では、特定ユーザの公開されたブックマークを RSS として取得することができます。

 ぐぐるかるを使ってこれら RSS に XSL 変換を行ない、所望の (X)HTML を生成します。XSL テンプレートを作る部分が少し敷居が高いかも知れませんが、一覧を表示する程度であれば出来合いの XSL のコピー&ペーストで済みそうです。

ここでの使用例

 トップページの右サイドバーからリンクされた最新のブックマークページがそれになります。ページにはぐぐるかる のプロキシ CGI を呼び出す以下のような小さな JavaScript コードがあるだけです。

<div id="gglcal1_content"></div>
<div id="gglcal1_loading">
<img src="/icons/loading.gif" alt="loading" align="top"/> Now Loading ...
</div>

<script type="text/javascript" src="/cgi-bin/mt/plugins/gglcal/jslb_ajax050_c.js"></script>
<script type="text/javascript">
function gglcal1_doRequest (mode, next, self) {
	var param = '';
	if (mode) param += '&mode=' + mode;
	if (next) param += '&next=' + next;
	if (self) param += '&self=' + self;
	sendRequest (onLoaded, param, 'POST', '/cgi-bin/mt/plugins/gglcal/gglcal-proxy.cgi', true);

	function onLoaded (oj) {
		document.getElementById ('gglcal1_content').innerHTML = oj.responseText;
		document.getElementById ('gglcal1_loading').style.display = 'none';
	}
}
gglcal1_doRequest ('delicious');
</script>

 またブックマークの RSS の URL を ./cache/00000000.xmlに指定し、変換ルールである XSL は次のようなテンプレートを記述しています。

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
  xmlns:rss="http://purl.org/rss/1.0/"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  xmlns:dc="http://purl.org/dc/elements/1.1/"
  xmlns:admin="http://webns.net/mvcb/"
  xmlns:gglcalfunc="http://www.magicvox.net/pub/xmlns/gglcal"
>
<xsl:output method="html"/>

<!-- Root Document -->
<xsl:template match="/">
  <xsl:apply-templates select="rdf:RDF"/>
</xsl:template><!--/-->

<!-- rdf:RDF -->
<xsl:template match="rdf:RDF">
<div class="divEntry">

  <h1>最近のブックマーク</h1>

  <xsl:apply-templates select="rss:item">
    <xsl:sort select="rss:item/dc:date"/>
  </xsl:apply-templates>
</div><!--divEntry-->

<div class="divEntryMore">
  <img src="/icons/bltR0.gif" alt=">"/>
  <span class="spanEntryTitle"><a class="external" href="http://del.icio.us/pirolix">全てのブックマーク ...</a></span>

</div><!--divEntryMore-->
</xsl:template><!--rdf:RDF-->

<xsl:template match="rss:item">
<xsl:if test="position () <= 30">
<div class="divItems">
  <img src="/icons/bltR0.gif" alt=">" />
  <a class="spanEntryTitle" href="{rss:link}" rel="nofollow"><xsl:value-of select="rss:title"/></a>
  <ul class="header">
    <li>
      at <span class="date">

      <xsl:value-of select="substring (dc:date, 1, 4)"/>
      <xsl:text>/</xsl:text>
      <xsl:value-of select="substring (dc:date, 6, 2)"/>
      <xsl:text>/</xsl:text>
      <xsl:value-of select="substring (dc:date, 9, 2)"/>
      <xsl:text> </xsl:text>
      <xsl:value-of select="substring (dc:date, 12, 5)"/>

      </span>
    </li>
    <xsl:if test="dc:subject">
    <li>
      <img src="/icons/tag.gif" alt="タグ" />
      <xsl:value-of select="dc:subject"/>
    </li>
    </xsl:if>
  </ul><!--header-->

  <xsl:if test="rss:description">
    <blockquote style="margin-top: 1px; padding: 1px;">
      <xsl:value-of select="rss:description"/>
    </blockquote>
  </xsl:if>
</div><!--divItems-->
</xsl:if>
</xsl:template><!--rss:item-->

</xsl:stylesheet>

いろいろ

 これを設置してから、ページをクリップする際にできるだけ notes を書くよう心がけるようになりました。ビジタの便利を考えてのことですが、自分が後から見直す際にも有益なことに気が付きました。そんなわけでクリップするのが微妙に楽しい今日この頃です。

 また、今のところ一つの RSS を整形して表示しているだけですが、複数のメタデータを横断的に組み合わせることで、何か面白い見せ方ができるんじゃないかなぁとか考えています。最近は様々なメタデータを RSS などで配信するサービスが増えてきましたから、今後はこういったデータを如何に組み合わせて新しい価値を創造するか、という部分にアイディアのタネを移していきたいところです。

この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  



関連記事/トラックバック

関連記事/トラックバックはまだありません

この記事にトラックバックを送るには?

コメントを投稿する

 
 (必須, 匿名可, 公開, トリップが使えます)
 (必須, 匿名可, 非公開, Gravatar に対応しています)
 (必須)
スパム コメント防止のため「投稿確認」欄に ランダムな数字 CAPTCHAについて を入力してから送信してください。お手数ですがご協力のほど宜しくお願いいたします。