2008年1月12日土曜日

pipesを使ってみる(後編)

昨日のエントリの続き

今回は外部から作成したpipesを使用する方法の説明。
  1. 作成したpipesを保存したら、右上の「Back to My Pipes」をClick.
  2. 作成したpipesの一覧があるので、それをClick।
  3. 「Edit Source」「Delete」「Publish」「Clone」とメニューが並んでいるので、「Publish」を選択。
  4. ダイアログで何か聞いてくるので、「OK」。
  5. これで外部から使用できるようになる。
  6. 外部から使用するときにリクエストするURLは「Use this Pipe」カテゴリの「More options」をClickすると、「Get as RSS」やら「Get as JSON」などがある。例えば次のよぅなURLを取得できる。
    RSS
    http://pipes.yahoo.com/pipes/pipe.run?_id=45d90055b64c3059e936c5eb8367d620&_render=rss
    JSON
    http://pipes.yahoo.com/pipes/pipe.run?_id=45d90055b64c3059e936c5eb8367d620&_render=json
  7. 今回は一覧を表示したいのでJSONで取得してHTMLで表示することにする。
  8. めちゃんこ単純なサンプルを書くと次のようなカンジ。
    <!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>
    <script type="text/javascript"><!--
    function buildDom(data) {
      var domDiv = document.getElementById("allitems");
      var domUl = document.createElement("ul");
      domDiv.appendChild(domUl);
      var intCount = data.count;
      for(var i = 0; i < intCount; i++) {
        var domLi = document.createElement("li");
        domLi.appendChild(document.createTextNode(data.value.items[i].title));
        domUl.appendChild(domLi);
      }
    }
    function load() {
      var s = document.createElement('script');
      s.charset = 'utf-8';
      s.src = 'http://pipes.yahoo.com/pipes/pipe.run?_id=45d90055b64c3059e936c5eb8367d620&_render=json&_callback=buildDom'; 
      document.body.appendChild(s);
    }
    --></script>
    </head>
    <body onload="load();">
    <h1>全てのエントリ</h1>
    <div id="allitems"></div>
    </body>
    </html>
  9. 実行結果は以下のよぅなカンジ。

コメントを投稿