質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.58%

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

受付中

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 7,214

score 11

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

「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のライブラリを引用してアクション(?)のスピードを変更する程度です。

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

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

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • munyaX

    2015/04/15 13:37

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

    キャンセル

  • okayu3

    2015/05/09 00:22

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

    キャンセル

回答 1

+2

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

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

><table class="tblDiaDetail">のすべてを取得する方法と、 
var tbldiadetail = $(".tblDiaDetail").html();
ってやれば「すべて取得」出来ます。

>時刻である<td class="hour">に入っている「10」を取得するためにはどのようにすればいいのでしょうか。 
意味がわからないですが10時台のを取得していって事ですかね?
IDで[hh_]での部分が何時台のかを示しているようなのでHTMLで丸ごと取得したいなら
$("#hh_10").html();
テキストだけ取得したいなら
$("#hh_10").text();
ですね。
10


0●[L]旭


3岩


23[区]


40[区]岩


46
こんな感じですか?

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/04/15 03:26

    ご回答ありがとうございます。

    「勝手ですが…」と自分で言っていましたが…

    ちょっと早急に処理しなければならなかったので、質問させていただきましたが、
    諦めきれずに、結局挑戦してみました。

    現在am3:00を過ぎましたが、「何とかなるかも」というところまでは成果がありました。

    参考になったのは、
    http://jp.finalfantasyxiv.com/lodestone/character/1414703/blog/1879582/
    のサイトでした。

    どうにかこうにかターゲットのデータを抽出するだけのところまでにはなり、
    今、landy77さんのご回答に気づいたところです。



    というか…そのようにするのですね…

    自分なりに試行錯誤してみたものの、
    var tbldiadetail = $(".tblDiaDetail").html();
    の最初の「var tbldiadetail = 」の部分がまったく無知でした。

    「jQuery 日本語リファレンス」や、入門向けの解説サイトを読んだものの、なかなか理解できずにもがいていますが、
    >jQueryでセレクタの勉強くらいはしましょう。
    のお言葉には恥ずかしくもあり、嬉しかったです。

    なんとか、頑張ります。

    どうしても分からなくなった時は、アドバイスをいただけましたら幸いです。

    キャンセル

  • 2015/04/15 20:33

    「至急求むでコピペできるサンプル」という一文でサンプルが投下されたらそのまま使いそうな雰囲気が出ているのがなかなか回答しにくいですよね。
    それなら仕事の依頼として少額でも報酬くださいな……的な。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.58%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る