はじめに
問い合わせ管理画面や社内ツール、投稿フォームなどで、毎回同じ内容を入力していると手間が積み重なります。
そんなときに便利なのが、Tampermonkey を使ったフォーム入力の効率化です。決まった項目を自動で入れたり、定型文をボタンひとつで貼り付けたりできます。
この記事では、Tampermonkeyでフォーム入力を効率化する基本の考え方と、初心者向けのサンプルを紹介します。
- フォームに値を自動で入れる基本
- 複数項目をまとめて入力する例
- select やチェックボックスを扱う例
- 定型文をワンクリックで入れる例
- 動かないときの確認ポイント
Tampermonkey全体の導入や基本を先に確認したい場合は、Tampermonkeyとは？初心者向け使い方と簡単スクリプト解説から読むと流れをつかみやすいです。
この記事の前提
- Tampermonkeyを導入済みである
- まずは自分の検証用ページや補助用途で試す
フォーム入力系は便利ですが、扱うデータの内容に注意が必要です。特に認証情報や機密情報の自動入力は避ける前提で考えます。
Tampermonkeyでフォーム入力を効率化できる場面
Tampermonkeyは、次のような場面で使いやすいです。
- 問い合わせ返信の定型文を入れたい
- 社内フォームの担当者名や部署名を毎回入力している
- テスト用の入力値を何度も入れ直している
- 長い文章の下書きをワンクリックで挿入したい
完全自動で入力するだけでなく、「補助ボタンを置く」形でもかなり便利になります。
フォーム入力の基本
Tampermonkeyでフォーム入力を行う流れはシンプルです。
- @match で対象ページを指定する
- querySelector で入力欄を取得する
- value に値を入れる
- 必要なら input や change イベントを発火する
まずは最小構成のサンプルから見てみます。
// ==UserScript==
// @name Fill Form Basic
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Fill a form field automatically
// @match https://example.com/*
// @grant none
// ==/UserScript==
window.addEventListener('load', () => {
const input = document.querySelector('input[name="company"]');
if (input) {
input.value = 'サンプル株式会社';
input.dispatchEvent(new Event('input', { bubbles: true }));
}
});value を入れるだけで反映される画面もありますが、フレームワークによっては input イベントを発火しないと画面側に認識されないことがあります。
毎回同じようにイベントを発火するなら、補助関数を1つ作っておくと使い回しやすいです。
function updateField(field, value) {
if (!field) {
return;
}
field.value = value;
field.dispatchEvent(new Event('input', { bubbles: true }));
field.dispatchEvent(new Event('change', { bubbles: true }));
}以降のサンプルでも、この考え方を使うとコードを短く保ちやすくなります。
複数項目をまとめて入力する例
複数の項目を一度に埋めたい場合は、オブジェクトで値をまとめると整理しやすいです。
// ==UserScript==
// @name Fill Multiple Fields
// @match https://example.com/*
// @grant none
// ==/UserScript==
window.addEventListener('load', () => {
const values = {
'input[name="name"]': '山田 太郎',
'input[name="department"]': '営業部',
'textarea[name="note"]': '確認用の入力サンプルです。',
};
for (const [selector, value] of Object.entries(values)) {
const field = document.querySelector(selector);
if (field) {
field.value = value;
field.dispatchEvent(new Event('input', { bubbles: true }));
field.dispatchEvent(new Event('change', { bubbles: true }));
}
}
});この形なら、対象項目が増えても管理しやすくなります。
selectやチェックボックスを扱う例
フォームでは、テキスト入力だけでなくプルダウンやチェックボックスを扱うことも多いです。
selectを選択する例
// ==UserScript==
// @name Select Option Example
// @match https://example.com/*
// @grant none
// ==/UserScript==
window.addEventListener('load', () => {
const select = document.querySelector('select[name="status"]');
if (!select) {
return;
}
select.value = 'done';
select.dispatchEvent(new Event('change', { bubbles: true }));
});チェックボックスをONにする例
// ==UserScript==
// @name Checkbox Example
// @match https://example.com/*
// @grant none
// ==/UserScript==
window.addEventListener('load', () => {
const checkbox = document.querySelector('input[name="agree"]');
if (!checkbox) {
return;
}
checkbox.checked = true;
checkbox.dispatchEvent(new Event('change', { bubbles: true }));
});input 系は value、チェックボックスは checked と、更新するプロパティが違う点に注意すると混乱しにくいです。
定型文をボタンで入力する例
自動で即入力するのではなく、自分のタイミングで定型文を入れたいこともあります。
その場合は、ページ上に自分用ボタンを追加する方法が扱いやすいです。
// ==UserScript==
// @name Insert Template Button
// @match https://example.com/*
// @grant none
// ==/UserScript==
(() => {
'use strict';
const button = document.createElement('button');
button.textContent = '定型文を入力';
Object.assign(button.style, {
position: 'fixed',
right: '16px',
bottom: '16px',
zIndex: '9999',
padding: '8px 12px'
});
button.addEventListener('click', () => {
const textarea = document.querySelector('textarea[name="message"]');
if (!textarea) {
return;
}
textarea.value = 'お問い合わせありがとうございます。内容を確認のうえ、順次ご連絡いたします。';
textarea.dispatchEvent(new Event('input', { bubbles: true }));
});
document.body.appendChild(button);
})();この方法なら、誤って毎回自動入力してしまうリスクを減らしつつ、必要なときだけ使えます。
入力内容を条件で切り替える例
ページ内の表示内容に応じて、入力する定型文を変えたいこともあります。
// ==UserScript==
// @name Fill Template By Condition
// @match https://example.com/*
// @grant none
// ==/UserScript==
window.addEventListener('load', () => {
const title = document.querySelector('.ticket-type');
const textarea = document.querySelector('textarea[name="message"]');
if (!title || !textarea) {
return;
}
const text = title.textContent.includes('返品')
? '返品依頼を受け付けました。確認後に改めてご連絡します。'
: 'お問い合わせありがとうございます。内容を確認してご案内します。';
textarea.value = text;
textarea.dispatchEvent(new Event('input', { bubbles: true }));
});単純な自動入力だけでなく、条件分岐を入れると実務向けの補助として使いやすくなります。
安全に運用しやすい書き方
フォーム入力の自動化は便利ですが、いきなり完全自動にすると誤入力や誤送信につながりやすいです。
初心者のうちは、次の順で強くしていくと安全です。
- まずは入力欄を埋めるだけにする
- 次に定型文ボタンで半自動化する
- 問題がないと確認できたら、一部だけ自動入力にする
特に問い合わせ返信や社内申請のような画面では、「送信まで自動化する」より「下書きまで自動化する」ほうが扱いやすい場面が多いです。
フォーム入力がうまく動かないとき
Tampermonkeyでフォーム入力が反映されないときは、次の点を確認すると原因を見つけやすいです。
@matchが合っていない
対象URLが違うとスクリプト自体が動きません。
セレクタがずれている
入力欄の name や id、クラス名が実際のHTMLと一致しているか確認します。
valueを入れただけで画面が反応しない
ReactやVue系の画面では、input や change イベントが必要になることがあります。
テキスト入力欄、select、チェックボックスで必要なイベントが少し違うこともあるので、うまく反映されない場合は input と change の両方を試すと切り分けしやすいです。
要素の表示が遅い
モーダル内の入力欄や、あとから表示されるフォームでは、load 後すぐだと取得できないことがあります。
必要に応じて setTimeout や MutationObserver を使って、要素が表示されるまで待つと安定しやすいです。
注意点
フォーム入力の自動化は便利ですが、次の点には注意が必要です。
- パスワード、トークン、秘密情報をスクリプトに書かない
- 個人情報や顧客情報の自動入力は慎重に扱う
- 誤送信につながる完全自動入力は避ける
- サイトの画面変更で急に動かなくなることがある
- 利用規約や社内ルールに反する自動化は避ける
初心者のうちは、まず「下書き補助」や「定型文ボタン」から始めると安全です。
関連記事
まとめ
Tampermonkeyを使えば、フォーム入力の手間をかなり減らせます。
- 単一項目なら value の代入で始めやすい
- 複数項目はオブジェクトでまとめると管理しやすい
- select やチェックボックスは更新方法が少し違う
- 定型文は自動入力よりボタン式のほうが安全な場面も多い
Tampermonkeyとは？初心者向け使い方と簡単スクリプト解説で基本を押さえたうえで、自動クリックやフォーム入力のような個別テーマを増やしていくと、実務で使えるスクリプトの幅が広がります。
コメント