Yukichi_san
@Yukichi_san (kenya kano)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

ほっともっとメニューのリンク先の特定の記述を取得してメニューに反映させたい

解決したいこと

ほっともっとメニューのページをScriptAutoRunnerで600円以下の商品をフィルタリングしてメニューを表示するスクリプトを作ったのですが、更に商品のリンク先にある記述を持ってきてそれも表示させるというスクリプトを作りたいのですが、URLの取得や戻ってきてから目標のメニューに取得したテキストを記述する方法が分からないです。(あまりトライ・アンド・エラーを繰り返すとほっともっとへのサイト攻撃になってしまいます・・・)

使用言語はjavascript(jQuery)です。

ご教授の程よろしくお願い申し上げます。

現時点で600円以下の商品を表示するスクリプトを記述します。

$(function(){
let i, elm
i = 0
$('.c-gnav_inr').css('cssText', 'display: none !important');//メニュー非表示
$('.c-gheader
_logo').css('cssText', 'display: none !important');//ロゴ非表示

//アイテムの金額を取得
$(".c-menu__price").each(function(){
let price = $(this).text();
price = price.split(",").join("");

//「もうすぐ終了」のテキストがあれば取得
let syuryou = $(this).closest(".c-menu__item").find('.c-label--end').text();

//600円より高いものと「もうすぐ終了」のものは非表示にする
if(syuryou == 'もうすぐ終了' || Number(price) > 600){

  $(this).closest(".c-menu__item").css('cssText', 'display: none !important');
  console.log(syuryou);
  console.log(price);
}else{
  //アイテムに番号をつける
  i = i + 1
  $( this ).closest(".c-menu__item").prepend($("<h3>" + "(" + i + ")" + "</h3>"));//ナンバリング
  $('h3').css({fontSize:'20pt', color:'red', marginTop:'40px'});//番号のcss

};

});
});
ほっともっとメニューページ
https://www.hottomotto.com/menu_list/index/1

screencapture-hottomotto-menu-list-view-1-4199-2021-07-02-11_24_22.png

作ったスクリプトの表示結果画面
screencapture-hottomotto-menu-list-index-1-2021-07-02-11_28_16.png

0

2Answer

書くとすればAjax(jQueryだと$.ajax$.getなど)を使うことになります。
結論だけならこんな感じになると思います。

if (location.pathname.startsWith('/menu_list/index/')) {
  let reindex = 0;
  $('.c-menu__item').each(function () {
    const $this = $(this);
    const $price = $this.find('.c-menu__price');
    const price = parseInt($price.text().replace(/,/g, ''));
    if (price > 600) {
      $this.remove();
    } else {
      const $label = $this.find('.c-label');
      if ($label.text() === 'もうすぐ終了') {
        $this.remove();
      } else {
        $this.prepend(`<h3 style="color:red;font-size:20pt;margin-top:40px">(${++reindex})</h3>`);
        const href = $this.children('a').attr('href'); // URLの取得
        // Ajax
        $.get(href).done(function (data) {
          const $note = $('.c-menu__title', data);
          if ($note.text()) {
            const $txt = $this.children('.c-menu__txt');
            if ($txt.length > 0) {
              $txt.append(`<p class="c-annotaion">${$note.html()}</p>`);
            } else {
              $this.append(`<div class="c-menu__txt"><p class="c-annotaion">${$note.html()}</p></div>`);
            }
          }
        });
      }
    }
  });
}

ほっともっと側にAPIがあれば話は別ですが、結局は対象(600円以下・「もうすぐ終了」でない41個)のすべてのメニューのページを開いて情報を抽出している=サーバー側へ短時間に通常の41倍の負荷をかけていることになるので、おすすめしません。
おすすめしないので詳しい説明はしませんが、Ajax(もしくはXHR)について調べてみると理解が深まると思います。

0Like

ご回答ありがとうございます。

ほっともっとのサイトに負荷がかかるのでは無いかというのは、スクレイピングの技法書でも別件の実例が挙げられていたのを知っていたので、多分その様な事になるかもしれないとは感じていました。

もう少し、こちら側で話し合って方針を決めたいと思います。

今回は、本当にありがとうございました。

0Like

Your answer might help someone💌