Big Sky :: 気になるアノ人の、気になるアノ言及を検索しまくるjavascript

ネットユーザ個々のWeb情報をアカウント個々に共有出来るサービスfooo.nameが誕生しました。

fooo.name!!!

もちろんAPIも用意されており、指定アカウントが保持しているサブアカウント情報やフィード情報も、XML,JSON,RSS,ATOM等といったフォーマットで取得する事が出来ます。
今日は、このfooo.nameからアカウントが保持する全フィードを取得し、そのコンテンツから任意の文字列を検索する事で

気になるアノ人の、気になるアノ言及を検索するWebアプリ

を作ってみました。
まず、fooo.nameのAPIで、アカウントに対するフィード一覧を取得します。
私mattnであれば

http://fooo.name/accounts/mattn/feeds

となります。フォーマット指定が出来ますので、「?format=json」を指定して、jsonオブジェクトを取得します。これをGoogle Ajax Feed APIを使用してコンテンツ取得し、そのコンテンツ内から任意の文字列を検索します。
なんだか最近、ライブラリが豊富で色んな事が簡単に出来てしまいますね。

以下、ソースと動作例です。

まずソース


<html>

<head>

<title>気になるアノ人の気になるアノ言及検索</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAS_2fKEdj-fsDOrnYqd4nthTGTkG1t9CC6WQns4yK382vvQcY9RS5JGW4WA0hwZKxfIpKeCjuMOMPIA"></script>

<script type="text/javascript"><!--

var searchMentionWord = null;

function loadFeedsCallback(data) {

  var container = document.getElementById("searchMentionContainer");

  container.innerHTML = "";

  for(var n = 0; n < data.length; n++) {

    var feed = new google.feeds.Feed(data[n].url);

    feed.load(function(result) {

      if (!result.error) {

        for (var i = 0; i < result.feed.entries.length; i++) {

          var entry = result.feed.entries[i];

          var link = entry["link"];

          var title = entry["title"];

          var content = entry["content"];

          if (content.indexOf(searchMentionWord, 0) >= 0) {

            var links = document.getElementsByName("mentionLink", container);

            for(var l = 0; l < links.length; l++) {

              if (links[l].href == link) break;

            }

            if (l < links.length) continue;

            var mentionContainer = document.createElement("div");

            mentionContainer.className = "searchMention";

            var h3 = document.createElement("h3"); 

            var block = document.createElement("blockquote"); 

            var anchor = document.createElement("a"); 

            var mention = document.createElement("div"); 

            var via = document.createElement("a"); 



            anchor.name = "mentionLink";

            anchor.href = link;

            anchor.className = "external";

            anchor.appendChild(document.createTextNode(title));

            h3.appendChild(anchor);

            via = document.createElement("a"); 

            via.href = result.feed.link;

            via.appendChild(document.createTextNode(result.feed.title));

            mention.innerHTML = content;

            block.className = "searchMentionBlock";

            block.appendChild(mention);

            block.appendChild(document.createTextNode("via "));

            block.appendChild(via);



            mentionContainer.appendChild(h3);

            mentionContainer.appendChild(block);

            container.appendChild(mentionContainer);

          }

        }

      }

    });

  }

}

function searchMention() {

  var container = document.getElementById("searchMentionContainer");

  container.innerHTML = "";

  var img = document.createElement('img');

  img.src='http://www.ac.cyberhome.ne.jp/~mattn/images/ajax-loader.gif';

  container.appendChild(img);



  var searchMentionUserId = document.getElementById("searchMentionUserId").value;

  searchMentionWord = document.getElementById("searchMentionWord").value;

  var s = document.createElement("script");

  s.charset = "utf-8";

  s.src = "http://fooo.name/accounts/" + searchMentionUserId + "/feeds?format=json&callback=loadFeedsCallback";

  s.onerror = function() {

    container.innerHTML = "error!";

  }

  document.body.appendChild(s);

}

google.load("feeds", "1");

--></script>

<style type="text/css"><!--

.searchMentionContainer {

  border: 1px solid black;

}

.searchMentionBlock {

  background-color: #ffddaa;

  font-family: Verdana, Arial, sans-serif;

  font-size: small;

}

.searchMention a,

.searchMention a:active,

.searchMention a:hover,

.searchMention a:link,

.searchMention a:visited

{

  color: blue;

}

-->

</style>

</head>

<body>

    気になる「<input type="text" id="searchMentionUserId" value=""/>」の

    気になる「<input type="text" id="searchMentionWord" value=""/>」についての言及を

    <input type="button" onclick="searchMention();" value="検索"/>

    <div id="searchMentionContainer"></div>

</body>

</html>