JavaScript で Tag Cloud ならぬ Word Cloud 作ってみた

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

Tag Cloud ならぬ Word Cloud 作ってみた. 一応リンク先は, 翻訳サイトにつながっているので英単語の勉強になるかも♪♪

SAMPLE And DATA

ツールはこちら

ダウンロードはこちら

Source Code

このツールのスクリプト部分を載せておきます

var $id = function(id) { return document.getElementById(id); }
var $class = function(c, n) { n=n||0; return document.getElementsByClassName(c)[n]; }
var $classes = function(c)  { return document.getElementsByClassName(c); }
var $create = function(tag) { return document.createElement(tag); }

window.addEventListener("load", function(){
    createWordCloud();
}, false);

var createWordURL = function(word)
{
    return "http://dic.yahoo.co.jp/dsearch?p=" + word + "&stype=1&dtype=1";
};

var createWordCloud = function()
{
    var word_cloud = $id("word-cloud");
    var ta = $id("ta");
    var word_list = ta.value.match(/[\w]+/g);
    var check_list = {};
    
    // ワードをカウント
    for (var i=0; i<word_list.length; ++i) {
        var word = word_list[i];
        if (check_list[word]) {
            check_list[word]["count"]+=1;
        }
        else {
            check_list[word] = {
                "count" : 1,
                "word" : word,
            };
        }
    }
    
    // 連想配列を配列へ
    var order_list = [];
    for (var key in check_list) { order_list.push(check_list[key]); }
    
    // アルファベット順に並べ替え
    order_list.sort( function(l, r) { return l["word"]>r["word"] ? 1 : -1; } );
    // ワードクラウドを作成
    word_cloud.innerHTML = "";
    for (var i=0; i<order_list.length; ++i) {
        var temp = order_list[i];
        var a = $create("a");
        a.innerHTML = temp["word"] + "(" + temp["count"] + ")" + "\n";  // HTML
        a.href = createWordURL(temp["word"]);           // URL
        a.target = "_blank";                            // Target
        a.style.fontSize = (13+temp["count"]*2)+"px";   // FontSize
        word_cloud.appendChild(a);
    }
};

Point

単語のマッチング

正規表現を使って単語のリストを取得します.

var word_list = ta.value.match(/[\w]+/g);

JavaScript による要素の生成, 追加

document の createElement で要素を生成, element の appendChild で要素を追加することができます.

document.createElement(tag);
word_cloud.appendChild(a);

配列をソート

配列は sort というメンバ関数を持っています.比較関数を渡せば自由に並び替えることができます. 今回はアルファベット順に並び替えています.

order_list.sort( function(l, r) { return l["word"]>r["word"] ? 1 : -1; }

JavaScript 面白いよん♪♪

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT