パーティーに少し遅れて、タグ クラウドも壊れていることに気付きました。JSON を自分でダウンロードし、そこからタグ リスト (またはタグ クラウド) を作成する必要があります。または、もちろんサーバー側で PHP などで何かを構築することもできますが、クライアント側の JavaScript ベースのソリューションに固執することを想定しています。
手順は次のとおりです。
- JSON をダウンロードします。
- JSON を解析します。
- そこから何かを構築します。
JSON をダウンロードするには、通常は を使用しますXMLHttpRequest()が、クロスサイト スクリプティング保護のため、ここでは機能しません。<script>そのため、HTMLタグで関数コールバックを使用して JSON API を呼び出すことにしました (この例では、ユーザー名のdeliciousを使用しました)。
<script type="text/javascript" src="http://feeds.delicious.com/v2/json/tags/delicious?callback=printDeliciousTags"></script>
このスクリプト タグは、ステップ 1 と 2 を処理printDeliciousTagsし、JSON の内容をパラメーターとして関数を呼び出して、そこから何かを作成できるようにします。
以下は、タグをアルファベット順に並べ替え、順序付けされていないリストとして出力する非常に基本的な実装です。
var username = "delicious";
var ignoreFiletypes = true;
var minCount = 1;
var tagURLPrefix = "http://delicious.com/" + username + "/";
function printDeliciousTags(tags)
{
var out = "";
var visibleTags;
// find all tags matching our min count and exclude filetypes as needed
visibleTags = [];
maxCount = 0;
for (tag in tags) {
if (tags.hasOwnProperty(tag)) {
if (tags[tag] > maxCount) {
maxCount = tags[tag];
}
if (
tags[tag] >= minCount &&
(!ignoreFiletypes || tag.indexOf(":") == -1)
) {
visibleTags[visibleTags.length] = tag;
}
}
}
// sort the tags alphabetically (case-insensitive)
visibleTags.sort(function (a, b) {
return a.toLowerCase().localeCompare(b.toLowerCase());
});
// print the tags
out += '<ul>';
for (var i = 0; i < visibleTags.length; i++) {
var tag;
tag = visibleTags[i];
out += '<li><a href="' + tagURLPrefix + tag + '">';
out += tag + ' (' + tags[tag] + ' bookmarks)';
out += '</a></li>';
}
out += '</ul>';
document.getElementById("deliciousPlaceholder").innerHTML = out;
基本的な順序なしリストの完全な HTML の例:
<html>
<head>
<title>Delicious JavaScript Tag API Replacement (Basic List)</title>
</head>
<body>
<div id="deliciousPlaceholder"></div>
<script type="text/javascript">
var username = "delicious";
var ignoreFiletypes = true;
var minCount = 1;
var tagURLPrefix = "http://delicious.com/" + username + "/";
function printDeliciousTags(tags)
{
var out = "";
var visibleTags;
// find all tags matching our min count and exclude filetypes as needed
visibleTags = [];
maxCount = 0;
for (tag in tags) {
if (tags.hasOwnProperty(tag)) {
if (tags[tag] > maxCount) {
maxCount = tags[tag];
}
if (
tags[tag] >= minCount &&
(!ignoreFiletypes || tag.indexOf(":") == -1)
) {
visibleTags[visibleTags.length] = tag;
}
}
}
// sort the tags alphabetically (case-insensitive)
visibleTags.sort(function (a, b) {
return a.toLowerCase().localeCompare(b.toLowerCase());
});
// print the tags
out += '<ul>';
for (var i = 0; i < visibleTags.length; i++) {
var tag;
tag = visibleTags[i];
out += '<li><a href="' + tagURLPrefix + tag + '">';
out += tag + ' (' + tags[tag] + ' bookmarks)';
out += '</a></li>';
}
out += '</ul>';
document.getElementById("deliciousPlaceholder").innerHTML = out;
}
</script>
<script type="text/javascript" src="http://feeds.delicious.com/v2/json/tags/delicious?callback=printDeliciousTags"></script>
</body>
</html>
タグ クラウドの完全な HTML の例:
<html>
<head>
<title>Delicious JavaScript Tag API Replacement (Tag Cloud)</title>
</head>
<body>
<div id="deliciousPlaceholder"></div>
<script type="text/javascript">
var username = "delicious";
var minFont = 14;
var maxFont = 36;
var ignoreFiletypes = true;
var minCount = 1;
var tagURLPrefix = "http://delicious.com/" + username + "/";
function printDeliciousCloud(tags)
{
var out = "";
var maxCount;
var factor;
var offset;
var visibleTags;
// find all tags matching our min count and exclude filetypes as needed
visibleTags = [];
maxCount = 0;
for (tag in tags) {
if (tags.hasOwnProperty(tag)) {
if (tags[tag] > maxCount) {
maxCount = tags[tag];
}
if (
tags[tag] >= minCount &&
(!ignoreFiletypes || tag.indexOf(":") == -1)
) {
visibleTags[visibleTags.length] = tag;
}
}
}
// sort the tags alphabetically (case-insensitive)
visibleTags.sort(function (a, b) {
return a.toLowerCase().localeCompare(b.toLowerCase());
});
// the tag cloud looks nicer if we use a logarithmic function, so fit
// one to our configured font sizes and min count
factor = (minFont - maxFont) / (Math.log(minCount) - Math.log(maxCount));
offset = maxFont - (factor * Math.log(maxCount));
// print the tag cloud
for (var i = 0; i < visibleTags.length; i++) {
var size;
var style;
var tag;
tag = visibleTags[i];
size = offset + (factor * Math.log(tags[tag]));
style = 'text-decoration:none; color:#73adff; font-size:' + size + 'px;';
out += '<a href="' + tagURLPrefix + tag + '" style="' + style + '" title="' + tags[tag] + ' bookmarks">';
out += tag;
out += '</a> ';
}
document.getElementById("deliciousPlaceholder").innerHTML = out;
}
</script>
<script type="text/javascript" src="http://feeds.delicious.com/v2/json/tags/delicious?callback=printDeliciousCloud"></script>
</body>
</html>