HTMLからの情報取得について

仕事でWEBから情報を取得する必要があり、
HTMLを調べておりますがどうしてもわからないことがあり困っております。

例えば下のURLのページはスクロールをするとどんどん商品が検索され
増えていっています。
https://www.lyst.com/shop/coats/

ですが、HTMLを表示しても全ての商品がHTML上にありません。
スクロールして出てきた分はどのように取得できるのでしょうか？

分からないことだらけで質問の仕方も合っているかわかりません。
「ここを調べてみなさい」など方向性だけでも教えていただけると助かります。
宜しくお願い致します。

No.3 ベストアンサー 回答者： zircon3 回答日時： 2016/07/08 09:09

No.2です。

> すみません。こちらのサイトは無限スクロールではないのですが2ページ目以降のHTMLが取得できません。
> https://www.missguided.co.uk/dresses#dir=desc&or …
> これも同じ技術でしょうか？

　指定条件に合った商品の一覧を1画面目、1画面目で「次ページ」とか「もっと」とかのボタンクリックすると2画面目・・・と表示するのはもっと簡単な方法で出来ます。
　一番簡単なのはサーバ側のプログラムで以下のような処理を行うことです。

(1) 1画面目のHTMLの送出処理
　1)Webブラウザからの指定条件を受け取り、条件に合った商品を検索し、商品番号順等に並べた結果をデータベースから抽出する。
　2)上記の結果のうち先頭から予め決められた（あるいは1)でWebブラウザから受け取った1画面の表示件数にしたがった）件数分の商品情報を掲載した画面のHTMLを送出する。
　3)送出する画面（またはHTTP Cookie）に1画面の表示件数、1画面目であること（または画面の一番下にある商品の商品番号など）や、場合によっては1)で受け取った指定条件を仕込む。

(2) 2画面目以降のHTMLの送出処理
　1)Webブラウザから現時点でWebブラウザに表示されている画面に(1)-3)で仕込んだ情報を受け取る。
　2)受け取った情報にしたがって次に表示すべき表新情報をデータベースから抽出する。
　以降の処理は基本的に(1)-2以降と同じ。

　で。(1)-1)での指定条件に合った全商品の情報を得ましたが、jQueryなどを用いて動的に画面に商品を足し込んだり2画面目といった画面遷移をさせる際に再度同じ検索を行うのか、(1)-1)での結果をサーバ側に何らかの保存して置き、同じ利用者から「次」とか「もっと」という要求を受けた際には再度データベースを検索せずに保存している情報を用いるのかとかいったとことも処理のポイントです。
　そこは全体の処理速度を重視するんだとか、商品の更新頻繁なんだとか、そういった各種の「都合」も加味して決めねばならないところです。

　といったようなことも実システムとするにはあるわけですが。。。
　まず「こんな表示機能のWebサイトにしたい」という表示機能をまとめ、それはどんな処理の流れで実現出来るかを考える技術的裏付けに基づいた力（思考力あるいは設計力）が必要です。
　HTMLは単にWebブラウザ上に表示する1枚の画面デザインを記述する言語でしかなく、実際の動き、、、この場合「一覧画面の一番下まで来たら自動的に続きを足し加えるとか、次のページや前のページに移動するボタンがあり利用者がそれらをクリックしたら画面が遷移するとか」はWebブラウザに表示された画面（HTML）に組み込まれたスクリプトやサーバ側に置かれたプログラムの処理です。これらはHTMLではなく様々なプログラム言語で記述されるものです。
　ですので動的にデータを表示するWebサイトを作るにはHTMLに加えWebアプリケーションの開発言語を知らねばならないでしょうし、その前にまずHTTP通信とはどんなものか、利用者を識別するなご動きを制御するための情報をWebブラウザ側に伝え、それを受け取るためにはどんな機能（仕組み）があるのかといった基本的なことを学ぶことが必要でしょう。

参考まで。

No.2 回答者： zircon3 回答日時： 2016/07/07 10:29

スクロールダウンして画面下端へ行った際のイベントを取得し、そのイベント取得をきっかけに起動されたスクリプト内でhttp通信を行い新たな情報（HTML文）を取得しているものです。

　Googleマップなどの地図サイトで、画面を上下左右に移動させるとその分の地図が表示されるとの基本的には同じ仕組みです。
　とりあえず以下のような所で「jQuery」を学んでみるとよいと思います。

http://www.html5-memo.com/jquery-tips/jquery13/

　書籍もあります。
　以下に紹介されているものなどが結構よいように思います。

http://kensawai.com/blog/jquery-%E3%81%8A%E3%81% …

参考まで。

この回答へのお礼

ご回答ありがとうございます。
jQueryというライブラリを使っているのですね。
GoogleマップやTwitterで使われている技術とのことで
身近だったのに知りませんでした。
非常に勉強になりました。
jQueryを学んでみます。

すみません。こちらのサイトは無限スクロールではないのですが2ページ目以降のHTMLが取得できません。
https://www.missguided.co.uk/dresses#dir=desc&or …
これも同じ技術でしょうか？

宜しくお願い致します。

お礼日時：2016/07/08 01:07

No.1 回答者： Ogre7077 回答日時： 2016/07/07 10:01

ページを開く

Web ブラウザの開発ツールなどを開く
ツール内のネットワーク表示を開く
ページを操作して「どんどん商品が検索」させる
ネットワーク表示に、新たに通信が発生しているかを検証する
特に XHR (XmlHttpRequest) または JS (JavaScript) の通信内容に注目すること

この回答へのお礼

Firefoxの開発ツールを使ってみましたが
まずは開発ツールの使い方を調べてみます。
ご回答ありがとうございました。

お礼日時：2016/07/08 01:07