複数の画像と説明を含む Web ページ上の画像に対応する説明またはタイトルを識別するために Javascript/jQuery をどのように使用できますか?
ページ タイトルは非常に簡単に抽出できますが、特にページに多くの画像が存在する場合、タイトルが画像に対応しない場合があります。
var title = document.title;
これは、Pinterest の Pin-it ブックマークレットによって成功したと思います。最も近いh1、h2、h3または画像の属性を見つけるアルゴリズムに関係していると推測し、アルゴリズムがページ上の画像の説明を識別できなかった場合はaltにフォールバックします。document.title
どんなアイデアでも大歓迎です！
これは、他のWebサイトのデータスクレイピング用です
OPは、拡張するための素晴らしい質問を提供しました。私は最近、新しいYahoo! _ _ _ _ Screen Video Player Web ページ。
私はその jsFiddle を書き直したので、Pinterest 固有のものであり、この jsFiddle をその jsFiddle とは非常に異なるものにするMetatag Object Numbers(詳細は後述) を直接使用しました。
全体的なプロセスには、Yahoo のクエリ言語と jQuery.ajax()関数を使用して、通常は Web ページのソースmetatagセクションで取得できる目的のスクレイピング データを取得することが含まれます。
まず、いくつかのことを説明させてください。
私が使用する Pinterest リンクは、ピン留めされたアイテムへの直接リンクになります。これは、ピン留めされたアイテムのみが多数含まれるホームページとは異なり、Web ページには、他の多くの小さなピン留めされたアイテムと共にプライマリのピン留めされたアイテムが含まれることを意味します。
そのPinterest リンクには、固定されたアイテムのWeb ページのタイトルと、固定されたアイテムTitleを構成するいくつかの単語がありますDescription。これは望ましくない可能性が高く、固定されたアイテムだけがTitle必要です。
Pinterest リンクの HTML ソース ページを表示すると、現在使用されているメタタグが表示されます。それらのほとんどは次のとおりです。
<meta property="fb:app_id" content="274266067164"/>
<meta property="og:site_name" content="Pinterest"/>
<meta property="og:type" content="pinterestapp:pin"/>
<meta property="og:url" content="http://pinterest.com/pin/40250990391375228/"/>
<meta property="og:title" content="FUNNY!!"/>
<meta property="og:description" content="Someone please do this."/>
<meta property="og:image" content="http://media-cache0.pinterest.com/upload/62980094758941134_yXgT124O_c.jpg"/>
<meta property="og:see_also" content="http://9gag.com/gag/2934786" />
<meta property="pinterestapp:pinboard" content="http://pinterest.com/amjo32/funny/"/>
<meta property="pinterestapp:pinner" content="http://pinterest.com/amjo32/"/>
<meta property="pinterestapp:source" content="http://9gag.com/gag/2934786"/>
<meta property="pinterestapp:likes" content="21"/>
<meta property="pinterestapp:repins" content="30"/>
<meta property="pinterestapp:comments" content="0"/>
<meta property="pinterestapp:actions" content="51"/>
<meta name="twitter:card" content="photo">
<meta name="twitter:url" content="http://pinterest.com/pin/40250990391375228/">
<meta name="twitter:site" content="@pinterest">
<meta name="google-site-verification" content="NvDayNupl7R0MDceeuRcs7xUf9yqUsxg6WGjEeRdAnc" />
<meta name="application-name" content="Pinterest" />
<meta name="msapplication-TileColor" content="#ffffff" />
ご覧のとおり、これらには、私たちが求めているデータがmetatags含まれog:titleています。og:imageその後、これらog metatagsがデータ スクレイピング プロセスを実行する直接のターゲットであることがわかります。
確かに、os:image上記のコンテンツ リンクは、 経由のフル イメージ サイズ バージョン用_c.jpgです。サムネイル版は_b.jpg. 基本的に、固定されたアイテムごとに 2 つの一意の画像サイズがあります。
データ スクレイピング プロセスではこれらog property namesの のみが返されるので、それぞれに関連付けられMetatag Object Numbersた返されたものを分析する必要があります。contentMetatag Object Number
上記のmetatagソースを見ると、imageが常に で始まる場所に配置されることは明らかですhttp://media-。これらの13文字はすべてのメタタグの中で一意であるため、一致すると、その URL 全体がimage location.
もちろん、Pinterest が画像に複数の URL テンプレートを使用する必要がある場合は、それに応じて調整する必要があります。
コンテンツ部分og:titleに、このタグが. したがって、すべてのメタタグがテンプレートに従い、しばらくの間変更されないと仮定すると、これを割り当てて. 明確にするために、この番号 7 は、上記のソース HTML 構造ではなく、このスクリプト プロセスに基づいています。image's titleMetatag Object Number 7Pinterest Pinned Item's Image Title.ajax()YQL Results
繰り返しますが、Pinterest が のテンプレートを変更した場合はhead section、調整が必要になる場合があります。
以下は、このオンライン記事で見られるデータ スクレイピング手法/スクリプトに基づいて、私が書いたライブステップ バイ ステップ チュートリアルです。
jsFiddle Pinterest データ スクレイピングのデモ
ヒント:
示されていませんが、見つかった Metatags の合計の数値を自由に使用できます。これは、ページに含まれる内容の事前定義された値と照合して、が変更されたことを示します。たとえば、現在のメタタグ数はitems です。返された値が他のPinterest ピン留めアイテムWeb ページのこの値と等しくない場合は、別の使用法があることがわかります... スクリプトは25 のみを想定し、そのうちの 2 つを直接呼び出すため、スクリプトに影響を与える可能性があります。head section25head sectionMetatag Object Number
おまけ:
ホームページに表示されている現在の Pinterest ピン留めアイテムを取得する方法に興味がある場合は、まずこの jsFiddle DEMO がどのように機能するかを理解してください。次に、テスト用に独自の jsFiddle バージョンを作成し、Pinterest ホームページの URLを使用して、データ スクレイプXPATHの呼び出しで のみを に変更する必要があります。の詳細については、ここをクリックしてください。次に、YQL Playground の Select Divs in Body の XPATH を理解できます。.ajax()relevant div'sbody sectionXPATH basics
たとえば、 には、次の形式で最大合計50 個のピンbody sectionが含まれます。
"href": "/pin/15833036160340477/"
これらhref fragmentsは、URL を再作成する際の出発点として機能します。重要な注意事項:一部のピンは、repins返されるピンが 50 未満であることを意味する場合があります。
ここまで読んだ人は、次のとおりです。
YQL Playground の Select Divs in Bodyの改善されたXPATH を次に示しますが、上記の長い方がどのように機能するかを理解してください。
私の他の Pinterest SO Answers も参照してください。
最良の答えは次のとおりです。Pinterestがどのようにそれを行うかを見てください。
jQueryについては、「最も近い」関数を見てください。
これは、これについて考えるための出発点となる、テストされていない迅速で汚いコードですが、これは非常に自由形式の質問であり、コードのインテリジェンスは、必要に応じて複雑で堅牢または単純にすることができます。
$('img').each(function() {
var title = $(this).prop('alt') || $(this).prop('title') || $(this).closest('h1,h2,h3').text();
// do something with title
});