memo ： 5月半ばまで停滞してます/ 予定：photoset云々、ページ作成

Aug 8th, 2011

Tumblr APIを通してタグクラウドを表示させてみた

【追記】：Tumblrテーマ改装前の記事です。現在使用中のコード、CSSはこちらの記事で


フッタに設置しているもの↓がそれです。

     

Tumblrのタグクラウドといえばサードパーティー・アプリで提供されている＜Tumblr Tag Cloud Generator＞(Tumblr Tag Clouds)が定番です。
玉に瑕なのが「POST数増えてきたら読み込み遅くなった・・・」というアレ。
というのもこちら毎回全記事を巡回してタグを取得してるので、
使いこむほどそうなってしまうというなんとも言えぬジレンマな事情があったりします。


ということでMach3.laBlogさんのTumblrでタグリスト/新規投稿リストを出力してみるという記事から、
＜TumblrPosts＞(link先：GitHub)というjQueryプラグインをお借りしてタグクラウドを表示させるようにしてみました。

本家さんでも解説してくださってるんですが、実際やった設置・カスタマイズ手順をまとめ。


【目次】

  1. 必要なものを準備
  2. スクリプトの設置
  3. 記述するHTML
  4. タグクラウドへCSSで装飾を施す
  5. 補足と余談




1．必要なものを準備

jQuery(jquery.min.js)は、例によってGoogle AJAX APIにお世話になります。
⇒ Google Libraries API - Developer’s Guide - Google Libraries API - Google Code

次にDLしてくるもの。
jquery.class.js
⇒ mach3/js-jquery-class - GitHub
tumblrposts.js
⇒ mach3/js-tumblrposts.js - GitHub

この二つはアップロードする場所が必要になります。



ここでさあ困ったなわけですが、
アップロードする場所を持っていない人のためにTumblr公式では

   「テーマに必要なファイルならアップロードしていいですよ！でも一度アップしたら削除できないよ！
   それとテーマに関係ない用途で使ったらアカウント凍結しますよ！注意してね」

