スポンサーサイト

一定期間更新がないため広告を表示しています

    -     -     ▲ top

Yahoo! Pipesでコラボネタ3!「さがせ」と「サソリ」のマッシュアッパァーッ!
「Google AJAX Feed API」バージョン

て、前回の記事「moo.fxの「FX.ACCORDION(タブ・アコーディオン)」をJUGEMでやってみた。」の続きと言うか、番外編と言おうか、コンテンツ編といおうか(なんでもいいっつーの)。

FX.ACCORDION内にある「Mix Entries」のRSSの表示は、いつもご迷惑をかけては毎回お世話になっている「 ブログパーツをさがせ」さんとうちのRSSフィードを(勝手に)「Yahoo! Pipes」でミックスさせたものです。

今までいろいろ遊んできましたが今回は「Google AJAX Feed API」を使ってみました。
なので「Yahoo! Pipesでコラボネタ3!」ということです。(結局)

ちなみに、Yahoo! Pipesでコラボネタシリーズは以下。

「さがせ」と「サソリ」で生まれたキカイダースキン。
では、本題。
Google AJAX Feed APIとは、googleから提供されている、RSS/Atomフィードを取得するAPI(javascriptライブラリ)です。


詳しい導入法は「マイコミジャーナル」に載ってますのでぜひどうぞ! 「Yahoo!Pipes」についてはこちら。

1).まず「Yahoo pipes」で作ったRSSを準備。
RSSフィードを複数取得できる「google.feeds.FeedControl」というクラスがありますが、mixtureしたRSSフィードの方がおもしろいので却下。
http://pipes.yahoo.com/pipes/pipe.run?_id=HrpJe2XF2xG57ERfHxeTaQ&_render=rss

2).APIキーを取得して、Google AJAX Feed API のドキュメント内にあるコードをコピペ。

3).そして「はてブ数」を表示させるコードを加えますが、方法は検索するとでてきました。
参考(引用)にしたサイトはこちら。(勝手にありがとう)
そしてどちらの記事なのかわかりやすいように、リンク先の Favicon(ファビコン)を自動で表示する「 Favicon API (ファビコン) α版」は欠かせない。
F.Ko-Jiの「一秒後は未来」さんにあるコードを参考に小細工。
合ってるかどうかわからないが、表示されたのでこれでよしとしよう。
(ΦДΦ )ノ" テキトー
div.appendChild(a);
var img = document.createElement("img");
img.src = "http://favicon.aruko.net/m/f/" + entry.link;
with(img.style) {
width = "16px";
height = "16px";
verticalAlign = "middle";
marginRight = "4px";
}

4).ここまでくるとコードが長ったらしくなるので、例のごとく偽装作業(気分は犯罪者)。

5).「FX.ACCORDION」のboxに<div id="feed"></div>を入れると完成。

「Yahoo pipes」を使わずにRSSフィードをmixtureできればもっと表示が速くなるんだろうけど、
さっぱりわかりまセーン ┓( ̄∇ ̄;)┏

本人には合ってるのかどうかも分からないような恥かしいコードは続きでどうぞ。
(詳しい方教えていただきたい・・・)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google AJAX Feed API - Favicon + Hatebu Feed Example</title>
    <script type="text/javascript" src="http://www.google.com/jsapi?key=(取得したAPIキー)"></script>
    <script type="text/javascript">
 
    google.load("feeds", "1");
 
    function initialize() {
      // google.feeds.Feedオブジェクトの生成
      var feed = new google.feeds.Feed("http://pipes.yahoo.com/pipes/pipe.run?_id=HrpJe2XF2xG57ERfHxeTaQ&_render=rss");
      // 読み込む件数を指定
      feed.setNumEntries(15);
      feed.load(function(result) {
        if (!result.error) {
          var container = document.getElementById("feed");
          for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            var div = document.createElement("div");
            var a = document.createElement("a");
            a.href = entry.link;
            div.appendChild(a);
            var img = document.createElement("img");
            img.src = "http://favicon.aruko.net/m/f/" + entry.link;
            with(img.style) {
                width = "16px";
                height = "16px";
                verticalAlign = "middle";
                marginRight = "4px";
            }
            div.appendChild(img);
            var a = document.createElement("a");
            a.href = entry.link;
            a.appendChild(document.createTextNode(entry.title));
            div.appendChild(a);
            var img = document.createElement("img");
            img.src = "http://b.hatena.ne.jp/entry/image/" + entry.link;
            with(img.style) {
                verticalAlign = "middle";
                marginLeft = "4px";
            }
            div.appendChild(img);
            
            container.appendChild(div);
          }
        }
      });
    }
    google.setOnLoadCallback(initialize);
 
    </script>
  </head>
  <body>
    <div id="feed"></div>
  </body>
</html>

    comments(1)     trackbacks(0)     ▲ top

スポンサーサイト

    -     -     ▲ top

Comment

あなたの&#20070;いたこの文章はとても良くて、私はとても好きなのです。8私は必ず守るの新たな文章が掲載された。

Posted by: コピーブランド | at: 2012/03/28 3:41 PM


Trackback

Trackback URL

http://sasori-flower.jugem.jp/trackback/986

  • » ブログパーツの設置方法 (links with BlogDeco)

 
サンプル・イベント・モニターならBloMotion