Javascript

【Javascript】YUI+Google AJAX Feed API

Javascript関連情報

更新日：2007年04月27日

YUI+Google AJAX Feed API

高橋登史朗

YUIによるアニメーションエフェクトとGoogle AJAX Feed APIを組み合わせて、別ドメインからのRSSフィード読み込みを試してみます。

YUI+Google AJAX Feed API

ソース

前ページサンプルのソースは次の通りです。ご覧の通り、YUIとGAF APIを組み合わせています。(*20007.5.1 画像を事前処理できるように修正しました)

<!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>GAF API + YUI</title> 

<!-- YUI -->
<script type="text/javascript" src="../yahoo-min.js"></script>
<script type="text/javascript" src="../animation-min.js"></script>
<script type="text/javascript" src="../event-min.js"></script>
<script type="text/javascript" src="../dom-min.js"></script>
<script type="text/javascript">

<script type="text/javascript">

//YUIインスタンス用の配列
var myAnim = [];

//YUIアニメーションでフェイドイン
function outputData(id){

  //クリック用の[+]/[-]リンク
  var $adiv=document.getElementById(id);
  
  if($adiv.innerHTML=="[+]"){
  
    //[+]のときに実行します
    $adiv.innerHTML="[-]";
    myAnim[id+"p"] = new YAHOO.util.Anim(id+"d",{opacity:{from:0,to:1}},1);
    myAnim[id+"p"].onTween.subscribe(function (){divOpenClose(id,true);});  
    myAnim[id+"p"].animate();
    
  }else{

    //[-]のときに実行します
    $adiv.innerHTML="[+]";
    myAnim[id+"m"] = new YAHOO.util.Anim(id+"d",{opacity:{from:1,to:0}},0.3);
    myAnim[id+"m"].onComplete.subscribe(function (){divOpenClose(id,false);});  
    myAnim[id+"m"].animate();
    
  }
  
}

//出力用DIVのCSS
function divOpenClose(id,swt){
  var $ddiv=document.getElementById(id+"d");//出力用DIV
  $ddiv.style.display=(swt)?"block":"none";
  $ddiv.style.fontSize=(swt)?"0.8em":"0px";
  $ddiv.style.height=(swt)?"100px":"0px";
  $ddiv.style.width=(swt)?"340px":"0px";
  $ddiv.style.margin=(swt)?"4px":"0px";
  $ddiv.style.padding=(swt)?"8px":"0px";
  $ddiv.style.backgroundColor=(swt)?"#eee":"#fff";
}

</script>

<!-- Google AJAX Feed API  -->
<script type="text/javascript" 
        src="http://www.google.com/jsapi?key=ここへ自分のキーをコピーします"></script>
<script type="text/javascript">

//読み込むRSS
var RSSurl="http://allabout.co.jp/internet/javascript/rss/index.xml";


//feeds APIのバージョン1を指定
google.load("feeds", "1"); 

//初期化
function initialize() {

  var feed = new google.feeds.Feed(RSSurl);
  feed.load(function(result) {
    if (!result.error) {
    
      //出力用DIV
      var container = document.getElementById("feed");
      
      //受信したRSS JSONデータresult.feed.entriesを処理します
      for (var i = 0; i < result.feed.entries.length; i++) {
        var entry = result.feed.entries[i];
        
        //タグ無効化例
        //(ただしGAF APIではscriptは無効化された上で転送されて
        //  きますのでほとんど不要です)
          //すべてのタグを一時無効
          //var content = entry.content.split('<').join('&lt;');
          //imgタグのみ許可
          //content= content.split('<img').join('&lt;img');
    
        //RSSの各タイトル
        var div = document.createElement("div");
        div.appendChild(document.createTextNode(entry.title));
        
         //起動用リンク
        var a=document.createElement("a");
        a.setAttribute("id","testLink"+i);
        a.setAttribute("href","javascript:outputData('"+a.id+"')");
        a.appendChild(document.createTextNode("[+]"));
        div.appendChild(a);
        
         //出力用DIV
        var d=document.createElement("div");
        d.setAttribute("id",a.id+"d");
        d.style.display="none";
        d.innerHTML=entry.content;
        div.appendChild(d);
        
        
        container.appendChild(div);
      }
    }
  });
}

//window.onloadのエミュレーション(引数initializeを実行します)
google.setOnLoadCallback(initialize);

</script>
</head>
<body>

<!-- ここへ出力 -->
<div id="feed"></div>

</body>
</html>

JSON形式

Google AJAX Feed API は3つの形式で結果を返すことができます。JSONとXML、そしてJSONとXMLを結合したタイプです。デフォルトで、APIはJSON形式で返します。今回は、JSONを利用します。 GAF APIのフォーマットについては、詳しくは、ここに解説があります。

GAF APIがサポートするRSSフォーマットは、Atom 1.0 、 Atom 0.3 、 RSS 2.0 、 RSS 1.0 、 RSS 0.94 、 RSS 0.93 、 RSS 0.92 、 RSS 0.91 、 RSS 0.9 です。GAF APIのJSONのフォーマットでは、異なるRSSフォーマットを互換させるオブジェクトが提供されています。

たとえば、AtomやRSSの<title>要素は、上のソースではentries[]配列下のentry.titleで取り出しており、 <content> または <summary> あるいは <description>要素はentry.contentで取り出しています。各要素とプロパティの対応については、JSON Result Formatをご参照ください。

次は、GAFのキャッシュなどについてです。次ページ

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！