というありがたいのかどうかよく分からないサービスがあるので、これを利用するのも良いです。
※ダッシュボードのような分かりやすい場所から繋がってないのは安易に被害者を出さないためですかね（´・ω・`）

こちらから可能です。
⇒ http://www.tumblr.com/themes/upload_static_file




2．スクリプトの設置

準備ができたらちょいちょいと<head>内に記述していきます。
まずスクリプトの読み込み。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://*****/jquery.class.min.js"></script>
<script type="text/javascript" src="http://*****/tumblrposts.js"></script>


更に続けてコードを記述。
本家さんでは新規投稿リストを表示するコードも書いていますが、ここではタグリストのみを表示させるので以下のようにしました。

<script type="text/javascript">
    (function() {
        var posts = new TumblrPosts({
            // ドメインと取得する最大記事数
            domain:"chips-tips.tumblr.com",
            maxNum:300
        });
        posts.bind(posts.EVENT_COMPLETE, function(e) {
            var that = this;
            // getTags() でタグリストを取得
         $.each(this.getTags(), function(i, tag) {
                var html = '<li class="level' + (tag.count % 6 + 1) + '">'
                        + '<a href="/tagged/' + tag.name + '">' + tag.name + '</a></li>';
                $(html).appendTo($("ul#tags"));
            });
        });
        posts.run();
    })();
</script>


6行目のmaxNum(最大取得記事数)を指定すると、POST数が多い場合負荷が軽減できるので
今まで食べたパンの枚数を覚えていない…なんて膨大な数の記事があるときにはこれに頼りましょう。
デメリットとしては取得するタグがあまり正確でなくなることですが、その辺はなあなあで。

5行目のdomainは使用中のTumblrのものをぶっこんでください。





3．記述するHTML

ここまででタグリストを出力する用意ができました。
今度は<body>内へ移動して肝心のタグリストを表示するHTMLを記述。
下の一行で済んでしまうので、表示させたい場所へスッと書いてしまいましょう。

<ul id="tags" class="tagCloud"></ul>


これでひとまずタグリスト(タグクラウド)を表示するという目的は達成です。
次の項目４でこの見た目を整える作業をします。




4．タグクラウドへCSSで装飾を施す

タグクラウドのデコボコ具合や、背景色などはこっちで指定してます。
こちらはJSer.infoさん作成の＜azu’s gist: 838726 — Gist＞からCSS項目を参考にさせていただきました。
以下CSSファイルに記述したタグクラウド該当部分。
(※追記：ブログ改装前のものです)

/*--------------------------------------
Tag Cloud
---------------------------------------*/

#footer ul.tagCloud {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 0.2;
    margin: 5px 0;
    padding: 0.6em 5px;
}

#footer ul.tagCloud li {
    margin: 0;
    padding: 0;
    display: inline-block;
    font-size: 110%; /* 相対的な文字サイズを変更 */
}

#footer ul.tagCloud li a {
    padding: 0 5px;
    position: relative;
    text-decoration: none;
    color: #1197b2;
    background-color: #1197b2;
    border: 1px solid #4e454a;
}

#footer ul.tagCloud li.level1 a {
    bottom: 5px;
    z-index: 6;
    font-size: 98%;
    background-color: #000;
}

#footer ul.tagCloud li.level2 a {
    top: 3px;
    right: 2px;
    z-index: 5;
    font-size: 90%;
    background-color: #000;
}

#footer ul.tagCloud li.level3 a {
    bottom: 5px;
    left: 1px;
    z-index: 4;
    font-size: 128%;
    background-color: #180614;
}

#footer ul.tagCloud li.level4 a {
    top: 5px;
    z-index: 3;
    font-size: 108%;
    background-color: #020019;
}

#footer ul.tagCloud li.level5 a {
    z-index: 2;
    font-size: 160%;
    background-color: #190008;
}

#footer ul.tagCloud li.level6 a {
    top: 3px;
    z-index: 1;
    font-size: 136%;
    background-color: #070033;
}

/* オンマウス */
#footer ul.tagCloud li a:hover {
    z-index: 10;
    color: #fff;
    border-color: #192f60;
    background-color: #0D0303;
}


なんだか(多分)あまり見かけない気もするのでz-indexプロパティについてちょっと補足。
こいつでボックスの重なり順序を決めることができます。覚えておくと時々便利。



タグクラウドのでこぼこ表現はこれとfont-sizeによる文字サイズの違い、positionプロパティ指定⇒top、right、bottom、left指定の微妙なボックスのずれを利用しています。
＋フッタの背景色を考慮した上で、各タグボックスの背景色(background-color)をそれぞれ微妙な違いが出るように色分けして、メリハリをつけました。
なるべくタグの文字がボックス背景色で潰れないようにしたつもりですが、調整が難しい。


この手の配色でいつもお世話になってる色見本のサイトさんです。
今回は主に和色大辞典からちょいちょいと。



そんなわけでタグクラウドの出来上がり。





5．補足と余談

タグの文字サイズについては記事数に必ずしも比例しているわけではないので、あれっとなるやもしれません。
またブラウザによってはCSSで指定したとおりの表示にならなかったり。
(IE8では見事にdisplay: inline-block;が無視されてしまってます…なんでや…)

このブログでは記事につけるタグのルールも大体決まっててそうタグの種類が増えることもないので、
カテゴリに近い感覚で設置してます。
タグクラウドって憧れるよね！という気持ち


新規投稿リストは置こうと思ったときには場所が無かったので妥協してしまいました無念。
Tumblr独自タグで簡単に設置できたらいいのにな～という機能の一つです。
スクリプト作成者さんに感謝です。




  • 参考サイトさん

Tumblrでタグリスト/新規投稿リストを出力してみる | Mach3.laBlog
Tumblrをブログとして利用する-実践編- | JSer.info
Tumblr APIリファレンス和訳（原文：2011/05/04 20:11:46時点） - Walrus, Googling.



« Prev    Next »
Page 1 of 1

Back to Top