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

ゆたろ

2016.02.02

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

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

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ページでご確認ください。