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で設定することをお勧めします。