ITエンジニア/デザイナ向けにオープンソースを毎日紹介

たくさんの文字が良い感じに詰め込んだ状態で並んだ状態がタグクラウドやワードルと呼ばれます。それを手作業で作成するという選択はまず考えられないでしょう。また、画像で作ってしまうと後からの更新が面倒です。

そこで使ってみたいのがwordcloud2.jsです。与えられた文字列を良い感じに配置してくれます。

wordcloud2.jsの使い方

デモです。良い感じに隙間なく埋まっています。

全体像です。レスポンシブなのも利点です。

画像として保存もできます。

wordcloud2.jsの良いところは自動生成なので単語の追加なども簡単にできることです。また、データベースから値を取得して生成する場合は日々追加されるデータに合わせて変更されて欲しいと思うのではないでしょうか。

wordcloud2.jsはHTML5/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

wordcloud2.js - tag cloud/Wordle presentation on 2D canvas or HTML

timdream/wordcloud2.js: Tag cloud/Wordle presentation on 2D canvas or HTML

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2