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

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

ただいまの
回答率

90.38%

  • HTML

    12273questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    8584questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Ajax

    1388questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

取得した情報を一つのテキストにまとめたい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 506

garaji

score 1

別ドメインのソースから、必要な情報だけ取得したいと思っています。
http://sterfield.co.jp/demo/hoshino/55/
こちらのサイトを元に取得情報を個別に返すのではなく、
テキストエリアにまとめて出力する方法を思案しています。

試してみたいくつかの方法をまとめておきます。
単純に足してみました。

$( "#text" ).val( r.find( "title" ).html() + r.find( "meta[name='description']" ).attr( "content" ) );

値を別に用意して以下のようにまとめました。

var b = "";
  b += "r.find( 'title' ).html()";
  b += "r.find( 'meta[name='description']' ).attr( 'content' )";
  $( "#text" ).html(b);


もう一つ試しました。

var tit = $( "#title" ).val( r.find( "title" ).html() );
var des = $( "#description" ).val( r.find( "meta[name='description']" ).attr( "content" ) );
var b += tit + des;


何れも情報の取得自体が失敗でした。
ご教授いただきたいです。

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

+2

取得した情報を連想配列や配列に格納(この時点でほぼ1つにまとまっています)。
その後必要な加工をして、テキストエリアに出力すればいいと思います。

紹介しているサイトの場合、取得した情報を各インプットタグのvalue上に入れているからそうなっているだけで、どう出力するかは書き方次第でどのようにでもできます。

 取得

サンプルコードの取得の部分はこの箇所です。
ここはそのまま使えます。

r.find( "title" ).html();

 出力

出力はこの部分です。
ここを変えます。

$( "#title" ).val(value);

上記取得と出力を同時に行っているのが下記のコードの構造、ということです。

$( "#title" ).val( r.find( "title" ).html() );

 アプローチ

サンプルコードでは、取得と出力を同時に行っています。
まず、取得したものを変数に代入しましょう。

// 出力先の用意
var $textarea = $('textarea');

// 取得したものを変数に代入
var title = r.find( "title" ).html();
var description = r.find( "meta[name='description']" ).attr( "content" );

// 出力用テキストに加工
var output = title + descriptrion;

// 出力
$textarea.text(output);

/* 別パターン */
// 取得したものを配列にする
var ary = [title, description];

// 配列結合
var output = ary.join(" ");

// 出力
$textarea.text(output);

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/03/28 02:31

    本当に初歩的な問題で申し訳ございません。
    ご指摘のとおり、どう出力するかの具体的方法が自分の知識ではうまくいかず困っています。

    キャンセル

  • 2016/03/28 10:14

    回答に追記しました。分からないことがあればご質問ください。よろしくお願いします。

    キャンセル

  • 2016/03/28 11:02

    配列結合処理まで行うと、ようやくできました。
    解説まで頂き、ありがとうございます。
    勉強になりました。

    キャンセル

0

http://sterfield.co.jp/demo/hoshino/55/ 
こちらのサイトが最もイメージと近い

この参考サイトのソースを読んでみましたか?

// title
$( "#title" ).val( r.find( "title" ).html() );


例えばこの部分

r.find( "title" ).html() で取り出した内容を $( "#title" ).val(内容); で指定の input に表示しています。

  • 取り出したい内容は同じ
      → 違ったとしても、参考サイトと同様の取り出し方で増やせる
  • 出力先は違う
      → けど、やはり出力先の指定の仕方も既に参考サイトに書いてある

やりたいことからすると… あとは好きな表示形式に加工して出力すれば完了ですかね?


参考サイトのソースは読んでみましたか?
ローカルにコピペ(または写経) して動かしてみましたか?
望んだ挙動になるように、改造してみましたか?
どこまで試し、どこがどう分からなかったでしょうか?

シンプルだったので先に回答を書いてしまったのですが…
分からないなりにコードを読むとか真似をしてみるとか改造してみるとか大切です。
そしてただ「分からない」ではなく、「ここまでできたが、こういう理由でここが分からない」というのも大事です。
私の↑の説明もだいぶ端折っているので、まずは試してみてください。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/03/28 03:23

    ありがとうございます。
    思考例をまとめておきます。

    キャンセル

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

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

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

  • HTML

    12273questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    8584questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Ajax

    1388questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。