コンサルロケッツ STATION


  
  

はじめに

こんにちは。ロケッツ4号機です。
  
本日は、みんな大好き「Yahoo!ショッピング」についての記事です。
Yahoo!ショッピング、普段使いしてますか?
楽天ポイントも良いですが「Tポイント」貯めてますか?
  
今回はそんなYahoo!ショッピングですが、こんな時ありませんか??
  
商品ページ上の「特定の要素」のみ抽出〜表示したい!!
  
↑もはや「あるある」ですよね。
ということで、そんな皆様の悩みに答えて今回、JavaScriptを用いて実践してみたいとおもいます。

  
  
  
  

目次

  
  
  
  

[デモ動画]特定の要素をのみ抽出〜表示するとは?

まずはこちらをご覧ください。
  

  
Yahoo!ショッピング、商品ページのURLをコピーし、フォームに貼り付けて「表示」ボタンをクリックします。すると画面が切り替わり「サムネイル」「商品名」「価格」「入力したURL」「参照URLへのリンクボタン」が表示されるようになっています。つまりURLを入れるだけで、それが「なんの商品か」を一目で識別できるという便利なツールなのです!しかし、これを便利と捉えるかどうかはキミのセンス次第だ!
  
以下に、本システムに使用するHTML・JSを記載します(スタイルシートはお好みで調整ください)。
  
また、本システムの使用にはライブラリ「jquery.xdomainajax.js」を使用します。
YQLのサービス終了により元のxdomainajax.jsが使用できないケースがあるため、改訂版のライブラリをこちらよりダウンロードください。
ライブラリ「jquery.xdomainajax.js」の使用に関する不具合に関して当社では責任を負いかねます。予めご了承ください。

  
  
  
  

HTML

  
  
  
  

JavaScript(jQuery) – common.js

  
セール価格時や、ページが存在しない・売り切れ・在庫設定の場合にはエラー画面を表示します。
Yahoo!ショッピング側の仕様が変更となった場合、正常に動作しなくなる可能性もございます。予めご了承ください。

  
  
  
  

おまけ(スクレイピングについて)

今回のシステムのキモはライブラリ「jquery.xdomainajax.js」です。
このシステムでは当ライブラリを使用し「ウェブスクレイピング(ページ情報を収集〜整形)」を行うことで実現しています。
  
フォームに入力したURLの情報をいちど全て取得し、画面上に再現します。
その中から、必要な要素(サムネイルや商品名・価格など)のみを抽出し、その他を非表示にすることで画面上に必要な情報のみを表示しています。
もっと賢い方法がある気もしますが・・・あくまで簡易的なものとしてご了承いただければ・・・
  
この「スクレイピング」という技術は、このように使用するぶんにはおそらく問題はないのですが、
たとえばコピーサイトを簡単に作成することも可能っちゃあ可能なので、制作者のモラルが問われるものでもあります。
  
悪用ダメゼッタイ!マナーを守って便利に使う。すばらしいインターネッツですね。

  
  
  
  

さいごに

いかがでしたか?
スクレイピングを活用したYahoo!ショッピング、商品ページの要素抽出〜表示について書きました。
  
実は楽天でも同じようなことが可能なのですが、それはまた別の機会に・・・。
それでは!良きインターネッツライフを!

  
  
  
  

コンサルロケッツのクライアント一部実績

  • 小樽洋菓子舗ルタオ
  • 三輪山本
  • 榮太樓商事
  • エーモン工業社
  • シーガル
  • Puravida-プラヴィダ
  • 三恵
  • サリープライズ-SALLY PRIZE-
  • 神戸ぐりる工房
  • アンティークそっくり市場
  • トランスレーション
  • スイーツファクトリー スリーズ
  • 男のおかず屋
  • ウェップス
  • おはりばこ
  • CRASH
  • dot store
ページの上へギュイーンと!