Web事業部実績紹介
Web事業部実績紹介
2016.02.02

tagcloud.jquery.jsでLIGブログの記事を取得して3D回転させてみた

ゆたろ

こんにちは! フロントエンドエンジニアのゆたろです。みなさんいかがお過ごしですか?

今回は、先日見つけたtagcloud.jquery.jsを使って少し遊んでみたいと思います。

tagcloud.jquery.jsとは?

https://github.com/dynamicguy/tagcloud/

tagcloud.jquery.jsは、指定された文字列を3D回転させてくれるプラグインです。
このプラグインとajaxを使って、LIGブログの記事を最新10件だけ取得して3D回転させてみようと思います。

tagcloud.jquery.jsでLIGブログの記事10件を3D回転させてみる

1. RSSから情報を取得する

まずはRSSから情報を取得しましょう。
同一ドメインの場合は普通にajaxで取得できるのですが、クロスドメインで情報を取得する場合はphpを挟むことによって同一ドメインのように取得することができます。

getrss.php

$rss = file_get_contents('https://liginc.co.jp/feed'); //取得するrss
	header("Content-type: application/xml; charset=UTF-8");
	print $rss;

hoge.js

$.ajax({
		url: 'getrss.php',
		dataType: 'xml'
	});

これで、別ドメインのrssを取得することができます。

2. 取得した情報をHTMLに出力

取得したRSSから必要な情報だけ抜き出して、HTMLに生成します。

hoge.js

$.ajax({
		url: 'getrss.php',
		dataType: 'xml',
		success: function(data) {

			var $Hoge = $('#Hoge'); //htmlを生成する場所
			var GET_COUNT = 10; //取得するデータの数
			var createHtml = '';

			createHtml += '
<ul>';
			for (var i = 0; i < GET_COUNT; i++) {
				var thisItem = $('channel', data).children('item').eq(i);
				createHtml += '
	<li>'; 
				createHtml += '<a href="' + thisItem.children('link').text() + '" target="_blank">';
				createHtml += thisItem.children('title').text();
				createHtml += '</a>';
				createHtml += '</li>
';
			};
			createHtml += '</ul>
';

			$Hoge.append(createHtml);

		}
	});

HTML

<div id="Hoge"></div>
<script src="jquery.js"></script>
	<script src="hoge.js"></script>

これでid=”Hoge”の中に10件liで生成されます。

3. tagcloud.jquery.jsを設置

最後に、生成されたliに対してtagcloud.jquery.jsを適用します。

hoge.js

$.ajax({
		url: 'getrss.php',
		dataType: 'xml',
		success: function(data) {

			var $Hoge = $('#Hoge'); //htmlを生成する場所

				〜中略〜

			$Hoge.append(createHtml);

			$Hoge.tagoSphere({
				height: 500,
				width: 700,
				radius: 150,
				speed: 1,
				fontMultiplier: 20
			});
		}
	});

これだけで、取得したRSSの内容を3D回転させることができます。
実際の動きを以下のdemoページでご確認ください。

sample

※現在このページは表示できません。

まとめ

今回使用したプラグインを案件で使えることは少ないかと思いますが、面白い動きを簡単に実装できそうなので紹介してみました。勉強していく中で「実際に使うか使わないか」ではなく「やってみたいからやってみる!」っていうのもアリですよね?

みなさんも機会があったらtagcloud.jquery.jsを使ってみてください。それでは!