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

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

新規登録して質問してみよう
ただいま回答率
85.50%
スクレイピング

スクレイピングとは、公開されているWebサイトからページ内の情報を抽出する技術です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Q&A

解決済

2回答

272閲覧

WEBページのデベロッパツールに自動で入力し、返ってきた結果を取得するには?

moscow3

総合スコア201

スクレイピング

スクレイピングとは、公開されているWebサイトからページ内の情報を抽出する技術です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

0グッド

1クリップ

投稿2017/10/22 00:17

編集2017/10/22 05:23

タグがあっているかはわかりませんが・・・
amazonの商品ページでコンソールに次のようなコードを入力すると各商品の題名が返ってくるそうです。

// LoadJquery //Jqueryのロード !function () { var script = document.createElement("script"); script.setAttribute("src", "//code.jquery.com/jquery-2.0.0.min.js"); document.body.appendChild(script); }();
jQuery(document).ready(function($){ $('div > div > div.a-row.a-spacing-none > a > h2').each(function(){ console.log( $(this).text() ); }); });

が、これを、 自分のサイトでURLをinputし、create elementでそのページの商品名の一覧を出す ということはできるのでしょうか?

つまり、

html

1<body> 2<input type="text" id="user-name" size="40" maxlength="20"> 3<button id="assessment">一覧表示!</button> 4<div id="result-area"></div> 5</body>

で、inputにアマゾンの好きな商品ページのURL(最終的には商品名にしたいですが、それに関しては別の所で質問させていただきます)を入力すると、そのページにある商品の一覧をresult-area に表示したい ということです。

言っていることがわかりにくかったら指摘してください。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/10/22 02:20

「自分のサイトでURLをinputし」とは具体的にどういうことでしょうか。
moscow3

2017/10/22 05:23

やっぱりわかりにくかったですねw 質問を修正しました
guest

回答2

0

ベストアンサー

普通に$.getでアマゾンのページを取得しようとすると、ドメインが違うのでSame-Origin Policyに引っかかり取得できません。なので別の方法が必要です。

AmazonのProduct Advertising APIというのがありますが、アクセスキーやシークレットキーを発行しリクエスト時に使用する必要があるので、サーバー用のAPIのようです(間違っていたらご指摘ください)。なのでご自身のwebサーバーからAmazonのAPIにアクセスしクライアントに提供するプログラムを作る必要があります。

他の簡単な方法としては、Amazonのwidgetで検索機能があるものがあるので、それを貼り付けるだけです。

おすすめの方法ではないですが、AnyOriginなどの、どのURLもクロスドメインで取得できるようなプロキシサーバー的なものがあるのでそれを使うと外部サイトのページを取得できます。
Demo

投稿2017/10/22 07:43

karamarimo

総合スコア2551

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

moscow3

2017/10/22 16:50

なるほど。詳しくありがとうございました。ひとつづつ確かめていきます。 >おすすめの方法ではないですが、AnyOriginなどの、どのURLもクロスドメインで取得できるようなプロキシサーバー的なものがあるのでそれを使うと外部サイトのページを取得できます。 というのは、なぜ「おすすめの方法ではない」のでしょうか?
karamarimo

2017/10/22 17:01

1つはそのようなサーバーを信頼し頼る必要があるからです。しかしそのサーバーが本当にamazonのページからとってきたhtmlデータをそのままこちらに渡してくれるとは断定できません。またサーバーがいつまで維持されるかも分かりません。 もう1つは、APIを使う場合と比較するとクライアントはWebページ全体を取得する必要があり、さらにそれをパースしセレクタで特定の要素を取り出すとなるとクライアントの負荷が小さくないです。またあなたのウェブサイトを大量の人が閲覧するとAmazonのサーバーにも先述のサーバーにも負荷がかかります(たぶんAmazonは問題ないとは思いますが)。
karamarimo

2017/10/22 17:06

また、htmlから情報を抜き出す方法全般に言えることですが、ウェブページのデザイン変更などに伴いhtmlの構造が変わる、ということがいつ起こっても不思議ではありません。 つまり今の $('div > div > div.a-row.a-spacing-none > a > h2') というセレクタで欲しい情報が取り出せなくなることが十分起こりえます。自分で随時そのような変更をチェックしてjavascriptを更新する、というのはなんともぎこちない気がします。
moscow3

