プロダクトマネージャーに技術スキルを教える、crawlers_html/css_WEB-ITnose を作成するための段階的な Web ページ分析-htmlチュートリアル-php.cn

プロダクトマネージャーに技術スキルを教える、crawlers_html/css_WEB-ITnose を作成するための段階的な Web ページ分析

WBOY

リリース： 2016-06-21 08:47:51

オリジナル

1349 人が閲覧しました

【記事概要】クローラーとは簡単に言うとスクリプトプログラムです。スクリプトと言えば、時間がかかり、労力がかかり、エラーが発生しやすいタスクに遭遇した場合、使用するコマンドをスクリプトに記述して、コンピューターに自動的に実行させることができます。

【関連おすすめ】

プロダクトマネージャーにテクノロジーを教える｜上位互換性、下位互換性

プロダクトマネージャーにテクノロジーを教える｜これはプロダクトマネージャーは要件の「ステートマシン」をどのように提案すべきか

プロダクトマネージャーにテクノロジーを伝える｜富明のテクノロジー三部作の「デザインパターン」

プロダクトマネージャーにテクノロジーを伝える

テクノロジー丨行列がなくて怖くないですか？

プロダクトマネージャーにテクノロジーについて語る | 要件を上げる正しい方法とは

すべての記事を PDF にまとめるという前の記事の計画をまだ覚えていますか?今日、私たちは最初の一歩を踏み出す準備ができています。

記事を自動的に整理するためにクローラーを使用することに決めたので、まずクローラーとは何かを理解する必要があります。端的に言えば、クローラーはスクリプトプログラムです。スクリプトと言えば、時間がかかり、労力がかかり、エラーが発生しやすいタスクに遭遇した場合、使用するコマンドをスクリプトに記述して、コンピューターに自動的に実行させることができます。テストの学生が言及する自動化スクリプトと、運用保守の学生が言及する環境構成スクリプトはすべてこれを意味します。スクリプトには、最初のステップで何を行うか、次に何を行うか、そして最後に何を行うかをコンピュータに指示する多くのコマンドが次々に含まれています。

ここで、私たちの目標は非常に明確です。それは、コンピューターに「プロダクトマネージャーへのテクノロジーの教育」のすべての過去の記事を段階的に PDF に保存させるクローラースクリプトを作成することです。

歴史的な記事はどこで見つけられますか?たまたま、WeChat 公式アカウントのフォローインターフェイスには、履歴メッセージを表示するリンクがあります。

このページには毎回 10 件の記事が表示され、通常はさらに 10 件の記事が読み込まれます。探しているのは各記事の URL アドレスです。すべての記事の URL がわかれば、各記事のコンテンツと画像をダウンロードし、さらに加工して PDF にすることができます。

これを行うには、ページを長押ししてブラウザで開き、アドレスバーの URL をコピーしてコンピュータに送信し、Chrome で開きます。 Chromeを使う最大のメリットは、Webページのソースコードを直接閲覧できる「開発者ツール」があることです。 command+option+L を押して開発者ツールを開くと、この Web ページのソースコードが表示されます。私たちが探しているものは、これらの乱雑な HTML コードの中に隠されています。

HTML ソースコードから必要な記事リンクを見つけるにはどうすればよいですか?

これは HTML の構造から始まります。 HTML は Hypertext Markup Language の略で、いわゆるマークアップとは、多くのタグを使用して Web ページを記述することを意味します。で始まりで終わる記号がタグであることがよくあります。これらのタグは通常、ペアで表示されます。また、タグをタグ内にネストして階層関係を表すこともできます。最も外側の HTML タグが最も大きく、次に見出しと本文、レイヤーごとに続き、最後にテキストの段落とリンクが続きます。この人は html と呼ばれるもので、頭があり、体の上に手があり、手には指があります。

もう少し詳しく、よく使用されるタグをいくつか紹介します:

1. Web ページ上の多くの重要な情報がここで宣言されます。たとえば、タイトルは

の下ので定義されます。 Web ページで使用される CSS スタイルは、<head> の下の <style> で定義できます。また、作成した JavaScript コードは、<head> の下の <script> でも定義できます。 <ul>2. 。そこには多くのものが含まれており、基本的に、テキスト、画像、リンクなど、私たちが見ることができるものはすべてその中にあります。例: <li> </li> <li> は段落を表します </li> <li><h1> はテキストの段落のタイトルです </li> <li> <a> </li> <li> <li> </li><form> はブロックです</ul> HTML タグを理解するにはどうすればよいですか?実はとてもシンプルで、ただの木です。 <html> はツリーのルートであり、ルートから <head> と <body> が分岐し、分割できなくなるまで各ブランチに新しい分岐が追加されます。これは、私たちのコンピュータに保存されているファイルに似ています。電子書籍「21 日間で学ぶ C++」があり、D ドライブの CS フォルダーと Study フォルダーに保存されているとします。スタディフォルダには、CS フォルダに加えて、GRE や島国文化など、別のブランチシステムを表すディレクトリもあります。これも木です。木の各葉には根から到達できるパスがあり、コンピューターが見つけやすくなっています。 本題に戻り、これらの基本的な知識を踏まえて、WeChat の歴史的なニュースページを見てみましょう。一番外側の <html> タグから始めて、<body> を真ん中に置いてレイヤーごとに展開し、最後に <a> タグを見つけます。。この URL をコピーし、新しいタブで開き、それが本当に記事のアドレスであることを確認します。 Web ページの構造とタグを分析して必要な記事の URL を見つけたので、このプロセスをシミュレートするクローラーを作成できます。クローラーが Web ページを取得したら、正規表現を使用して <a> タグを見つけることもできます。ただし、結局のところ、このページには 10 件の記事しかありません。遅延読み込みメカニズムを研究し、クローラーが残りの記事を自動的に見つけられるようにする方法を見つける必要があります。これには、ネットワークパケットキャプチャに関する知識が必要になります。後で議論します。 WeChat 公開アカウントの追加へようこそ: プロダクトマネージャーに技術スキルを教えます この記事は Product Yibai によって推奨され、紹介されています 記事ソース : WeChat 公開アカウント: プロダクトマネージャーに技術を教える (ID: pm_Teacher) 記事の著者: Guoguo フレンドリーリマインダー: ソースが次の場合間違ってマークされている場合は、QQ: 2977686517 にご連絡ください。時間内に修正されました。ご理解とご支援に感謝します。 公式 Weibo @product100 と WeChat 購読アカウント chanpin100ghsd をフォローしてください。サプライズがあるでしょう! </ul>