🐙

毎月の作業報告を少しだけ楽にした話⏱️

に公開
Chrome
JavaScript
業務効率化
tech

毎月やってくる、あの作業

月末になると必ずやってくる作業報告書の入力。開始時間、終了時間、休憩時間を1日ずつポチポチ入力していく、あのフォームです。

自分の場合、毎日ほぼ同じ勤務時間なので、20日分くらい同じ値をひたすら入力することになります。正直、これがかなり面倒でした。

最初はClaude等のAIブラウザ拡張に入力させることを考えたのですが、ページ上に氏名などの個人情報があるので、それをAIに読み取らせるのはちょっと気が引けます。定型入力にAIを持ち出すのもオーバーです。

色々考えた結果、Chrome DevToolsのSnippets機能を使うのが一番手軽で安全でした。データが外部に送信されることもなく、ブラウザだけで完結します。

Snippetsってなに？

ChromeのDevTools（F12で開くやつ）にはSnippetsという機能があります。JavaScriptのコードを保存しておいて、好きなタイミングで実行できます。

ブックマークレットと似ていますが、最近はCSP（Content Security Policy）でjavascript:スキームをブロックしているサイトが多く、ブックマークレットが動かないケースがあります。Snippetsならその制約を受けません。

やりたいこと

勤怠管理システムの作業報告フォームに対して、以下を自動入力します。

  • 平日（月〜金）のみ入力する
  • 土日はスキップする
  • 祝日もスキップする
  • 開始時間・終了時間・休憩時間にそれぞれ固定値を入れる

コード

先に完成形を載せます。

// ===== ここをカスタマイズ =====
var START = '10:00';  // 開始時間
var END   = '19:00';  // 終了時間
var BREAK = '01:00';  // 休憩時間

// 2026年 日本の祝日（YYYYMMDD形式）
var holidays = [
  '20260101', // 元日
  '20260112', // 成人の日
  '20260211', // 建国記念の日
  '20260223', // 天皇誕生日
  '20260320', // 春分の日
  '20260429', // 昭和の日
  '20260503', // 憲法記念日
  '20260504', // みどりの日
  '20260505', // こどもの日
  '20260506', // 振替休日
  '20260720', // 海の日
  '20260811', // 山の日
  '20260921', // 敬老の日
  '20260923', // 秋分の日
  '20261012', // スポーツの日
  '20261103', // 文化の日
  '20261123'  // 勤労感謝の日
];
// ===========================

function setField(inp, val) {
  inp.focus();
  inp.value = val;
  inp.dispatchEvent(new Event('input', { bubbles: true }));
  inp.dispatchEvent(new Event('change', { bubbles: true }));
  inp.dispatchEvent(new Event('keyup', { bubbles: true }));
  inp.blur();
  if (window.jQuery) {
    jQuery(inp).trigger('focus').trigger('keyup').trigger('change').trigger('blur');
  }
}

document.querySelectorAll('input[ref="start_time"]').forEach(function(inp) {
  var ds = inp.getAttribute('datetime');
  var y = +ds.substring(0, 4);
  var m = +ds.substring(4, 6) - 1;
  var d = +ds.substring(6, 8);
  var day = new Date(y, m, d).getDay();

  // 土日スキップ
  if (day === 0 || day === 6) return;
  // 祝日スキップ
  if (holidays.indexOf(ds) >= 0) return;

  setField(inp, START);

  var et = document.querySelector('input[ref="end_time"][datetime="' + ds + '"]');
  if (et) setField(et, END);

  var rt = document.querySelector('input[ref="relax_time"][datetime="' + ds + '"]');
  if (rt) setField(rt, BREAK);
});

セットアップ手順

1. Snippetsを開く

Chromeで作業報告のページを開いた状態で、F12キーを押してDevToolsを開きます。

上部のタブから Sources を選び、左側のパネルで Snippets をクリックします。もし表示されていなければ >> をクリックすると出てきます。

2. コードを保存する

「+ New snippet」をクリックして、名前を「作業報告入力」などにします。

右側のエディタに上のコードを貼り付けて、Ctrl + S（MacはCmd + S）で保存します。

3. 実行する

保存したら、Ctrl + Shift + P（MacはCmd + Shift + P）でコマンドパレットを開き、「作業報告」と入力します。候補に出てくるSnippetを選んでEnterを押せば実行されます。

平日の行に時間が入力され、作業時間も自動計算されるはずです。

自分の環境に合わせるには

このコードでは ref="start_time" や datetime といった属性でinput要素を探していますが、これは自分が使っているシステム固有のものです。他のシステムでは属性が全く違うはずなので、まず自分のフォームのHTML構造を確認するところから始めてください。

セレクタの調べ方

  1. フォームの入力欄を右クリック →「検証」を選ぶ
  2. Elementsパネルでその <input> 要素の属性（id、name、class など）を確認する
  3. コード内の querySelector のセレクタを自分のフォームに合うように変更する

セレクタの書き換え例

フォームによって入力欄の指定方法は異なります。よくあるパターンを挙げておきます。

// id属性で指定する場合
document.querySelector('#start_time_20260201')

// name属性で指定する場合
document.querySelector('input[name="start_time_1"]')

// class属性で指定する場合
document.querySelectorAll('.start-time-input')

setField 関数について

単に input.value = '10:00' と代入するだけだと、フォーム側のJavaScriptが値の変更を検知してくれないことがあります。手入力のときはブラウザがイベント（input、change、keyup、blurなど）を自動的に発火していますが、JavaScriptからの代入ではそれが起きません。

setField 関数では focus → 値セット → 各種イベント発火 → blur という流れを再現しています。jQueryを使っているサイトでは、ネイティブイベントだけでは足りないこともあるので、jQueryのtriggerも呼んでいます。

もし実行しても作業時間が自動計算されない場合は、そのサイトが別のイベントを使っている可能性があります。DevToolsのElementsパネルでEvent Listenersを確認して、どのイベントでどの処理が走っているかを調べてみてください。

祝日リストの更新

年が変わったら、コード冒頭の holidays 配列を更新します。内閣府のサイトに翌年の祝日一覧が掲載されるので、そこから日付を拾ってくればOKです。

ブックマークレットじゃだめなの？

最初はブックマークレット（ブックマークにJavaScriptを保存して実行する方法）を試しました。ですが、最近のWebアプリはCSPで javascript: URLの実行をブロックしていることが多く、自分の環境では動きませんでした。

Snippetsはブラウザの開発者ツールから実行するので、CSPの制約を受けません。動作が安定しているという点でもSnippetsのほうが良いと思います。

AIに入力させない理由

Claude等のAIブラウザ拡張を使えば「このフォームを埋めて」と指示するだけで済みそうですが、ページの内容がAI提供元のサーバーに送信されます。作業報告のページには氏名などの個人情報が載っていることが多いので、それをAIに渡すのは避けたいところです。

Snippetsならすべてローカルで完結します。外部への通信は一切発生しません。定型的な入力にはこのほうが安全で確実です。

まとめ

  • 毎月の定型入力はSnippetsで自動化できます
  • 外部送信なし、ブラウザだけで完結するので安全です
  • 一度保存すれば毎月使い回せます
  • 祝日リストだけ年1回更新すればOKです

地味ですが、毎月の小さなストレスがなくなるのは結構大きいです。

Discussion