はじめに
Webサイトや管理画面で、毎回同じボタンを押していると地味に時間を取られます。
そんなときに便利なのが、Tampermonkey を使った自動クリックです。ページを開いた直後にボタンを押したり、条件に合うボタンだけをクリックしたりできます。
この記事では、Tampermonkeyのユーザースクリプトで自動クリックを行う基本の考え方と、初心者向けのサンプルをまとめます。
特定ボタンだけを押す例、遅れて表示されるボタンへの対処、動かないときの確認ポイントまで順番に見ていきます。
- Tampermonkeyで特定ボタンを自動クリックする基本
- 遅れて表示されるボタンへの対処
- 自動クリックが動かないときの確認ポイント
Tampermonkey全体の導入や基本を先に確認したい場合は、Tampermonkeyとは？初心者向け使い方と簡単スクリプト解説から読むと流れをつかみやすいです。
この記事の前提
- Tampermonkeyをブラウザに導入済みである
- まずは自分用の補助や検証用ページで試す
- 重要な送信や決済がある画面では安易に使わない
初心者がつまずきやすいのは、@match、セレクタ、表示タイミングの3点です。この記事でもその順で整理しています。
Tampermonkeyの自動クリックが役立つ場面
Tampermonkeyの自動クリックは、次のような場面で使いやすいです。
- 毎回同じ確認ボタンを押している
- 社内ツールで決まった画面遷移がある
- 通知や案内モーダルを閉じる操作が多い
- 自分専用の操作補助を追加したい
小さな手間を減らす用途にはかなり向いています。
自動クリックの基本
Tampermonkeyで自動クリックする流れはシンプルです。
- 対象ページを
@matchで指定する - querySelector でクリックしたい要素を探す
- 要素が見つかったら click() を実行する
まずは最小構成のサンプルから見てみます。
// ==UserScript==
// @name Auto Click Basic
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Click the first button automatically
// @match https://example.com/*
// @grant none
// ==/UserScript==
window.addEventListener('load', () => {
const button = document.querySelector('button');
if (button) {
button.click();
}
});このコードでは、ページの読み込み完了後に最初の button 要素をクリックします。
特定のボタンだけを自動クリックする
実際には、ページ内のすべてのボタンではなく、特定のボタンだけを押したいことがほとんどです。
その場合は、クラス名や属性、ボタンの文言を手がかりに絞り込みます。
クラス名で指定する例
// ==UserScript==
// @name Auto Click By Class
// @match https://example.com/*
// @grant none
// ==/UserScript==
window.addEventListener('load', () => {
const button = document.querySelector('.submit-button');
if (button) {
button.click();
}
});文言で指定する例
// ==UserScript==
// @name Auto Click By Text
// @match https://example.com/*
// @grant none
// ==/UserScript==
window.addEventListener('load', () => {
const buttons = [...document.querySelectorAll('button')];
const target = buttons.find(
(button) => button.textContent.trim() === '確認'
);
if (target) {
target.click();
}
});この方法なら、「確認」「次へ」「閉じる」など、押したいボタンが明確なときに扱いやすいです。
includes()で部分一致にすると、意図しないボタンまで拾うことがあります。初心者のうちは、まず完全一致で試すほうが安全です。
少し待ってからクリックする例
画面によっては、ページ表示後にボタンが遅れて出てくることがあります。
その場合は、少し待ってからクリックすると動くことがあります。
// ==UserScript==
// @name Auto Click With Delay
// @match https://example.com/*
// @grant none
// ==/UserScript==
window.addEventListener('load', () => {
setTimeout(() => {
const button = document.querySelector('.confirm-button');
if (button) {
button.click();
}
}, 1500);
});動的に表示されるモーダルや案内バナーを閉じたいときに使いやすい書き方です。
自動クリックがうまく動かないとき
Tampermonkeyで自動クリックが動かないときは、次の点を確認すると原因を見つけやすいです。
@matchがずれている
URLが一致していないとスクリプトは実行されません。
- https://example.com/*
- https://www.example.com/*
この2つは別扱いなので注意が必要です。
セレクタが合っていない
querySelector('.submit-button')のような指定が、実際のHTMLと合っていないとボタンを取得できません。
まずは開発者ツールで対象要素のクラス名や属性を確認するのがおすすめです。
表示タイミングが早すぎる
ページは開いていても、ボタン自体はまだ描画されていないことがあります。
その場合は load イベントを使うか、setTimeout で少し待ってから実行します。
それでも動かない場合は、画面のあとから要素が追加されるタイプのページかもしれません。そのときは、要素が出てくるまで監視する書き方を使います。
あとから追加される要素を監視する例
// ==UserScript==
// @name Auto Click With Observer
// @match https://example.com/*
// @grant none
// ==/UserScript==
const observer = new MutationObserver(() => {
const button = document.querySelector('.confirm-button');
if (button) {
button.click();
observer.disconnect();
}
});
observer.observe(document.body, {
childList: true,
subtree: true,
});SPA や、モーダルをあとから描画する画面では、このような監視型のほうが安定しやすいです。
注意点
自動クリックは便利ですが、使い方には注意も必要です。
- 誤クリックで意図しない送信や更新が起きることがある
- 銀行、決済、SNSなど重要ページでは安易に使わない
- サイトの画面変更で急に動かなくなることがある
- 利用規約や社内ルールに反する自動化は避ける
- 広告クリックや計測に関わる用途には使わない
まずはテスト用ページや、自分が内容を理解している画面だけで試すのが安全です。
関連記事
まとめ
Tampermonkeyの自動クリックは、初心者でも始めやすい自動化のひとつです。
- 基本は querySelector と click()だけで試せる
- ボタンの指定方法を工夫すると実用性が上がる
- 動かないときは @match、セレクタ、表示タイミングを確認する
コメント