2017/10/22 17:50

わかりました。  ところで、amazonの <h2 data-attribute="mouseノートパソコン MB-B503E Celeron N3450/4GBメモリ/120GB SSD/Win 10" data-max-rows="0" class="a-size-base s-inline s-access-title a-text-normal">mouseノートパソコン MB-B503E Celeron N3450/4GBメモリ/120GB SSD/Win 10</h2> で、商品名(<h2></h2>に囲まれた部分) は取得することができたのですが、その<h2>タグのクラス名(class="a-size-base s-inline s-access-title a-text-normal")を取得することは可能でしょうか?
moscow3

2017/10/22 17:52

(負荷に関してはまず家族で使うレベルですので問題がないっていうのと、サーバー維持的な問題は確率的に低いと判断して、AnyOriginを使うことにしました)
karamarimo

2017/10/22 18:07 編集

意外にも、jQueryで直接全てのclassをリストで取得する方法はないみたいです。 ".attr('class')"だとスペースで結合された複数のclass名が取得でき、".attr('class').split(' ')"でリストを取得できます。 言い忘れていましたがAnyOriginの公式ページを見ると、使いすぎるとブロックされて、お金を払わないと解除されないらしいです。他のがいいなら、似たようなサイトは「anyorigin alternatives」とでも検索すればいろいろでてきます。
moscow3

2017/10/22 18:34

了解です! ところで、karamarimoさんは、要素を取得するときに 'div > div > div.a-row.a-spacing-none > a > h2' と表現(?)してましたが、正確には 'body > div > div > div > div > ul > li > div > div > div.a-row.a-spacing-none > a > h2' みたいな感じになると思います。これに関しては、どこまでの省略がOKなんでしょうか? (夜分遅くに失礼しました)
karamarimo

2017/10/22 18:51

> karamarimoさんは ... と表現(?)してました いえ、moscow3さんのコードのをコピペしただけです。 どのような意味でOKかにもよりますが、欲しい要素のみが手に入る限り、無駄に長くする必要はないと思います。 'body > div > div > div > div > ul > li > div > div > div.a-row.a-spacing-none > a > h2' だとモロにhtmlの構造に依存するので、自分ならなるべく内容を表すクラス名を使って"h2.s-access-title"とすると思います。 セレクタの最適化 https://learn.jquery.com/performance/optimize-selectors/
moscow3

2017/10/23 03:49

>いえ、moscow3さんのコードのをコピペしただけです。 そうでしたか・・ すみませんでした・・ ところで、 amazonのページのiデベロッパーツールを見る限り、 <h2 data-attribute="Logicool ロジクール ワイヤレス ミニマウス ホワイト M187WH" data-max-rows="0" class="a-size-base s-inline s-access-title a-text-normal">Logicool ロジクール ワイヤレス ミニマウス ホワイト M187WH</h2> となっていて、h2のクラス名は「 class="a-size-base s-inline s-access-title a-text-normal」になると思ったのですが「h2.a-size-base s-inline s-access-title a-text-normal とするとうまくいきませんでした。 なぜ、[h2.s-access-title]はうまくいってクラス名を全コピするとうまくいかないのでしょうか?
karamarimo

2017/10/23 03:57

htmlにおいてはクラス名はスペース区切りで書くと決まっております。なのでその要素は合計4つのクラスを持っていることになります。 セレクタにおいて「classAを持ちかつclassBを持つ」というのは".classA.classB"とスペースを空けずに書きます。スペースを空けた"selectorA selectorB"は「selectorAの子孫要素でselectorBにマッチする要素」となってしまいます。
moscow3

2017/10/23 04:01

なるほど。 迅速で、丁寧な回答ありがとうございました。 今後また、困ったときは質問させていただくかもしれないので、その時はよろしくお願いしますm(-_-)m
guest

0

デベロッパツールに入力したコードはそのページ上で実行されるので情報を採れますが、自作のHTMLから同じ方法でAmazonの情報は取得できません。

商品情報の検索APIが有ると思いますので、「Amazon API JavaScript」で検索してみてください。

投稿2017/10/22 06:31

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問