Tumblrにはタグクラウドを表示する機能がありません。なので今回はjQueryを使ってタグクラウドを表示するプラグインを作ってみました。既に他の方もやっているようですが、自分なりに改造しやすいような形で再開発してみました。初めてjQueryでプラグインを作ったので多少バグはあるとは思いますが公開します。

Tanglrの入手方法

GoogleAppEngineにスタティックファイルとしてアップロードしました。Tumblrにはファイルをアップロードできないので置き場が無い方は以下のリンクを利用してください。

http://zerippe.appspot.com/libs/tanglr/1.0/tanglr.js(非圧縮版)

http://zerippe.appspot.com/libs/tanglr/1.0/tanglr.min.js(圧縮版)

多分ありえないとは思いますが、トラフィック的に限界が来た場合は、こちらでアナウンスします。

ライセンス

ライセンスにはあまり詳しくないので、大雑把に以下を守っていただければ幸いです。

  • 改造して再配布する場合は必ずソースコードにその旨を記述してください。できれば連絡を頂ければ喜びます。
  • なんらかの不具合が生じた場合はコメントを下さい。なるべく修正します。機能的な突っ込みもお待ちしています。

使い方

このプラグインは、jQuery最新版(執筆時点で1.6.4 1.6.3)を利用してデバッグしています。その他のバージョンでは動作しない可能性があります。注意してください。筆者はGoogleがホスティングしているjQueryの最新版を利用しています。今回はそのjQueryを利用していきたいと思います。

まず、設置するページの<head></head>の部分にGoogleがホスティングしているjQueryをロードするコードを追加します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

次に、筆者がホスティングしているTanglrをロードするコードを<head></head>の部分に追加します。

<script src="http://zerippe.appspot.com/libs/tanglr/1.0/tanglr.js"></script>

これでプラグインのロードが完了したので、タグクラウドを追加する部分とプラグインの実行を行います。

<script type="text/javascript">
$(function(){
var tanglr = $.tanglr("#tags");
tanglr.load("http://{BlogName}.tumblr.com");
});
</script>
<div id="tags"></div>

上記コードはプラグインの実行部分です。赤文字のBlogNameの部分を自分のTumblrページの名前にあわせて下さい。以上で導入は終了です。

カスタマイズ

jQueryに詳しい方は、$.tanglr("element").pluginit({})に連想配列を渡すことによって、デフォルトの設定をオーバーライドすることができます。デフォルトの設定と値の詳細は以下の通りです。

{
api_url : "/api/read/json?callback=?&num=50&start=",
tag_url : "/tagged/",
max_load : 100,
max_size : 30,
min_size : 12,
unit : "px",
renderer : default_renderer
}
api_url JSON取得用のAPI URL
tag_url Taggedページへのパス
max_load タグ取得する際に読み込み記事数。値が大きいほど動作が遅くなります。最小値50, ステップ値50(50, 100, 150, 200 …)
max_size クラウド表示時の最大フォントサイズ
min_size クラウド表示時の最小フォントサイズ
unit クラウド表示時に使用する単位(px, em …)
renderer タグを整形して表示するコールバック関数

 

上記値をオーバーライドする方法は以下の通りです。

<script type="text/javascript">
$(function(){
var tanglr = $.tanglr("#tags");
tanglr.pluginit({
max_load : 200,
unit : "em",
renderer : function(that, url, tag, size, value){
that.append(tag);
})
});
tanglr.load("http://{BlogName}.tumblr.com");
});
</script>
<div id="tags"></div>

この例では、最大読み込み記事数を200、フォントサイズの単位を”em”、レンダラを変更し単純にタグを追加する関数を適応しています。この関数の引数の詳細は以下の通りです。

that タグを追加するDOM要素(この場合は”#tags”)
url tanglr.load()に渡されたURL
tag タグ文字列
size 内部で計算されたフォントサイズ
value タグの出現回数

 

レンダラをオーバーライドした場合、内部的に利用できるデフォルト値を使用することができません。具体的には、以下の例の”default_params.tag_url”のような変数にアクセスできなくなります。

デフォルトのレンダラは以下のような形式になっています。

that.append("<span style=\"font-size:" + size + "\"><a href=\"" + url + default_params.tag_url + tag + "\">" + tag + "(" + value  + ")</a></span>\n");

これ以外の書式的な設定はCSSで設定することをお勧めします。

関連性がある記事

Disqusでコメント