見ているページのHTMLソースを表示するブックマークレット（Yahoo!Pipes版）

投稿日：2007年12月13日

この辺のエントリーに触発されてブックマークレット作りました。
・URLを渡すとページの内容(htmlソース)をJSONPとかで取得できるAPIをYahoo! Pipesで作った(管理人日記) – むぅもぉ.jp
・Big Sky :: JSONでHTMLを取得するYahoo! Pipesが凄い
 Show HTML Source
↑のリンクをブックマークしてください。

簡単に仕組みを紹介します。

指定されたURLのHTMLソースを返すPipesを作る

これは、前述のむぅもぉ.jpさんのほぼそのままコピーです。
http://pipes.yahoo.com/yager/page_loader
んで、これをJSONPで取得すればOK

ブックマークレットで呼ばれている外部JSの中身

http://labs.creazy.net/bookmarklet/pipes_show_source.js

/**
* show HTML source (powered by Yahoo!Pipes)
* @author takahito.yagami[at]gmail[dot]com
*/
/**
* callback function
* get HTML source from pipes, insert to DIV
*/
function __showSource(json) {
var html
= '<p style="text-align:right;margin:5px 10px 0 10px;padding:0;">'
+ '<a href="javascript:document.body.removeChild(document.getElementById(\'__source_viewer\'));void(0);">close</a>'
+ '</p>'
+ '<text'+'area style="margin:5px 10px 10px 10px;border:1px solid #000000;width:95%;height:85%;background:#FFFFFF;color:#000000;font:12px monospace;">'
+ json.value.items[0].content.replace(/</g,'<').replace(/>/g,'>')
+ '</text'+'area>';
document.getElementById('__source_viewer').innerHTML = html;
}
// prepare HTML source viewer
document.body.innerHTML
+= '<div id="__source_viewer" style="position:absolute;z-index:99999;top:5%;left:5%;width:90%;height:90%;background:#EEEEEE;">loading ...</di'+'v>';
window.scrollTo(0,0);
// call pipes
var s=document.createElement('script');
s.charset='UTF-8';
s.src='http://pipes.yahoo.com/yager/page_loader?_render=json&_callback=__showSource&url='+encodeURIComponent(location.href);
document.body.appendChild(s);

まあ、細かい説明はしないのでソース読んでもらうとして、
　・表示用のdiv、textareaを作成
　・pipesに今見ているページのurlをわたしてHTMLソースを受け取る
　・textareaに流し込む
な感じの作りです。

使えないケース

Yahoo!PipesのFetch Pagesを使っているので、その辺りで制限事項があります。
　・ログインが必要なページなどYahoo!Pipesから見えないページは表示できません。
　・script, link など一部のメタタグは表示されません（Fetch Pagesの仕様らしい）
というわけで、誰かの役に立つでしょうか・・・。

見ているページのHTMLソースを表示するブックマークレット（Yahoo!Pipes版）

指定されたURLのHTMLソースを返すPipesを作る

ブックマークレットで呼ばれている外部JSの中身

使えないケース

関連エントリー