【至急】jquery.xdomainajax.jsの使い方【困ってます】

プログラム等の知識は、ほぼ皆無です。

「jquery.xdomainajax.js」を使用して、
外部WEBサイトの中から、特定の項目を抽出して自分のサイトに表示したいのです。

■■■■準備したこと■■■■

＜＜jQueryの読み込み＞＞

http://code.jquery.com/jquery-1.8.2.min.js
から、jQueryは読み込んでいます。

＜＜参考にしたサイト＞＞
（サンプルコード）

http://highfivecreate.com/blog/course/tips/817.html
から、次のコードをコピペしました。

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="js/jquery.xdomainajax.js"></script> </head> <body> <h1>サンプル - 別ドメインの外部URLからidやclassなど特定の箇所を抜き出しサイトに表示する方法</h1> <div id="container"></div> <div id="header"></div> <div id="stock"></div> <script type=text/javascript> $(function() { $.ajax({ url: 'http://www.scenicbyway.jp/sv/jp/?graph', type: 'GET', success: function(data) { $('#container').html(data.responseText); $table = $('table', $('#container')); $('#header').html($table.parent().prev().html()); $('#stock').html($table.parent().html()); } }); }); </script> </body> </html>

単純にコピペしただけなので、きちんと情報を抽出してlocalで表示することができました。

■■■■分からない部分■■■■

コピペしたコードを見ても、どこをどう変更すればいいのか、
多くのサイトを調べましたが全くわかりません…

■■■■やりたいこと■■■■

① あるサイトから、特定の項目を抽出したい。
② 抽出する場所は、idまたはclassなどで指定したい。
③ その場所がtableなどで、class名が付与されていない場合は、「table」と指定することで処理したい。
④ 上記「③」のような場合でも、tableの親がdivなどで、そのdivにclass名が付与されている場合は、「.hoge table」のように指定して処理したい。
⑤ 上記「③」もしくは「④」のような場合であっても、tableの中の、tdをターゲットにする場合は、「n番目のtd」と指定することで処理したい。。
⑥ 上記「①~⑤」で抽出したデータを、自分のサイトに表示したい。
⑦ 抽出するデータは、テキストだけでなく、画像にも対応したい。
⑧ 自分のサイトに表示する際、CSSでレイアウトやデザインを自由に変更したい。

■■■■例として■■■■

例えば、
http://transit.loco.yahoo.co.jp/station/time/20220/?gid=51&pref=1&done=time
で、

<table class="tblDiaDetail">のすべてを取得する方法と、時刻である<td class="hour">に入っている「10」を取得するためにはどのようにすればいいのでしょうか。

また、抽出したデータを自分のサイトに合わせたデザインで表示することはできるのでしょうか。

この質問で前述した「＜＜参考にしたサイト＞＞」のコードによって表示された結果は、
元サイトのデザインをそのまま表示されていると思うのですが、CSSでデザインを変更したいのです。

つまり、時刻表のデータだけを抽出して、自分のサイトでtableやdiv、ulなどさまざまなタグによって自由に表示したいというのが希望です。

私のスキルは、CSSとHTMLは一応まんべんなく扱えますが、プログラムの知識は一切ありません。
せいぜい、jQueryのライブラリを引用してアクション(?)のスピードを変更する程度です。

お忙しいところを恐縮ですが、どなたかご教授いただけましたら幸いです。

追伸
至急解決しなければならないため、基礎から学ぶ時間はありません。
勝手ですが、コピペできるサンプルを希望します。

munyaX

2015/04/15 04:37

これはお仕事でやられているのですか？もしそうであれば対価を払って出来る方にお願いするべきではないかと。周りにいないのでしたら、最近はクラウドワークスなんかもありますし。

okayu3

2015/05/08 15:22

加えて、ライセンス上問題ありませんか？剽窃に値しないかとても心配です。クロスドメインがかなり制限されている理由をよく考えてくださいね。

行動規範の内容に同意します

回答1件

正直勝手すぎますよね（笑
至急って事は仕事なんでしょうが、何で至急解決しなきゃいけないのかもわからないし・・・
どのみちすぐに手詰まりするのが目に見えてるのでjQueryでセレクタの勉強くらいはしましょう。

丸投げされるのは嫌いなので無視すれば良いのですが、気にはなるので（それはそれで勝手だけどｗ）ヒントだけ。

<table class="tblDiaDetail">のすべてを取得する方法と、

lang
1var tbldiadetail = $(".tblDiaDetail").html();

ってやれば「すべて取得」出来ます。

時刻である<td class="hour">に入っている「10」を取得するためにはどのようにすればいいのでしょうか。

意味がわからないですが１０時台のを取得していって事ですかね？
IDで[hh_]での部分が何時台のかを示しているようなのでHTMLで丸ごと取得したいなら

lang
1$("#hh_10").html();

テキストだけ取得したいなら

lang
1$("#hh_10").text();

ですね。

lang
110
2
3
40●[Ｌ]旭
5
6
73岩
8
9
1023[区]
11
12
1340[区]岩
14
15
1646

こんな感じですか？

どのみちやろうとしてることは多分コピペで済ませられるレベルではないような気がしますが・・・

投稿2015/04/14 16:57

landy77

総合スコア1614

whiteprelude

2015/04/14 18:26

ご回答ありがとうございます。「勝手ですが…」と自分で言っていましたが… ちょっと早急に処理しなければならなかったので、質問させていただきましたが、諦めきれずに、結局挑戦してみました。現在am3:00を過ぎましたが、「何とかなるかも」というところまでは成果がありました。参考になったのは、 http://jp.finalfantasyxiv.com/lodestone/character/1414703/blog/1879582/ のサイトでした。どうにかこうにかターゲットのデータを抽出するだけのところまでにはなり、今、landy77さんのご回答に気づいたところです。というか…そのようにするのですね… 自分なりに試行錯誤してみたものの、 var tbldiadetail = $(".tblDiaDetail").html(); の最初の「var tbldiadetail = 」の部分がまったく無知でした。「jQuery 日本語リファレンス」や、入門向けの解説サイトを読んだものの、なかなか理解できずにもがいていますが、 >jQueryでセレクタの勉強くらいはしましょう。のお言葉には恥ずかしくもあり、嬉しかったです。なんとか、頑張ります。どうしても分からなくなった時は、アドバイスをいただけましたら幸いです。