BcRikko · July 22, 2015 11:33
diff --git a/index.html b/index.html
 <!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>
diff --git a/index.js b/index.js
 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);
        });
    }
 });
diff --git a/style.css b/style.css
 #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;
 }
	<!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>
	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);
	});
	}
	});
	#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;
	}