ホームページ作成について質問です。

指定したURLのHTMLからテキストや画像は抜きで、スクリプトの<SCRIPT ~~></script>の部分のみを抽出し自サイトに張り付けることは可能でしょうか?。複数ある場合はすべて抽出して貼り付けたいです。

回答の条件
  • 1人5回まで
  • 登録:2011/10/20 01:57:06
  • 終了:2011/10/20 12:28:32

ベストアンサー

id:Cherenkov No.2

Cherenkov回答回数1502ベストアンサー獲得回数4922011/10/20 06:39:22

ポイント290pt

YQLを使えば楽にできます。(サーバサイドのプログラムが組めるのならスクレイピングでぐぐってください)

YQL Console: select * from html where url=”http://q.hatena.ne.jp/1319043423” and xpath=”//script”

select * from html
  where
    url="http://q.hatena.ne.jp/1319043423"
      and
    xpath="//script"

対象サイトのURLと<scriptを取ってくるようにXPathを書いて、JSON、コールバック関数名を設定してTESTボタン。

うまくいけば下に取得結果が表示されます。その下にJSONP用のURLがあるのでそれを使います。



人力検索はてなの<scriptを表示するサンプル。

DEMO: http://jsfiddle.net/ukUhw/

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript">
function cbfunc(e) {
    //console.log(e) //firebugで見てみよう
    var scripts = e.query.results.script;
    for (var i=0; i<scripts.length; i++) {
	var src = scripts[i].src ? scripts[i].src : scripts[i].content;
	console.log(src);
	var textarea = document.createElement('textarea');
	textarea.value = src;
	document.body.appendChild(textarea);
    }
}
</script>
</head>
<body>
<script type="text/javascript" src="http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%0A%20%20where%0A%20%20%20%20url%3D%22http%3A%2F%2Fq.hatena.ne.jp%2F1319043423%22%0A%20%20%20%20%20%20and%0A%20%20%20%20xpath%3D%22%2F%2Fscript%22&format=json&callback=cbfunc"></script>
</body>
</html>

これだとただソースを表示しているだけなので、<scriptを動的に挿入するサンプル。

人力検索はてなだとうまくいかなかったので、wikipediaに変えています。

(外部スクリプトが相対パスになっている等)

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript">
function cbfunc(e) {
    var scripts = e.query.results.script;
    for (var i=0; i<scripts.length; i++) {
	var src = scripts[i].src ? scripts[i].src : scripts[i].content;
	var script = document.createElement('script');
	script.type = 'text/javascript';
	scripts[i].src ? script.src = 'http:' + src : script.innerHTML = src;
	document.head.appendChild(script);
    }
}
</script>
</head>
<body>
<script type="text/javascript" src="http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%0A%20%20where%0A%20%20%20%20url%3D%22http%3A%2F%2Fja.wikipedia.org%2Fwiki%2F%25E3%2583%25A1%25E3%2582%25A4%25E3%2583%25B3%25E3%2583%259A%25E3%2583%25BC%25E3%2582%25B8%22%0A%20%20%20%20%20%20and%0A%20%20%20%20xpath%3D%22%2F%2Fscript%22&format=json&diagnostics=true&callback=cbfunc"></script>
</body>
</html>


単純にscriptを追加しても動かなかったりするので、対象のサイトに合わせてチューニングする必要はあります。もし他人が管理しているサイトのスクリプトを読む場合は任意のコードを仕込むことができるのでやめたほうがいいと思います。



参考:

米 Yahoo! が SQL っぽく色んなデータを取ってこれるAPIを出した - てっく煮ブログ

その他の回答(1件)

id:swtn0729 No.1

わんわんお回答回数46ベストアンサー獲得回数92011/10/20 02:09:49

ポイント10pt

不可能ではありません。右クリック→ソースの表示で出して、その部分だけコピペすれば大丈夫でしょう。

ただ、サイトの仕様の違いによっ少手直しする必要が出てきますから、単にコピペして、というのはあまりお勧めしません。中身にもよりますが、場合によってはかなり面倒です。

id:Cherenkov No.2

Cherenkov回答回数1502ベストアンサー獲得回数4922011/10/20 06:39:22ここでベストアンサー

ポイント290pt

YQLを使えば楽にできます。(サーバサイドのプログラムが組めるのならスクレイピングでぐぐってください)

YQL Console: select * from html where url=”http://q.hatena.ne.jp/1319043423” and xpath=”//script”

select * from html
  where
    url="http://q.hatena.ne.jp/1319043423"
      and
    xpath="//script"

対象サイトのURLと<scriptを取ってくるようにXPathを書いて、JSON、コールバック関数名を設定してTESTボタン。

うまくいけば下に取得結果が表示されます。その下にJSONP用のURLがあるのでそれを使います。



人力検索はてなの<scriptを表示するサンプル。

DEMO: http://jsfiddle.net/ukUhw/

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript">
function cbfunc(e) {
    //console.log(e) //firebugで見てみよう
    var scripts = e.query.results.script;
    for (var i=0; i<scripts.length; i++) {
	var src = scripts[i].src ? scripts[i].src : scripts[i].content;
	console.log(src);
	var textarea = document.createElement('textarea');
	textarea.value = src;
	document.body.appendChild(textarea);
    }
}
</script>
</head>
<body>
<script type="text/javascript" src="http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%0A%20%20where%0A%20%20%20%20url%3D%22http%3A%2F%2Fq.hatena.ne.jp%2F1319043423%22%0A%20%20%20%20%20%20and%0A%20%20%20%20xpath%3D%22%2F%2Fscript%22&format=json&callback=cbfunc"></script>
</body>
</html>

これだとただソースを表示しているだけなので、<scriptを動的に挿入するサンプル。

人力検索はてなだとうまくいかなかったので、wikipediaに変えています。

(外部スクリプトが相対パスになっている等)

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript">
function cbfunc(e) {
    var scripts = e.query.results.script;
    for (var i=0; i<scripts.length; i++) {
	var src = scripts[i].src ? scripts[i].src : scripts[i].content;
	var script = document.createElement('script');
	script.type = 'text/javascript';
	scripts[i].src ? script.src = 'http:' + src : script.innerHTML = src;
	document.head.appendChild(script);
    }
}
</script>
</head>
<body>
<script type="text/javascript" src="http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%0A%20%20where%0A%20%20%20%20url%3D%22http%3A%2F%2Fja.wikipedia.org%2Fwiki%2F%25E3%2583%25A1%25E3%2582%25A4%25E3%2583%25B3%25E3%2583%259A%25E3%2583%25BC%25E3%2582%25B8%22%0A%20%20%20%20%20%20and%0A%20%20%20%20xpath%3D%22%2F%2Fscript%22&format=json&diagnostics=true&callback=cbfunc"></script>
</body>
</html>


単純にscriptを追加しても動かなかったりするので、対象のサイトに合わせてチューニングする必要はあります。もし他人が管理しているサイトのスクリプトを読む場合は任意のコードを仕込むことができるのでやめたほうがいいと思います。



参考:

米 Yahoo! が SQL っぽく色んなデータを取ってこれるAPIを出した - てっく煮ブログ

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません