URLを渡すとページの内容(htmlソース)をJSONPとかで取得できるAPIをYahoo! Pipesで作った(管理人日記) - むぅもぉ.jp
Big Sky :: JSONでHTMLを取得するYahoo! Pipesが凄い
このAPIで、SafariのWebクリップみたいなことができるじゃないかと思い、ちょっとブックマークレットを作ってみた。
ブックマークレット何!?って人は、こちらを参照。
いやぁYahoo! Pipesすごいな!!あと、ぷーるさんに感謝。
[Yahoo!Japanのトップニュース](このリンクをブックマーク)
実行すると、
こんな感じでYahoo!Japanのトップニュースが表示される。
Firefox2/Safari3/Opera9では動作OK。
ブックマークレットは作ったこと無かったので弾さんがやっていた
メタブックマークレットタイプでやってみた。
ブックマークレットのソース
-
javascript:(function(u){var s=document.createElement('script');s.charset='UTF-8';s.src=u;document.body.appendChild(s)})('http://www.ohmiyapatriots.com/blog/scripts/show_yahootopic.js')
スクリプトは↓
-
(function(){
-
var load_page = function(){
-
var url = 'http://www.yahoo.co.jp/';
-
var s = document.createElement('script');
-
s.charset = 'utf-8';
-
s.src = 'http://pipes.yahoo.com/poolmmjp/page_loader?url=' +
-
encodeURIComponent(url) + '&_render=json&_callback=show_yahoo_topic';
-
document.body.appendChild(s);
-
};
-
show_yahoo_topic = function(data) {
-
var div = document.getElementById('yahoo_topic') || create_element();
-
div.innerHTML = data.value.items[0].description.match(/<table.*\/table>/);
-
document.body.appendChild(div);
-
};
-
var create_element = function(){
-
var div = document.createElement('div');
-
div.id='yahoo_topic';
-
div.setAttribute("style","border:1px solid #9b72cf;background-color:#f1f1fd;" +
-
"width:224px;position:fixed;right:0px;top:0px;opacity: 0.8;");
-
return div;
-
};
-
load_page();
-
})()
JSONPで呼び出される関数がどうしてもグローバルじゃないと呼び出せないので
もし、ページにshow_yahoo_topicという関数あったら汚染されるけど、まー大丈夫だと思う。
何かうまくやる方法あったら教えてください。
あと、Yahoo!Japanのトップページからトピックだけ正規表現で
引っ張ってきてるんだけども、トピックの部分だけ改行しないで1行で記述されているので、
<table.*\/table>
だけで取って来れてびっくりした。
(.は改行文字を除いた文字にマッチする表現なので)
最近Yahoo!Japanがたまに新デザインでサイトを表示するので
もしかしたらうまく動かないかもしれないのでご免なさい。
こんなことができるよという一例としてみてください。
ほんとFetch Pageモジュールはすごい!!
色々できそう (;ﾟ∀ﾟ)
