昨日のエントリの続き
今回は外部から作成したpipesを使用する方法の説明。
- 作成したpipesを保存したら、右上の「Back to My Pipes」をClick.
- 作成したpipesの一覧があるので、それをClick।
- 「Edit Source」「Delete」「Publish」「Clone」とメニューが並んでいるので、「Publish」を選択。
- ダイアログで何か聞いてくるので、「OK」。
- これで外部から使用できるようになる。
- 外部から使用するときにリクエストする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
- 今回は一覧を表示したいのでJSONで取得してHTMLで表示することにする。
- めちゃんこ単純なサンプルを書くと次のようなカンジ。
<!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> - 実行結果は以下のよぅなカンジ。
0 件のコメント:
コメントを投稿