2015/07/28

【JavaScript】Vue.jsでタグクラウドをつくる

Labels: , ,
photo by Kamil Porembiński

XHISTORYSの機能追加のため、Vue.jsをつかってタグクラウドを実装した。
今回はVue.jsを使っているが、ほとんどが素のJavaScriptなので、どのような場合でも応用できると思う。

ちなみにタグクラウドとは...

アルファベット順にリスト化され、タグの頻出度はフォント・サイズや色によって表示される。したがって、アルファベットと人気度数の両方でタグを見つけることが可能となる。

引用元：タグクラウド – Wikipedia
たぶん言葉で説明するより、実際に見てもらったほうがわかりやすいだろう。



タグクラウドをつくる


<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Vue.jsでタグクラウドをつくる</title>
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <div id="app">
      <div id="tag-cloud">
        <span v-repeat="tag :tags" class="tag" style="font-size:{{tag.fontSize}}px">{{tag.name}}</span>
      </div>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.1/vue.min.js"></script>
    <script src="index.js"></script>
</body>
</html>

#tag-cloud {
    padding: 3px 3px;
    width: 300px;
    height: auto;
    text-align: center;
    background-color: gainsboro;
}

#tag-cloud span {
    padding: 0 3px;
    text-align: center;
    display: inline-block;
}

var values = [    
    { name: 'January', count: 6, fontSize: 0 },
    { name: 'February', count: 2, fontSize: 0 },
    { name: 'March', count: 5, fontSize: 0 },
    { name: 'April', count: 1, fontSize: 0 },
    { name: 'May', count: 4, fontSize: 0 },
    { name: 'June', count: 3, fontSize: 0 },
    { name: 'August', count: 6, fontSize: 0 },
    { name: 'September', count: 3, fontSize: 0 },
    { name: 'October', count: 3, fontSize: 0 },
    { name: 'November', count: 1, fontSize: 0 },
    { name: 'December', count: 7, fontSize: 0 }
];

new Vue({
    el: '#app',
    data: {
        tags: values
    },
    created: function(){
        var maxSize = 28;
        var minSize = 8;
    
        // tags.countを降順にソート
        var copyTags = values;
        copyTags.sort(function (a, b) { 
            return b.count - a.count;
        });
    
        // タグの表示数
        var limits = copyTags.length < 5 ? copyTags.length : 5;
        
        var max = copyTags[0].count;
        var min = copyTags[limits - 1].count;
        
        // フォントサイズを決定し、表示する分だけthis.tagsに格納
        this.tags = [];
        for (var i = 0; i < limits; i++) {
            var perc = (max === min) ? 1 : (copyTags[i].count - min) / (max - min);
            var size = Math.round((maxSize - minSize) * perc + minSize);
            
            this.tags[i] = copyTags[i];
            this.tags[i].fontSize = size;
        }
        
        // tags.nameを昇順にソート
        this.tags.sort(function (a, b) {
            return (a.name > b.name) - (a.name < b.name);
        });
    }
});



今回は、created（初期化とかするヤツ）にタグクラウド用の処理を追加した。

表示用のデータは「name, count, fontSize」を持っている。
nameは、タグの名前。
countは、タグの出現回数。
fontSizeは、出現頻度による文字のサイズ変更用
（ここではfontSizeとしているが、styleでも良いし、classでも良い）


処理内容は、コードに書かれているコメントのまま。


タグクラウドの肝となる部分は、36～44行目の処理。
この部分で、タグのフォントサイズを決定している。
percは、フォントサイズの大きさのパーセント（レベル）



以上

written by @bc_rikko
時刻:
Labels: , ,

0 件のコメント :

コメントを投稿

登録: コメントの投稿 ( Atom )