👻

4. 万博自動化検証 ― 万博サイトでの自動化概要

に公開
AI
JavaScript
自動化
万博
idea

4. 万博自動化検証 ― 万博サイトでの自動化概要

📌 前回の記事：3. 万博自動化検証 ― Chrome + Tampermonkey での実装方法

今回の概要

ここからは、実際に Expo 2025 関連の予約ページを対象に「どのような仕組みを組み立てたか」を整理します。
※コードは省略し、動作のイメージと実装の考え方をまとめています。

ボタン監視

まずは 予約ボタンを監視しました。
DOM の状態（disabled 属性や aria-disabled など）が切り替わるタイミングを検出し、有効になった瞬間に操作可能と判断できるようにしました。

サンプルコード

const selector = '#reserveBtn';
const observer = new MutationObserver(() => {
  const btn = document.querySelector(selector);
  if (btn && !btn.disabled) {
    console.log("✅ 予約ボタンが有効化されました");
    observer.disconnect();
  }
});
observer.observe(document.body, { childList: true, subtree: true, attributes: true });

クリック制御

クリック処理は「一度きり」に制御しています。
クリック済みのボタンに再度アクセスすると二重送信のリスクがあるため、フラグ管理によって複数回押さないように工夫しました。

サンプルコード

let clicked = false;
function clickOnce(btn) {
  if (!clicked && btn && !btn.disabled) {
    btn.click();
    clicked = true;
    console.log("✅ ボタンクリック実行（1回のみ）");
  }
}

時間帯指定

予約には時間枠があるため、対象時間帯のカラムを抽出して自動的に選択する仕組みを構築しました。
これにより「希望の範囲だけを自動で狙う」ことが可能になりました。

サンプルコード

const startTime = "14:00";
const endTime   = "15:00";

document.querySelectorAll('.time-slot').forEach(slot => {
  const timeText = slot.textContent.trim();
  if (timeText >= startTime && timeText <= endTime && !slot.disabled) {
    console.log("✅ 対象時間帯を選択:", timeText);
    slot.click();
  }
});

ログ保存

動作履歴や成功回数は localStorage に保存しました。
これにより、ブラウザをリロードしても簡単な記録が残り、実際に何回動作したかを確認できました。

サンプルコード

let successCount = parseInt(localStorage.getItem('successCount') || "0", 10);
successCount++;
localStorage.setItem('successCount', successCount);
console.log("✅ 成功回数を保存:", successCount);

UI 追加

さらに、ページ下部に簡易的な UI パネルを追加しました。

  • 残り時間カウントダウン
  • ボタンクリックの履歴
  • 現在の動作ステータス

といった情報を表示することで、実際にスクリプトがどう動いているかを可視化しました。

サンプルコード

const panel = document.createElement('div');
panel.style.position = 'fixed';
panel.style.bottom = '10px';
panel.style.left = '10px';
panel.style.background = 'rgba(0,0,0,0.7)';
panel.style.color = '#fff';
panel.style.padding = '8px';
panel.innerText = "⏱ 状態監視中…";
document.body.appendChild(panel);

5. 学びになったこと

MutationObserver の有効性と注意点

DOM の状態変化を確実に取るには MutationObserver が非常に有効でした。
要素が追加・削除されたり属性が変化したときにイベントを拾えるため、「監視の精度」を高められます。

ただし、MutationObserver はあくまで DOM 監視です。
裏を返せば「DOM に変化がなければ発火しない」ため、次のような問題もありました。

  • ページの読み込みに時間がかかっている場合
  • サイト側が静的に要素を出していて属性が変化しない場合

このようなケースでは 監視がすぐにストップしてしまい、意図した検出ができないことがあります。
そのため、setInterval による定期チェックと併用することで、安定した監視が可能になりました。

サイト構造や属性の確認

disabled / aria-disabled / tabindex などの属性を確認することが重要だと実感しました。
一見「押せそう」に見えても、内部的には無効化されているケースがあるため、属性をきちんとチェックすることが安定した動作につながります。

タイミング依存の操作

「ページを開いた直後に押す」ようなタイミング依存の処理は失敗しがちです。
そのため、要素が出現した瞬間に初めて動作するように設計するのが安定的でした。

これにより「読み込みが遅い場合」や「要素が動的に差し込まれる場合」にも対応できます。

免責事項

本記事は Web 自動化の学習記録をまとめたものであり、Expo 2025 チケット予約システムの不正利用を助長する意図は一切ありません。
実際にスクリプトを利用する場合は、万博公式の規定や利用規約に従うことが必須です。
本記事を参考にしたことによって生じたいかなる不利益・損害についても、筆者は責任を負いません。

Discussion