ブックマークレット配布

ビビディ・バビディ・ブティックの空き再検索(スマホ向けサイト/PC向けサイト両対応)

PC向け/スマホ向けサイト両対応
All-in-One対応

機能概要

ビビディ・バビディ・ブティックの各コースの詳細空き検索時、スマホ向けサイトでは日付、PC向けサイトでは週の移動をせずに現在選択中の日/週を再度空き検索を行えるようにします
これにより面倒が減るだけで無く、不要なページ移動による余計な通信やサーバー負荷も軽減されます
※スマホ向けサイト・PC向けサイト両対応

動作イメージ(スマホ向けサイト)
動作イメージ(PC向けサイト)


※ブックマークレットの登録・利用方法が分からない場合は、基本的な使い方のページを参考にしてください

ブックマークレット文字列

以下の文字列でブックマークレットを登録し、スマホ向け/PC向けサイトのビビディ・バビディ・ブティック検索から検索後、各コースの「空き時間を確認する」の表示結果のページで使用してください (「使い方」参照)

ダミー登録用の空ページのリンク
スマホの場合
iPhone Safari / Chrome および Android Chrome など
ブックマークレット文字列
PCブラウザの場合
以下のリンクボタンを、ブラウザのブックマークバーへドラッグ＆ドロップして登録してください

使い方

スマホ向けサイトの場合
  1. スマホ向けサイトから、通常どおりビビディ・バビディ・ブティックの空き検索を行い、目的のコースの「空き時間を確認する」からコース個別の検索ページを開きます(画像参照)

  2. 検索結果が表示されたらこのブックマークレットを呼び出します
    (特にメッセージは表示されません)

  3. 初回表示後、青いバーの現在日付表示箇所(下の画像参照)をタップすると、再度同じ日の検索・表示を行います

PC向けサイトの場合
  1. スマホ向けサイトの流れと同様に、各コースの「1週間分の空席状況を確認」から1週間の空き表示ページを開きます
  2. 検索結果が表示されたらこのブックマークレットを呼び出します
    (特にメッセージは表示されません)
  3. 初回表示後、下記画像を参照し、コース名をクリックしてください

    4. コースを「すべて」で検索している場合、各コース名ごとの検索が可能です

    PC向けサイトでは、元のページの仕様上、全コースの一斉検索はできません

ソースコード

ブックマークレット化前のソースコードです
ご自身でカスタマイズされたい方はご自由にご利用ください
※ブックマークレット化の方法については記載していません

JavaScriptコード
コピー
javascript: (function () {
  // ビビディ・パビディ・ブティック
  const markingElemId = '__bbq_current_day_reload';
  if (document.getElementById(markingElemId)) {
    alert('すでに実行されています');
    return;
  };

  let sp = true;
  if (!document.querySelector('#loadingReservationDate')) {
    if (!document.querySelector('form#bbqReservationForm')) {
      // 対象外ページ
      alert('このページでは実行できません');
      // return;
    } else {
      sp = false;
    }
  }

  if (sp) {
    // スマホ向けサイト(同日再検索)
    const dateHeader = $('p.reservationOfDateDisp');
    dateHeader.on('click', () => {
      // ローディング中判定
      if ($('li.next.nextDay.disabled:has(button)').length && $('li.prev.prevDay.disabled:has(button)').length) {
        return;
      };
      const loadingReservationDate = $("#loadingReservationDate").val();
      const loadingReservationDate_Date = $.datepicker.parseDate("yymmdd", loadingReservationDate, {});
      if (loadingReservationDate_Date > calendarEndD) {
        calendarEndD = loadingReservationDate_Date;
      }
      const prevReservationDate = loadingReservationDate_Date.add({ day: -1 });
      const newReservationDate = $.datepicker.formatDate("yymmdd", prevReservationDate, {});

      $("#loadingReservationDate").val(newReservationDate);
      Bbq.changeReservationOfDate('next');
      return false;
    });
    dateHeader.css('cursor', 'pointer');

  } else {
    // PC向けサイト 個別/同週再検索
    $('div.boxBBQ04 div.header h2.heading').each((idx, el) => {
      $(el).on('click', (event) => {
        const courceSection = $(el).closest('div.boxBBQ04');
        const prevButton = courceSection.find('div.utility ul.nav li:nth-child(1) a');
        const nextButton = courceSection.find('div.utility ul.nav li:nth-child(2) a');
        const timeTable = courceSection.find('.timeTable .slider .view');
        // ローディング中判定
        if (!prevButton.attr('href') && !nextButton.attr('href') || timeTable.find('div img[alt*="ローディング中"]').length) {
          return;
        };

        // 週の先頭の日付を取得
        const el_weekFirstDate = courceSection.find('div.timeList div.date ul li:nth-child(1) span.display');
        let weekFirstDate = el_weekFirstDate.html();

        // 1週間前の日付に変更
        weekFirstDate = $.datepicker.formatDate("yymmdd", $.datepicker.parseDate("yymmdd", weekFirstDate, {}).addDays(-7), {});
        el_weekFirstDate.html(weekFirstDate);
        // 次の週ボタンイベントを呼び出し
        const commodityCd = courceSection.find('.timeList input.cycle_commodityCD').val();
        // 直接呼び出し
        Bbq.nextGo(commodityCd, nextButton[0]);
      });
      $(el).css('cursor', 'pointer');
    });

    // 読み込み時のローディング表示のためのインターセプト(前週/次週切り替え時含む)
    let loadingHtml = '';
    for (let i = 0; i < 7; i++) {
      loadingHtml += '<div style="position:relative;text-align:center;height:84px;"><img height="47" width="47" alt="ローディング中..." src="/cgp/images/jp/pc/ico/ico_loading_01.gif"></div>';
    };
    const orig_nextGo = Bbq.nextGo;
    Bbq.nextGo = function (commodityCd, button) {
      const timeTable = $(button).closest('div.boxBBQ04').find('.timeTable .slider .view');
      timeTable.html(loadingHtml);
      orig_nextGo.apply(this, arguments);
    };
    const orig_preBack = Bbq.preBack;
    Bbq.preBack = function (commodityCd, button) {
      const timeTable = $(button).closest('div.boxBBQ04').find('.timeTable .slider .view');
      timeTable.html(loadingHtml);
      orig_preBack.apply(this, arguments);
    };
  }

  // マーキングタグ追加
  const markingElem = $('<div>').attr('id', markingElemId).css('display', 'none');
  $('body').append(markingElem);

})();